@gedit/editor-2d 0.3.9 → 0.3.11

package/src/browser/playground/canvas-layer.ts

@@ -1,5 +1,5 @@
 import { entity, Layer, PipelineDimension } from '@gedit/playground';
-import { DocumentEntity, Editor2dEntity } from './entities';
+import { DocumentEntity /* Editor2dEntity */ } from './entities';
 import { domUtils } from '@gedit/utils/lib/browser';
 import { PlaygroundContext2d } from './playground-context';
 import { Editor2dDocument, Editor2dNode } from '../model';
@@ -11,13 +11,13 @@ import {
   GameObjectChangeEvent,
   GameObjectEventType,
 } from './canvas-draw';
-import { debounce, OriginSchema } from '@gedit/utils';
+import { debounce /* OriginSchema */ } from '@gedit/utils';
 import {
   GameObject,
-  GameObjectBaseType,
+  // GameObjectBaseType,
   GameWidgetIDE,
 } from '@gedit/render-engine-ide';
-import { toFixedValue } from '@gedit/canvas-draw';
+// import { toFixedValue } from '@gedit/canvas-draw';
 
 const childrenMap = (list: GameObject[], c: GameObject) => {
   if (c.disposed) {
@@ -128,9 +128,15 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       );
     }
   }
+  // pixi 和 galacean 的画布会被立即杀掉，这块初始化逻辑不需要了
+  /*  originTimeout: NodeJS.Timeout;
   onContainerInitOrigin(entity?: Editor2dEntity, update?: boolean): void {
     const config = this.documentEntity.config;
-    if (config.appConfig?.engine !== 'pixi' || !entity) {
+    if (
+      (config.appConfig?.engine !== 'pixi' &&
+        config.appConfig?.engine !== 'galacean') ||
+      !entity
+    ) {
       return;
     }
     const node = this.nodeCache.get(entity.id);
@@ -142,8 +148,8 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       // console.log(localBounds, entity.gameObject.rendererObject._localBoundsRect);
       const { x: minX, y: minY, width, height } = localBounds; // entity.gameObject.rendererObject._localBoundsRect;
       // 算出组件与组的 0 点位置；
-      const x = toFixedValue(-minX / width || 0, 6);
-      const y = toFixedValue(-minY / height || 0, 6);
+      const x = toFixedValue(-minX / width || 0, 2);
+      const y = toFixedValue(-minY / height || 0, 2);
       const initOrigin = { x, y };
       const o: OriginSchema = update ? org : initOrigin;
       if (update || typeof o.initX === 'undefined') {
@@ -156,15 +162,20 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
         };
         // group origin 始终为 0;
         // transform.update({ origin });
-        this.document?.updateNode(node, {
-          origin,
-        });
-        // console.log('--------------origin--------------', origin);
+        // node.origin = origin;
+        // 加 timeout 是为了防止拖动时多次触发；
+        clearTimeout(this.originTimeout);
+        this.originTimeout = setTimeout(() => {
+          this.document?.updateNode(node, {
+            origin,
+          });
+        }, 33);
+        // console.log('--------------origin--------------', origin, node.size);
         // obj.data.origin = origin;
         // this.selectionEntityManager.updateEntity(obj.id, obj);
       }
     }
-  }
+  } */
   onUpdateEntity = debounce((update: boolean) => {
     const updateList = getListData(this.updateList);
     updateList.forEach(item => {
@@ -177,8 +188,8 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
         item,
         this.config.config.zoom
       );
-      const entity = this.selectionEntityManager.nodeEntitiesCache.get(item.id);
-      this.onContainerInitOrigin(entity, update);
+      // const entity = this.selectionEntityManager.nodeEntitiesCache.get(item.id);
+      // this.onContainerInitOrigin(entity, update);
     });
     this.updateList = [];
   });

package/src/browser/playground/extend-edit/gradient-conic-node.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { asVec, defaultGradientRange } from '@gedit/canvas-draw';
+import { asVec, defaultGradientRange, toFixedValue } from '@gedit/canvas-draw';
 import PointEvent from './gradient-edit-layer-point-event';
 import { GradientNodeProps } from './gradient-node';
 
@@ -40,7 +40,7 @@ export const GradientConicNode = (props: GradientNodeProps): JSX.Element => {
             const newVec = asVec({ x: r, y: r }, { x: nx, y: ny });
             const newAngle = ((newVec.ang / Math.PI) * 180 + 360) % 360;
             const newRange = data.range || {};
-            newRange.angle = parseFloat(newAngle.toFixed(4));
+            newRange.angle = toFixedValue(newAngle, 2);
             data.range = newRange;
             onChange(data);
           }}
