@gedit/editor-2d 0.2.46 → 0.2.48

package/src/browser/playground/playground-context.ts

@@ -5,7 +5,7 @@ import { AppConfigService } from '@gedit/app-config';
 import { debounce, Emitter, URI } from '@gedit/utils';
 import { Editor2dEntity } from './entities/editor2d-entity';
 import type { SelectionEntityManager } from './selection-entity-manager';
-import { Playground } from '@gedit/playground';
+import { PathPointSelectionService, PathSelectMode, Playground } from '@gedit/playground';
 import { Editor2dDocument } from '../model/editor2d-document';
 import { Editor2dSelection } from '../model/editor2d-selection';
 import { Editor2dModelOptions, Editor2dNode } from '../model/editor2d';
@@ -16,6 +16,7 @@ import SelectionType = TreeSelection.SelectionType;
 import { FormService } from '@gedit/ui';
 import { OpenerService } from '@gedit/application-common/lib/browser';
 import { WorkspaceService } from '@gedit/workspace-2d';
+import { HistoryService } from '@gedit/history';
 
 export const Editor2dPlayGround = Symbol('Editor2dPlayGround');
 
@@ -41,6 +42,8 @@ export class PlaygroundContext2d {
     @inject(OpenerService) readonly openerService: OpenerService,
     @inject(WorkspaceService)
     protected readonly workspaceService: WorkspaceService,
+    @inject(PathPointSelectionService) readonly pathPointSelection: PathPointSelectionService,
+    @inject(HistoryService) readonly historyService: HistoryService
   ) {
     this.rootURI = new URI(this.workspaceService.currentRoot!.uri);
     this.document.toDispose.push(this.onCanvasDataChangedEmitter);
@@ -52,6 +55,9 @@ export class PlaygroundContext2d {
    * 刷新 tree selection
    */
   syncToSelectionTree = debounce((entities: SelectionEntityManager) => {
+    if (this.pathPointSelection.selectMode !== PathSelectMode.ADD_PATH) {
+      return;
+    }
     const selectedEntities: Editor2dEntity[] = entities.getSelectedEntities();
     const selectedNodes = this.selection.selectedNodes;
     // 清空数据

package/src/browser/playground/playground-contribution.ts

@@ -1,6 +1,7 @@
 import { inject, injectable } from 'inversify';
 import {
   EditorStateConfigEntity,
+  PathPointSelectionService,
   Playground,
   PlaygroundConfig,
   PlaygroundContribution,
@@ -17,7 +18,7 @@ import { HistoryService } from '@gedit/history';
 import { Editor2dModelOptions, Editor2dNode } from '../model/editor2d';
 import { ContextMenuRenderer } from '@gedit/layout';
 import { CommandService } from '@gedit/command';
-import { CommonCommands } from '@gedit/application-common/lib/browser';
+import { CommonCommands, FrontendApplicationStateService } from '@gedit/application-common/lib/browser';
 import { ExtendEditLayer, EXTEND_EDIT_STATE } from './extend-edit-layer';
 import { Editor2dSelection } from '../model/editor2d-selection';
 
@@ -30,6 +31,8 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
   @inject(CommandService) readonly commandService: CommandService;
   @inject(ContextMenuRenderer) readonly menuRender: ContextMenuRenderer;
   @inject(Editor2dSelection) readonly editor2dSelection: Editor2dSelection;
+  @inject(PathPointSelectionService) readonly pathPointSelectionService: PathPointSelectionService;
+  @inject(FrontendApplicationStateService) readonly stateService: FrontendApplicationStateService;
   registerPlayground(registry: PlaygroundRegistry): void {
     registry.registerLayer(CanvasLayer);
     registry.registerLayer(PathEditLayer);
@@ -96,27 +99,6 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
           });
         }
       });
-      /* stateEntity.registerState({
-        id: 'ADD_PATH',
-        icon: 'gedit-toolbar-pen',
-        title: '失量',
-        shortcut: 'P',
-        // cursor: 'url(https://gw.alipayobjects.com/zos/bmw-prod/8dc2fcc4-279b-408c-886c-60fdba4c1f1e.svg), copy',
-        // shortcutAutoEsc: true,
-        disableSelector: true,
-        priority: 0,
-        order: 1,
-        cancelMode: 'esc',
-        handle: (a, b) => {
-          const currentSelectedNodes = this.editor2dSelection.selectedNodes;
-          console.log(currentSelectedNodes);
-          if (currentSelectedNodes.length !== 1 || currentSelectedNodes[0].displayType !== 'path') {
-            // 路径选中时先取消所有 selection;
-            this.editor2dSelection.clearSelection();
-          }
-
-        }
-      }); */
     }
     // 模板编辑器模式
     if (this.modelOpts.isTemplate) {
@@ -129,8 +111,19 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
         percentageInfoVisible: false,
       });
     }
