@tldraw/editor 3.16.0-next.f9f54ec051f3 → 4.0.0

package/dist-cjs/lib/hooks/useHandleEvents.js

@@ -44,7 +44,7 @@ function useHandleEvents(id, handleId) {
   const editor = (0, import_useEditor.useEditor)();
   return React.useMemo(() => {
     const onPointerDown = (e) => {
-      if (e.isKilled) return;
+      if (editor.wasEventAlreadyHandled(e)) return;
       const target = (0, import_dom.loopToHtmlElement)(e.currentTarget);
       (0, import_dom.setPointerCapture)(target, e);
       const { shape, handle } = getHandle(editor, id, handleId);
@@ -55,12 +55,12 @@ function useHandleEvents(id, handleId) {
         handle,
         shape,
         name: "pointer_down",
-        ...(0, import_getPointerInfo.getPointerInfo)(e)
+        ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
       });
     };
     let lastX, lastY;
     const onPointerMove = (e) => {
-      if (e.isKilled) return;
+      if (editor.wasEventAlreadyHandled(e)) return;
       if (e.clientX === lastX && e.clientY === lastY) return;
       lastX = e.clientX;
       lastY = e.clientY;
@@ -72,11 +72,11 @@ function useHandleEvents(id, handleId) {
         handle,
         shape,
         name: "pointer_move",
-        ...(0, import_getPointerInfo.getPointerInfo)(e)
+        ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
       });
     };
     const onPointerUp = (e) => {
-      if (e.isKilled) return;
+      if (editor.wasEventAlreadyHandled(e)) return;
       const target = (0, import_dom.loopToHtmlElement)(e.currentTarget);
       (0, import_dom.releasePointerCapture)(target, e);
       const { shape, handle } = getHandle(editor, id, handleId);
@@ -87,7 +87,7 @@ function useHandleEvents(id, handleId) {
         handle,
         shape,
         name: "pointer_up",
-        ...(0, import_getPointerInfo.getPointerInfo)(e)
+        ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
       });
     };
     return {

package/dist-cjs/lib/hooks/useHandleEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useHandleEvents.ts"],
-  "sourcesContent": ["import { TLArrowShape, TLLineShape, TLShapeId } from '@tldraw/tlschema'\nimport * as React from 'react'\nimport { Editor } from '../editor/Editor'\nimport { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\nfunction getHandle(editor: Editor, id: TLShapeId, handleId: string) {\n\tconst shape = editor.getShape<TLArrowShape | TLLineShape>(id)!\n\tconst handles = editor.getShapeHandles(shape)!\n\treturn { shape, handle: handles.find((h) => h.id === handleId) }\n}\n\nexport function useHandleEvents(id: TLShapeId, handleId: string) {\n\tconst editor = useEditor()\n\n\treturn React.useMemo(() => {\n\t\tconst onPointerDown = (e: React.PointerEvent) => {\n\t\t\tif ((e as any).isKilled) return\n\n\t\t\t// Must set pointer capture on an HTML element!\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\tsetPointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_down',\n\t\t\t\t...getPointerInfo(e),\n\t\t\t})\n\t\t}\n\n\t\t// Track the last screen point\n\t\tlet lastX: number, lastY: number\n\n\t\tconst onPointerMove = (e: React.PointerEvent) => {\n\t\t\tif ((e as any).isKilled) return\n\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\tlastX = e.clientX\n\t\t\tlastY = e.clientY\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(e),\n\t\t\t})\n\t\t}\n\n\t\tconst onPointerUp = (e: React.PointerEvent) => {\n\t\t\tif ((e as any).isKilled) return\n\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\treleasePointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_up',\n\t\t\t\t...getPointerInfo(e),\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonPointerDown,\n\t\t\tonPointerMove,\n\t\t\tonPointerUp,\n\t\t}\n\t}, [editor, id, handleId])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEvB,iBAA4E;AAC5E,4BAA+B;AAC/B,uBAA0B;AAE1B,SAAS,UAAU,QAAgB,IAAe,UAAkB;AACnE,QAAM,QAAQ,OAAO,SAAqC,EAAE;AAC5D,QAAM,UAAU,OAAO,gBAAgB,KAAK;AAC5C,SAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ,EAAE;AAChE;AAEO,SAAS,gBAAgB,IAAe,UAAkB;AAChE,QAAM,aAAS,4BAAU;AAEzB,SAAO,MAAM,QAAQ,MAAM;AAC1B,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAK,EAAU,SAAU;AAGzB,YAAM,aAAS,8BAAkB,EAAE,aAAa;AAChD,wCAAkB,QAAQ,CAAC;AAE3B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,CAAC;AAAA,MACpB,CAAC;AAAA,IACF;AAGA,QAAI,OAAe;AAEnB,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAK,EAAU,SAAU;AACzB,UAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,cAAQ,EAAE;AACV,cAAQ,EAAE;AAEV,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,CAAC;AAAA,MACpB,CAAC;AAAA,IACF;AAEA,UAAM,cAAc,CAAC,MAA0B;AAC9C,UAAK,EAAU,SAAU;AAEzB,YAAM,aAAS,8BAAkB,EAAE,aAAa;AAChD,4CAAsB,QAAQ,CAAC;AAE/B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,CAAC;AAAA,MACpB,CAAC;AAAA,IACF;AAEA,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC;AAC1B;",
+  "sourcesContent": ["import { TLArrowShape, TLLineShape, TLShapeId } from '@tldraw/tlschema'\nimport * as React from 'react'\nimport { Editor } from '../editor/Editor'\nimport { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\nfunction getHandle(editor: Editor, id: TLShapeId, handleId: string) {\n\tconst shape = editor.getShape<TLArrowShape | TLLineShape>(id)!\n\tconst handles = editor.getShapeHandles(shape)!\n\treturn { shape, handle: handles.find((h) => h.id === handleId) }\n}\n\nexport function useHandleEvents(id: TLShapeId, handleId: string) {\n\tconst editor = useEditor()\n\n\treturn React.useMemo(() => {\n\t\tconst onPointerDown = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\t// Must set pointer capture on an HTML element!\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\tsetPointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_down',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\t// Track the last screen point\n\t\tlet lastX: number, lastY: number\n\n\t\tconst onPointerMove = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\tlastX = e.clientX\n\t\t\tlastY = e.clientY\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\tconst onPointerUp = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\treleasePointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_up',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonPointerDown,\n\t\t\tonPointerMove,\n\t\t\tonPointerUp,\n\t\t}\n\t}, [editor, id, handleId])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEvB,iBAA4E;AAC5E,4BAA+B;AAC/B,uBAA0B;AAE1B,SAAS,UAAU,QAAgB,IAAe,UAAkB;AACnE,QAAM,QAAQ,OAAO,SAAqC,EAAE;AAC5D,QAAM,UAAU,OAAO,gBAAgB,KAAK;AAC5C,SAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ,EAAE;AAChE;AAEO,SAAS,gBAAgB,IAAe,UAAkB;AAChE,QAAM,aAAS,4BAAU;AAEzB,SAAO,MAAM,QAAQ,MAAM;AAC1B,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAI,OAAO,uBAAuB,CAAC,EAAG;AAGtC,YAAM,aAAS,8BAAkB,EAAE,aAAa;AAChD,wCAAkB,QAAQ,CAAC;AAE3B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAGA,QAAI,OAAe;AAEnB,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,UAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,cAAQ,EAAE;AACV,cAAQ,EAAE;AAEV,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAEA,UAAM,cAAc,CAAC,MAA0B;AAC9C,UAAI,OAAO,uBAAuB,CAAC,EAAG;AAEtC,YAAM,aAAS,8BAAkB,EAAE,aAAa;AAChD,4CAAsB,QAAQ,CAAC;AAE/B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAEA,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC;AAC1B;",
   "names": []
 }

package/dist-cjs/lib/hooks/usePassThroughMouseOverEvents.js

@@ -24,11 +24,14 @@ module.exports = __toCommonJS(usePassThroughMouseOverEvents_exports);
 var import_react = require("react");
 var import_dom = require("../utils/dom");
 var import_useContainer = require("./useContainer");
+var import_useEditor = require("./useEditor");
 function usePassThroughMouseOverEvents(ref) {
   if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
   const container = (0, import_useContainer.useContainer)();
+  const editor = (0, import_useEditor.useMaybeEditor)();
   (0, import_react.useEffect)(() => {
     function onMouseOver(e) {
+      if (!editor?.getInstanceState().isFocused) return;
       if (e.isSpecialRedispatchedEvent) return;
       (0, import_dom.preventDefault)(e);
       const cvs = container.querySelector(".tl-canvas");
@@ -43,6 +46,6 @@ function usePassThroughMouseOverEvents(ref) {
     return () => {
       elm.removeEventListener("mouseover", onMouseOver);
     };
-  }, [container, ref]);
+  }, [container, editor, ref]);
 }
 //# sourceMappingURL=usePassThroughMouseOverEvents.js.map

package/dist-cjs/lib/hooks/usePassThroughMouseOverEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/usePassThroughMouseOverEvents.ts"],
-  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\n\n/** @public */\nexport function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\n\tuseEffect(() => {\n\t\tfunction onMouseOver(e: MouseEvent) {\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new PointerEvent(e.type, e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('mouseover', onMouseOver, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('mouseover', onMouseOver)\n\t\t}\n\t}, [container, ref])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,iBAA+B;AAC/B,0BAA6B;AAGtB,SAAS,8BAA8B,KAA6B;AAC1E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAE/B,8BAAU,MAAM;AACf,aAAS,YAAY,GAAe;AACnC,UAAK,EAAU,2BAA4B;AAC3C,qCAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,aAAa,EAAE,MAAM,CAAQ;AACjD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM;AACZ,UAAI,oBAAoB,aAAa,WAAW;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,WAAW,GAAG,CAAC;AACpB;",
+  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\n/** @public */\nexport function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onMouseOver(e: MouseEvent) {\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new PointerEvent(e.type, e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('mouseover', onMouseOver, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('mouseover', onMouseOver)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,iBAA+B;AAC/B,0BAA6B;AAC7B,uBAA+B;AAGxB,SAAS,8BAA8B,KAA6B;AAC1E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAC/B,QAAM,aAAS,iCAAe;AAE9B,8BAAU,MAAM;AACf,aAAS,YAAY,GAAe;AACnC,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAC3C,UAAK,EAAU,2BAA4B;AAC3C,qCAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,aAAa,EAAE,MAAM,CAAQ;AACjD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM;AACZ,UAAI,oBAAoB,aAAa,WAAW;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
   "names": []
 }

package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js

@@ -24,11 +24,14 @@ module.exports = __toCommonJS(usePassThroughWheelEvents_exports);
 var import_react = require("react");
 var import_dom = require("../utils/dom");
 var import_useContainer = require("./useContainer");
+var import_useEditor = require("./useEditor");
 function usePassThroughWheelEvents(ref) {
   if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
   const container = (0, import_useContainer.useContainer)();
+  const editor = (0, import_useEditor.useMaybeEditor)();
   (0, import_react.useEffect)(() => {
     function onWheel(e) {
+      if (!editor?.getInstanceState().isFocused) return;
       if (e.isSpecialRedispatchedEvent) return;
       const elm2 = ref.current;
       if (elm2 && elm2.scrollHeight > elm2.clientHeight) {
@@ -47,6 +50,6 @@ function usePassThroughWheelEvents(ref) {
     return () => {
       elm.removeEventListener("wheel", onWheel);
     };
-  }, [container, ref]);
+  }, [container, editor, ref]);
 }
 //# sourceMappingURL=usePassThroughWheelEvents.js.map

package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/usePassThroughWheelEvents.ts"],
-  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\n\tuseEffect(() => {\n\t\tfunction onWheel(e: WheelEvent) {\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t\t// if the element is scrollable, don't redispatch the event\n\t\t\tconst elm = ref.current\n\t\t\tif (elm && elm.scrollHeight > elm.clientHeight) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('wheel', onWheel, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('wheel', onWheel)\n\t\t}\n\t}, [container, ref])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,iBAA+B;AAC/B,0BAA6B;AAGtB,SAAS,0BAA0B,KAA6B;AACtE,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAE/B,8BAAU,MAAM;AACf,aAAS,QAAQ,GAAe;AAC/B,UAAK,EAAU,2BAA4B;AAG3C,YAAMA,OAAM,IAAI;AAChB,UAAIA,QAAOA,KAAI,eAAeA,KAAI,cAAc;AAC/C;AAAA,MACD;AAEA,qCAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AACzD,WAAO,MAAM;AACZ,UAAI,oBAAoB,SAAS,OAAO;AAAA,IACzC;AAAA,EACD,GAAG,CAAC,WAAW,GAAG,CAAC;AACpB;",
+  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onWheel(e: WheelEvent) {\n\t\t\t// Only pass through wheel events if the editor is focused\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t\t// if the element is scrollable, don't redispatch the event\n\t\t\tconst elm = ref.current\n\t\t\tif (elm && elm.scrollHeight > elm.clientHeight) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('wheel', onWheel, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('wheel', onWheel)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,iBAA+B;AAC/B,0BAA6B;AAC7B,uBAA+B;AAGxB,SAAS,0BAA0B,KAA6B;AACtE,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAC/B,QAAM,aAAS,iCAAe;AAE9B,8BAAU,MAAM;AACf,aAAS,QAAQ,GAAe;AAE/B,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,UAAK,EAAU,2BAA4B;AAG3C,YAAMA,OAAM,IAAI;AAChB,UAAIA,QAAOA,KAAI,eAAeA,KAAI,cAAc;AAC/C;AAAA,MACD;AAEA,qCAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AACzD,WAAO,MAAM;AACZ,UAAI,oBAAoB,SAAS,OAAO;AAAA,IACzC;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
   "names": ["elm"]
 }

package/dist-cjs/lib/hooks/useSelectionEvents.js

@@ -31,14 +31,14 @@ function useSelectionEvents(handle) {
   const events = (0, import_react.useMemo)(
     function selectionEvents() {
       const onPointerDown = (e) => {
-        if (e.isKilled) return;
+        if (editor.wasEventAlreadyHandled(e)) return;
         if (e.button === import_constants.RIGHT_MOUSE_BUTTON) {
           editor.dispatch({
             type: "pointer",
             target: "selection",
             handle,
             name: "right_click",
-            ...(0, import_getPointerInfo.getPointerInfo)(e)
+            ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
           });
           return;
         }
@@ -55,13 +55,13 @@ function useSelectionEvents(handle) {
           type: "pointer",
           target: "selection",
           handle,
-          ...(0, import_getPointerInfo.getPointerInfo)(e)
+          ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
         });
-        (0, import_dom.stopEventPropagation)(e);
+        editor.markEventAsHandled(e);
       };
       let lastX, lastY;
       function onPointerMove(e) {
-        if (e.isKilled) return;
+        if (editor.wasEventAlreadyHandled(e)) return;
         if (e.button !== 0) return;
         if (e.clientX === lastX && e.clientY === lastY) return;
         lastX = e.clientX;
@@ -71,18 +71,18 @@ function useSelectionEvents(handle) {
           type: "pointer",
           target: "selection",
           handle,
-          ...(0, import_getPointerInfo.getPointerInfo)(e)
+          ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
         });
       }
       const onPointerUp = (e) => {
-        if (e.isKilled) return;
+        if (editor.wasEventAlreadyHandled(e)) return;
         if (e.button !== 0) return;
         editor.dispatch({
           name: "pointer_up",
           type: "pointer",
           target: "selection",
           handle,
-          ...(0, import_getPointerInfo.getPointerInfo)(e)
+          ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
         });
       };
       return {

package/dist-cjs/lib/hooks/useSelectionEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useSelectionEvents.ts"],
-  "sourcesContent": ["import { useMemo } from 'react'\nimport { RIGHT_MOUSE_BUTTON } from '../constants'\nimport { TLSelectionHandle } from '../editor/types/selection-types'\nimport {\n\tloopToHtmlElement,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tstopEventPropagation,\n} from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\n/** @public */\nexport function useSelectionEvents(handle: TLSelectionHandle) {\n\tconst editor = useEditor()\n\n\tconst events = useMemo(\n\t\tfunction selectionEvents() {\n\t\t\tconst onPointerDown: React.PointerEventHandler = (e) => {\n\t\t\t\tif ((e as any).isKilled) return\n\n\t\t\t\tif (e.button === RIGHT_MOUSE_BUTTON) {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\t\thandle,\n\t\t\t\t\t\tname: 'right_click',\n\t\t\t\t\t\t...getPointerInfo(e),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\t// Because the events are probably set on SVG elements,\n\t\t\t\t// we need to instead place pointer capture on the first HTML\n\t\t\t\t// element above the event's target; and set a listener to\n\t\t\t\t// remove pointer capture when the pointer is released.\n\n\t\t\t\tconst elm = loopToHtmlElement(e.currentTarget)\n\n\t\t\t\tfunction releaseCapture() {\n\t\t\t\t\telm.removeEventListener('pointerup', releaseCapture)\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\n\t\t\t\tsetPointerCapture(elm, e)\n\t\t\t\telm.addEventListener('pointerup', releaseCapture)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(e),\n\t\t\t\t})\n\t\t\t\tstopEventPropagation(e)\n\t\t\t}\n\n\t\t\t// Track the last screen point\n\t\t\tlet lastX: number, lastY: number\n\n\t\t\tfunction onPointerMove(e: React.PointerEvent) {\n\t\t\t\tif ((e as any).isKilled) return\n\t\t\t\tif (e.button !== 0) return\n\t\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\t\tlastX = e.clientX\n\t\t\t\tlastY = e.clientY\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tconst onPointerUp: React.PointerEventHandler = (e) => {\n\t\t\t\tif ((e as any).isKilled) return\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonPointerDown,\n\t\t\t\tonPointerMove,\n\t\t\t\tonPointerUp,\n\t\t\t}\n\t\t},\n\t\t[editor, handle]\n\t)\n\n\treturn events\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AACxB,uBAAmC;AAEnC,iBAKO;AACP,4BAA+B;AAC/B,uBAA0B;AAGnB,SAAS,mBAAmB,QAA2B;AAC7D,QAAM,aAAS,4BAAU;AAEzB,QAAM,aAAS;AAAA,IACd,SAAS,kBAAkB;AAC1B,YAAM,gBAA2C,CAAC,MAAM;AACvD,YAAK,EAAU,SAAU;AAEzB,YAAI,EAAE,WAAW,qCAAoB;AACpC,iBAAO,SAAS;AAAA,YACf,MAAM;AAAA,YACN,QAAQ;AAAA,YACR;AAAA,YACA,MAAM;AAAA,YACN,OAAG,sCAAe,CAAC;AAAA,UACpB,CAAC;AACD;AAAA,QACD;AAEA,YAAI,EAAE,WAAW,EAAG;AAOpB,cAAM,UAAM,8BAAkB,EAAE,aAAa;AAE7C,iBAAS,iBAAiB;AACzB,cAAI,oBAAoB,aAAa,cAAc;AACnD,gDAAsB,KAAK,CAAC;AAAA,QAC7B;AAEA,0CAAkB,KAAK,CAAC;AACxB,YAAI,iBAAiB,aAAa,cAAc;AAEhD,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,CAAC;AAAA,QACpB,CAAC;AACD,6CAAqB,CAAC;AAAA,MACvB;AAGA,UAAI,OAAe;AAEnB,eAAS,cAAc,GAAuB;AAC7C,YAAK,EAAU,SAAU;AACzB,YAAI,EAAE,WAAW,EAAG;AACpB,YAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,gBAAQ,EAAE;AACV,gBAAQ,EAAE;AAEV,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,CAAC;AAAA,QACpB,CAAC;AAAA,MACF;AAEA,YAAM,cAAyC,CAAC,MAAM;AACrD,YAAK,EAAU,SAAU;AACzB,YAAI,EAAE,WAAW,EAAG;AAEpB,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,CAAC;AAAA,QACpB,CAAC;AAAA,MACF;AAEA,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,MAAM;AAAA,EAChB;AAEA,SAAO;AACR;",
+  "sourcesContent": ["import { useMemo } from 'react'\nimport { RIGHT_MOUSE_BUTTON } from '../constants'\nimport { TLSelectionHandle } from '../editor/types/selection-types'\nimport { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\n/** @public */\nexport function useSelectionEvents(handle: TLSelectionHandle) {\n\tconst editor = useEditor()\n\n\tconst events = useMemo(\n\t\tfunction selectionEvents() {\n\t\t\tconst onPointerDown: React.PointerEventHandler = (e) => {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\t\tif (e.button === RIGHT_MOUSE_BUTTON) {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\t\thandle,\n\t\t\t\t\t\tname: 'right_click',\n\t\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\t// Because the events are probably set on SVG elements,\n\t\t\t\t// we need to instead place pointer capture on the first HTML\n\t\t\t\t// element above the event's target; and set a listener to\n\t\t\t\t// remove pointer capture when the pointer is released.\n\n\t\t\t\tconst elm = loopToHtmlElement(e.currentTarget)\n\n\t\t\t\tfunction releaseCapture() {\n\t\t\t\t\telm.removeEventListener('pointerup', releaseCapture)\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\n\t\t\t\tsetPointerCapture(elm, e)\n\t\t\t\telm.addEventListener('pointerup', releaseCapture)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t}\n\n\t\t\t// Track the last screen point\n\t\t\tlet lastX: number, lastY: number\n\n\t\t\tfunction onPointerMove(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (e.button !== 0) return\n\t\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\t\tlastX = e.clientX\n\t\t\t\tlastY = e.clientY\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tconst onPointerUp: React.PointerEventHandler = (e) => {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonPointerDown,\n\t\t\t\tonPointerMove,\n\t\t\t\tonPointerUp,\n\t\t\t}\n\t\t},\n\t\t[editor, handle]\n\t)\n\n\treturn events\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AACxB,uBAAmC;AAEnC,iBAA4E;AAC5E,4BAA+B;AAC/B,uBAA0B;AAGnB,SAAS,mBAAmB,QAA2B;AAC7D,QAAM,aAAS,4BAAU;AAEzB,QAAM,aAAS;AAAA,IACd,SAAS,kBAAkB;AAC1B,YAAM,gBAA2C,CAAC,MAAM;AACvD,YAAI,OAAO,uBAAuB,CAAC,EAAG;AAEtC,YAAI,EAAE,WAAW,qCAAoB;AACpC,iBAAO,SAAS;AAAA,YACf,MAAM;AAAA,YACN,QAAQ;AAAA,YACR;AAAA,YACA,MAAM;AAAA,YACN,OAAG,sCAAe,QAAQ,CAAC;AAAA,UAC5B,CAAC;AACD;AAAA,QACD;AAEA,YAAI,EAAE,WAAW,EAAG;AAOpB,cAAM,UAAM,8BAAkB,EAAE,aAAa;AAE7C,iBAAS,iBAAiB;AACzB,cAAI,oBAAoB,aAAa,cAAc;AACnD,gDAAsB,KAAK,CAAC;AAAA,QAC7B;AAEA,0CAAkB,KAAK,CAAC;AACxB,YAAI,iBAAiB,aAAa,cAAc;AAEhD,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AACD,eAAO,mBAAmB,CAAC;AAAA,MAC5B;AAGA,UAAI,OAAe;AAEnB,eAAS,cAAc,GAAuB;AAC7C,YAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,YAAI,EAAE,WAAW,EAAG;AACpB,YAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,gBAAQ,EAAE;AACV,gBAAQ,EAAE;AAEV,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AAAA,MACF;AAEA,YAAM,cAAyC,CAAC,MAAM;AACrD,YAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,YAAI,EAAE,WAAW,EAAG;AAEpB,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AAAA,MACF;AAEA,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,MAAM;AAAA,EAChB;AAEA,SAAO;AACR;",
   "names": []
 }

package/dist-cjs/lib/{utils/nearestMultiple.js → hooks/useStateAttribute.js}

@@ -16,19 +16,20 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var nearestMultiple_exports = {};
-__export(nearestMultiple_exports, {
-  nearestMultiple: () => nearestMultiple
+var useStateAttribute_exports = {};
+__export(useStateAttribute_exports, {
+  useStateAttribute: () => useStateAttribute
 });
-module.exports = __toCommonJS(nearestMultiple_exports);
-function gcd(a, b) {
-  return b === 0 ? a : gcd(b, a % b);
+module.exports = __toCommonJS(useStateAttribute_exports);
+var import_state = require("@tldraw/state");
+var import_react = require("react");
+var import_useEditor = require("./useEditor");
+function useStateAttribute() {
+  const editor = (0, import_useEditor.useEditor)();
+  (0, import_react.useLayoutEffect)(() => {
+    return (0, import_state.react)("stateAttribute", () => {
+      editor.getContainer().setAttribute("data-state", editor.getPath());
+    });
+  }, [editor]);
 }
-function nearestMultiple(float) {
-  const decimal = float.toString().split(".")[1];
-  if (!decimal) return 1;
-  const denominator = Math.pow(10, decimal.length);
-  const numerator = parseInt(decimal, 10);
-  return denominator / gcd(numerator, denominator);
-}
-//# sourceMappingURL=nearestMultiple.js.map
+//# sourceMappingURL=useStateAttribute.js.map

package/dist-cjs/lib/hooks/useStateAttribute.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/hooks/useStateAttribute.ts"],
+  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useLayoutEffect } from 'react'\nimport { useEditor } from './useEditor'\n\nexport function useStateAttribute() {\n\tconst editor = useEditor()\n\n\t// we use a layout effect because we don't want there to be any perceptible delay between the\n\t// editor mounting and this attribute being applied, because styles may depend on it:\n\tuseLayoutEffect(() => {\n\t\treturn react('stateAttribute', () => {\n\t\t\teditor.getContainer().setAttribute('data-state', editor.getPath())\n\t\t})\n\t}, [editor])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,mBAAgC;AAChC,uBAA0B;AAEnB,SAAS,oBAAoB;AACnC,QAAM,aAAS,4BAAU;AAIzB,oCAAgB,MAAM;AACrB,eAAO,oBAAM,kBAAkB,MAAM;AACpC,aAAO,aAAa,EAAE,aAAa,cAAc,OAAO,QAAQ,CAAC;AAAA,IAClE,CAAC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACZ;",
+  "names": []
+}

package/dist-cjs/lib/license/LicenseManager.js

@@ -21,20 +21,30 @@ __export(LicenseManager_exports, {
   FLAGS: () => FLAGS,
   LicenseManager: () => LicenseManager,
   PROPERTIES: () => PROPERTIES,
-  isEditorUnlicensed: () => isEditorUnlicensed
+  getLicenseState: () => getLicenseState
 });
 module.exports = __toCommonJS(LicenseManager_exports);
 var import_state = require("@tldraw/state");
-var import_utils = require("@tldraw/utils");
 var import_version = require("../../version");
 var import_assets = require("../utils/assets");
 var import_licensing = require("../utils/licensing");
-const GRACE_PERIOD_DAYS = 5;
+const GRACE_PERIOD_DAYS = 30;
 const FLAGS = {
+  // -- MUTUALLY EXCLUSIVE FLAGS --
+  // Annual means the license expires after a time period, usually 1 year.
   ANNUAL_LICENSE: 1,
-  PERPETUAL_LICENSE: 2,
-  INTERNAL_LICENSE: 4,
-  WITH_WATERMARK: 8
+  // Perpetual means the license never expires up to the max supported version.
+  PERPETUAL_LICENSE: 1 << 1,
+  // -- ADDITIVE FLAGS --
+  // Internal means the license is for internal use only.
+  INTERNAL_LICENSE: 1 << 2,
+  // Watermark means the product is watermarked.
+  WITH_WATERMARK: 1 << 3,
+  // Evaluation means the license is for evaluation purposes only.
+  EVALUATION_LICENSE: 1 << 4,
+  // Native means the license is for native apps which switches
+  // on special-case logic.
+  NATIVE_LICENSE: 1 << 5
 };
 const HIGHEST_FLAG = Math.max(...Object.values(FLAGS));
 const PROPERTIES = {
@@ -51,10 +61,7 @@ class LicenseManager {
   isDevelopment;
   isTest;
   isCryptoAvailable;
-  state = (0, import_state.atom)(
-    "license state",
-    "pending"
-  );
+  state = (0, import_state.atom)("license state", "pending");
   verbose = true;
   constructor(licenseKey, testPublicKey, testEnvironment) {
     this.isTest = process.env.NODE_ENV === "test";
@@ -62,17 +69,16 @@ class LicenseManager {
     this.publicKey = testPublicKey || this.publicKey;
     this.isCryptoAvailable = !!crypto.subtle;
     this.getLicenseFromKey(licenseKey).then((result) => {
-      const isUnlicensed = isEditorUnlicensed(result);
-      if (!this.isDevelopment && isUnlicensed) {
-        (0, import_utils.fetch)(WATERMARK_TRACK_SRC);
-      }
-      if (isUnlicensed) {
-        this.state.set("unlicensed");
-      } else if (result.isLicensedWithWatermark) {
-        this.state.set("licensed-with-watermark");
-      } else {
-        this.state.set("licensed");
-      }
+      const licenseState = getLicenseState(
+        result,
+        (messages) => this.outputMessages(messages),
+        this.isDevelopment
+      );
+      this.maybeTrack(result, licenseState);
+      this.state.set(licenseState);
+    }).catch((error) => {
+      console.error("License validation failed:", error);
+      this.state.set("unlicensed");
     });
   }
   getIsDevelopment(testEnvironment) {
@@ -80,6 +86,37 @@ class LicenseManager {
     if (testEnvironment === "production") return false;
     return !["https:", "vscode-webview:"].includes(window.location.protocol) || window.location.hostname === "localhost";
   }
+  getTrackType(result, licenseState) {
+    if (licenseState === "unlicensed-production") {
+      return "unlicensed";
+    }
+    if (this.isDevelopment) {
+      return null;
+    }
+    if (!result.isLicenseParseable) {
+      return null;
+    }
+    if (result.isEvaluationLicense) {
+      return "evaluation";
+    }
+    if (licenseState === "licensed-with-watermark") {
+      return "with_watermark";
+    }
+    return null;
+  }
+  maybeTrack(result, licenseState) {
+    const trackType = this.getTrackType(result, licenseState);
+    if (!trackType) {
+      return;
+    }
+    const url = new URL(WATERMARK_TRACK_SRC);
+    url.searchParams.set("version", import_version.version);
+    url.searchParams.set("license_type", trackType);
+    if ("license" in result) {
+      url.searchParams.set("license_id", result.license.id);
+    }
+    fetch(url.toString());
+  }
   async extractLicenseKey(licenseKey) {
     const [data, signature] = licenseKey.split(".");
     const [prefix, encodedData] = data.split("/");
@@ -147,6 +184,8 @@ class LicenseManager {
       const expiryDate = new Date(licenseInfo.expiryDate);
       const isAnnualLicense = this.isFlagEnabled(licenseInfo.flags, FLAGS.ANNUAL_LICENSE);
       const isPerpetualLicense = this.isFlagEnabled(licenseInfo.flags, FLAGS.PERPETUAL_LICENSE);
+      const isEvaluationLicense = this.isFlagEnabled(licenseInfo.flags, FLAGS.EVALUATION_LICENSE);
+      const daysSinceExpiry = this.getDaysSinceExpiry(expiryDate);
       const result = {
         license: licenseInfo,
         isLicenseParseable: true,
@@ -158,7 +197,11 @@ class LicenseManager {
         isPerpetualLicense,
         isPerpetualLicenseExpired: isPerpetualLicense && this.isPerpetualLicenseExpired(expiryDate),
         isInternalLicense: this.isFlagEnabled(licenseInfo.flags, FLAGS.INTERNAL_LICENSE),
-        isLicensedWithWatermark: this.isFlagEnabled(licenseInfo.flags, FLAGS.WITH_WATERMARK)
+        isNativeLicense: this.isNativeLicense(licenseInfo),
+        isLicensedWithWatermark: this.isFlagEnabled(licenseInfo.flags, FLAGS.WITH_WATERMARK),
+        isEvaluationLicense,
+        isEvaluationLicenseExpired: isEvaluationLicense && this.isEvaluationLicenseExpired(expiryDate),
+        daysSinceExpiry
       };
       this.outputLicenseInfoIfNeeded(result);
       return result;
@@ -170,13 +213,16 @@ class LicenseManager {
   isDomainValid(licenseInfo) {
     const currentHostname = window.location.hostname.toLowerCase();
     return licenseInfo.hosts.some((host) => {
-      const normalizedHost = host.toLowerCase().trim();
-      if (normalizedHost === currentHostname || `www.${normalizedHost}` === currentHostname || normalizedHost === `www.${currentHostname}`) {
+      const normalizedHostOrUrlRegex = host.toLowerCase().trim();
+      if (normalizedHostOrUrlRegex === currentHostname || `www.${normalizedHostOrUrlRegex}` === currentHostname || normalizedHostOrUrlRegex === `www.${currentHostname}`) {
         return true;
       }
       if (host === "*") {
         return true;
       }
+      if (this.isNativeLicense(licenseInfo)) {
+        return new RegExp(normalizedHostOrUrlRegex).test(window.location.href);
+      }
       if (host.includes("*")) {
         const globToRegex = new RegExp(host.replace(/\*/g, ".*?"));
         return globToRegex.test(currentHostname) || globToRegex.test(`www.${currentHostname}`);
@@ -184,13 +230,16 @@ class LicenseManager {
       if (window.location.protocol === "vscode-webview:") {
         const currentUrl = new URL(window.location.href);
         const extensionId = currentUrl.searchParams.get("extensionId");
-        if (normalizedHost === extensionId) {
+        if (normalizedHostOrUrlRegex === extensionId) {
           return true;
         }
       }
       return false;
     });
   }
+  isNativeLicense(licenseInfo) {
+    return this.isFlagEnabled(licenseInfo.flags, FLAGS.NATIVE_LICENSE);
+  }
   getExpirationDateWithoutGracePeriod(expiryDate) {
     return new Date(expiryDate.getFullYear(), expiryDate.getMonth(), expiryDate.getDate());
   }
@@ -204,14 +253,7 @@ class LicenseManager {
   }
   isAnnualLicenseExpired(expiryDate) {
     const expiration = this.getExpirationDateWithGracePeriod(expiryDate);
-    const isExpired = /* @__PURE__ */ new Date() >= expiration;
-    if (!isExpired && /* @__PURE__ */ new Date() >= this.getExpirationDateWithoutGracePeriod(expiryDate)) {
-      this.outputMessages([
-        "tldraw license is about to expire, you are in a grace period.",
-        `Please reach out to ${LICENSE_EMAIL} if you would like to renew your license.`
-      ]);
-    }
-    return isExpired;
+    return /* @__PURE__ */ new Date() >= expiration;
   }
   isPerpetualLicenseExpired(expiryDate) {
     const expiration = this.getExpirationDateWithGracePeriod(expiryDate);
@@ -221,6 +263,18 @@ class LicenseManager {
     };
     return dates.major >= expiration || dates.minor >= expiration;
   }
+  getDaysSinceExpiry(expiryDate) {
+    const now = /* @__PURE__ */ new Date();
+    const expiration = this.getExpirationDateWithoutGracePeriod(expiryDate);
+    const diffTime = now.getTime() - expiration.getTime();
+    const diffDays = Math.floor(diffTime / (1e3 * 60 * 60 * 24));
+    return Math.max(0, diffDays);
+  }
+  isEvaluationLicenseExpired(expiryDate) {
+    const now = /* @__PURE__ */ new Date();
+    const expiration = this.getExpirationDateWithoutGracePeriod(expiryDate);
+    return now >= expiration;
+  }
   isFlagEnabled(flags, flag) {
     return (flags & flag) === flag;
   }
@@ -230,18 +284,6 @@ class LicenseManager {
     this.outputMessages(["Invalid tldraw license key", `Reason: ${msg}`]);
   }
   outputLicenseInfoIfNeeded(result) {
-    if (result.isAnnualLicenseExpired) {
-      this.outputMessages([
-        "Your tldraw license has expired!",
-        `Please reach out to ${LICENSE_EMAIL} to renew.`
-      ]);
-    }
-    if (!result.isDomainValid && !result.isDevelopment) {
-      this.outputMessages([
-        "This tldraw license key is not valid for this domain!",
-        `Please reach out to ${LICENSE_EMAIL} if you would like to use tldraw on other domains.`
-      ]);
-    }
     if (result.license.flags >= HIGHEST_FLAG * 2) {
       this.outputMessages([
         "This tldraw license contains some unknown flags.",
@@ -270,15 +312,63 @@ class LicenseManager {
   }
   static className = "tl-watermark_SEE-LICENSE";
 }
-function isEditorUnlicensed(result) {
-  if (!result.isLicenseParseable) return true;
-  if (!result.isDomainValid && !result.isDevelopment) return true;
-  if (result.isPerpetualLicenseExpired || result.isAnnualLicenseExpired) {
-    if (result.isInternalLicense) {
-      throw new Error("License: Internal license expired.");
+function getLicenseState(result, outputMessages, isDevelopment) {
+  if (!result.isLicenseParseable) {
+    if (isDevelopment) {
+      return "unlicensed";
+    }
+    if (result.reason === "no-key-provided") {
+      outputMessages([
+        "No tldraw license key provided!",
+        "A license is required for production deployments.",
+        `Please reach out to ${LICENSE_EMAIL} to purchase a license.`
+      ]);
+    } else {
+      outputMessages([
+        "Invalid license key. tldraw requires a valid license for production use.",
+        `Please reach out to ${LICENSE_EMAIL} to purchase a license.`
+      ]);
+    }
+    return "unlicensed-production";
+  }
+  if (!result.isDomainValid && !result.isDevelopment) {
+    outputMessages([
+      "License key is not valid for this domain.",
+      "A license is required for production deployments.",
+      `Please reach out to ${LICENSE_EMAIL} to purchase a license.`
+    ]);
+    return "unlicensed-production";
+  }
+  if (result.isEvaluationLicense) {
+    if (result.isEvaluationLicenseExpired) {
+      outputMessages([
+        "Your tldraw evaluation license has expired!",
+        `Please reach out to ${LICENSE_EMAIL} to purchase a full license.`
+      ]);
+      return "expired";
+    } else {
+      return "licensed";
     }
-    return true;
   }
-  return false;
+  if (result.isPerpetualLicenseExpired || result.isAnnualLicenseExpired) {
+    outputMessages([
+      "Your tldraw license has been expired for more than 30 days!",
+      `Please reach out to ${LICENSE_EMAIL} to renew your license.`
+    ]);
+    return "expired";
+  }
+  const daysSinceExpiry = result.daysSinceExpiry;
+  if (daysSinceExpiry > 0 && !result.isEvaluationLicense) {
+    outputMessages([
+      "Your tldraw license has expired.",
+      `License expired ${daysSinceExpiry} days ago.`,
+      `Please reach out to ${LICENSE_EMAIL} to renew your license.`
+    ]);
+    return "licensed";
+  }
+  if (result.isLicensedWithWatermark) {
+    return "licensed-with-watermark";
+  }
+  return "licensed";
 }
 //# sourceMappingURL=LicenseManager.js.map