npm - mjpic - Versions diffs - 1.0.19 → 1.0.21 - Mend

mjpic 1.0.19 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/client/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。" />
     <title>敏捷图片 (mjpic) - 轻量级网页版图片处理工具</title>
-    <script type="module" crossorigin src="/assets/index-Tbz-to9P.js"></script>
+    <script type="module" crossorigin src="/assets/index-DORSlWYO.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-C6nMBMvY.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,10 +1,10 @@
 {
   "name": "mjpic",
   "description": "敏捷图片（mjpic）是一个轻量级网页版图片处理工具，设计灵感来源于光影魔术手。",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "type": "module",
   "bin": {
-    "mjpic": "./dist/cli/cli.js"
+    "mjpic": "dist/cli/cli.js"
   },
   "scripts": {
     "client:dev": "vite",
@@ -30,7 +30,6 @@
     "i18next-browser-languagedetector": "^8.2.1",
     "konva": "^9.3.16",
     "lucide-react": "^0.511.0",
-    "mjpic": "^1.0.7",
     "open": "^11.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/src/components/layout/CanvasArea.tsx CHANGED Viewed

@@ -10,6 +10,19 @@ interface CanvasAreaProps {
   stageRef: React.MutableRefObject<Konva.Stage | null>;
 }
+type TransformBox = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+};
+type Point = {
+  x: number;
+  y: number;
+};
 export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
   const { previewImage, config, loadImage, setOriginalSize, originalWidth, originalHeight, cropRect, setCropRect, updateConfig } = useImageStore();
   const { isStraightenToolActive, setStraightenToolActive, activeTool } = useUIStore();
@@ -29,6 +42,8 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
   const imgDimensionsRef = useRef({ width: 0, height: 0 });
   const cropDragRafRef = useRef<number | null>(null);
   const pendingCropRectRef = useRef<{ x: number; y: number; width: number; height: number } | null>(null);
+  const pendingTransformBoxRef = useRef<TransformBox | null>(null);
+  const transformStartBoxRef = useRef<TransformBox | null>(null);
   // Straighten Tool State
   const [straightenLine, setStraightenLine] = useState<{ start: {x: number, y: number}, end: {x: number, y: number} } | null>(null);
@@ -108,6 +123,300 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
     contentX = cx - displayTotalWidth / 2;
     contentY = cy - displayTotalHeight / 2;
   }
