@gedit/editor-2d 0.2.46 → 0.2.47

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,
@@ -30,6 +31,7 @@ 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;
   registerPlayground(registry: PlaygroundRegistry): void {
     registry.registerLayer(CanvasLayer);
     registry.registerLayer(PathEditLayer);
@@ -96,27 +98,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) {

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 });
       } */
@@ -154,7 +158,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是全局的，所以每个节点销毁后得注销时间

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/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,
@@ -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/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"}

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

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PointDefault = void 0;
-const React = require("react");
-const canvas_draw_1 = require("@gedit/canvas-draw");
-const PointDefault = ({ getPosFromMouseEvent, paths, scale, }) => {
-    const domRef = React.useRef(null);
-    const lineRef = React.useRef(null);
-    const pathsRef = React.useRef(paths);
-    const onMove = (e) => {
-        const dom = domRef.current;
-        const line = lineRef.current;
-        if (!dom || !line) {
-            return;
-        }
-        const pos = getPosFromMouseEvent(e);
-        dom.style.transform = `translate(${pos.x}px, ${pos.y}px) scale(${1 / scale})`;
-        const endPoint = pathsRef.current[pathsRef.current.length - 1];
-        if (endPoint) {
-            const width = (0, canvas_draw_1.getLineWidth)(endPoint, pos);
-            const { ang } = (0, canvas_draw_1.asVec)(endPoint, pos);
-            line.style.width = `${width}px`;
-            line.style.height = `${1 / scale}px`;
-            line.style.transform = `translate(${endPoint.x}px, ${endPoint.y}px) rotate(${(ang / Math.PI) * 180}deg)`;
-        }
-    };
-    React.useEffect(() => {
-        pathsRef.current = paths;
-    }, [paths]);
-    React.useEffect(() => {
-        const dom = domRef.current;
-        const line = lineRef.current;
-        if (dom && line) {
-            window.addEventListener('mousemove', onMove);
-        }
-        return () => {
-            if (dom && line) {
-                window.removeEventListener('mousemove', onMove);
-            }
-        };
-    }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "gedit-path-edit-layer-line", ref: lineRef }),
-        React.createElement("div", { className: "gedit-path-edit-layer-point gedit-path-edit-layer-point-move gedit-path-edit-layer-pen", ref: domRef })));
-};
-exports.PointDefault = PointDefault;
-//# sourceMappingURL=path-edit-layer-move-point.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"path-edit-layer-move-point.js","sourceRoot":"","sources":["../../../src/browser/playground/path-edit-layer-move-point.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,oDAAoE;AAM7D,MAAM,YAAY,GAAG,CAAC,EAC3B,oBAAoB,EACpB,KAAK,EACL,KAAK,GAWN,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,CAAC,CAAa,EAAE,EAAE;QAC/B,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;QAC3B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;YACjB,OAAO;SACR;QACD,MAAM,GAAG,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;QACpC,GAAG,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,aAClD,CAAC,GAAG,KACN,GAAG,CAAC;QACJ,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC/D,IAAI,QAAQ,EAAE;YACZ,MAAM,KAAK,GAAG,IAAA,0BAAY,EAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;YAC1C,MAAM,EAAE,GAAG,EAAE,GAAG,IAAA,mBAAK,EAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;YAChC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,IAAI,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,QAAQ,CAAC,CAAC,OAC5C,QAAQ,CAAC,CACX,cAAc,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC;SAC3C;IACH,CAAC,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;QAC3B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,GAAG,IAAI,IAAI,EAAE;YACf,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;SAC9C;QACD,OAAO,GAAG,EAAE;YACV,IAAI,GAAG,IAAI,IAAI,EAAE;gBACf,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;aACjD;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,4BAA4B,EAAC,GAAG,EAAE,OAAO,GAAI;QAC5D,6BACE,SAAS,EAAC,wFAAwF,EAClG,GAAG,EAAE,MAAM,GACX,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AA/DW,QAAA,YAAY,gBA+DvB"}

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

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { PathChild } from '@gedit/canvas-draw';
-export interface PathSVGProps {
-    width: number;
-    height: number;
-    scale: number;
-    paths: PathChild[];
-    pathProps?: any;
-}
-export declare const SvgPath: ({ width, height, paths, scale, pathProps, }: PathSVGProps) => React.JSX.Element;
-//# sourceMappingURL=path-edit-layer-svg-path.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"path-edit-layer-svg-path.d.ts","sourceRoot":"","sources":["../../../src/browser/playground/path-edit-layer-svg-path.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAoB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEjE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,gDAMjB,YAAY,sBAgCd,CAAC"}

package/lib/browser/playground/path-edit-layer-svg-path.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SvgPath = void 0;
-const React = require("react");
-const canvas_draw_1 = require("@gedit/canvas-draw");
-const SvgPath = ({ width, height, paths, scale, pathProps, }) => {
-    // const bezier = getXYToPath(paths);
-    const pathsStringArray = (0, canvas_draw_1.getPointsToPaths)(paths);
-    console.log((0, canvas_draw_1.getPointsToPaths)(paths));
-    return (React.createElement("svg", { width: width || 300, height: height || 300, className: "gedit-path-edit-layer-svg" }, pathsStringArray.map((p, i) => (React.createElement("path", Object.assign({ className: "gedit-path-edit-layer-path", key: i.toString() }, pathProps, { strokeLinecap: "round", strokeWidth: 1.5 / scale, d: p, onMouseDown: e => {
-            e.preventDefault();
-            e.stopPropagation();
-        }, onDoubleClick: e => {
-            e.preventDefault();
-            e.stopPropagation();
-            // this.onPathDoubleClick(i, p);
-            console.log(3123);
-        } }))))));
-};
-exports.SvgPath = SvgPath;
-//# sourceMappingURL=path-edit-layer-svg-path.js.map

package/lib/browser/playground/path-edit-layer-svg-path.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"path-edit-layer-svg-path.js","sourceRoot":"","sources":["../../../src/browser/playground/path-edit-layer-svg-path.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,oDAAiE;AAU1D,MAAM,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,GACI,EAAE,EAAE;IACjB,qCAAqC;IACrC,MAAM,gBAAgB,GAAG,IAAA,8BAAgB,EAAC,KAAK,CAAC,CAAC;IACjD,OAAO,CAAC,GAAG,CAAC,IAAA,8BAAgB,EAAC,KAAK,CAAC,CAAC,CAAC;IACrC,OAAO,CACL,6BACE,KAAK,EAAE,KAAK,IAAI,GAAG,EACnB,MAAM,EAAE,MAAM,IAAI,GAAG,EACrB,SAAS,EAAC,2BAA2B,IAEpC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC9B,4CACE,SAAS,EAAC,4BAA4B,EACtC,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,IACb,SAAS,IACb,aAAa,EAAC,OAAO,EACrB,WAAW,EAAE,GAAG,GAAG,KAAK,EACxB,CAAC,EAAE,CAAC,EACJ,WAAW,EAAE,CAAC,CAAC,EAAE;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,EACD,aAAa,EAAE,CAAC,CAAC,EAAE;YACjB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,gCAAgC;YAChC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC,IACD,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,OAAO,WAsClB"}