@tldraw/editor 3.15.0 → 3.16.0-canary.0a84defb63a4

package/dist-cjs/lib/components/default-components/DefaultShapeWrapper.js

@@ -0,0 +1,53 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DefaultShapeWrapper_exports = {};
+__export(DefaultShapeWrapper_exports, {
+  DefaultShapeWrapper: () => DefaultShapeWrapper
+});
+module.exports = __toCommonJS(DefaultShapeWrapper_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_classnames = __toESM(require("classnames"));
+var import_react = require("react");
+const DefaultShapeWrapper = (0, import_react.forwardRef)(function DefaultShapeWrapper2({ children, shape, isBackground, ...props }, ref) {
+  const isFilledShape = "fill" in shape.props && shape.props.fill !== "none";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      "data-shape-type": shape.type,
+      "data-shape-is-filled": isBackground ? void 0 : isFilledShape,
+      "data-shape-id": shape.id,
+      draggable: false,
+      ...props,
+      className: (0, import_classnames.default)("tl-shape", isBackground && "tl-shape-background", props.className),
+      children
+    }
+  );
+});
+//# sourceMappingURL=DefaultShapeWrapper.js.map

package/dist-cjs/lib/components/default-components/DefaultShapeWrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/components/default-components/DefaultShapeWrapper.tsx"],
+  "sourcesContent": ["import { TLShape } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { forwardRef, ReactNode } from 'react'\n\n/** @public */\nexport interface TLShapeWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** The shape being rendered. */\n\tshape: TLShape\n\t/** Whether this is the shapes regular, or background component. */\n\tisBackground: boolean\n\t/** The shape's rendered component. */\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport const DefaultShapeWrapper = forwardRef(function DefaultShapeWrapper(\n\t{ children, shape, isBackground, ...props }: TLShapeWrapperProps,\n\tref: React.Ref<HTMLDivElement>\n) {\n\tconst isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none'\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tdata-shape-type={shape.type}\n\t\t\tdata-shape-is-filled={isBackground ? undefined : isFilledShape}\n\t\t\tdata-shape-id={shape.id}\n\t\t\tdraggable={false}\n\t\t\t{...props}\n\t\t\tclassName={classNames('tl-shape', isBackground && 'tl-shape-background', props.className)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBE;AArBF,wBAAuB;AACvB,mBAAsC;AAa/B,MAAM,0BAAsB,yBAAW,SAASA,qBACtD,EAAE,UAAU,OAAO,cAAc,GAAG,MAAM,GAC1C,KACC;AACD,QAAM,gBAAgB,UAAU,MAAM,SAAS,MAAM,MAAM,SAAS;AAEpE,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,mBAAiB,MAAM;AAAA,MACvB,wBAAsB,eAAe,SAAY;AAAA,MACjD,iBAAe,MAAM;AAAA,MACrB,WAAW;AAAA,MACV,GAAG;AAAA,MACJ,eAAW,kBAAAC,SAAW,YAAY,gBAAgB,uBAAuB,MAAM,SAAS;AAAA,MAEvF;AAAA;AAAA,EACF;AAEF,CAAC;",
+  "names": ["DefaultShapeWrapper", "classNames"]
+}

package/dist-cjs/lib/editor/Editor.js

@@ -2323,28 +2323,11 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
         { history: "ignore" }
       );
       const { currentScreenPoint, currentPagePoint } = this.inputs;
-      const { screenBounds } = this.store.unsafeGetWithoutCapture(import_tlschema.TLINSTANCE_ID);
       if (currentScreenPoint.x / z - x !== currentPagePoint.x || currentScreenPoint.y / z - y !== currentPagePoint.y) {
-        const event = {
-          type: "pointer",
-          target: "canvas",
-          name: "pointer_move",
-          // weird but true: we need to put the screen point back into client space
-          point: import_Vec.Vec.AddXY(currentScreenPoint, screenBounds.x, screenBounds.y),
-          pointerId: import_constants.INTERNAL_POINTER_IDS.CAMERA_MOVE,
-          ctrlKey: this.inputs.ctrlKey,
-          altKey: this.inputs.altKey,
-          shiftKey: this.inputs.shiftKey,
-          metaKey: this.inputs.metaKey,
-          accelKey: (0, import_keyboard.isAccelKey)(this.inputs),
-          button: 0,
-          isPen: this.getInstanceState().isPenMode ?? false
-        };
-        if (opts?.immediate) {
-          this._flushEventForTick(event);
-        } else {
-          this.dispatch(event);
-        }
+        this.updatePointer({
+          immediate: opts?.immediate,
+          pointerId: import_constants.INTERNAL_POINTER_IDS.CAMERA_MOVE
+        });
       }
       this._tickCameraState();
     });
