@gedit/editor-2d 0.3.10 → 0.3.11

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,
+    // },
   };
 };