@rollstack/rscanvas 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -3503,31 +3503,149 @@ var PanControl = class {
 };
 
 // src/controls/drag_control.ts
+var ALIGN_THRESHOLD = 5;
+var GUIDE_COLOR = "#4a90d9";
+var SNAP_COLOR = "#e06c75";
 var DragControl = class {
   constructor(canvas) {
-    this._objectId = null;
     this._lastViewX = 0;
     this._lastViewY = 0;
+    this._guideX = null;
+    this._guideY = null;
+    this._guideRect = null;
+    this._snappedX = false;
+    this._snappedY = false;
+    this._guideXEl = null;
+    this._guideYEl = null;
+    this._guideRectEl = null;
+    this._bestDx = Infinity;
+    this._bestDy = Infinity;
+    this._node = null;
+    this._candidateRects = [];
+    this._visitObjectForSnap = (other) => {
+      if (!this._node || other.getId() === this._node.getId()) {
+        return;
+      }
+      for (const xe of [other.getX(), other.getX() + other.getWidth()]) {
+        for (const de of [
+          this._node.getX() - xe,
+          this._node.getX() + this._node.getWidth() - xe
+        ]) {
+          if (Math.abs(de) < ALIGN_THRESHOLD && Math.abs(de) < Math.abs(this._bestDx)) {
+            this._bestDx = de;
+          }
+        }
+      }
+      for (const ye of [other.getY(), other.getY() + other.getHeight()]) {
+        for (const de of [
+          this._node.getY() - ye,
+          this._node.getY() + this._node.getHeight() - ye
+        ]) {
+          if (Math.abs(de) < ALIGN_THRESHOLD && Math.abs(de) < Math.abs(this._bestDy)) {
+            this._bestDy = de;
+          }
+        }
+      }
+    };
+    this._visitObjectForGuides = (other) => {
+      if (!this._node || other.getId() === this._node.getId()) {
+        return;
+      }
+      const dragCx = this._node.getX() + this._node.getWidth() / 2;
+      const dragCy = this._node.getY() + this._node.getHeight() / 2;
+      let matched = false;
+      for (const xe of [other.getX(), other.getX() + other.getWidth()]) {
+        if (Math.abs(this._node.getX() - xe) < ALIGN_THRESHOLD || Math.abs(this._node.getX() + this._node.getWidth() - xe) < ALIGN_THRESHOLD) {
+          if (this._guideX === null) {
+            this._guideX = xe;
+          }
+          matched = true;
+        }
+      }
+      for (const ye of [other.getY(), other.getY() + other.getHeight()]) {
+        if (Math.abs(this._node.getY() - ye) < ALIGN_THRESHOLD || Math.abs(this._node.getY() + this._node.getHeight() - ye) < ALIGN_THRESHOLD) {
+          if (this._guideY === null) {
+            this._guideY = ye;
+          }
+          matched = true;
+        }
+      }
+      if (matched) {
+        const distSq = (dragCx - (other.getX() + other.getWidth() / 2)) ** 2 + (dragCy - (other.getY() + other.getHeight() / 2)) ** 2;
+        this._candidateRects.push({
+          rect: {
+            x: other.getX(),
+            y: other.getY(),
+            w: other.getWidth(),
+            h: other.getHeight()
+          },
+          distSq
+        });
+      }
+    };
     this._canvas = canvas;
   }
+  _updateGuidesAndSnap() {
+    if (!this._node) {
+      return;
+    }
+    this._bestDx = Infinity;
+    this._bestDy = Infinity;
+    this._guideX = null;
+    this._guideY = null;
+    this._guideRect = null;
+    this._snappedX = false;
+    this._snappedY = false;
+    this._canvas.forEachObject(this._visitObjectForSnap);
+    const snapX = Math.abs(this._bestDx) < ALIGN_THRESHOLD ? -this._bestDx : 0;
+    const snapY = Math.abs(this._bestDy) < ALIGN_THRESHOLD ? -this._bestDy : 0;
+    this._snappedX = snapX !== 0;
+    this._snappedY = snapY !== 0;
+    if (snapX !== 0 || snapY !== 0) {
+      this._canvas.translateObject(this._node.getId(), snapX, snapY);
+    }
+    this._candidateRects.length = 0;
+    this._canvas.forEachObject(this._visitObjectForGuides);
+    let bestRect = null;
+    for (const c of this._candidateRects) {
+      if (bestRect === null || c.distSq < bestRect.distSq) {
+        bestRect = c;
+      }
+    }
+    this._guideRect = bestRect !== null ? bestRect.rect : null;
+  }
+  _clearGuides() {
+    this._node = null;
+    this._guideX = null;
+    this._guideY = null;
+    this._guideRect = null;
+    this._snappedX = false;
+    this._snappedY = false;
+  }
   handleEvent(event) {
     if (event.type === "mousedown") {
-      const objectId = this._canvas.objectIdAtXY(event.viewX ?? 0, event.viewY ?? 0);
+      const objectId = this._canvas.objectIdAtXY(
+        event.viewX ?? 0,
+        event.viewY ?? 0
+      );
       if (!objectId) {
         return null;
       }
-      this._objectId = objectId;
+      this._node = this._canvas.getObjectNode(objectId);
+      if (!this._node) {
+        return null;
+      }
       this._lastViewX = event.viewX ?? 0;
       this._lastViewY = event.viewY ?? 0;
       this._canvas.changeCursor("grabbing");
       return this;
     }
     if (event.type === "mouseup" || event.type === "mouseleave") {
-      this._objectId = null;
+      this._clearGuides();
       this._canvas.changeCursor("default");
       return null;
     }
-    if (event.type === "mousemove" && this._objectId) {
+    if (event.type === "mousemove" && this._node) {
       const viewX = event.viewX ?? 0;
       const viewY = event.viewY ?? 0;
       const scale = this._canvas.getScale();
@@ -3535,24 +3653,79 @@ var DragControl = class {
       const dy = (viewY - this._lastViewY) / scale;
       this._lastViewX = viewX;
       this._lastViewY = viewY;
-      this._canvas.translateObject(this._objectId, dx, dy);
+      this._canvas.translateObject(this._node.getId(), dx, dy);
+      this._updateGuidesAndSnap();
       this._canvas.changeCursor("grabbing");
       return this;
     }
     if (event.type === "mousemove") {
-      if (this._canvas.objectIdAtLowerRightCorner(event.viewX ?? 0, event.viewY ?? 0) || this._canvas.objectIdAtUpperRightCorner(event.viewX ?? 0, event.viewY ?? 0)) {
+      if (this._canvas.objectIdAtLowerRightCorner(
+        event.viewX ?? 0,
+        event.viewY ?? 0
+      ) || this._canvas.objectIdAtUpperRightCorner(
+        event.viewX ?? 0,
+        event.viewY ?? 0
+      )) {
         return null;
       }
-      const objectId = this._canvas.objectIdAtXY(event.viewX ?? 0, event.viewY ?? 0);
+      const objectId = this._canvas.objectIdAtXY(
+        event.viewX ?? 0,
+        event.viewY ?? 0
+      );
       if (objectId) {
         this._canvas.changeCursor("grab");
       }
     }
     return null;
   }
-  render(_node) {
+  render(node) {
+    if (this._guideX !== null) {
+      if (!this._guideXEl) {
+        this._guideXEl = document.createElement("div");
+        node.appendChild(this._guideXEl);
+      }
+      const xColor = this._snappedX ? SNAP_COLOR : GUIDE_COLOR;
+      this._guideXEl.style.cssText = `position:absolute;left:${this._guideX}px;top:0;width:1px;height:${this._canvas.getCanvasHeight()}px;background:${xColor};pointer-events:none`;
+    } else if (this._guideXEl) {
+      this._guideXEl.remove();
+      this._guideXEl = null;
+    }
+    if (this._guideY !== null) {
+      if (!this._guideYEl) {
+        this._guideYEl = document.createElement("div");
+        node.appendChild(this._guideYEl);
+      }
+      const yColor = this._snappedY ? SNAP_COLOR : GUIDE_COLOR;
+      this._guideYEl.style.cssText = `position:absolute;left:0;top:${this._guideY}px;width:${this._canvas.getCanvasWidth()}px;height:1px;background:${yColor};pointer-events:none`;
+    } else if (this._guideYEl) {
+      this._guideYEl.remove();
+      this._guideYEl = null;
+    }
+    if (this._guideRect !== null) {
+      const r = this._guideRect;
+      if (!this._guideRectEl) {
+        this._guideRectEl = document.createElement("div");
+        node.appendChild(this._guideRectEl);
+      }
+      this._guideRectEl.style.cssText = `position:absolute;left:${r.x}px;top:${r.y}px;width:${r.w}px;height:${r.h}px;border:1px solid ${GUIDE_COLOR};pointer-events:none;box-sizing:border-box`;
+    } else if (this._guideRectEl) {
+      this._guideRectEl.remove();
+      this._guideRectEl = null;
+    }
   }
   destroy() {
+    if (this._guideXEl) {
+      this._guideXEl.remove();
+      this._guideXEl = null;
+    }
+    if (this._guideYEl) {
+      this._guideYEl.remove();
+      this._guideYEl = null;
+    }
+    if (this._guideRectEl) {
+      this._guideRectEl.remove();
+      this._guideRectEl = null;
+    }
   }
 };
 
@@ -3680,7 +3853,7 @@ var DeleteControl = class {
 };
 
 // src/controls/keyboard_move_control.ts
-var ARROW_KEY_STEP = 8;
+var ARROW_KEY_STEP_VIEW = 2;
 var KeyboardMoveControl = class {
   constructor(canvas) {
     this._canvas = canvas;
@@ -3693,16 +3866,17 @@ var KeyboardMoveControl = class {
     if (!id) {
       return null;
     }
+    const step = this._canvas.toWorldSize(ARROW_KEY_STEP_VIEW);
     let dx = 0;
     let dy = 0;
     if (event.key === "ArrowLeft") {
-      dx = -ARROW_KEY_STEP;
+      dx = -step;
     } else if (event.key === "ArrowRight") {
-      dx = ARROW_KEY_STEP;
+      dx = step;
     } else if (event.key === "ArrowUp") {
-      dy = -ARROW_KEY_STEP;
+      dy = -step;
     } else if (event.key === "ArrowDown") {
-      dy = ARROW_KEY_STEP;
+      dy = step;
     } else {
       return null;
     }
@@ -3776,6 +3950,8 @@ var RSCanvas = class {
     this._translateX = 0;
     this._translateY = 0;
     this._objects = {};
+    this._slides = [{ id: "default", objects: {} }];
+    this._selectedSlideId = "default";
     this._objectConstructors = /* @__PURE__ */ new Map();
     this._objectEditorConstructors = /* @__PURE__ */ new Map();
     this._editingObjectId = null;
@@ -3792,6 +3968,25 @@ var RSCanvas = class {
     this._cornerPosScratch = { worldX: 0, worldY: 0 };
     this._boundingClientRect = { left: 0, top: 0 };
     this._controls = [];
+    this._onPaint = () => {
+      this._rafId = null;
+      if (this._pendingState) {
+        if (this._pendingStateVersion >= this._internalStateVersion) {
+          this._updateObjectTree(this._pendingState);
+        }
+        this._pendingState = null;
+      }
+      if (this._dirtyTransform) {
+        this._dirtyTransform = false;
+        this._innerContainerNode.style.transform = `translate(${this._translateX}px, ${this._translateY}px) scale(${this._scale})`;
+      }
+      for (const id in this._objects) {
+        this._objects[id].render();
+      }
+      for (const ctrl of this._controls) {
+        ctrl.render(this._overlayNode);
+      }
+    };
     this._onMouseDown = (e) => {
       if (this._destroyed || this._editingObjectId) {
         return;
@@ -3898,7 +4093,6 @@ var RSCanvas = class {
       this._dispatchToControls(event);
     };
     this._localInvalidate = () => this._invalidate();
-    this._onPaint = () => this._paint();
     this._containerNode = container;
     this._width = options?.width ?? 1200;
     this._height = options?.height ?? 800;
@@ -3995,25 +4189,6 @@ var RSCanvas = class {
       }
     }
   }
-  _paint() {
-    this._rafId = null;
-    if (this._pendingState) {
-      if (this._pendingStateVersion >= this._internalStateVersion) {
-        this._updateObjectTree(this._pendingState);
-      }
-      this._pendingState = null;
-    }
-    if (this._dirtyTransform) {
-      this._dirtyTransform = false;
-      this._innerContainerNode.style.transform = `translate(${this._translateX}px, ${this._translateY}px) scale(${this._scale})`;
-    }
-    for (const id in this._objects) {
-      this._objects[id].render();
-    }
-    for (const ctrl of this._controls) {
-      ctrl.render(this._overlayNode);
-    }
-  }
   _invalidate() {
     if (this._rafId != null) {
       return;
@@ -4101,6 +4276,14 @@ var RSCanvas = class {
   _getObjectEditorConstructor(objectType) {
     return this._objectEditorConstructors.get(objectType) ?? null;
   }
+  _findSlideIndexById(slideId) {
+    for (let i = 0; i < this._slides.length; i++) {
+      if (this._slides[i].id === slideId) {
+        return i;
+      }
+    }
+    return -1;
+  }
   _updateObjectTree(objects) {
     for (const id in this._objects) {
       if (!(id in objects)) {
@@ -4147,47 +4330,73 @@ var RSCanvas = class {
     this._objectEditorConstructors.set(objectType, constructor);
   }
   setState(state) {
-    this._pendingState = state.objects ?? {};
+    this._slides = state.slides ?? [];
+    if (this._slides.length === 0) {
+      this._selectedSlideId = null;
+      this._pendingState = {};
+    } else {
+      const idx = this._selectedSlideId !== null ? this._findSlideIndexById(this._selectedSlideId) : -1;
+      if (idx < 0) {
+        this._selectedSlideId = this._slides[0].id;
+      }
+      this._pendingState = this._slides[this._findSlideIndexById(this._selectedSlideId)]?.objects ?? {};
+    }
     this._pendingStateVersion = this._internalStateVersion;
     this._invalidate();
   }
   getStateSFCT(state) {
-    if (!state.objects) {
-      state.objects = {};
-    }
-    for (const id in this._objects) {
-      const node = this._objects[id];
-      const cfg = state.objects[id];
-      if (cfg) {
-        cfg.type = node.getType();
-        cfg.x = node.getX();
-        cfg.y = node.getY();
-        cfg.width = node.getWidth();
-        cfg.height = node.getHeight();
-        cfg.rotation = node.getRotation();
-        if (!cfg.options) {
-          cfg.options = {};
+    if (!state.slides) {
+      state.slides = [];
+    }
+    state.slides.length = this._slides.length;
+    const selectedIdx = this._selectedSlideId !== null ? this._findSlideIndexById(this._selectedSlideId) : -1;
+    for (let i = 0; i < this._slides.length; i++) {
+      if (i === selectedIdx) {
+        let slide = state.slides[i];
+        if (!slide) {
+          slide = { id: this._slides[i].id, objects: {} };
+          state.slides[i] = slide;
+        }
+        for (const id in this._objects) {
+          const node = this._objects[id];
+          let cfg = slide.objects[id];
+          if (!cfg) {
+            cfg = {};
+            slide.objects[id] = cfg;
+          }
+          cfg.type = node.getType();
+          cfg.x = node.getX();
+          cfg.y = node.getY();
+          cfg.width = node.getWidth();
+          cfg.height = node.getHeight();
+          cfg.rotation = node.getRotation();
+          if (!cfg.options) {
+            cfg.options = {};
+          }
+          node.getOptionsSFCT(cfg.options);
+        }
+        for (const id in slide.objects) {
+          if (!(id in this._objects)) {
+            delete slide.objects[id];
+          }
         }
-        node.getOptionsSFCT(cfg.options);
       } else {
-        const options = {};
-        node.getOptionsSFCT(options);
-        state.objects[id] = {
-          type: node.getType(),
-          x: node.getX(),
-          y: node.getY(),
-          width: node.getWidth(),
-          height: node.getHeight(),
-          rotation: node.getRotation(),
-          options
-        };
+        state.slides[i] = this._slides[i];
       }
     }
-    for (const id in state.objects) {
-      if (!(id in this._objects)) {
-        delete state.objects[id];
-      }
+  }
+  getSelectedSlideId() {
+    return this._selectedSlideId;
+  }
+  setSelectedSlide(slideId) {
+    const idx = this._findSlideIndexById(slideId);
+    if (idx < 0 || slideId === this._selectedSlideId) {
+      return;
     }
+    this._selectedSlideId = slideId;
+    this._pendingState = this._slides[idx]?.objects ?? {};
+    this._pendingStateVersion = this._internalStateVersion;
+    this._invalidate();
   }
   changeCursor(cursor) {
     this._containerNode.style.cursor = cursor;
@@ -4200,6 +4409,9 @@ var RSCanvas = class {
   getScale() {
     return this._scale;
   }
+  toWorldSize(viewSize) {
+    return viewSize / this._scale;
+  }
   toWorldX(viewX) {
     return (viewX - this._translateX) / this._scale;
   }
@@ -4400,6 +4612,11 @@ var RSCanvas = class {
     this._emitStateChanged();
     this._invalidate();
   }
+  forEachObject(fn) {
+    for (const id in this._objects) {
+      fn(this._objects[id]);
+    }
+  }
   async saveToImage(callback) {
     const clone = this._innerContainerNode.cloneNode(true);
     clone.style.transform = "none";