@gedit/editor-2d 0.1.114 → 0.2.0

package/src/browser/playground/path-edit-layer.tsx

@@ -0,0 +1,330 @@
+import * as React from 'react';
+import { EditorStateConfigEntity, entity, Layer } from '@gedit/playground';
+import { DocumentEntity } from './entities/document-entity';
+import { domUtils } from '@gedit/utils/lib/browser';
+import { GameObjectBaseType } from '@gedit/render-engine';
+import {
+  Editor2dDocument,
+  Editor2dPathNode,
+} from '../model';
+import { PlaygroundContext2d } from './playground-context';
+import { SelectableTreeNode, TreeSelection } from '@gedit/tree';
+import { asVec, getLineWidth, PathChild } from '@gedit/canvas-draw';
+import { generateUuid } from '@gedit/utils';
+import { PointDefault, PointSchema } from './path-edit-layer-move-point';
+import { SvgPath } from './path-edit-layer-svg-path';
+
+const EDIT_PATH_STATE = 'ADD_PATH';
+
+/**
+ * 动态绘制层
+ */
+export class PathEditLayer extends Layer<PlaygroundContext2d> {
+  node = domUtils.createDivWithClass('gedit-path-edit-layer');
+  @entity(EditorStateConfigEntity)
+  protected editorState: EditorStateConfigEntity;
+  @entity(DocumentEntity) documentEntity: DocumentEntity;
+  protected hideMovePoint: boolean;
+
+  currentPathNode?: Editor2dPathNode;
+  currentPointId?: string;
+  startPos?: PathChild;
+  selectId?: string;
+
+  get isEnabled(): boolean {
+    return this.editorState.is(EDIT_PATH_STATE);
+  }
+
+  onZoom(scale: number): void {
+    domUtils.setStyle(this.node, {
+      transform: `scale(${scale})`,
+    });
+  }
+
+  onReady(): void {
+    this.toDispose.pushAll([
+      // 退出路径编辑
+      this.editorState.onCancel(EDIT_PATH_STATE, () => {
+        if (!this.currentPathNode) {
+          return;
+        }
+        // 如果只有一个点代表绘制不成功，则删除
+        /*  if (
+          !this.currentPathNode.path ||
+          (this.currentPathNode.path &&
+            this.currentPathNode.path.paths.length <= 1)
+        ) {
+          this.document?.delNode(this.currentPathNode);
+        } */
+        this.selectId = undefined;
+        this.currentPathNode = undefined;
+      }),
+      this.listenPlaygroundEvent(
+        'mousedown',
+        (e: MouseEvent) => {
+          // 当前编辑模式为路径编辑
+          if (this.editorState.is(EDIT_PATH_STATE)) {
+            this.startPos = this.getPosFromMouseEvent(e);
+            this.startPos.id = generateUuid();
+            this.currentPointId = this.startPos.id;
+            this.drawPath(this.startPos);
+          }
+        },
+        10
+      ),
+      this.listenPlaygroundEvent('mousemove', (e: MouseEvent) => {
+        if (this.startPos) {
+          const pos = this.getPosFromMouseEvent(e);
+          const x1 = this.startPos.x * 2 - pos.x;
+          const y1 = this.startPos.y * 2 - pos.y;
+          this.startPos.x2 = pos.x;
+          this.startPos.y2 = pos.y;
+          this.startPos.x1 = x1;
+          this.startPos.y1 = y1;
+          this.document?.updateNode(this.currentPathNode!, {}, true);
+        }
+      }),
+      this.listenPlaygroundEvent('mouseup', (e: MouseEvent) => {
+        this.startPos = undefined;
+      }),
+      // 图层发生变化时退出模式
+      this.selectionService?.onSelectionChanged(e => {
+        if (this.editorState.is(EDIT_PATH_STATE)) {
+          const selectNodes = this.document?.getSelectedNodes() || [];
+          if (
+            selectNodes.length &&
+            (selectNodes[0].displayType !== GameObjectBaseType.PATH ||
+              selectNodes.length !== 1)
+          ) {
+            this.editorState.toDefaultState();
+          }
+        }
+      })!,
+    ]);
+  }
+
+  /**
+   * 创建路径
+   * @param pos - 当前鼠标点击的位置
+   */
+  drawPath(pos: PointSchema): void {
+    if (!this.document) return;
+    // 判断当前 select 是否 path 路径
+    const selectedNodes = this.document?.getSelectedNodes() || [];
+    if (selectedNodes.length === 1 && selectedNodes[0].displayType === 'path') {
+      this.currentPathNode = selectedNodes[0] as Editor2dPathNode;
+    }
+    // 创建一个空的路径节点，用于存储数据
+    if (!this.currentPathNode) {
+      this.currentPathNode = this.document.createDisplayNode<Editor2dPathNode>(
+        GameObjectBaseType.PATH
+      );
+      this.currentPathNode.selected = true;
+      this.context.selection.addSelection({
+        node: this.currentPathNode as Readonly<SelectableTreeNode>,
+        type: TreeSelection.SelectionType.TOGGLE,
+      });
+    }
+    this.selectId = this.currentPathNode.id;
+    this.currentPathNode.path.paths.push(pos);
+    this.document.updateNode(this.currentPathNode, {}, true);
+    /* this.document.updateNode(
+      this.currentPathNode,
+      {
+        path: {
+          ...this.currentPathNode.path,
+          paths: (this.currentPathNode.path.paths || []).concat(pos),
+        },
+      },
+      true
+    ); */
+  }
+
+  get document(): Editor2dDocument | undefined {
+    return this.documentEntity.config.document;
+  }
+
+  protected onBezierPointMouseDown(e: React.MouseEvent, p: PathChild, key: string): void {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  protected onPointMouseDown(
+    e: React.MouseEvent,
+    node: Editor2dPathNode,
+    p: PathChild
+  ): void {
+    const document = this.document!;
+    this.startDrag(e.clientX, e.clientY, {
+      // 拖动
+      onDrag(dragEvent): void {
+        const pos = dragEvent.endPos;
+        const x = pos.x / (this.config?.finalScale || 1);
+        const y = pos.y / (this.config?.finalScale || 1);
+        if (typeof p.x1 === 'number') {
+          p.x1 = p.x1 - p.x + x;
+        }
+        if (typeof p.x2 === 'number') {
+          p.x2 = p.x2 - p.x + x;
+        }
+        if (typeof p.y1 === 'number') {
+          p.y1 = p.y1 - p.y + y;
+        }
+        if (typeof p.y2 === 'number') {
+          p.y2 = p.y2 - p.y + y;
+        }
+        p.x = x;
+        p.y = y;
+
+        document.updateNode(node, {}, true);
+      },
+    });
+    this.currentPointId = p.id;
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  protected onHideMovePoint(): void {
+    this.hideMovePoint = true;
+    this.draw();
+  }
+  protected onShowMovePoint(): void {
+    this.hideMovePoint = false;
+    this.draw();
+  }
+
+  protected getBezierPoint(node?: Editor2dPathNode): JSX.Element[] {
+    if (!node) {
+      return [];
+    }
+    const { paths } = node.path;
+    const children: JSX.Element[] = [];
+    const points: PathChild[] = [];
+    // 在最后点
+    if (!this.currentPointId) {
+      points.push(paths[paths.length - 1]);
+    } else {
+      const index = paths.findIndex(c => c.id === this.currentPointId);
+      points.push(...paths.filter((_, i) => i >= index - 1 && i <= index + 1));
+    }
+    points.forEach((p, i) => {
+      if ('x1' in p && 'y1' in p) {
+        children.push(
+          <div
+            key={`x1-line_${i}`}
+            className="gedit-path-edit-layer-point-bezier-line"
+            style={{
+              width: getLineWidth({ x: p.x1 || 0, y: p.y1 || 0 }, p),
+              transform: `translate(${p.x}px, ${p.y}px) rotate(${
+                (asVec({ x: p.x1 || 0, y: p.y1 || 0 }, p).ang / Math.PI) * 180
+              }deg)`,
+            }}
+          />,
+          <div
+            key={`x1_${i}`}
+            className="gedit-path-edit-layer-point-bezier"
+            style={{
+              transform: `translate(${p.x1}px, ${p.y1}px) scale(${
+                1 / this.config.finalScale
+              })`,
+            }}
+            onMouseDown={e => {
+              this.onBezierPointMouseDown(e, p, '1');
+            }}
+            onMouseEnter={this.onHideMovePoint.bind(this)}
+            onMouseLeave={this.onShowMovePoint.bind(this)}
+          />
+        );
+      }
+      if ('x2' in p && 'y2' in p) {
+        children.push(
+          <div
+            key={`x2-line_${i}`}
+            className="gedit-path-edit-layer-point-bezier-line"
+            style={{
+              width: getLineWidth({ x: p.x2 || 0, y: p.y2 || 0 }, p),
+              transform: `translate(${p.x}px, ${p.y}px) rotate(${
+                (asVec({ x: p.x2 || 0, y: p.y2 || 0 }, p).ang / Math.PI) * 180
+              }deg)`,
+            }}
+          />,
+          <div
+            key={`x2_${i}`}
+            className="gedit-path-edit-layer-point-bezier"
+            style={{
+              transform: `translate(${p.x2}px, ${p.y2}px) scale(${
+                1 / this.config.finalScale
+              })`,
+            }}
+            onMouseEnter={this.onHideMovePoint.bind(this)}
+            onMouseLeave={this.onShowMovePoint.bind(this)}
+          />
+        );
+      }
+    });
+    return children;
+  }
+
+  draw(): JSX.Element {
+    const selectNodes = this.document?.getSelectedNodes() || [];
+    if (
+      selectNodes.length > 1 ||
+      (selectNodes[0] && selectNodes[0].displayType !== 'path') ||
+      !this.document ||
+      !this.isEnabled
+    ) {
+      // this.editorState.toDefaultState();
+      return <></>;
+    }
+    const node: Editor2dPathNode | undefined = selectNodes[0] as
+      | Editor2dPathNode
+      | undefined;
+
+    const allPoints: JSX.Element[] = [];
+    // 只管当前点相邻的两个点的 bezier;
+    const bezierPoint: JSX.Element[] = this.getBezierPoint(node);
+
+    const { paths = [] } = node ? node.path : {};
+    paths.forEach((p, i) => {
+      allPoints.push(
+        <div
+          className="gedit-path-edit-layer-point"
+          key={`${node?.id}.${i}`}
+          style={{
+            transform: `translate(${p.x}px, ${p.y}px) scale(${
+              1 / this.config.finalScale
+            })`,
+          }}
+          onMouseDown={e => {
+            this.onPointMouseDown(e, node!, p);
+          }}
+          onMouseEnter={this.onHideMovePoint.bind(this)}
+          onMouseLeave={this.onShowMovePoint.bind(this)}
+        />
+      );
+    });
+    return (
+      <>
+        {!this.hideMovePoint && (
+          <PointDefault
+            getPosFromMouseEvent={this.getPosFromMouseEvent.bind(this)}
+            paths={paths}
+            scale={this.config.finalScale}
+          />
+        )}
+        <SvgPath
+          width={this.config.config.pageBounds?.width || 300}
+          height={this.config.config.pageBounds?.height || 300}
+          paths={paths}
+          scale={this.config.finalScale}
+          pathProps={{
+            onMouseEnter: this.onHideMovePoint.bind(this),
+            onMouseLeave: this.onShowMovePoint.bind(this),
+          }}
+        />
+        {allPoints}
+        {bezierPoint}
+      </>
+    );
+  }
+}

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

@@ -13,6 +13,7 @@ import { SelectionService } from '@gedit/application-common';
 import { Editor2dContextKeyService } from '../editor2d-context-key-service';
 import type { CanvasDraw } from './canvas-draw';
 import SelectionType = TreeSelection.SelectionType;
+import { FormService } from '@gedit/ui';
 
 export const Editor2dPlayGround = Symbol('Editor2dPlayGround');
 
@@ -32,6 +33,7 @@ export class PlaygroundContext2d {
     @inject(SelectionService) readonly selectionService: SelectionService,
     @inject(AppConfigService) readonly appConfig: AppConfigService,
     @inject(Editor2dModelOptions) readonly options: Editor2dModelOptions,
+    @inject(FormService) readonly formService: FormService,
     @inject(Editor2dContextKeyService) readonly contextKeyService: Editor2dContextKeyService
   ) {
     this.document.toDispose.push(this.onCanvasDataChangedEmitter);

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

@@ -10,7 +10,7 @@ import {
   ToolbarConfigEntity
 } from '@gedit/playground';
 import { CanvasLayer } from './canvas-layer';
-import { CanvasDrawLayer } from './canvas-draw-layer';
+import { PathEditLayer } from './path-edit-layer';
 // import { SelectionLayer } from './selection-layer';
 import { AppConfigData, AppConfigService } from '@gedit/app-config';
 import { HistoryService } from '@gedit/history';
@@ -18,6 +18,8 @@ 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 { ExtendEditLayer, EXTEND_EDIT_STATE } from './extend-edit-layer';
+import { Editor2dSelection } from '../model';
 
 @injectable()
 export class PlaygroundContribution2d implements PlaygroundContribution {
@@ -27,9 +29,11 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
   @inject(PlaygroundConfig) readonly config: PlaygroundConfig;
   @inject(CommandService) readonly commandService: CommandService;
   @inject(ContextMenuRenderer) readonly menuRender: ContextMenuRenderer;
+  @inject(Editor2dSelection) readonly editor2dSelection: Editor2dSelection;
   registerPlayground(registry: PlaygroundRegistry): void {
     registry.registerLayer(CanvasLayer);
-    registry.registerLayer(CanvasDrawLayer);
+    registry.registerLayer(PathEditLayer);
+    registry.registerLayer(ExtendEditLayer);
     // registry.registerLayer(SelectionLayer);
   }
   onDispose(playground: Playground): void {
@@ -50,6 +54,7 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
         gridVisible: false,
       });
     }
+    const isComponent = this.modelOpts.autoSaveService.resource.uri.path.ext === '.comp';
     if (stateEntity) {
       stateEntity.registerState({
         id: 'FULL_SCREEN',
@@ -64,6 +69,14 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
           }, 10);
         }
       });