@@ -95,8 +95,8 @@ export const GradientConicNode = (props: GradientNodeProps): JSX.Element => {
         pointClassName="gedit-extend-origin"
         onChange={d => {
           const newRange = data.range || {};
-          newRange.cx = parseFloat((cx + d.x / width).toFixed(4));
-          newRange.cy = parseFloat((cy + d.y / height).toFixed(4));
+          newRange.cx = toFixedValue(cx + d.x / width, 2);
+          newRange.cy = toFixedValue(cy + d.y / height, 2);
           data.range = newRange;
           onChange(data);
         }}

package/src/browser/playground/extend-edit/gradient-node.tsx

@@ -6,6 +6,7 @@ import {
   ColorSchema,
   defaultGradientRange,
   getLineWidth,
+  toFixedValue,
 } from '@gedit/canvas-draw';
 import PointEvent, { DifferProps } from './gradient-edit-layer-point-event';
 import { ExtendEntity } from '../entities';
@@ -40,13 +41,13 @@ export const GradientNode = (props: GradientNodeProps): JSX.Element => {
     const range = data.range || {};
     if (typeof p.x === 'number' && typeof c.x === 'number' && keyP.x) {
       const x = c.x + p.x / width;
-      range[keyP.x] = parseFloat(x.toFixed(4));
+      range[keyP.x] = toFixedValue(x, 2);
     } else if (keyP.x) {
       range[keyP.x] = lx;
     }
     if (typeof p.y === 'number' && typeof c.y === 'number' && keyP.y) {
       const y = c.y + p.y / height;
-      range[keyP.y] = parseFloat(y.toFixed(4));
+      range[keyP.y] = toFixedValue(y, 2);
     } else if (keyP.y) {
       range[keyP.y] = ly;
     }

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

@@ -210,22 +210,22 @@ export const getNewPoint = (
   let pCenter;
   if (point.type !== PATH_FUNC_TYPE.STRAIGHT) {
     point.type = PATH_FUNC_TYPE.UNEQUAL;
-    point.x2 = toFixedValue(hull[0].x, 4);
-    point.y2 = toFixedValue(hull[0].y, 4);
+    point.x2 = toFixedValue(hull[0].x, 2);
+    point.y2 = toFixedValue(hull[0].y, 2);
   } else {
     // 不是贝赛尔时，转换回二次贝赛尔点;
     pCenter = cubicToQuadratic(hull[5], hull[3]);
-    newPoint.x1 = toFixedValue(pCenter.x, 4);
-    newPoint.y1 = toFixedValue(pCenter.y, 4);
+    newPoint.x1 = toFixedValue(pCenter.x, 2);
+    newPoint.y1 = toFixedValue(pCenter.y, 2);
   }
   if (nextPoint.type !== PATH_FUNC_TYPE.STRAIGHT) {
     nextPoint.type = PATH_FUNC_TYPE.UNEQUAL;
-    nextPoint.x1 = toFixedValue(hull[2].x, 4);
-    nextPoint.y1 = toFixedValue(hull[2].y, 4);
+    nextPoint.x1 = toFixedValue(hull[2].x, 2);
+    nextPoint.y1 = toFixedValue(hull[2].y, 2);
   } else {
     pCenter = cubicToQuadratic(hull[5], hull[4]);
-    newPoint.x2 = toFixedValue(pCenter.x, 4);
-    newPoint.y2 = toFixedValue(pCenter.y, 4);
+    newPoint.x2 = toFixedValue(pCenter.x, 2);
+    newPoint.y2 = toFixedValue(pCenter.y, 2);
   }
   return newPoint;
 };
@@ -242,8 +242,8 @@ export const setBezierMovePoint = (
   const y1 = key === 'left' ? 'y2' : 'y1';
   const center = { x: path.x, y: path.y };
   const currentPoint = { x: pos.x, y: pos.y };
-  path[x] = toFixedValue(pos.x, 4);
-  path[y] = toFixedValue(pos.y, 4);
+  path[x] = toFixedValue(pos.x, 2);
+  path[y] = toFixedValue(pos.y, 2);
   let p2: PointSchema | false = false;
   const isOnly =
     typeof path[x1] === 'undefined' && typeof path[y1] === 'undefined';
@@ -261,8 +261,8 @@ export const setBezierMovePoint = (
         break;
     }
     if (p2) {
-      path[x1] = toFixedValue(p2.x, 4);
-      path[y1] = toFixedValue(p2.y, 4);
+      path[x1] = toFixedValue(p2.x, 2);
+      path[y1] = toFixedValue(p2.y, 2);
     }
   }
   return path;
@@ -270,13 +270,14 @@ export const setBezierMovePoint = (
 
 export const transformToData = (
   point: PointSchema,
-  transform: { scale?: ScaleSchema; rotation?: number }
+  transform: { scale?: ScaleSchema; rotation?: number },
+  center: PointSchema
 ) => {
-  const { scale = { x: 1, y: 1}, rotation = 0 } = transform;
+  const { scale = { x: 1, y: 1 }, rotation = 0 } = transform;
   let { x, y } = point;
   x *= scale.x;
   y *= scale.y;
-  const rx = transformRotation({ x, y }, { x: 0, y: 0 }, rotation);
+  const rx = transformRotation({ x, y }, center, rotation);
   x = rx.x;
   y = rx.y;
   return {
@@ -287,11 +288,12 @@ export const transformToData = (
 
 export const inverseTransformToData = (
   point: PointSchema,
-  transform: { scale: ScaleSchema; rotation: number }
+  transform: { scale: ScaleSchema; rotation: number },
+  center: PointSchema
 ) => {
   const { scale, rotation } = transform;
   let { x, y } = point;
-  const r = transformRotation({ x, y }, { x: 0, y: 0 }, -rotation);
+  const r = transformRotation({ x, y }, center, -rotation);
   x = r.x;
   y = r.y;
   x /= scale.x;
@@ -303,13 +305,13 @@ export const updatePathNodeData = (
   node: Editor2dPathNode
 ): { path: PathSchema; position?: PositionSchema; size: SizeSchema } => {
   const {
-    position = { x: 0, y: 0 },
-    origin = { x: 0.5, y: 0.5 },
+    // position = { x: 0, y: 0 },
+    // origin = { x: 0.5, y: 0.5 },
     path,
     style,
-    size,
-    rotation = 0,
-    scale = { x: 1, y: 1 },
+    size = { width: 0, height: 0},
+    // rotation = 0,
+    // scale = { x: 1, y: 1 },
   } = node;
   const { paths: p = [], closed } = path;
   const paths = cloneDeep(p);
@@ -321,46 +323,46 @@ export const updatePathNodeData = (
     style!.line,
     bounds
   );
-  let x = bounds.minX + bounds.width * origin!.x;
-  let y = bounds.minY + bounds.height * origin!.y;
+  // let x = bounds.minX + bounds.width * origin!.x;
+  // let y = bounds.minY + bounds.height * origin!.y;
 
-  const newPath = p.map(c => {
-    const item = {
-      ...c,
-      x: toFixedValue(c.x - x, 4),
-      y: toFixedValue(c.y - y, 4),
-    };
-    if (typeof c.x1 === 'number') {
-      item.x1 = toFixedValue(c.x1 - x, 4);
-    }
-    if (typeof c.x2 === 'number') {
-      item.x2 = toFixedValue(c.x2 - x, 4);
-    }
-    if (typeof c.y1 === 'number') {
-      item.y1 = toFixedValue(c.y1 - y, 4);
-    }
-    if (typeof c.y2 === 'number') {
-      item.y2 = toFixedValue(c.y2 - y, 4);
-    }
-    return item;
-  });
-  const t = transformToData({ x, y }, { scale, rotation });
-  x = t.x;
-  y = t.y;
+  // const newPath = p.map(c => {
+  //   const item = {
+  //     ...c,
+  //     x: toFixedValue(c.x - x, 4),
+  //     y: toFixedValue(c.y - y, 4),
+  //   };
+  //   if (typeof c.x1 === 'number') {
+  //     item.x1 = toFixedValue(c.x1 - x, 4);
+  //   }
+  //   if (typeof c.x2 === 'number') {
+  //     item.x2 = toFixedValue(c.x2 - x, 4);
+  //   }
+  //   if (typeof c.y1 === 'number') {
+  //     item.y1 = toFixedValue(c.y1 - y, 4);
+  //   }
+  //   if (typeof c.y2 === 'number') {
+  //     item.y2 = toFixedValue(c.y2 - y, 4);
+  //   }
+  //   return item;
+  // });
 
-  x += position.x;
-  y += position.y;
+  // const t = transformToData({ x, y }, { scale, rotation });
+  // x = t.x;
+  // y = t.y;
 
+  // x += position.x;
+  // y += position.y;
   return {
-    path: { ...path, paths: newPath, origin },
+    path,
     size: {
       ...size,
       width: contentWidth,
       height: contentHeight,
     },
-    position: {
-      x,
-      y,
-    },
+    // position: {
+    //   x,
+    //   y,
+    // },
   };
 };