@blokkli/editor 1.0.0

package/dist/runtime/components/Edit/Features/Artboard/Manager/Artboard.js

@@ -0,0 +1,748 @@
+import { easeOutQuad } from "#blokkli/helpers/easing";
+import { lerp, calculateCenterPosition } from "#blokkli/helpers";
+class Queue {
+  queue = [];
+  timeQueue = [];
+  reset() {
+    this.queue.splice(0);
+    this.timeQueue.splice(0);
+  }
+  pruneQueue(ms) {
+    while (this.timeQueue.length && this.timeQueue[0] < Date.now() - ms) {
+      this.timeQueue.shift();
+      this.queue.shift();
+    }
+  }
+  add(position) {
+    this.queue.push(position);
+    this.timeQueue.push(Date.now());
+    this.pruneQueue(50);
+  }
+}
+class VelocityQueue extends Queue {
+  max;
+  constructor(max) {
+    super();
+    this.max = max;
+  }
+  getVelocity() {
+    this.pruneQueue(1e3);
+    const length = this.timeQueue.length;
+    if (length < 2) return { x: 0, y: 0 };
+    const distanceX = this.queue[length - 1].x - this.queue[0].x;
+    const distanceY = this.queue[length - 1].y - this.queue[0].y;
+    const time = (this.timeQueue[length - 1] - this.timeQueue[0]) / 1e3;
+    const x = this.limit(distanceX / time * 0.03);
+    const y = this.limit(distanceY / time * 0.03);
+    return { x, y };
+  }
+  limit(v) {
+    return Math.min(Math.max(v, -this.max), this.max);
+  }
+}
+class ScaleVelocityQueue extends Queue {
+  getVelocity() {
+    this.pruneQueue(1e3);
+    const length = this.timeQueue.length;
+    if (length < 2) return 0;
+    const distance = this.queue[length - 1] - this.queue[0];
+    const time = (this.timeQueue[length - 1] - this.timeQueue[0]) / 1e3;
+    return distance / time * 0.03;
+  }
+}
+function applyRubberBandEffect(value, min, max, factor = 0.5) {
+  if (value < min) {
+    return min - (min - value) * factor;
+  } else if (value > max) {
+    return max + (value - max) * factor;
+  }
+  return value;
+}
+export class Artboard {
+  /**
+   * The element containing the artboard that can be moved and zoomed.
+   */
+  artboardEl;
+  /**
+   * The parent/root element that defines the area in which the artboard can be interacted with.
+   */
+  rootEl;
+  /**
+   * The minimum scale amount.
+   */
+  minScale = 0.1;
+  /**
+   * The maximum scale amount.
+   */
+  maxScale = 3;
+  /**
+   * The maximum move velocity.
+   */
+  maxVelocity = 200;
+  /**
+   * The current scale of the artboard.
+   */
+  scale = 1;
+  /**
+   * The padding area inside the root element.
+   */
+  padding = 20;
+  /**
+   * The multiplier for scrolling using the mouse wheel.
+   */
+  scrollSpeed = 1;
+  /**
+   * The current arboard offset/translation.
+   */
+  offset;
+  /**
+   * The native size of the artboard (without any scaling).
+   */
+  artboardSize;
+  /**
+   * The native size of the root element.
+   */
+  rootSize;
+  /**
+   * The target state for the current animation.
+   */
+  animationTarget = null;
+  /**
+   * The last touch coordinate (or the midpoint of two touches when scaling).
+   */
+  lastTouch;
+  /**
+   * Whether the user is currently dragging the artboard.
+   */
+  isDragging = false;
+  /**
+   * Whether the user is currently scaling the artboard using touch gestures.
+   */
+  isScaling = false;
+  /**
+   * The calculated velocity of a drag gesture.
+   */
+  velocity = { x: 0, y: 0 };
+  /**
+   * The queue containing the last touches to calculate the velocity.
+   */
+  velocityQueue;
+  /**
+   * The calculated scale velocity.
+   */
+  scaleVelocity = 0;
+  /**
+   * The queue containing the last scaling values during a scale gesture.
+   */
+  scaleVelocityQueue;
+  /**
+   * Whether the animation loop is performing momentum scrolling.
+   */
+  isMomentumScrolling = false;
+  /**
+   * The detected touch direction.
+   */
+  touchDirection = "none";
+  /**
+   * The coordinate at which the first touch event fired.
+   */
+  initialTouchPoint = null;
+  /**
+   * The offset at the time the first touch event fired.
+   */
+  initialOffset = { x: 0, y: 0 };
+  scaleMidpoint = null;
+  initialTouchDistance = 0;
+  initialScale = 1;
+  moveStartOffset = null;
+  moveStartCoords = null;
+  isPressingSpace = false;
+  /**
+   * Whether the user is currently touching the artboard with at least one finger.
+   */
+  isTouching = false;
+  getBlockingRects = null;
+  listeners = {};
+  resizeObserver;
+  scaleStartCoords = null;
+  lastScaleTimestamp = 0;
+  /**
+   * The timestamp of the last call to animateTo().
+   */
+  lastAnimateToTimestamp = 0;
+  /**
+   * Construct a new Artboard.
+   */
+  constructor(el, rootEl, options) {
+    this.artboardEl = el;
+    this.rootEl = rootEl;
+    this.offset = {
+      x: options?.x || 0,
+      y: options?.y || 0
+    };
+    this.lastTouch = null;
+    this.artboardSize = {
+      width: el.offsetWidth,
+      height: el.offsetHeight
+    };
+    this.velocityQueue = new VelocityQueue(200);
+    this.scaleVelocityQueue = new ScaleVelocityQueue();
+    this.rootSize = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    if (options) {
+      this.setOptions(options);
+    }
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === el) {
+          const size = entry.contentBoxSize[0];
+          if (!size) {
+            return;
+          }
+          this.artboardSize.width = size.inlineSize;
+          this.artboardSize.height = size.blockSize;
+        } else if (entry.target === rootEl) {
+          const size = entry.contentBoxSize[0];
+          if (!size) {
+            return;
+          }
+          this.rootSize.width = size.inlineSize;
+          this.rootSize.height = size.blockSize;
+        }
+      }
+    });
+    this.resizeObserver.observe(this.artboardEl);
+    this.resizeObserver.observe(this.rootEl);
+    this.initListeners();
+  }
+  setOptions(options) {
+    if (options.scrollSpeed) {
+      this.scrollSpeed = options.scrollSpeed;
+    }
+    if (options.padding) {
+      this.padding = options.padding;
+    }
+    if (options.scale) {
+      this.scale = options.scale;
+    }
+    if (options.minScale) {
+      this.minScale = options.minScale;
+    }
+    if (options.maxScale) {
+      this.maxScale = options.maxScale;
+    }
+    if (options.getBlockingRects) {
+      this.getBlockingRects = options.getBlockingRects;
+    }
+    if (options.maxVelocity) {
+      this.maxVelocity = options.maxVelocity;
+    }
+  }
+  initListeners() {
+    this.listeners.onWheel = this.onWheel.bind(this);
+    document.documentElement.addEventListener("wheel", this.listeners.onWheel, {
+      passive: false
+    });
+    this.listeners.onTouchStart = this.onTouchStart.bind(this);
+    this.rootEl.addEventListener("touchstart", this.listeners.onTouchStart, {
+      passive: false
+    });
+    this.listeners.onTouchMove = this.onTouchMove.bind(this);
+    this.rootEl.addEventListener("touchmove", this.listeners.onTouchMove, {
+      passive: false
+    });
+    this.listeners.onTouchEnd = this.onTouchEnd.bind(this);
+    this.rootEl.addEventListener("touchend", this.listeners.onTouchEnd, {
+      passive: false,
+      capture: true
+    });
+    this.listeners.onMouseDown = this.onMouseDown.bind(this);
+    this.rootEl.addEventListener("mousedown", this.listeners.onMouseDown, {
+      passive: false,
+      capture: true
+    });
+    this.listeners.onMouseUp = this.onMouseUp.bind(this);
+    this.rootEl.addEventListener("mouseup", this.listeners.onMouseUp, {
+      passive: false
+    });
+    this.listeners.onKeyDown = this.onKeyDown.bind(this);
+    document.addEventListener("keydown", this.listeners.onKeyDown, {
+      passive: false
+    });
+    this.listeners.onKeyUp = this.onKeyUp.bind(this);
+    document.addEventListener("keyup", this.listeners.onKeyUp, {
+      passive: false
+    });
+  }
+  onKeyDown(e) {
+    if (e.code === "Space" && !this.isPressingSpace) {
+      this.isPressingSpace = true;
+    }
+  }
+  onKeyUp() {
+    this.isPressingSpace = false;
+    this.moveStartOffset = null;
+    this.moveStartCoords = null;
+  }
+  onMouseDown(e) {
+    if (this.isMomentumScrolling || this.isPressingSpace) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    this.isMomentumScrolling = false;
+    if (e.buttons === 1 && this.isPressingSpace || e.buttons === 2 && !this.isPressingSpace) {
+      e.preventDefault();
+      this.onDragStart([e]);
+      this.listeners.onMouseMove = this.onMouseMove.bind(this);
+      document.removeEventListener("mousemove", this.listeners.onMouseMove);
+      document.addEventListener("mousemove", this.listeners.onMouseMove);
+    }
+  }
+  onMouseUp() {
+    document.removeEventListener("mousemove", this.listeners.onMouseMove);
+    this.onDragEnd();
+  }
+  onMouseMove(e) {
+    if (!this.isPressingSpace) {
+      this.onDragEnd();
+      document.removeEventListener("mousemove", this.listeners.onMouseMove);
+      return;
+    }
+    this.onDragMove([e]);
+  }
+  getDistance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+  getTouchDistance(touches) {
+    return this.getDistance(
+      {
+        x: touches[0].clientX,
+        y: touches[0].clientY
+      },
+      {
+        x: touches[1].clientX,
+        y: touches[1].clientY
+      }
+    );
+  }
+  getMidpoint(touches) {
+    const x = touches[0].clientX;
+    const y = touches[0].clientY;
+    if (touches.length === 1) {
+      return {
+        x,
+        y
+      };
+    }
+    return {
+      x: (x + touches[1].clientX) / 2,
+      y: (y + touches[1].clientY) / 2
+    };
+  }
+  onDragStart(touches) {
+    this.animationTarget = null;
+    this.lastTouch = {
+      x: touches[0].clientX,
+      y: touches[0].clientY
+    };
+    this.initialTouchPoint = { ...this.lastTouch };
+    this.touchDirection = "none";
+    this.initialOffset = { ...this.offset };
+    this.velocity = { x: 0, y: 0 };
+    this.velocityQueue.reset();
+    this.scaleVelocityQueue.reset();
+    this.scaleVelocity = 0;
+  }
+  onDragMove(touches) {
+    if (!this.lastTouch || !this.initialTouchPoint) {
+      this.onDragStart(touches);
+      return;
+    }
+    const midpoint = this.getMidpoint(touches);
+    const focalPoint = {
+      x: (midpoint.x - this.offset.x) / this.scale,
+      y: (midpoint.y - this.offset.y) / this.scale
+    };
+    this.velocityQueue.add(midpoint);
+    if (touches.length === 2) {
+      this.isDragging = false;
+      if (!this.scaleStartCoords) {
+        this.scaleStartCoords = { ...this.lastTouch };
+      }
+      if (!this.isScaling) {
+        this.isScaling = true;
+        this.lastTouch = { x: midpoint.x, y: midpoint.y };
+      }
+      this.velocityQueue.reset();
+      const newTouchDistance = this.getTouchDistance(touches);
+      const scaleFactor = newTouchDistance / this.initialTouchDistance;
+      const newScale = this.initialScale * scaleFactor;
+      this.scaleVelocityQueue.add(newScale);
+      this.setScale(newScale);
+      const diffX2 = midpoint.x - this.lastTouch.x;
+      const diffY2 = midpoint.y - this.lastTouch.y;
+      const newOffsetX = midpoint.x - focalPoint.x * this.scale;
+      const newOffsetY = midpoint.y - focalPoint.y * this.scale;
+      this.scaleMidpoint = {
+        x: midpoint.x,
+        y: midpoint.y
+      };
+      this.setOffset(newOffsetX + diffX2, newOffsetY + diffY2);
+      this.lastTouch = { x: midpoint.x, y: midpoint.y };
+      this.lastScaleTimestamp = Date.now();
+      return;
+    }
+    if (this.isScaling) {
+      if (Date.now() - this.lastScaleTimestamp < 200) {
+        return;
+      }
+      this.isScaling = false;
+      this.touchDirection = "none";
+      this.isMomentumScrolling = false;
+      this.initialTouchPoint = { ...midpoint };
+      this.initialOffset = { ...this.offset };
+      this.lastTouch = { ...midpoint };
+      return;
+    }
+    this.scaleStartCoords = null;
+    this.isScaling = false;
+    this.isDragging = true;
+    const diffX = midpoint.x - this.initialTouchPoint.x;
+    const diffY = midpoint.y - this.initialTouchPoint.y;
+    if (this.touchDirection === "none") {
+      const deltaX = Math.abs(midpoint.x - this.initialTouchPoint.x);
+      const deltaY = Math.abs(midpoint.y - this.initialTouchPoint.y);
+      const thresholdRatio = 0.9;
+      const ratio = deltaY > 0 ? deltaX / deltaY : deltaX;
+      if (ratio > 1 + thresholdRatio) {
+        this.touchDirection = "horizontal";
+      } else if (ratio < 1 - thresholdRatio) {
+        this.touchDirection = "vertical";
+      } else {
+        this.touchDirection = "both";
+      }
+    }
+    let moveX = 0;
+    let moveY = 0;
+    switch (this.touchDirection) {
+      case "horizontal":
+        moveX = diffX;
+        break;
+      case "vertical":
+        moveY = diffY;
+        break;
+      case "both":
+        moveX = diffX;
+        moveY = diffY;
+        break;
+    }
+    this.setOffset(this.initialOffset.x + moveX, this.initialOffset.y + moveY);
+    this.lastTouch = { x: midpoint.x, y: midpoint.y };
+  }
+  resetDraggingState() {
+    this.isDragging = false;
+    this.isScaling = false;
+  }
+  onDragEnd() {
+    this.resetDraggingState();
+    if (!this.initialTouchPoint || !this.lastTouch) {
+      return;
+    }
+    const velocity = this.velocityQueue.getVelocity();
+    const totalVelocity = Math.abs(velocity.x) + Math.abs(velocity.y);
+    if (totalVelocity < 40) {
+      this.velocity = { x: 0, y: 0 };
+      this.isMomentumScrolling = false;
+    } else {
+      if (this.touchDirection === "horizontal" || this.touchDirection === "both") {
+        this.velocity.x = velocity.x;
+      }
+      if (this.touchDirection === "vertical" || this.touchDirection === "both") {
+        this.velocity.y = velocity.y;
+      }
+      this.isMomentumScrolling = true;
+    }
+    const scaleVelocity = this.scaleVelocityQueue.getVelocity() / 7;
+    if (scaleVelocity > 0.01) {
+      this.scaleVelocity = scaleVelocity;
+      this.isMomentumScrolling = false;
+    }
+    this.initialTouchPoint = null;
+  }
+  onTouchStart(e) {
+    this.isTouching = true;
+    if (e.touches.length === 1) {
+      this.onDragStart(e.touches);
+    }
+    if (e.touches.length === 2) {
+      this.initialTouchDistance = this.getTouchDistance(e.touches);
+      this.initialScale = this.scale;
+    }
+  }
+  onTouchMove(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.onDragMove(e.touches);
+  }
+  onTouchEnd(e) {
+    if (this.isDragging || this.isMomentumScrolling) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+    if (e.touches.length === 0) {
+      this.isTouching = false;
+      this.onDragEnd();
+    }
+  }
+  destroy() {
+    this.artboardEl.style.transform = "";
+    this.resizeObserver.disconnect();
+    this.rootEl.removeEventListener("touchstart", this.listeners.onTouchStart);
+    this.rootEl.removeEventListener("touchmove", this.listeners.onTouchMove);
+    this.rootEl.removeEventListener("touchend", this.listeners.onTouchEnd, {
+      capture: true
+    });
+    this.rootEl.removeEventListener("mousedown", this.listeners.onMouseDown);
+    this.rootEl.removeEventListener("mouseup", this.listeners.onMouseUp);
+    document.documentElement.removeEventListener(
+      "wheel",
+      this.listeners.onWheel
+    );
+    document.removeEventListener("keydown", this.listeners.onKeyDown);
+    document.removeEventListener("keyup", this.listeners.onKeyUp);
+    document.removeEventListener("mousemove", this.listeners.onMouseMove);
+  }
+  loop() {
+    if (this.isMomentumScrolling && !this.isDragging) {
+      const deceleration = 0.95;
+      let stopMomentumX = false;
+      let stopMomentumY = false;
+      const boundaries = this.getBoundaries();
+      const isOutsideY = boundaries.yMax - this.offset.y < -1 || boundaries.yMin - this.offset.y > 1;
+      const isOutsideX = boundaries.xMax - this.offset.x < -1 || boundaries.xMin - this.offset.x > 1;
+      if (this.touchDirection === "horizontal" || this.touchDirection === "both") {
+        this.velocity.x *= deceleration;
+        if (Math.abs(this.velocity.x) < 0.01) {
+          stopMomentumX = true;
+        }
+      }
+      if (this.touchDirection === "vertical" || this.touchDirection === "both") {
+        this.velocity.y *= deceleration;
+        if (Math.abs(this.velocity.y) < 0.01) {
+          stopMomentumY = true;
+        }
+      }
+      this.setOffset(
+        this.offset.x + this.velocity.x,
+        this.offset.y + this.velocity.y
+      );
+      if (!isOutsideY && !isOutsideX && (stopMomentumX || this.touchDirection !== "horizontal" && this.touchDirection !== "both") && (stopMomentumY || this.touchDirection !== "vertical" && this.touchDirection !== "both")) {
+        this.isMomentumScrolling = false;
+        this.velocity = { x: 0, y: 0 };
+        this.touchDirection = "none";
+      }
+    } else if (this.animationTarget) {
+      const easedAlpha = easeOutQuad(this.animationTarget.alpha);
+      const x = lerp(this.offset.x, this.animationTarget.x, easedAlpha);
+      const y = lerp(this.offset.y, this.animationTarget.y, easedAlpha);
+      this.setOffset(x, y);
+      const newScale = lerp(this.scale, this.animationTarget.scale, easedAlpha);
+      this.scale = newScale;
+      if (this.animationTarget.alpha < 1) {
+        this.animationTarget.alpha += this.animationTarget.speed;
+      }
+      if (Math.abs(this.offset.x - this.animationTarget.x) < 1 && Math.abs(this.offset.y - this.animationTarget.y) < 1 && Math.abs(this.scale - this.animationTarget.scale) < 0.02) {
+        this.offset.x = this.animationTarget.x;
+        this.offset.y = this.animationTarget.y;
+        this.scale = this.animationTarget.scale;
+        this.animationTarget = null;
+      }
+    } else if (this.scaleVelocity && this.scaleMidpoint) {
+    }
+    if (!this.isScaling && this.scaleMidpoint) {
+      const x = this.scaleMidpoint.x;
+      const y = this.scaleMidpoint.y;
+      const targetX = (x - this.offset.x) / this.scale;
+      const targetY = (y - this.offset.y) / this.scale;
+      if (Math.abs(this.scale - this.maxScale) > 0.01 && Math.abs(this.scale - this.minScale) > 0.01) {
+        const newScale = applyRubberBandEffect(
+          this.scale,
+          this.minScale,
+          this.maxScale,
+          0.7
+        );
+        this.scale = newScale;
+        this.setOffset(-targetX * this.scale + x, -targetY * this.scale + y);
+      } else {
+        this.isScaling = false;
+        if (this.scale > this.maxScale) {
+          this.scale = this.maxScale;
+        } else if (this.scale < this.minScale) {
+          this.scale = this.minScale;
+        }
+        this.setOffset(-targetX * this.scale + x, -targetY * this.scale + y);
+      }
+    }
+    this.updateStyles();
+  }
+  getCenterX(targetScale) {
+    const scaleToUse = targetScale || this.scale;
+    const blockingRects = this.getBlockingRects ? this.getBlockingRects() : [];
+    return calculateCenterPosition(
+      blockingRects,
+      { ...this.rootSize, x: 0, y: 0 },
+      this.artboardEl.offsetWidth * scaleToUse
+    );
+  }
+  animateTo(x, y, targetScale) {
+    this.isMomentumScrolling = false;
+    this.lastTouch = null;
+    this.initialTouchPoint = null;
+    this.isScaling = false;
+    this.animationTarget = {
+      x,
+      y,
+      scale: targetScale || this.scale,
+      alpha: 0,
+      speed: 0.01
+    };
+  }
+  getEndY() {
+    const v = this.artboardSize.height * this.scale;
+    return -v + this.rootSize.height - this.padding;
+  }
+  animateOrJumpBy(y) {
+    const diff = Date.now() - this.lastAnimateToTimestamp;
+    if (diff < 300) {
+      this.setOffset(
+        this.offset.x,
+        (this.animationTarget?.y || this.offset.y) + y
+      );
+      this.animationTarget = null;
+    } else {
+      this.animateTo(this.offset.x, this.offset.y + y);
+    }
+    this.lastAnimateToTimestamp = Date.now();
+  }
+  animateOrJumpTo(y) {
+    const diff = Date.now() - this.lastAnimateToTimestamp;
+    if (diff < 300) {
+      this.setOffset(
+        this.offset.x,
+        (this.animationTarget?.y || this.offset.y) + y
+      );
+      this.animationTarget = null;
+    } else {
+      this.animateTo(this.offset.x, y);
+    }
+    this.lastAnimateToTimestamp = Date.now();
+  }
+  scrollPageUp() {
+    this.animateOrJumpBy(this.rootSize.height);
+  }
+  scrollPageDown() {
+    this.animateOrJumpBy(-this.rootSize.height);
+  }
+  scrollPageLeft() {
+    this.animateOrJumpTo(
+      Math.min(this.offset.y + this.rootSize.height, this.padding)
+    );
+  }
+  scrollPageRight() {
+    this.animateOrJumpTo(
+      Math.max(this.offset.y - this.rootSize.height, this.getEndY())
+    );
+  }
+  scrollToTop() {
+    this.animateOrJumpTo(this.padding * 2);
+  }
+  scrollToEnd() {
+    this.animateOrJumpTo(this.getEndY());
+  }
+  scaleToFit() {
+    const targetScale = (this.rootSize.height - this.padding) / this.artboardSize.height;
+    this.animateTo(this.getCenterX(targetScale), this.padding / 2, targetScale);
+  }
+  resetZoom() {
+    const viewportCenterY = this.rootSize.height / 2;
+    const currentCenterOnArtboard = (-this.offset.y + viewportCenterY) / this.scale;
+    if (this.artboardSize.height < this.rootSize.height) {
+      const newYOffset2 = this.rootSize.height / 2 - this.artboardSize.height / 2;
+      return this.animateTo(this.getCenterX(1), newYOffset2, 1);
+    }
+    const newYOffset = Math.min(
+      Math.max(
+        -currentCenterOnArtboard + viewportCenterY,
+        -this.artboardSize.height + this.rootSize.height - this.padding
+      ),
+      this.padding * 2
+    );
+    this.animateTo(this.getCenterX(1), newYOffset, 1);
+  }
+  updateStyles() {
+    this.artboardEl.style.transform = `translate3d(${Math.round(this.offset.x * 10) / 10}px, ${Math.round(this.offset.y * 10) / 10}px, 0px) scale(${this.scale.toString()}) `;
+  }
+  getBoundaries(providedScale) {
+    const targetScale = providedScale || this.scale;
+    const artboardWidth = this.artboardSize.width * targetScale;
+    const artboardHeight = this.artboardSize.height * targetScale;
+    const xMin = -artboardWidth + 100 + 70;
+    const xMax = this.rootSize.width - 50 - 100;
+    const yMin = -artboardHeight;
+    const yMax = this.rootSize.height - 50;
+    return { xMin, xMax, yMin, yMax };
+  }
+  setScale(newScale) {
+    this.scale = applyRubberBandEffect(
+      newScale,
+      this.minScale,
+      this.maxScale,
+      0.2
+    );
+  }
+  setOffset(x, y) {
+    const { xMin, xMax, yMin, yMax } = this.getBoundaries();
+    const adjustedX = applyRubberBandEffect(x, xMin, xMax);
+    const adjustedY = applyRubberBandEffect(y, yMin, yMax);
+    if (this.rootSize.width < 500) {
+      this.offset.x = this.rootSize.width / 2 - this.artboardSize.width * this.scale / 2;
+    } else {
+      this.offset.x = adjustedX;
+    }
+    this.offset.y = adjustedY;
+  }
+  stopAnimate() {
+    this.animationTarget = null;
+    this.isMomentumScrolling = false;
+    this.velocity = { x: 0, y: 0 };
+  }
+  scaleAroundPoint(x, y, newScale) {
+    const targetX = (x - this.offset.x) / this.scale;
+    const targetY = (y - this.offset.y) / this.scale;
+    this.setScale(newScale);
+    this.setOffset(-targetX * this.scale + x, -targetY * this.scale + y);
+  }
+  doZoom(x, y, delta) {
+    const SCALE_BASE = 1.1;
+    const scaleFactor = Math.pow(SCALE_BASE, -Math.sign(delta) / 1.25);
+    const newScale = this.scale * scaleFactor;
+    this.scaleAroundPoint(x, y, newScale);
+  }
+  onWheel(e) {
+    this.stopAnimate();
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.ctrlKey) {
+      this.doZoom(e.pageX, e.pageY, e.deltaY);
+    } else {
+      this.setOffset(
+        this.offset.x + -(e.deltaX * this.scrollSpeed),
+        this.offset.y + -(e.deltaY * this.scrollSpeed)
+      );
+    }
+  }
+}