@@ -3313,19 +3296,24 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
    */
   deletePage(page) {
     const id = typeof page === "string" ? page : page.id;
-    this.run(() => {
-      if (this.getIsReadonly()) return;
-      const pages = this.getPages();
-      if (pages.length === 1) return;
-      const deletedPage = this.getPage(id);
-      if (!deletedPage) return;
-      if (id === this.getCurrentPageId()) {
-        const index = pages.findIndex((page2) => page2.id === id);
-        const next = pages[index - 1] ?? pages[index + 1];
-        this.setCurrentPage(next.id);
-      }
-      this.store.remove([deletedPage.id]);
-    });
+    this.run(
+      () => {
+        if (this.getIsReadonly()) return;
+        const pages = this.getPages();
+        if (pages.length === 1) return;
+        const deletedPage = this.getPage(id);
+        if (!deletedPage) return;
+        if (id === this.getCurrentPageId()) {
+          const index = pages.findIndex((page2) => page2.id === id);
+          const next = pages[index - 1] ?? pages[index + 1];
+          this.setCurrentPage(next.id);
+        }
+        const shapes = this.getSortedChildIdsForParent(deletedPage.id);
+        this.deleteShapes(shapes);
+        this.store.remove([deletedPage.id]);
+      },
+      { ignoreShapeLock: true }
+    );
     return this;
   }
   /**
@@ -3939,7 +3927,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
       const geometry = this.getShapeGeometry(shape);
       const isGroup = geometry instanceof import_Group2d.Group2d;
       const pointInShapeSpace = this.getPointInShapeSpace(shape, point);
-      if (this.isShapeOfType(shape, "frame") || this.isShapeOfType(shape, "arrow") && shape.props.text.trim() || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && this.getShapeUtil(shape).getText(shape)?.trim()) {
+      if (this.isShapeOfType(shape, "frame") || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && this.getShapeUtil(shape).getText(shape)?.trim()) {
         for (const childGeometry of geometry.children) {
           if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
             return shape;
@@ -7028,6 +7016,47 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     this.dispatch({ type: "misc", name: "complete" });
     return this;
   }
+  /**
+   * Dispatch a pointer move event in the current position of the pointer. This is useful when
+   * external circumstances have changed (e.g. the camera moved or a shape was moved) and you want
+   * the current interaction to respond to that change.
+   *
+   * @example
+   * ```ts
+   * editor.updatePointer()
+   * ```
+   *
+   * @param options - The options for updating the pointer.
+   * @returns The editor instance.
+   * @public
+   */
+  updatePointer(options) {
+    const event = {
+      type: "pointer",
+      target: "canvas",
+      name: "pointer_move",
+      point: options?.point ?? // weird but true: what `inputs` calls screen-space is actually viewport space. so
+      // we need to convert back into true screen space first. we should fix this...
+      import_Vec.Vec.Add(
+        this.inputs.currentScreenPoint,
+        this.store.unsafeGetWithoutCapture(import_tlschema.TLINSTANCE_ID).screenBounds
+      ),
+      pointerId: options?.pointerId ?? 0,
+      button: options?.button ?? 0,
+      isPen: options?.isPen ?? this.inputs.isPen,
+      shiftKey: options?.shiftKey ?? this.inputs.shiftKey,
+      altKey: options?.altKey ?? this.inputs.altKey,
+      ctrlKey: options?.ctrlKey ?? this.inputs.ctrlKey,
+      metaKey: options?.metaKey ?? this.inputs.metaKey,
+      accelKey: options?.accelKey ?? (0, import_keyboard.isAccelKey)(this.inputs)
+    };
+    if (options?.immediate) {
+      this._flushEventForTick(event);
+    } else {
+      this.dispatch(event);
+    }
+    return this;
+  }
   /**
    * Puts the editor into focused mode.
    *