-    playground.getConfigEntity<SnaplineConfigEntity>(SnaplineConfigEntity).updateConfig({
-      originlineVisible: isComponent, // 是否隐藏原点线条，如果是组件模式则显示
+    const snaplineEntity = playground.getConfigEntity<SnaplineConfigEntity>(SnaplineConfigEntity);
+    snaplineEntity.updateConfig({
+      lines: [],
+      originlineVisible: this.appConfig.configData?.engine === 'dom' ? false : isComponent, // 是否隐藏原点线条，如果是组件模式则显示
+    });
+    this.stateService.onStateChanged(state => {
+      if (state === 'initialized_layout') {
+        // 部局完成后再是否显示中心线，pixi 组件用
+        snaplineEntity.updateConfig({
+          lines: [],
+          originlineVisible: this.appConfig.configData?.engine === 'dom' ? false : isComponent,
+        });
+      }
     });
     playground.toDispose.push(
       // TODO 放在这里处理会增加复杂度

package/src/browser/playground/selection-entity-manager.tsx

@@ -14,6 +14,7 @@ import type { PlaygroundContext2d } from './playground-context';
 import { Rectangle } from '@gedit/math';
 import { GameObject } from '@gedit/render-engine';
 import { SelectorExtendRender } from './selector-extend-renderer';
+import { followKeyType } from '@gedit/render-engine-pixi';
 
 const numberToFixed4 = (data: {[key: string]: any}) => {
   const d: any = {};
@@ -46,10 +47,6 @@ export class SelectionEntityManager {
     const editorStateConfigEntity = entityManager.getEntity<EditorStateConfigEntity>(EditorStateConfigEntity);
     const selectionConfigEntity = entityManager.getEntity<SelectorConfigEntity>(SelectorConfigEntity);
     selectionConfigEntity?.customSelectorEntityRenderer(props => {
-      if (props.isMoving) {
-        // 如果是托拽状态，则清除跟随；
-        this.getDocument()?.clearSelectNodeFollow();
-      }
 
       const showSceneRangeRuler = editorStateConfigEntity?.getCurrentState?.() === EditorState.SHOW_SCENE_RANGE_RULER;
       const newProps: SelectorEntityRendererProps = {
@@ -62,7 +59,14 @@ export class SelectionEntityManager {
         ? this.context.renderEngine.getGameObjectIDERegister(entity.gameObject.scene.config.engine, entity.node.displayType)
         : undefined;
       const deco = register?.decoration;
-      newProps.extendRenderer = () => <SelectorExtendRender {...props} register={register} context={this.context} />;
+      newProps.extendRenderer = () => (
+        <SelectorExtendRender
+          {...props}
+          customExtendSchema={selectionConfigEntity?.extendSchema}
+          register={register}
+          context={this.context}
+        />
+      );
       /* if (this.context.options.extendEntityRenderer) {
         newProps.extendRenderer = () => this.context.options.extendEntityRenderer!({ ...props, context: this.context });
       } */
@@ -116,6 +120,12 @@ export class SelectionEntityManager {
     entity.nodeId = node.id;
     entity.context = this.context;
     entity.transform.sizeToScale = !!deco.sizeToScale;
+    if (deco.useComponentSceneSize) {
+      entity.transform.componentSceneSize = {
+        width: gameObject.data.scene?.width || 400,
+        height: gameObject.data.scene?.height || 400,
+      };
+    }
 
     this.setTransformMask(entity, nodePath, node);
     // 切换选择框的类型，如圆形、矩形, 默认矩形
@@ -154,7 +164,31 @@ export class SelectionEntityManager {
         return;
       }
       const newTransform = numberToFixed4(entity.transform.data);
-      document.updateNode(entity.nodeId, newTransform, true);
+      const node = document.getNodeById(entity.nodeId);
+      if (!node) {
+        return;
+      }
+      // 跟随后不能动
+      if (node.follow) {
+        const { open, target, type } = node.follow;
+        if (open && target && node.position) {
+          const p = document.getFollowPosition(node);
+          p.forEach(c => {
+            newTransform.position[c.type] = c.value;
+            entity.transform.position[c.type] = c.value;
+          });
+          const selectionNodes = document.getSelectedNodes();
+          if (selectionNodes.some(c => c.id === node.id)) {
+            document.message.warn(
+              `元素开启了跟随，${type
+                ?.map(c => followKeyType[c])
+                .join(',')} 被锁定`,
+              {timeout: 2000 }
+            );
+          }
+        }
+      }
+      document.updateNode(node, newTransform, true);
     });
 
     // ableManager是全局的，所以每个节点销毁后得注销时间
@@ -181,7 +215,7 @@ export class SelectionEntityManager {
       entity.dispose();
     }
   }
-  updateEntity(nodePath: string, gameObject: GameObject): void {
+  updateEntity(nodePath: string, gameObject: GameObject, scale?: number): void {
     const register = this.context.renderEngine.getGameObjectIDERegister(gameObject.scene.config.engine, gameObject.type);
     const deco = register.decoration;
     const entity = this.nodeEntitiesCache.get(nodePath);
@@ -197,7 +231,13 @@ export class SelectionEntityManager {
       }
     }
     entity.transform.isContainer = !!deco.isContainer;
-    entity.update(register.getSelectionData(gameObject));
+    if (deco.useComponentSceneSize) {
+      entity.transform.componentSceneSize = {
+        width: gameObject.data.scene?.width || 400,
+        height: gameObject.data.scene?.height || 400,
+      };
+    }
+    entity.update(register.getSelectionData(gameObject, scale));
     entity.ignoreTransformChanged = false;
     const sizeVisible = !this.isHidden(entity.node); // && (entity.transform.size.width > 0 && entity.transform.size.height > 0 || !!deco.isContainer);
     const opacityZero = this.isOpacityZero(node);

package/src/browser/playground/selector-extend-renderer.tsx

@@ -4,8 +4,11 @@ import clsx from 'clsx';
 import { Popover, Tooltip } from '@gedit/ui';
 
 import { selectIcon, SelectorExtendType } from './selector-extend-icons';
-import { GameObjectIDERegister, GameObjectSelectorExtend as SelectorExtend } from '@gedit/render-engine-ide';
-import { SelectorEntityRendererProps, } from '@gedit/playground';
+import {
+  GameObjectIDERegister,
+  GameObjectSelectorExtend as SelectorExtend,
+} from '@gedit/render-engine-ide';
+import { SelectorEntityRendererProps } from '@gedit/playground';
 import type { Editor2dEntity } from './entities/editor2d-entity';
 import { Editor2dNode } from '../model';
 import { PlaygroundContext2d } from './playground-context';
@@ -15,6 +18,7 @@ const getClassName = (str: string) => `gedit-selector-extend-${str}`;
 export interface SelectorExtendProps extends SelectorEntityRendererProps {
   register?: GameObjectIDERegister;
   context: PlaygroundContext2d;
+  customExtendSchema?: SelectorExtend[];
 }
 
 const defaultExtends: SelectorExtend[] = [
@@ -23,7 +27,8 @@ const defaultExtends: SelectorExtend[] = [
     title: '配置链接',
     category: 1,
     order: 0,
-    visible: (node: Editor2dNode, register: GameObjectIDERegister) => register?.getDisableKeys().indexOf('link') === -1,
+    visible: (node: Editor2dNode, register: GameObjectIDERegister) =>
+      register?.getDisableKeys().indexOf('link') === -1,
     event: {
       title: '跳转配置',
       type: 'selectorExtendAttr',
@@ -34,26 +39,27 @@ const defaultExtends: SelectorExtend[] = [
           label: '类型',
           renderProps: {
             defaultValue: 'url',
-            items: [{value: 'url', label: 'URL'}, {value: 'scene', label: '场景'}]
-          }
+            items: [
+              { value: 'url', label: 'URL' },
+              { value: 'scene', label: '场景' },
+            ],
+          },
         },
         {
           type: 'text',
           key: 'link',
-          visible: (v, key, node: Editor2dNode) => (
-            node && !node.linkType || node.linkType === 'url'
-          ),
+          visible: (v, key, node: Editor2dNode) =>
+            (node && !node.linkType) || node.linkType === 'url',
           label: '链接',
           placeholder: '请输入 url 地址',
         },
         {
           type: 'mindmapSelect',
           key: 'link',
-          visible: (v, key, node: Editor2dNode) => (
-            node && node.linkType === 'scene'
-          ),
+          visible: (v, key, node: Editor2dNode) =>
+            node && node.linkType === 'scene',
           renderProps: {
-            filterTypes: ['scene']
+            filterTypes: ['scene'],
           },
           label: '场景',
           placeholder: '请选择场景',
@@ -69,9 +75,9 @@ const defaultExtends: SelectorExtend[] = [
               placeholder: 'c位',
               renderProps: {
                 style: {
-                  width: 80
-                }
-              }
+                  width: 80,
+                },
+              },
             },
             {
               type: 'text',
@@ -79,12 +85,12 @@ const defaultExtends: SelectorExtend[] = [
               placeholder: 'd位',
               renderProps: {
                 style: {
-                  width: 80
-                }
-              }
-            }
-          ]
-        }
+                  width: 80,
+                },
+              },
+            },
+          ],
+        },
       ],
     },
   },
