mjpic 1.0.1 → 1.0.3

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 (6) hide show
  1. package/api/cli.ts +1 -1
  2. package/dist/cli/cli.js +1 -1
  3. package/dist/client/assets/{index-BdgdSkqo.js → index-CXG7wiFP.js} +25 -25
  4. package/dist/client/index.html +1 -1
  5. package/package.json +1 -1
  6. package/src/components/layout/CanvasArea.tsx +41 -3
package/dist/client/index.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <title>敏捷图片 - mjpic</title>
8
- <script type="module" crossorigin src="/assets/index-BdgdSkqo.js"></script>
8
+ <script type="module" crossorigin src="/assets/index-CXG7wiFP.js"></script>
9
9
  <link rel="stylesheet" crossorigin href="/assets/index-BoiS81Ei.css">
10
10
  </head>
11
11
  <body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mjpic",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "type": "module",
5
5
  "bin": {
6
6
  "mjpic": "./dist/cli/cli.js"
package/src/components/layout/CanvasArea.tsx CHANGED
@@ -27,6 +27,8 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
27
27
  const lastAspectRatioRef = useRef<string | undefined>(undefined);
28
28
  const isTransformingRef = useRef(false);
29
29
  const imgDimensionsRef = useRef({ width: 0, height: 0 });
30
+ const cropDragRafRef = useRef<number | null>(null);
31
+ const pendingCropRectRef = useRef<{ x: number; y: number; width: number; height: number } | null>(null);
30
32
 
31
33
  // Straighten Tool State
32
34
  const [straightenLine, setStraightenLine] = useState<{ start: {x: number, y: number}, end: {x: number, y: number} } | null>(null);
@@ -129,7 +131,7 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
129
131
  const reader = new FileReader();
130
132
  reader.onload = (event) => {
131
133
  if (event.target?.result) {
132
- loadImage(event.target.result as string);
134
+ loadImage(event.target.result as string, file.name);
133
135
  }
134
136
  };
135
137
  reader.readAsDataURL(file);
@@ -684,9 +686,35 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
684
686
  const node = e.target;
685
687
  const newX = (node.x() - contentX) / scale;
686
688
  const newY = (node.y() - contentY) / scale;
687
- setCropRect({ ...cropRect, x: newX, y: newY });
689
+
690
+ pendingCropRectRef.current = { ...cropRect, x: newX, y: newY };
691
+ if (cropDragRafRef.current !== null) return;
692
+
693
+ cropDragRafRef.current = requestAnimationFrame(() => {
694
+ cropDragRafRef.current = null;
695
+ if (pendingCropRectRef.current) {
696
+ setCropRect(pendingCropRectRef.current);
697
+ pendingCropRectRef.current = null;
698
+ }
699
+ });
688
700
  }}
689
- onDragEnd={() => {
701
+ onDragEnd={(e) => {
702
+ if (cropDragRafRef.current !== null) {
703
+ cancelAnimationFrame(cropDragRafRef.current);
704
+ cropDragRafRef.current = null;
705
+ }
706
+ pendingCropRectRef.current = null;
707
+
708
+ const node = e.target;
709
+ const newX = (node.x() - contentX) / scale;
710
+ const newY = (node.y() - contentY) / scale;
711
+ setCropRect({ ...cropRect, x: newX, y: newY });
712
+
713
+ requestAnimationFrame(() => {
714
+ transformerRef.current?.forceUpdate();
715
+ transformerRef.current?.getLayer()?.batchDraw();
716
+ });
717
+
690
718
  setTimeout(() => {
691
719
  isTransformingRef.current = false;
692
720
  }, 50);
@@ -734,6 +762,11 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
734
762
  width: newWidth / scale,
735
763
  height: newHeight / scale
736
764
  });
765
+
766
+ requestAnimationFrame(() => {
767
+ transformerRef.current?.forceUpdate();
768
+ transformerRef.current?.getLayer()?.batchDraw();
769
+ });
737
770
 
738
771
  lastAspectRatioRef.current = config.crop?.aspectRatio;
739
772
 
@@ -780,6 +813,11 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
780
813
 
781
814
  <Transformer
782
815
  ref={transformerRef}
816
+ borderEnabled={false}
817
+ rotateEnabled={false}
818
+ anchorStroke="#3b82f6"
819
+ anchorFill="#3b82f6"
820
+ anchorSize={8}
783
821
  enabledAnchors={isFreeCrop
784
822
  ? ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right', 'top-center', 'bottom-center']
785
823
  : ['top-left', 'top-right', 'bottom-left', 'bottom-right']