Merge branch 'code-83' into release/0.9.0

packages/designer/src/builtin-simulator/host.ts

@@ -40,6 +40,7 @@ export interface BuiltinSimulatorProps {
   device?: 'mobile' | 'iphone' | string;
   deviceClassName?: string;
   environment?: Asset;
+  extraEnvironment?: Asset;
   library?: LibraryItem[];
   simulatorUrl?: Asset;
   theme?: Asset;
@@ -187,6 +188,8 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       // required & use once
       assetBundle(this.get('environment') || defaultEnvironment, AssetLevel.Environment),
       // required & use once
+      assetBundle(this.get('extraEnvironment'), AssetLevel.Environment),
+      // required & use once
       assetBundle(libraryAsset, AssetLevel.Library),
       // required & TODO: think of update
       assetBundle(this.theme, AssetLevel.Theme),

packages/designer/src/designer/dragon.ts

@@ -152,6 +152,9 @@ function getSourceSensor(dragObject: DragObject): ISimulatorHost | null {
   return dragObject.nodes[0]?.document.simulator || null;
 }
 
+/**
+ * make a handler that listen all sensors:document, avoid frame lost
+ */
 function makeEventsHandler(
   boostEvent: MouseEvent | DragEvent,
   sensors: ISimulatorHost[],
@@ -178,6 +181,9 @@ function isDragEvent(e: any): e is DragEvent {
   return e?.type?.substr(0, 4) === 'drag';
 }
 
+/**
+ * Drag-on 拖拽引擎
+ */
 export class Dragon {
   private sensors: ISensor[] = [];
 
@@ -195,12 +201,15 @@ export class Dragon {
   }
 
   private emitter = new EventEmitter();
-  // private emptyImage: HTMLImageElement = new Image();
 
   constructor(readonly designer: Designer) {
-    // this.emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
   }
 
+  /**
+   * Quick listen a shell(container element) drag behavior
+   * @param shell container element
+   * @param boost boost got a drag object
+   */
   from(shell: Element, boost: (e: MouseEvent) => DragObject | null) {
     const mousedown = (e: MouseEvent) => {
       // ESC or RightClick
@@ -222,6 +231,12 @@ export class Dragon {
     };
   }
 
+  /**
+   * boost your dragObject for dragging(flying) 发射拖拽对象
+   *
+   * @param dragObject 拖拽对象
+   * @param boostEvent 拖拽初始时事件
+   */
   boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent) {
     const designer = this.designer;
     const masterSensors = this.getMasterSensors();
@@ -313,16 +328,20 @@ export class Dragon {
       this.emitter.emit('dragstart', locateEvent);
     };
 
+    // route: drag-move
     const move = (e: MouseEvent | DragEvent) => {
       if (isBoostFromDragAPI) {
         e.preventDefault();
       }
       if (this._dragging) {
+        // process dragging
         drag(e);
         return;
       }
 
+      // first move check is shaken
       if (isShaken(boostEvent, e)) {
+        // is shaken dragstart
         dragstart();
         drag(e);
       }
@@ -335,6 +354,7 @@ export class Dragon {
       didDrop = true;
     };
 
+    // end-tail drag process
     const over = (e?: any) => {
       if (e && isDragEvent(e)) {
         e.preventDefault();
@@ -381,6 +401,7 @@ export class Dragon {
       }
     };
 
+    // create drag locate event
     const createLocateEvent = (e: MouseEvent | DragEvent): LocateEvent => {
       const evt: any = {
         type: 'LocateEvent',
@@ -391,12 +412,14 @@ export class Dragon {
 
       const sourceDocument = e.view?.document;
 
+      // event from current document
       if (!sourceDocument || sourceDocument === document) {
         evt.globalX = e.clientX;
         evt.globalY = e.clientY;
-      } else {
+      } else { // event from simulator sandbox
         let srcSim: ISimulatorHost | undefined;
         const lastSim = lastSensor && isSimulatorHost(lastSensor) ? lastSensor : null;
+        // check source simulator
         if (lastSim && lastSim.contentDocument === sourceDocument) {
           srcSim = lastSim;
         } else {
@@ -406,6 +429,7 @@ export class Dragon {
           }
         }
         if (srcSim) {
+          // transform point by simulator
           const g = srcSim.viewport.toGlobalPoint(e);
           evt.globalX = g.clientX;
           evt.globalY = g.clientY;
@@ -454,9 +478,7 @@ export class Dragon {
       const { dataTransfer } = boostEvent;
 
       if (dataTransfer) {
-        // dataTransfer.setDragImage(this.emptyImage, 0, 0);
         dataTransfer.effectAllowed = 'all';
-        // dataTransfer.dropEffect = newBie || forceCopyState ? 'copy' : 'move';
 
         try {
           dataTransfer.setData('application/json', '{}');

packages/editor-preset-vision/src/bundle/bundle.ts

@@ -1,6 +1,6 @@
 import lg from '@ali/vu-logger';
 import { ComponentClass, ComponentType } from 'react';
-import Prototype from './prototype';
+import Prototype, { isPrototype } from './prototype';
 import { designer } from '../editor';
 
 function basename(name: string) {
@@ -141,12 +141,12 @@ export default class Bundle {
 
   private recursivelyRegisterPrototypes(list: any[], cp: ComponentProtoBundle) {
     const propList: ComponentProtoBundle[] = list;
-    propList.forEach((proto: ComponentProtoBundle, index: number) => {
+    propList.forEach((proto: any, index: number) => {
       if (Array.isArray(proto)) {
         this.recursivelyRegisterPrototypes(proto, cp);
         return;
       }
-      if (proto instanceof Prototype) {
+      if (isPrototype(proto)) {
         const componentName = proto.getComponentName()!;
         if (!proto.getView() && this.viewsMap[componentName]) {
           proto.setView(this.viewsMap[componentName]);

packages/editor-preset-vision/src/bundle/prototype.ts

@@ -217,7 +217,7 @@ class Prototype {
   }
 
   readonly isPrototype = true;
-  private meta: ComponentMeta;
+  readonly meta: ComponentMeta;
   readonly options: OldPrototypeConfig | ComponentMetadata;
 
   constructor(input: OldPrototypeConfig | ComponentMetadata | ComponentMeta) {

packages/editor-preset-vision/src/bundle/trunk.ts

@@ -35,7 +35,7 @@ export class Trunk {
       bundle = this.trunk[i];
       prototype = bundle.get(name);
       if (prototype) {
-        return prototype;
+        return (prototype.meta as any).prototype;
       }
     }
     return this.metaBundle.getFromMeta(name);

packages/editor-preset-vision/src/editor.ts

@@ -125,7 +125,7 @@ function compatiableReducer(props: any) {
   });
   return newProps;
 }
-// Dirty fix: will remove this reducer
+// FIXME: Dirty fix, will remove this reducer
 designer.addPropsReducer(compatiableReducer, TransformStage.Save);
 
 // 设计器组件样式处理

packages/plugin-designer/src/index.tsx

@@ -10,6 +10,7 @@ export interface PluginProps {
 interface DesignerPluginState {
   componentMetadatas?: any[] | null;
   library?: any[] | null;
+  extraEnvironment?: any[] | null;
 }
 
 export default class DesignerPlugin extends PureComponent<PluginProps, DesignerPluginState> {
@@ -18,6 +19,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
   state: DesignerPluginState = {
     componentMetadatas: null,
     library: null,
+    extraEnvironment: null,
   };
 
   private _mounted = true;
@@ -33,10 +35,11 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
     if (!this._mounted) {
       return;
     }
-    const { components, packages } = assets;
+    const { components, packages, extraEnvironment } = assets;
     const state = {
       componentMetadatas: components || [],
       library: packages || [],
+      extraEnvironment,
     };
     this.setState(state);
   };
@@ -56,7 +59,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
 
   render(): React.ReactNode {
     const { editor } = this.props;
-    const { componentMetadatas, library } = this.state;
+    const { componentMetadatas, library, extraEnvironment } = this.state;
 
     if (!library || !componentMetadatas) {
       // TODO: use a Loading
@@ -72,6 +75,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
         componentMetadatas={componentMetadatas}
         simulatorProps={{
           library,
+          extraEnvironment,
         }}
       />
     );