+      stateEntity.registerState({
+        id: EXTEND_EDIT_STATE,
+        icon: '',
+        title: '扩展编辑',
+        hidden: true, // 该模式为内部模式
+        disableSelector: true,
+        cancelMode: 'hold'
+      });
       stateEntity.registerState({
         id: 'ADD_ELEMENT',
         icon: 'gedit-toolbar-add',
@@ -83,6 +96,27 @@ 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) {
@@ -96,7 +130,7 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
       });
     }
     playground.getConfigEntity<SnaplineConfigEntity>(SnaplineConfigEntity).updateConfig({
-      originlineVisible: false, // 隐藏原点
+      originlineVisible: isComponent, // 是否隐藏原点线条，如果是组件模式则显示
     });
     playground.toDispose.push(
       // TODO 放在这里处理会增加复杂度

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

@@ -1,19 +1,20 @@
 import * as React from 'react';
 
 import clsx from 'clsx';
-import { Form, Popover, Tooltip } from '@gedit/ui';
+import { Popover, Tooltip } from '@gedit/ui';
 
 import { selectIcon, SelectorExtendType } from './selector-extend-icons';
 import { GameObjectIDERegister, GameObjectSelectorExtend as SelectorExtend } from '@gedit/render-engine-ide';
-import { PlaygroundContext, SelectorEntityRendererProps, } from '@gedit/playground';
+import { SelectorEntityRendererProps, } from '@gedit/playground';
 import type { Editor2dEntity } from './entities/editor2d-entity';
 import { Editor2dNode } from '../model';
+import { PlaygroundContext2d } from './playground-context';
 
 const getClassName = (str: string) => `gedit-selector-extend-${str}`;
 
 export interface SelectorExtendProps extends SelectorEntityRendererProps {
   register?: GameObjectIDERegister;
-  context?: PlaygroundContext;
+  context: PlaygroundContext2d;
 }
 
 const defaultExtends: SelectorExtend[] = [
@@ -24,14 +25,38 @@ const defaultExtends: SelectorExtend[] = [
     order: 0,
     visible: (node: Editor2dNode, register: GameObjectIDERegister) => register?.getDisableKeys().indexOf('link') === -1,
     event: {
-      title: '跳转链接配置',
+      title: '跳转配置',
       type: 'selectorExtendAttr',
       children: [
+        {
+          type: 'radio',
+          key: 'linkType',
+          label: '类型',
+          renderProps: {
+            defaultValue: 'url',
+            items: [{value: 'url', label: 'URL'}, {value: 'scene', label: '场景'}]
+          }
+        },
         {
           type: 'text',
           key: 'link',
+          visible: (v, key, node: Editor2dNode) => (
+            node && !node.linkType || node.linkType === 'url'
+          ),
           label: '链接',
-          placeholder: '请输出 url 地址',
+          placeholder: '请输入 url 地址',
+        },
+        {
+          type: 'mindmapSelect',
+          key: 'link',
+          visible: (v, key, node: Editor2dNode) => (
+            node && node.linkType === 'scene'
+          ),
+          renderProps: {
+            filterTypes: ['scene']
+          },
+          label: '场景',
+          placeholder: '请选择场景',
         },
       ],
     },
@@ -89,6 +114,7 @@ const sortData = (data: SelectorExtend[]) => {
 const SelectorIcon = (props: {
   item: SelectorExtend;
   onChange: (type: SelectorExtendType | 'updateData', value?: any) => void;
+  context: PlaygroundContext2d,
   node: any;
 }) => {
   const {item, onChange, node} = props;
@@ -110,7 +136,7 @@ const SelectorIcon = (props: {
   if (item.event) {
     return (
       <Popover
-        content={Form.renderBySchema({
+        content={props.context.formService.renderSchema({
           ...item.event,
           context: {
             node,
@@ -144,6 +170,8 @@ export const SelectorExtendRender = (props: SelectorExtendProps) => {
   const {entity, register, context} = props;
   const {node} = entity as Editor2dEntity;
   const {selectorExtends = []} = register?.decoration || {};
+  const [t, update] = React.useState(0);
+  if (!node) return <></>;
 
   const childData = sortData(
     ([] as SelectorExtend[])
@@ -151,7 +179,7 @@ export const SelectorExtendRender = (props: SelectorExtendProps) => {
       .filter(c => (c.visible ? c.visible(node, register) : true))
   );
   const onChange = (type: SelectorExtendType | 'updateData', value?: any) => {
-    const {document} = context;
+    const {document} = context!;
     switch (type) {
       case SelectorExtendType.TO_TOP:
         document.moveUp(node);
@@ -162,14 +190,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;
@@ -177,8 +205,12 @@ export const SelectorExtendRender = (props: SelectorExtendProps) => {
         document.delNodes(node);
         break;
       case 'updateData':
-        console.log(value);
+        // 修改linkType则清空link
+        if (value.linkType) {
+          value.link = '';
+        }
         document.updateNode(node, value, true);
+        update(t + 1);
         break;
       default:
         console.warn(`无效类型: ${type}.`);
@@ -199,6 +231,7 @@ export const SelectorExtendRender = (props: SelectorExtendProps) => {
             {c.map(item => (
               <SelectorIcon
                 item={item}
+                context={context}
                 onChange={onChange}
                 node={node}
                 key={item.type}

package/src/browser/style/canvas-layer.css

@@ -6,6 +6,22 @@
     z-index: 10
 }
 
+.gedit-canvas-viewport {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.gedit-canvas-viewport canvas {
+  position: absolute;
+}
+.gedit-viewport-mask, .gedit-viewport-bg {
+  position: absolute;
+}
+.gedit-viewport-mask {
+  background-color: var(--g-editor-background);;
+  opacity: 0.4;
+}
 .gedit-canvas-layer canvas {
     position: absolute;
     display: none;