@gedit/editor-2d 0.1.115 → 0.2.0

package/lib/browser/playground/canvas-draw-layer.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import { EditorStateConfigEntity, Layer, PositionSchema } from '@gedit/playground';
-import { DocumentEntity } from './entities/document-entity';
-import { Editor2dDocument, Editor2dPathNode } from '../model';
-/**
- * 动态绘制层
- */
-export declare class CanvasDrawLayer extends Layer {
-    node: HTMLDivElement;
-    protected editorState: EditorStateConfigEntity;
-    documentEntity: DocumentEntity;
-    currentPathNode?: Editor2dPathNode;
-    onReady(): void;
-    /**
-     * 创建路径
-     * @param pos - 当前鼠标点击的位置
-     */
-    drawPath(pos: PositionSchema): void;
-    get document(): Editor2dDocument | undefined;
-    draw(): JSX.Element;
-}
-//# sourceMappingURL=canvas-draw-layer.d.ts.map

package/lib/browser/playground/canvas-draw-layer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"canvas-draw-layer.d.ts","sourceRoot":"","sources":["../../../src/browser/playground/canvas-draw-layer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,uBAAuB,EAAU,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG5D,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG9D;;GAEG;AACH,qBAAa,eAAgB,SAAQ,KAAK;IACxC,IAAI,iBAA0D;IAC7B,SAAS,CAAC,WAAW,EAAE,uBAAuB,CAAC;IACxD,cAAc,EAAE,cAAc,CAAC;IAEvD,eAAe,CAAC,EAAE,gBAAgB,CAAC;IAEnC,OAAO,IAAI,IAAI;IAoBf;;;OAGG;IACH,QAAQ,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI;IAanC,IAAI,QAAQ,IAAI,gBAAgB,GAAG,SAAS,CAE3C;IAED,IAAI,IAAI,GAAG,CAAC,OAAO;CA4BpB"}

package/lib/browser/playground/canvas-draw-layer.js

@@ -1,102 +0,0 @@
-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasDrawLayer = void 0;
-const React = require("react");
-const playground_1 = require("@gedit/playground");
-const document_entity_1 = require("./entities/document-entity");
-const browser_1 = require("@gedit/utils/lib/browser");
-const render_engine_1 = require("@gedit/render-engine");
-const EDIT_PATH_STATE = 'STATE_PATH';
-/**
- * 动态绘制层
- */
-class CanvasDrawLayer extends playground_1.Layer {
-    constructor() {
-        super(...arguments);
-        this.node = browser_1.domUtils.createDivWithClass('gedit-canvas-draw-layer');
-    }
-    onReady() {
-        this.toDispose.pushAll([
-            // 退出路径编辑
-            this.editorState.onCancel(EDIT_PATH_STATE, () => {
-                var _a;
-                // 如果只有一个点代表绘制不成功，则删除
-                if (this.currentPathNode && this.currentPathNode.path.paths.length <= 1) {
-                    (_a = this.document) === null || _a === void 0 ? void 0 : _a.delNode(this.currentPathNode);
-                }
-                this.currentPathNode = undefined;
-            }),
-            this.listenPlaygroundEvent('mousedown', (e) => {
-                // 当前编辑模式为路径编辑
-                if (this.editorState.is(EDIT_PATH_STATE)) {
-                    const pos = this.getPosFromMouseEvent(e);
-                    this.drawPath(pos);
-                }
-            }, 10)
-        ]);
-    }
-    /**
-     * 创建路径
-     * @param pos - 当前鼠标点击的位置
-     */
-    drawPath(pos) {
-        if (!this.document)
-            return;
-        // 创建一个空的路径节点，用于存储数据
-        if (!this.currentPathNode) {
-            this.currentPathNode = this.document.createDisplayNode(render_engine_1.GameObjectBaseType.PATH);
-        }
-        this.currentPathNode.path.paths.push({
-            x: pos.x,
-            y: pos.y,
-        });
-        this.document.updateNode(this.currentPathNode, {}, true);
-    }
-    get document() {
-        return this.documentEntity.config.document;
-    }
-    draw() {
-        if (!this.document)
-            return React.createElement(React.Fragment, null);
-        const allPoints = [];
-        const document = this.document;
-        this.document.queryNodesByTypes([render_engine_1.GameObjectBaseType.PATH]).forEach((node) => {
-            node.path.paths.forEach((p, i) => {
-                const onMouseDown = (e) => {
-                    this.startDrag(e.clientX, e.clientY, {
-                        // 拖动
-                        onDrag(dragEvent) {
-                            const pos = dragEvent.endPos;
-                            p.x = pos.x;
-                            p.y = pos.y;
-                            document.updateNode(node, {}, true);
-                        }
-                    });
-                    e.preventDefault();
-                    e.stopPropagation();
-                };
-                allPoints.push(React.createElement("div", { className: "gedit-canvas-draw-layer-point", key: `${node.id}.${i}`, style: { left: p.x, top: p.y }, onMouseDown: onMouseDown }));
-            });
-        });
-        return React.createElement(React.Fragment, null, allPoints);
-    }
-}
-__decorate([
-    (0, playground_1.entity)(playground_1.EditorStateConfigEntity),
-    __metadata("design:type", playground_1.EditorStateConfigEntity)
-], CanvasDrawLayer.prototype, "editorState", void 0);
-__decorate([
-    (0, playground_1.entity)(document_entity_1.DocumentEntity),
-    __metadata("design:type", document_entity_1.DocumentEntity)
-], CanvasDrawLayer.prototype, "documentEntity", void 0);
-exports.CanvasDrawLayer = CanvasDrawLayer;
-//# sourceMappingURL=canvas-draw-layer.js.map