+  const clampValue = (value: number, min: number, max: number) => {
+    if (min > max) return min;
+    return Math.min(Math.max(value, min), max);
+  };
+  const resolveCropTransformBox = (oldBox: TransformBox, proposedBox: TransformBox, activeAnchor?: string | null): TransformBox => {
+    const boundsLeft = contentX;
+    const boundsTop = contentY;
+    const boundsRight = contentX + displayTotalWidth;
+    const boundsBottom = contentY + displayTotalHeight;
+    const oldLeft = oldBox.x;
+    const oldTop = oldBox.y;
+    const oldRight = oldBox.x + oldBox.width;
+    const oldBottom = oldBox.y + oldBox.height;
+    const oldCenterX = oldBox.x + oldBox.width / 2;
+    const oldCenterY = oldBox.y + oldBox.height / 2;
+    const makeBox = (x: number, y: number, width: number, height: number): TransformBox => ({
+      x,
+      y,
+      width,
+      height,
+      rotation: oldBox.rotation
+    });
+    const minFreeWidth = 20;
+    const minFreeHeight = 20;
+    const aspectRatio = !isFreeCrop && config.crop?.aspectRatio
+      ? (() => {
+          const [w, h] = config.crop.aspectRatio.split(':').map((value) => parseInt(value, 10));
+          return w > 0 && h > 0 ? w / h : null;
+        })()
+      : null;
+    if (!activeAnchor) {
+      const width = clampValue(proposedBox.width, minFreeWidth, boundsRight - boundsLeft);
+      const height = clampValue(proposedBox.height, minFreeHeight, boundsBottom - boundsTop);
+      return {
+        ...makeBox(
+          clampValue(proposedBox.x, boundsLeft, boundsRight - width),
+          clampValue(proposedBox.y, boundsTop, boundsBottom - height),
+          width,
+          height
+        )
+      };
+    }
+    if (!aspectRatio) {
+      if (activeAnchor === 'top-left') {
+        const left = clampValue(proposedBox.x, boundsLeft, oldRight - minFreeWidth);
+        const top = clampValue(proposedBox.y, boundsTop, oldBottom - minFreeHeight);
+        return makeBox(left, top, oldRight - left, oldBottom - top);
+      }
+      if (activeAnchor === 'top-right') {
+        const right = clampValue(proposedBox.x + proposedBox.width, oldLeft + minFreeWidth, boundsRight);
+        const top = clampValue(proposedBox.y, boundsTop, oldBottom - minFreeHeight);
+        return makeBox(oldLeft, top, right - oldLeft, oldBottom - top);
+      }
+      if (activeAnchor === 'bottom-left') {
+        const left = clampValue(proposedBox.x, boundsLeft, oldRight - minFreeWidth);
+        const bottom = clampValue(proposedBox.y + proposedBox.height, oldTop + minFreeHeight, boundsBottom);
+        return makeBox(left, oldTop, oldRight - left, bottom - oldTop);
+      }
+      if (activeAnchor === 'bottom-right') {
+        const right = clampValue(proposedBox.x + proposedBox.width, oldLeft + minFreeWidth, boundsRight);
+        const bottom = clampValue(proposedBox.y + proposedBox.height, oldTop + minFreeHeight, boundsBottom);
+        return makeBox(oldLeft, oldTop, right - oldLeft, bottom - oldTop);
+      }
+      if (activeAnchor === 'top-center') {
+        const top = clampValue(proposedBox.y, boundsTop, oldBottom - minFreeHeight);
+        return makeBox(oldLeft, top, oldBox.width, oldBottom - top);
+      }
+      if (activeAnchor === 'bottom-center') {
+        const bottom = clampValue(proposedBox.y + proposedBox.height, oldTop + minFreeHeight, boundsBottom);
+        return makeBox(oldLeft, oldTop, oldBox.width, bottom - oldTop);
+      }
+      if (activeAnchor === 'middle-left') {
+        const left = clampValue(proposedBox.x, boundsLeft, oldRight - minFreeWidth);
+        return makeBox(left, oldTop, oldRight - left, oldBox.height);
+      }
+      if (activeAnchor === 'middle-right') {
+        const right = clampValue(proposedBox.x + proposedBox.width, oldLeft + minFreeWidth, boundsRight);
+        return makeBox(oldLeft, oldTop, right - oldLeft, oldBox.height);
+      }
+    }
+    const ratio = aspectRatio || 1;
+    const minRatioWidth = Math.max(minFreeWidth, minFreeHeight * ratio);
+    if (activeAnchor === 'top-left') {
+      const widthFromX = clampValue(oldRight - proposedBox.x, minRatioWidth, oldRight - boundsLeft);
+      const widthFromY = clampValue((oldBottom - proposedBox.y) * ratio, minRatioWidth, (oldBottom - boundsTop) * ratio);
+      const width = Math.min(Math.max(widthFromX, widthFromY), oldRight - boundsLeft, (oldBottom - boundsTop) * ratio);
+      const height = width / ratio;
+      return makeBox(oldRight - width, oldBottom - height, width, height);
+    }
+    if (activeAnchor === 'top-right') {
+      const widthFromX = clampValue(proposedBox.x + proposedBox.width - oldLeft, minRatioWidth, boundsRight - oldLeft);
+      const widthFromY = clampValue((oldBottom - proposedBox.y) * ratio, minRatioWidth, (oldBottom - boundsTop) * ratio);
+      const width = Math.min(Math.max(widthFromX, widthFromY), boundsRight - oldLeft, (oldBottom - boundsTop) * ratio);
+      const height = width / ratio;
+      return makeBox(oldLeft, oldBottom - height, width, height);
+    }
+    if (activeAnchor === 'bottom-left') {
+      const widthFromX = clampValue(oldRight - proposedBox.x, minRatioWidth, oldRight - boundsLeft);
+      const widthFromY = clampValue((proposedBox.y + proposedBox.height - oldTop) * ratio, minRatioWidth, (boundsBottom - oldTop) * ratio);
+      const width = Math.min(Math.max(widthFromX, widthFromY), oldRight - boundsLeft, (boundsBottom - oldTop) * ratio);
+      const height = width / ratio;
+      return makeBox(oldRight - width, oldTop, width, height);
+    }
+    if (activeAnchor === 'bottom-right') {
+      const widthFromX = clampValue(proposedBox.x + proposedBox.width - oldLeft, minRatioWidth, boundsRight - oldLeft);
+      const widthFromY = clampValue((proposedBox.y + proposedBox.height - oldTop) * ratio, minRatioWidth, (boundsBottom - oldTop) * ratio);
+      const width = Math.min(Math.max(widthFromX, widthFromY), boundsRight - oldLeft, (boundsBottom - oldTop) * ratio);
+      const height = width / ratio;
+      return makeBox(oldLeft, oldTop, width, height);
+    }
+    if (activeAnchor === 'top-center') {
+      const height = clampValue(oldBottom - proposedBox.y, minFreeHeight, oldBottom - boundsTop);
+      const width = Math.min(Math.max(height * ratio, minRatioWidth), displayTotalWidth);
+      const x = clampValue(oldCenterX - width / 2, boundsLeft, boundsRight - width);
+      return makeBox(x, oldBottom - height, width, height);
+    }
+    if (activeAnchor === 'bottom-center') {
+      const height = clampValue(proposedBox.y + proposedBox.height - oldTop, minFreeHeight, boundsBottom - oldTop);
+      const width = Math.min(Math.max(height * ratio, minRatioWidth), displayTotalWidth);
+      const x = clampValue(oldCenterX - width / 2, boundsLeft, boundsRight - width);
+      return makeBox(x, oldTop, width, height);
+    }
+    if (activeAnchor === 'middle-left') {
+      const width = clampValue(oldRight - proposedBox.x, minRatioWidth, oldRight - boundsLeft);
+      const height = width / ratio;
+      const y = clampValue(oldCenterY - height / 2, boundsTop, boundsBottom - height);
+      return makeBox(oldRight - width, y, width, height);
+    }
+    if (activeAnchor === 'middle-right') {
+      const width = clampValue(proposedBox.x + proposedBox.width - oldLeft, minRatioWidth, boundsRight - oldLeft);
+      const height = width / ratio;
+      const y = clampValue(oldCenterY - height / 2, boundsTop, boundsBottom - height);
+      return makeBox(oldLeft, y, width, height);
+    }
+    return oldBox;
+  };
+  const resolveAnchorDragPosition = (baseBox: TransformBox, proposedPos: Point, activeAnchor?: string | null): Point => {
+    const boundsLeft = contentX;
+    const boundsTop = contentY;
+    const boundsRight = contentX + displayTotalWidth;
+    const boundsBottom = contentY + displayTotalHeight;
+    const left = baseBox.x;
+    const top = baseBox.y;
+    const right = baseBox.x + baseBox.width;
+    const bottom = baseBox.y + baseBox.height;
+    const centerX = baseBox.x + baseBox.width / 2;
+    const centerY = baseBox.y + baseBox.height / 2;
+    const minFreeWidth = 20;
+    const minFreeHeight = 20;
+    const aspectRatio = !isFreeCrop && config.crop?.aspectRatio
+      ? (() => {
+          const [w, h] = config.crop.aspectRatio.split(':').map((value) => parseInt(value, 10));
+          return w > 0 && h > 0 ? w / h : null;
+        })()
+      : null;
+    if (!activeAnchor) {
+      return proposedPos;
+    }
+    if (!aspectRatio) {
+      if (activeAnchor === 'top-left') {
+        return {
+          x: clampValue(proposedPos.x, boundsLeft, right - minFreeWidth),
+          y: clampValue(proposedPos.y, boundsTop, bottom - minFreeHeight)
+        };
+      }
+      if (activeAnchor === 'top-right') {
+        return {
+          x: clampValue(proposedPos.x, left + minFreeWidth, boundsRight),
+          y: clampValue(proposedPos.y, boundsTop, bottom - minFreeHeight)
+        };
+      }
+      if (activeAnchor === 'bottom-left') {
+        return {
+          x: clampValue(proposedPos.x, boundsLeft, right - minFreeWidth),
+          y: clampValue(proposedPos.y, top + minFreeHeight, boundsBottom)
+        };
+      }
+      if (activeAnchor === 'bottom-right') {
+        return {
+          x: clampValue(proposedPos.x, left + minFreeWidth, boundsRight),
+          y: clampValue(proposedPos.y, top + minFreeHeight, boundsBottom)
+        };
+      }
+      if (activeAnchor === 'top-center') {
+        return {
+          x: centerX,
+          y: clampValue(proposedPos.y, boundsTop, bottom - minFreeHeight)
+        };
+      }
+      if (activeAnchor === 'bottom-center') {
+        return {
+          x: centerX,
+          y: clampValue(proposedPos.y, top + minFreeHeight, boundsBottom)
+        };
+      }
+      if (activeAnchor === 'middle-left') {
+        return {
+          x: clampValue(proposedPos.x, boundsLeft, right - minFreeWidth),
+          y: centerY
+        };
+      }
+      if (activeAnchor === 'middle-right') {
+        return {
+          x: clampValue(proposedPos.x, left + minFreeWidth, boundsRight),
+          y: centerY
+        };
+      }
+    }
+    const ratio = aspectRatio || 1;
+    const minRatioWidth = Math.max(minFreeWidth, minFreeHeight * ratio);
+    if (activeAnchor === 'top-left') {
+      const width = Math.min(
+        Math.max(right - proposedPos.x, (bottom - proposedPos.y) * ratio, minRatioWidth),
+        right - boundsLeft,
+        (bottom - boundsTop) * ratio
+      );
+      return { x: right - width, y: bottom - width / ratio };
+    }
+    if (activeAnchor === 'top-right') {
+      const width = Math.min(
+        Math.max(proposedPos.x - left, (bottom - proposedPos.y) * ratio, minRatioWidth),
+        boundsRight - left,
+        (bottom - boundsTop) * ratio
+      );
+      return { x: left + width, y: bottom - width / ratio };
+    }
+    if (activeAnchor === 'bottom-left') {
+      const width = Math.min(
+        Math.max(right - proposedPos.x, (proposedPos.y - top) * ratio, minRatioWidth),
+        right - boundsLeft,
+        (boundsBottom - top) * ratio
+      );
+      return { x: right - width, y: top + width / ratio };
+    }
+    if (activeAnchor === 'bottom-right') {
+      const width = Math.min(
+        Math.max(proposedPos.x - left, (proposedPos.y - top) * ratio, minRatioWidth),
+        boundsRight - left,
+        (boundsBottom - top) * ratio
+      );
+      return { x: left + width, y: top + width / ratio };
+    }
+    if (activeAnchor === 'top-center') {
+      const height = Math.min(
+        Math.max(bottom - proposedPos.y, minFreeHeight),
+        bottom - boundsTop,
+        displayTotalWidth / ratio
+      );
+      return { x: centerX, y: bottom - height };
+    }
+    if (activeAnchor === 'bottom-center') {
+      const height = Math.min(
+        Math.max(proposedPos.y - top, minFreeHeight),
+        boundsBottom - top,
+        displayTotalWidth / ratio
+      );
+      return { x: centerX, y: top + height };
+    }
+    if (activeAnchor === 'middle-left') {
+      const width = Math.min(
+        Math.max(right - proposedPos.x, minRatioWidth),
+        right - boundsLeft,
+        displayTotalHeight * ratio
+      );
+      return { x: right - width, y: centerY };
+    }
+    if (activeAnchor === 'middle-right') {
+      const width = Math.min(
+        Math.max(proposedPos.x - left, minRatioWidth),
+        boundsRight - left,
+        displayTotalHeight * ratio
+      );
+      return { x: left + width, y: centerY };
+    }
+    return proposedPos;
+  };
   useEffect(() => {
     if (image && image.width && image.height) {
@@ -760,8 +1069,8 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                 }}
                 onDragMove={(e) => {
                   const node = e.target;
-                  const newX = (node.x() - contentX) / scale;
-                  const newY = (node.y() - contentY) / scale;
+                  const newX = Math.round((node.x() - contentX) / scale);
+                  const newY = Math.round((node.y() - contentY) / scale);
                   pendingCropRectRef.current = { ...cropRect, x: newX, y: newY };
                   if (cropDragRafRef.current !== null) return;
@@ -782,8 +1091,8 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                   pendingCropRectRef.current = null;
                   const node = e.target;
-                  const newX = (node.x() - contentX) / scale;
-                  const newY = (node.y() - contentY) / scale;
+                  const newX = Math.round((node.x() - contentX) / scale);
+                  const newY = Math.round((node.y() - contentY) / scale);
                   setCropRect({ ...cropRect, x: newX, y: newY });
                   requestAnimationFrame(() => {
@@ -797,48 +1106,51 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                 }}
                 onTransformStart={() => {
                   isTransformingRef.current = true;
+                  pendingTransformBoxRef.current = null;
+                  transformStartBoxRef.current = {
+                    x: contentX + cropRect.x * scale,
+                    y: contentY + cropRect.y * scale,
+                    width: cropRect.width * scale,
+                    height: cropRect.height * scale,
+                    rotation: 0
+                  };
                 }}
                 onTransformEnd={(e) => {
                   const node = e.target;
-                  const scaleX = node.scaleX();
-                  const scaleY = node.scaleY();
+                  const finalBox = pendingTransformBoxRef.current;
                   node.scaleX(1);
                   node.scaleY(1);
-                  // Base size comes from current cropRect state * display scale
-                  const baseWidth = cropRect.width * scale;
-                  const baseHeight = cropRect.height * scale;
-                  let newWidth = Math.max(20, baseWidth * scaleX);
-                  let newHeight = Math.max(20, baseHeight * scaleY);
-                  if (!isFreeCrop && config.crop?.aspectRatio) {
-                    const aspectRatioParts = config.crop.aspectRatio.split(':');
-                    const ratioW = parseInt(aspectRatioParts[0]);
-                    const ratioH = parseInt(aspectRatioParts[1]);
-                    const targetRatio = ratioW / ratioH;
-                    if (scaleX > scaleY) {
-                      newHeight = newWidth / targetRatio;
-                    } else {
-                      newWidth = newHeight * targetRatio;
-                    }
+                  if (!finalBox) {
+                    requestAnimationFrame(() => {
+                      transformerRef.current?.forceUpdate();
+                      transformerRef.current?.getLayer()?.batchDraw();
+                    });
+                    setTimeout(() => {
+                      isTransformingRef.current = false;
+                    }, 50);
+                    return;
                   }
-                  // Constrain to TOTAL width/height
-                  const maxX = totalWidth - newWidth / scale;
-                  const maxY = totalHeight - newHeight / scale;
-                  const newX = Math.min(Math.max(0, (node.x() - contentX) / scale), maxX);
-                  const newY = Math.min(Math.max(0, (node.y() - contentY) / scale), maxY);
+                  const constrainedX = Math.min(Math.max(contentX, finalBox.x), contentX + displayTotalWidth - finalBox.width);
+                  const constrainedY = Math.min(Math.max(contentY, finalBox.y), contentY + displayTotalHeight - finalBox.height);
+                  const newX = Math.round((constrainedX - contentX) / scale);
+                  const newY = Math.round((constrainedY - contentY) / scale);
+                  const newWidth = Math.round(finalBox.width / scale);
+                  const newHeight = Math.round(finalBox.height / scale);
                   setCropRect({
                     x: newX,
                     y: newY,
-                    width: newWidth / scale,
-                    height: newHeight / scale
+                    width: newWidth,
+                    height: newHeight
                   });
+                  pendingTransformBoxRef.current = null;
+                  transformStartBoxRef.current = null;
                   requestAnimationFrame(() => {
                     transformerRef.current?.forceUpdate();
                     transformerRef.current?.getLayer()?.batchDraw();
@@ -894,56 +1206,36 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
                 anchorStroke="#3b82f6"
                 anchorFill="#3b82f6"
                 anchorSize={8}
+                anchorDragBoundFunc={(oldAbsPos, newAbsPos) => {
+                  const activeAnchor = transformerRef.current?.getActiveAnchor();
+                  const fallbackBaseBox: TransformBox = {
+                    x: contentX + cropRect.x * scale,
+                    y: contentY + cropRect.y * scale,
+                    width: cropRect.width * scale,
+                    height: cropRect.height * scale,
+                    rotation: 0
+                  };
+                  const baseBox = transformStartBoxRef.current || fallbackBaseBox;
+                  return resolveAnchorDragPosition(baseBox, newAbsPos as Point, activeAnchor);
+                }}
                 // 所有裁剪模式都支持 8 个方向的手柄，方便对称裁剪
                 enabledAnchors={[
                   'top-left', 'top-right', 'bottom-left', 'bottom-right',
                   'top-center', 'bottom-center', 'middle-left', 'middle-right'
                 ]}
                 boundBoxFunc={(oldBox, newBox) => {
-                  if (newBox.width < 20 || newBox.height < 20) {
-                    return oldBox;
-                  }
-                  if (!isFreeCrop && config.crop?.aspectRatio) {
-                    const aspectRatioParts = config.crop.aspectRatio.split(':');
-                    const ratioW = parseInt(aspectRatioParts[0]);
-                    const ratioH = parseInt(aspectRatioParts[1]);
-                    const targetRatio = ratioW / ratioH;
-                    if (Math.abs(newBox.width - oldBox.width) > Math.abs(newBox.height - oldBox.height)) {
-                      newBox.height = newBox.width / targetRatio;
-                    } else {
-                      newBox.width = newBox.height * targetRatio;
-                    }
-                  }
-                  // 检测正在使用的手柄，保持中心位置不变
                   const transformerInstance = transformerRef.current;
-                  if (transformerInstance) {
-                    const activeAnchor = transformerInstance.getActiveAnchor();
-                    if (activeAnchor === 'top-center' || activeAnchor === 'bottom-center') {
-                      // 使用上/下手柄时，保持水平中心位置不变
-                      const oldCenterX = oldBox.x + oldBox.width / 2;
-                      const newCenterX = newBox.x + newBox.width / 2;
-                      newBox.x += oldCenterX - newCenterX;
-                    } else if (activeAnchor === 'middle-left' || activeAnchor === 'middle-right') {
-                      // 使用左/右手柄时，保持垂直中心位置不变
-                      const oldCenterY = oldBox.y + oldBox.height / 2;
-                      const newCenterY = newBox.y + newBox.height / 2;
-                      newBox.y += oldCenterY - newCenterY;
-                    }
-                  }
-                  const relX = newBox.x - contentX;
-                  const relY = newBox.y - contentY;
-                  if (relX < -5 || relY < -5 ||
-                      relX + newBox.width > displayTotalWidth + 5 ||
-                      relY + newBox.height > displayTotalHeight + 5) {
-                    return oldBox;
-                  }
+                  const activeAnchor = transformerInstance?.getActiveAnchor();
+                  const baseBox = transformStartBoxRef.current || (oldBox as TransformBox);
+                  const resolvedBox = resolveCropTransformBox(
+                    baseBox,
+                    newBox as TransformBox,
+                    activeAnchor
+                  );
+                  pendingTransformBoxRef.current = { ...resolvedBox };
-                  return newBox;
+                  return resolvedBox;
                 }}
               />
             </Group>