mjpic 1.0.2 → 1.0.4
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.
- package/api/cli.ts +59 -32
- package/dist/cli/cli.js +38 -20
- package/dist/client/assets/index-BQfYCBRX.js +197 -0
- package/dist/client/index.html +1 -1
- package/package.json +1 -1
- package/src/components/layout/CanvasArea.tsx +40 -2
- package/src/components/layout/Header.tsx +2 -2
- package/dist/client/assets/index-Bn7l1ZSh.js +0 -197
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-
|
|
8
|
+
<script type="module" crossorigin src="/assets/index-BQfYCBRX.js"></script>
|
|
9
9
|
<link rel="stylesheet" crossorigin href="/assets/index-BoiS81Ei.css">
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
package/package.json
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);
|
|
@@ -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
|
-
|
|
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']
|
|
@@ -67,10 +67,10 @@ export const Header = ({ stageRef }: HeaderProps) => {
|
|
|
67
67
|
// If savePath is provided (from dialog), use it
|
|
68
68
|
if (savePath) {
|
|
69
69
|
// CLI Mode: Save to specific path
|
|
70
|
-
const saveRes = await fetch('/api/save', {
|
|
70
|
+
const saveRes = await fetch('/api/image/save', {
|
|
71
71
|
method: 'POST',
|
|
72
72
|
headers: { 'Content-Type': 'application/json' },
|
|
73
|
-
body: JSON.stringify({ data: dataUrl,
|
|
73
|
+
body: JSON.stringify({ data: dataUrl, filePath: savePath })
|
|
74
74
|
});
|
|
75
75
|
|
|
76
76
|
if (saveRes.ok) {
|