tldraw/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js

A tiny little drawing editor.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Pointing_exports = {};
__export(Pointing_exports, {
  Pointing: () => Pointing
});
module.exports = __toCommonJS(Pointing_exports);
var import_editor = require("@tldraw/editor");
var import_arrowTargetState = require("../arrowTargetState");
class Pointing extends import_editor.StateNode {
  static id = "pointing";
  shape;
  isPrecise = false;
  isPreciseTimerId = null;
  markId = "";
  onEnter(info) {
    this.markId = "";
    this.isPrecise = !!info.isPrecise;
    const targetState = (0, import_arrowTargetState.updateArrowTargetState)({
      editor: this.editor,
      pointInPageSpace: this.editor.inputs.getCurrentPagePoint(),
      arrow: void 0,
      isPrecise: this.isPrecise,
      currentBinding: void 0,
      oppositeBinding: void 0
    });
    if (!targetState) {
      this.createArrowShape();
      if (!this.shape) {
        this.cancel();
        return;
      }
    }
    this.startPreciseTimeout();
  }
  onExit() {
    this.shape = void 0;
    (0, import_arrowTargetState.clearArrowTargetState)(this.editor);
    this.clearPreciseTimeout();
  }
  onPointerMove() {
    if (this.editor.inputs.getIsDragging()) {
      if (!this.shape) {
        this.createArrowShape();
      }
      if (!this.shape) {
        this.cancel();
        return;
      }
      this.updateArrowShapeEndHandle();
      this.editor.setCurrentTool("select.dragging_handle", {
        shape: this.shape,
        handle: { id: "end", type: "vertex", index: "a3", x: 0, y: 0 },
        isCreating: true,
        creatingMarkId: this.markId || void 0,
        onInteractionEnd: "arrow"
      });
    }
  }
  onPointerUp() {
    this.cancel();
  }
  onCancel() {
    this.cancel();
  }
  onComplete() {
    this.cancel();
  }
  onInterrupt() {
    this.cancel();
  }
  cancel() {
    if (this.shape) {
      this.editor.bailToMark(this.markId);
    }
    this.parent.transition("idle");
  }
  createArrowShape() {
    const originPagePoint = this.editor.inputs.getOriginPagePoint();
    const id = (0, import_editor.createShapeId)();
    this.markId = this.editor.markHistoryStoppingPoint(`creating_arrow:${id}`);
    const newPoint = (0, import_editor.maybeSnapToGrid)(originPagePoint, this.editor);
    this.editor.createShape({
      id,
      type: "arrow",
      x: newPoint.x,
      y: newPoint.y,
      props: {
        scale: this.editor.getResizeScaleFactor()
      }
    });
    const shape = this.editor.getShape(id);
    if (!shape) return;
    const handles = this.editor.getShapeHandles(shape);
    if (!handles) throw Error(`expected handles for arrow`);
    const util = this.editor.getShapeUtil("arrow");
    const initial = this.shape;
    const startHandle = handles.find((h) => h.id === "start");
    const change = util.onHandleDrag?.(shape, {
      handle: { ...startHandle, x: 0, y: 0 },
      isPrecise: true,
      isCreatingShape: true,
      initial
    });
    if (change) {
      this.editor.updateShapes([change]);
    }
    this.shape = this.editor.getShape(id);
    this.editor.select(id);
  }
  updateArrowShapeEndHandle() {
    const shape = this.shape;
    if (!shape) throw Error(`expected shape`);
    const handles = this.editor.getShapeHandles(shape);
    if (!handles) throw Error(`expected handles for arrow`);
    {
      const util = this.editor.getShapeUtil("arrow");
      const initial = this.shape;
      const startHandle = handles.find((h) => h.id === "start");
      const change = util.onHandleDrag?.(shape, {
        handle: { ...startHandle, x: 0, y: 0 },
        isPrecise: this.isPrecise,
        isCreatingShape: true,
        initial
      });
      if (change) {
        this.editor.updateShapes([change]);
      }
    }
    {
      const util = this.editor.getShapeUtil("arrow");
      const initial = this.shape;
      const point = this.editor.getPointInShapeSpace(
        shape,
        this.editor.inputs.getCurrentPagePoint()
      );
      const endHandle = handles.find((h) => h.id === "end");
      const change = util.onHandleDrag?.(this.editor.getShape(shape), {
        handle: { ...endHandle, x: point.x, y: point.y },
        isPrecise: this.isPrecise,
        isCreatingShape: true,
        initial
      });
      if (change) {
        this.editor.updateShapes([change]);
      }
    }
    this.shape = this.editor.getShape(shape.id);
  }
  startPreciseTimeout() {
    const arrowUtil = this.editor.getShapeUtil("arrow");
    this.isPreciseTimerId = this.editor.timers.setTimeout(() => {
      if (!this.getIsActive()) return;
      this.isPrecise = true;
    }, arrowUtil.options.pointingPreciseTimeout);
  }
  clearPreciseTimeout() {
    if (this.isPreciseTimerId !== null) {
      clearTimeout(this.isPreciseTimerId);
    }
  }
}
//# sourceMappingURL=Pointing.js.map