@deepnoid/canvas 0.1.61 → 0.1.63

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.
@@ -58,6 +58,7 @@ export declare class AnnotationEngine {
58
58
  private drawAnnotations;
59
59
  getSelectedAnnotation(): Annotation | null;
60
60
  setSelectedAnnotation(target: Annotation | null): void;
61
+ clearAnnotations(): void;
61
62
  getPointerRenderState(): {
62
63
  mousePoint: import("../types").Point | null;
63
64
  } | null;
@@ -194,6 +194,10 @@ export class AnnotationEngine {
194
194
  this.drawAnnotationsCanvas();
195
195
  }
196
196
  }
197
+ clearAnnotations() {
198
+ this.annotations = [];
199
+ this.clearCanvas(this.annotationsCanvas);
200
+ }
197
201
  // ----------------- Interaction -----------------
198
202
  getPointerRenderState() {
199
203
  return (this.interactionController
@@ -34,9 +34,16 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
34
34
  enabled: enableHotkeys,
35
35
  });
36
36
  /* ---------- Image / Engine lifecycle ---------- */
37
+ const isInitialLoadRef = useRef(true);
38
+ const imageLoadingRef = useRef(false);
37
39
  useEffect(() => {
40
+ imageLoadingRef.current = true;
41
+ if (engineRef.current)
42
+ engineRef.current.clearAnnotations();
38
43
  if (!image?.trim()) {
39
- engineRef.current?.resetCanvas();
44
+ engineRef.current?.destroy();
45
+ engineRef.current = null;
46
+ imageLoadingRef.current = false;
40
47
  return;
41
48
  }
42
49
  let cancelled = false;
@@ -46,8 +53,9 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
46
53
  return;
47
54
  }
48
55
  const prevEngine = engineRef.current;
49
- const imageCanvasState = prevEngine && !resetOnImageChange
50
- ? prevEngine.getImageCanvasState()
56
+ const prevImageCanvasState = prevEngine?.getImageCanvasState();
57
+ const imageCanvasState = !resetOnImageChange && prevImageCanvasState
58
+ ? prevImageCanvasState
51
59
  : {
52
60
  moveX: 0,
53
61
  moveY: 0,
@@ -60,8 +68,11 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
60
68
  dh: img.height,
61
69
  initZoom: 1,
62
70
  };
63
- const initialAnnotations = pendingAnnotationsRef.current ?? [];
71
+ const initialAnnotations = isInitialLoadRef.current
72
+ ? (pendingAnnotationsRef.current ?? annotations ?? [])
73
+ : (pendingAnnotationsRef.current ?? []);
64
74
  pendingAnnotationsRef.current = null;
75
+ isInitialLoadRef.current = false;
65
76
  prevEngine?.destroy();
66
77
  engineRef.current = new AnnotationEngine({
67
78
  imageCanvas: imageCanvasRef.current,
@@ -78,13 +89,16 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
78
89
  onChange: () => forceRender((v) => v + 1),
79
90
  });
80
91
  engineRef.current.initImageCanvas(resetOnImageChange);
92
+ imageLoadingRef.current = false;
81
93
  onImageLoadSuccess?.();
82
94
  };
83
95
  img.onerror = () => {
84
96
  if (cancelled)
85
97
  return;
86
98
  pendingAnnotationsRef.current = null;
87
- engineRef.current?.resetCanvas();
99
+ engineRef.current?.destroy();
100
+ engineRef.current = null;
101
+ imageLoadingRef.current = false;
88
102
  onImageLoadError?.(new Error(`Failed to load image: ${image}`));
89
103
  };
90
104
  img.src = image;
@@ -98,6 +112,10 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
98
112
  useEffect(() => {
99
113
  if (!annotations)
100
114
  return;
115
+ if (imageLoadingRef.current) {
116
+ pendingAnnotationsRef.current = annotations;
117
+ return;
118
+ }
101
119
  if (!engineRef.current) {
102
120
  pendingAnnotationsRef.current = annotations;
103
121
  return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deepnoid/canvas",
3
- "version": "0.1.61",
3
+ "version": "0.1.63",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "main": "./dist/index.cjs",