package/lib/browser/playground/canvas-draw-layer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"canvas-draw-layer.js","sourceRoot":"","sources":["../../../src/browser/playground/canvas-draw-layer.tsx"],"names":[],"mappings":"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"}

package/src/browser/playground/canvas-draw-layer.tsx

@@ -1,88 +0,0 @@
-import * as React from 'react';
-import { EditorStateConfigEntity, entity, Layer, PositionSchema } 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';
-
-const EDIT_PATH_STATE = 'STATE_PATH';
-/**
- * 动态绘制层
- */
-export class CanvasDrawLayer extends Layer {
-  node = domUtils.createDivWithClass('gedit-canvas-draw-layer');
-  @entity(EditorStateConfigEntity) protected editorState: EditorStateConfigEntity;
-  @entity(DocumentEntity) documentEntity: DocumentEntity;
-
-  currentPathNode?: Editor2dPathNode;
-
-  onReady(): void {
-    this.toDispose.pushAll([
-      // 退出路径编辑
-      this.editorState.onCancel(EDIT_PATH_STATE, () => {
-        // 如果只有一个点代表绘制不成功，则删除
-        if (this.currentPathNode && this.currentPathNode.path.paths.length <= 1) {
-          this.document?.delNode(this.currentPathNode);
-        }
-        this.currentPathNode = undefined;
-      }),
-      this.listenPlaygroundEvent('mousedown', (e: MouseEvent) => {
-        // 当前编辑模式为路径编辑
-        if (this.editorState.is(EDIT_PATH_STATE)) {
-          const pos = this.getPosFromMouseEvent(e);
-          this.drawPath(pos);
-        }
-      }, 10)
-    ]);
-  }
-
-  /**
-   * 创建路径
-   * @param pos - 当前鼠标点击的位置
-   */
-  drawPath(pos: PositionSchema): void {
-    if (!this.document) return;
-    // 创建一个空的路径节点，用于存储数据
-    if (!this.currentPathNode) {
-      this.currentPathNode = this.document.createDisplayNode<Editor2dPathNode>(GameObjectBaseType.PATH);
-    }
-    this.currentPathNode.path.paths.push({
-      x: pos.x,
-      y: pos.y,
-    });
-    this.document.updateNode(this.currentPathNode, {}, true);
-  }
-
-  get document(): Editor2dDocument | undefined {
-    return this.documentEntity.config.document;
-  }
-
-  draw(): JSX.Element {
-    if (!this.document) return <></>;
-    const allPoints: JSX.Element[] = [];
-    const document = this.document!;
-    this.document.queryNodesByTypes([GameObjectBaseType.PATH]).forEach((node: Editor2dPathNode) => {
-      node.path.paths.forEach((p, i) => {
-        const onMouseDown = (e: React.MouseEvent) => {
-          this.startDrag(e.clientX, e.clientY, {
-            // 拖动
-            onDrag(dragEvent): void {
-              const pos = dragEvent.endPos;
-              p.x = pos.x;
-              p.y = pos.y;
-              document.updateNode(node, {}, true);
-            }
-          });
-          e.preventDefault();
-          e.stopPropagation();
-        };
-        allPoints.push(
-          <div className="gedit-canvas-draw-layer-point" key={`${node.id}.${i}`} style={{ left: p.x, top: p.y }}onMouseDown={onMouseDown}/>
-        );
-      });
-    });
-    return <>
-      {allPoints}
-    </>;
-  }
-}

package/src/browser/style/canvas-draw-layer.less

@@ -1,24 +0,0 @@
-.gedit-canvas-draw-layer {
-  position: absolute;
-  left: 0;
-  top: 0;
-  overflow: visible;
-  z-index: 20;
-  &-point {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    border-radius: var(--g-small-radius);
-    margin-top: -4px;
-    margin-left: -4px;
-    background-color: var(--g-playground-select);
-    cursor: pointer;
-    z-index: 50;
-  }
-  &-svg {
-    position: absolute;
-    overflow: visible;
-    left: 0;
-    top: 0;
-  }
-}