@@ -105,14 +111,16 @@ const defaultExtends: SelectorExtend[] = [
     title: 'X 轴镜像',
     category: 2,
     order: 2,
-    visible: (node: Editor2dNode, register: GameObjectIDERegister) => register?.getDisableKeys().indexOf('flip.x') === -1,
+    visible: (node: Editor2dNode, register: GameObjectIDERegister) =>
+      register?.getDisableKeys().indexOf('flip.x') === -1,
   },
   {
     type: SelectorExtendType.FLIP_Y,
     title: 'Y 轴镜像',
     category: 2,
     order: 3,
-    visible: (node: Editor2dNode, register: GameObjectIDERegister) => register?.getDisableKeys().indexOf('flip.y') === -1,
+    visible: (node: Editor2dNode, register: GameObjectIDERegister) =>
+      register?.getDisableKeys().indexOf('flip.y') === -1,
   },
   {
     type: SelectorExtendType.DELETE,
@@ -126,7 +134,7 @@ const defaultExtends: SelectorExtend[] = [
 const sortData = (data: SelectorExtend[]) => {
   const states: { [key: string | number]: SelectorExtend[] } = {};
   data.forEach(c => {
-    const {category = 'empty'} = c;
+    const { category = 'empty' } = c;
     states[category] = states[category] || [];
     states[category].push(c);
     states[category] = states[category].sort(
@@ -140,11 +148,17 @@ const sortData = (data: SelectorExtend[]) => {
 
 const SelectorIcon = (props: {
   item: SelectorExtend;
-  onChange: (type: SelectorExtendType | 'updateData', value?: any) => void;
-  context: PlaygroundContext2d,
+  onChange: (type: SelectorExtendType | string, value?: any) => void;
+  context: PlaygroundContext2d;
   node: any;
 }) => {
-  const {item, onChange, node} = props;
+  const { item, onChange, context, node } = props;
+  const tooltipProps =
+    typeof item.tooltipProps === 'function'
+      ? item.tooltipProps(node, context)
+      : item.tooltipProps || {};
+  const [open, setOpen] = React.useState(false);
+  item.changeCallback?.(setOpen);
   const child = (
     <div
       className={clsx(getClassName('icon'), item.className)}
@@ -157,14 +171,15 @@ const SelectorIcon = (props: {
         onChange?.(item.type);
       }}
     >
-      {selectIcon[item.type]}
+      {item.icon || selectIcon[item.type]}
     </div>
   );
   if (item.event) {
-    return (
+    const { hover, ...event } = item.event;
+    const pop = (
       <Popover
         content={props.context.formService.renderSchema({
-          ...item.event,
+          ...event,
           context: {
             node,
           },
@@ -176,16 +191,33 @@ const SelectorIcon = (props: {
           values: node,
           size: 'middle',
         })}
+        open={open}
         title={item.event.title || item.title}
         placement="right"
+        onOpenChange={() => {
+          setOpen(!open);
+        }}
+        {...tooltipProps}
       >
         {child}
       </Popover>
     );
+    if (hover) {
+      return <Tooltip {...hover}>{pop}</Tooltip>;
+    }
+    return pop;
   }
   if (item.title) {
     return (
-      <Tooltip title={item.title} placement="right">
+      <Tooltip
+        title={item.title}
+        open={open}
+        placement="right"
+        onOpenChange={() => {
+          setOpen(!open);
+        }}
+        {...tooltipProps}
+      >
         {child}
       </Tooltip>
     );
@@ -194,15 +226,15 @@ const SelectorIcon = (props: {
 };
 
 export const SelectorExtendRender = (props: SelectorExtendProps) => {
-  const {entity, register, context} = props;
-  const {node} = entity as Editor2dEntity;
-  const {selectorExtends = []} = register?.decoration || {};
+  const { entity, register, context, customExtendSchema = [] } = props;
+  const { node } = entity as Editor2dEntity;
+  const { selectorExtends = [] } = register?.decoration || {};
   const [t, update] = React.useState(0);
   if (!node) return <></>;
 
   const childData = sortData(
     ([] as SelectorExtend[])
-      .concat(defaultExtends, selectorExtends)
+      .concat(defaultExtends, selectorExtends, customExtendSchema)
       .filter(c => (c.visible ? c.visible(node, register) : true))
   );
   const onChange = (type: SelectorExtendType | 'updateData', value?: any) => {
@@ -217,14 +249,14 @@ export const SelectorExtendRender = (props: SelectorExtendProps) => {
       case SelectorExtendType.FLIP_X:
         document.updateNode(
           node,
-          {flip: {...node.flip!, x: !node?.flip?.x}},
+          { flip: { ...node.flip!, x: !node?.flip?.x } },
           true
         );
         break;
       case SelectorExtendType.FLIP_Y:
         document.updateNode(
           node,
-          {flip: {...node.flip!, y: !node?.flip?.y}},
+          { flip: { ...node.flip!, y: !node?.flip?.y } },
           true
         );
         break;

package/src/browser/style/index.less

@@ -55,3 +55,9 @@
     background-color: var(--g-icon-foreground);
 }
 
+
+.gedit-editor-snapshots {
+    position: absolute;
+    z-index: -9999;
+    opacity: 0;
+}

package/src/browser/style/path-edit-layer.less

@@ -5,51 +5,39 @@
   overflow: visible;
   z-index: 20;
   &-point {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    border-radius: 100%;
-    top: -4px;
-    left: -4px;
-    background-color: #fff; //var(--g-playground-select);
-    border: 1px solid #ccc;
+    stroke: #ccc;
+    fill: #fff;
     cursor: pointer;
     z-index: 50;
+    transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
     &-move {
       z-index: 0;
     }
+    &-closed {
+      cursor: url(../svg/pen_close.svg), copy;
+    }
   }
   &-point-bezier {
-    position: absolute;
-    width: 6px;
-    height: 6px;
-    top: -3px;
-    left: -3px;
-    background-color: #fff;//var(--g-playground-select);
-    border: 1px solid #ccc;
-    border-radius: 100%;
+    stroke: #ccc;
+    fill: #fff;
     cursor: pointer;
     z-index: 50;
     &-line {
-      height: 1px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      transform-origin: 0% 50%;
-      background-color: #bbb;
+      stroke: #bbb;
+      fill: none;
+      pointer-events: none;
     }
   }
+  &-point-active {
+    stroke: #aaa;
+    stroke-width: 2px;
+  }
   &-pen {
-    // 移出画布
     cursor: url(../svg/pen_add.svg), copy;
   }
   &-line {
-    height: 1px;
-    background-color: #ccc;
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform-origin: 0% 50%;
+    stroke: #ccc;
+    fill: none;
     z-index: 0;
   }
   &-svg {
@@ -57,7 +45,6 @@
     overflow: visible;
     left: 0;
     top: 0;
-    cursor: url(../svg/pen_add.svg), copy;
     z-index: 1;
   }
   &-path {

package/src/browser/svg/pen_close.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>pen_close</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="20" height="20"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="pen_close">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="path-1"></g>
+            <g id="3-Pen" mask="url(#mask-2)">
+                <g transform="translate(-8.9503, -5.8277)" id="编组">
+                    <g id="编组-3" transform="translate(15.9081, 15.9081) rotate(-33) translate(-15.9081, -15.9081)translate(4.4081, 4.4081)" fill-rule="nonzero">
+                        <path d="M15.2636045,3.541283 C15.1463591,3.42389368 14.9824898,3.36270074 14.8080946,3.37118408 C14.6336994,3.37966741 14.4630852,3.45713107 14.3338359,3.58651098 L11.6470455,6.26392494 C11.5176657,6.39317433 11.440202,6.56378849 11.4317187,6.73818371 C11.4232353,6.91257892 11.4844283,7.07644823 11.6018176,7.19369369 L11.8768691,7.46874526 C10.5668432,8.45506004 9.02084742,9.03767616 7.45291352,9.13593475 C7.17991393,9.16129803 6.93457934,9.35190928 6.83636102,9.61496154 L3.41043657,18.7950899 C3.33416882,18.998745 3.35731687,19.2172739 3.47265178,19.3824321 C3.58798669,19.5475903 3.78145241,19.6392496 3.9926312,19.6287856 C4.06292863,19.6255581 4.13335027,19.6110664 4.20120966,19.5858632 L13.3818161,16.1500821 C13.6415844,16.0533232 13.8312241,15.8129004 13.8603634,15.5433857 C13.9604921,13.9787315 14.5428258,12.4364838 15.5270733,11.1292857 L15.8021248,11.4043373 C15.9193778,11.5205354 16.0825735,11.5809356 16.2560971,11.5723565 C16.4307018,11.5648704 16.6019069,11.488138 16.7318934,11.3591093 L19.4089874,8.67888941 C19.5435052,8.5487903 19.6244033,8.37447286 19.6330845,8.19600993 C19.6417657,8.01754701 19.5774832,7.85029179 19.4550144,7.73269362 L15.2636045,3.541283 Z" id="路径" stroke="#FFFFFF" fill="#000000" transform="translate(11.5, 11.5) rotate(135) translate(-11.5, -11.5)"></path>
+                        <path d="M14.0272683,11.6425807 L7.59746278,14.0497581 L10.7844488,10.8596465 C11.2245543,10.9666112 11.7106563,10.753747 11.9661753,10.342168 C12.2216944,9.93058906 12.1818745,9.42460144 11.8693721,9.11209908 C11.5568698,8.79959672 11.0508821,8.75977682 10.6393032,9.01529586 C10.2277242,9.2708149 10.0148599,9.75691693 10.1218247,10.1970224 L6.93171313,13.3840084 L9.3388905,6.95420293 C11.0769107,6.75281134 12.7662556,6.04449086 14.1937469,4.91862435 L16.069098,6.79397547 C14.9422116,8.2189255 14.2317626,9.90598426 14.0272683,11.6425807 L14.0272683,11.6425807 Z" id="路径" fill="#FFFFFF" transform="translate(11.5004, 9.4842) rotate(135) translate(-11.5004, -9.4842)"></path>
+                    </g>
+                    <circle id="椭圆形" stroke="#000000" fill="#FFFFFF" cx="24.5" cy="10.5" r="3"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/browser/utils/snapshot.ts

@@ -1,6 +1,7 @@
 import { CanvasDraw, CanvasDrawOpts } from '../playground/canvas-draw';
 import {
   debounce,
+  deepClone,
   Disposable,
   DisposableCollection,
   DisposableImpl,
@@ -75,7 +76,7 @@ export class SnapshotCreator extends DisposableImpl {
     if (!host) {
       host = document.createElement('div');
       host.className = 'gedit-editor-snapshots';
-      host.style.display = 'none';
+      // host.style.display = 'none';
       document.body.appendChild(host);
     }
     this.drawer = new CanvasDraw({
@@ -160,6 +161,14 @@ export class SnapshotCreator extends DisposableImpl {
     this.next(() => dispose.dispose());
     return deferred.promise;
   }
+  protected setParent(n: Editor2dNode): Editor2dNode {
+    if (!n.children) return n;
+    n.children.forEach((c: Editor2dNode) => {
+      c.parent = n as any;
+      this.setParent(c);
+    });
+    return n;
+  }
   protected next(end: () => void): void {
     const next = this.processingData.shift();
     if (next) {
@@ -173,6 +182,8 @@ export class SnapshotCreator extends DisposableImpl {
         const attrs = this.opts.renderEngine.getDisplayDefaultData(this.opts.engineName, content.displayType);
         Object.assign(content, { ...attrs });
       }
+      // 设置 parent, 保持 id 一致； mask 里用的是 path id;
+      content = this.setParent(deepClone(content));
       this.drawer.update({
         visible: true,
         uri: next.uri,

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 GEdit
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/lib/browser/playground/path-edit-layer-move-point.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { PathChild } from '@gedit/canvas-draw';
-import { PositionSchema } from '@gedit/playground';
-export interface PointSchema extends PositionSchema {
-    id?: string;
-}
-export declare const PointDefault: ({ getPosFromMouseEvent, paths, scale, }: {
-    getPosFromMouseEvent: (event: {
-        clientX: number;
-        clientY: number;
-    }, addScale?: boolean) => PointSchema;
-    paths: PathChild[];
-    scale: number;
-}) => React.JSX.Element;
-//# sourceMappingURL=path-edit-layer-move-point.d.ts.map

package/lib/browser/playground/path-edit-layer-move-point.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"path-edit-layer-move-point.d.ts","sourceRoot":"","sources":["../../../src/browser/playground/path-edit-layer-move-point.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAuB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,eAAO,MAAM,YAAY;kCAMd;QACL,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,aACU,OAAO,KACf,WAAW;WACT,SAAS,EAAE;WACX,MAAM;uBAkDd,CAAC"}