@plait/core 0.62.0-next.1 → 0.62.0-next.10

package/fesm2022/plait-core.mjs

@@ -1,6 +1,6 @@
 import { createDraft, finishDraft, isDraft } from 'immer';
 import { isKeyHotkey, isHotkey } from 'is-hotkey';
-import { timer, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 
 /**
  * @license
@@ -1571,6 +1571,96 @@ const sortElements = (board, elements, ascendingOrder = true) => {
     });
 };
 
+const TEMPORARY_G = new Map();
+const getTemporaryGArray = (debugKey) => {
+    return TEMPORARY_G.get(debugKey) || [];
+};
+const setTemporaryGArray = (debugKey, gArray) => {
+    TEMPORARY_G.set(debugKey, gArray);
+};
+class DebugGenerator {
+    constructor(debugKey) {
+        this.debugKey = debugKey;
+    }
+    isDebug() {
+        return isDebug(this.debugKey);
+    }
+    clear() {
+        if (!this.isDebug()) {
+            return;
+        }
+        const gArray = getTemporaryGArray(this.debugKey);
+        setTemporaryGArray(this.debugKey, []);
+        gArray.forEach(g => g.remove());
+    }
+    drawPolygon(board, points, options) {
+        if (!isDebug(this.debugKey)) {
+            return;
+        }
+        const polygonG = PlaitBoard.getRoughSVG(board).polygon(points, options || { stroke: 'red' });
+        polygonG.classList.add(this.debugKey);
+        PlaitBoard.getElementActiveHost(board).append(polygonG);
+        const gArray = getTemporaryGArray(this.debugKey);
+        gArray.push(polygonG);
+        setTemporaryGArray(this.debugKey, gArray);
+        return polygonG;
+    }
+    drawLine(board, points, options) {
+        if (!isDebug(this.debugKey)) {
+            return;
+        }
+        const lineG = PlaitBoard.getRoughSVG(board).linearPath(points, options || { stroke: 'red' });
+        lineG.classList.add(this.debugKey);
+        PlaitBoard.getElementActiveHost(board).append(lineG);
+        const gArray = getTemporaryGArray(this.debugKey);
+        gArray.push(lineG);
+        setTemporaryGArray(this.debugKey, gArray);
+        return lineG;
+    }
+    drawRectangle(board, data, options) {
+        if (!isDebug(this.debugKey)) {
+            return;
+        }
+        let rectangle;
+        if (data instanceof Array) {
+            rectangle = RectangleClient.getRectangleByPoints(data);
+        }
+        else {
+            rectangle = data;
+        }
+        const rectangleG = PlaitBoard.getRoughSVG(board).rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, options || { stroke: 'red' });
+        rectangleG.classList.add(this.debugKey);
+        PlaitBoard.getElementActiveHost(board).append(rectangleG);
+        const gArray = getTemporaryGArray(this.debugKey);
+        gArray.push(rectangleG);
+        setTemporaryGArray(this.debugKey, gArray);
+        return rectangleG;
+    }
+    drawCircles(board, points, diameter = 0, isCumulativeDiameter = false, options) {
+        if (!isDebug(this.debugKey)) {
+            return;
+        }
+        const result = [];
+        points.forEach((p, i) => {
+            const circle = PlaitBoard.getRoughSVG(board).circle(p[0], p[1], isCumulativeDiameter ? diameter * (i + 1) : diameter, Object.assign({}, { stroke: 'red', fill: 'red', fillStyle: 'solid' }, options || {}));
+            circle.classList.add(this.debugKey);
+            PlaitBoard.getElementActiveHost(board).append(circle);
+            const gArray = getTemporaryGArray(this.debugKey);
+            gArray.push(circle);
+            result.push(circle);
+            setTemporaryGArray(this.debugKey, gArray);
+        });
+        return result;
+    }
+}
+const createDebugGenerator = (debugKey) => {
+    return new DebugGenerator(debugKey);
+};
+const isDebug = (key) => {
+    const defaultKey = 'debug:plait';
+    return localStorage.getItem(key || defaultKey) === 'true';
+};
+
 var PlaitPluginKey;
 (function (PlaitPluginKey) {
     PlaitPluginKey["withSelection"] = "withSelection";
@@ -1584,47 +1674,58 @@ const getHitElementsBySelection = (board, selection, match = () => true) => {
     }
     const isCollapsed = Selection.isCollapsed(newSelection);
     if (isCollapsed) {
-        const hitElement = getHitElementByPoint(board, newSelection.anchor, match);
-        if (hitElement) {
-            return [hitElement];
+        const hitElements = getHitElementsByPoint(board, newSelection.anchor, match);
+        if (hitElements?.length) {
+            return hitElements;
         }
         else {
             return [];
         }
     }
     depthFirstRecursion(board, node => {
-        if (!PlaitBoard.isBoard(node) && match(node) && board.isRectangleHit(node, newSelection)) {
-            rectangleHitElements.push(node);
+        if (!PlaitBoard.isBoard(node) && match(node)) {
+            let isRectangleHit = false;
+            try {
+                isRectangleHit = board.isRectangleHit(node, newSelection);
+            }
+            catch (error) {
+                if (isDebug()) {
+                    console.error('isRectangleHit', error, 'node', node);
+                }
+            }
+            if (isRectangleHit) {
+                rectangleHitElements.push(node);
+            }
         }
     }, getIsRecursionFunc(board), true);
     return rectangleHitElements;
 };
-const getHitElementByPoint = (board, point, match = () => true) => {
-    let hitElement = undefined;
-    let hitInsideElement = undefined;
+const getHitElementsByPoint = (board, point, match = () => true) => {
+    let hitElements = [];
     depthFirstRecursion(board, node => {
-        if (hitElement) {
-            return;
-        }
         if (PlaitBoard.isBoard(node) || !match(node) || !PlaitElement.hasMounted(node)) {
             return;
         }
-        if (board.isHit(node, point)) {
-            hitElement = node;
-            return;
+        let isHit = false;
+        try {
+            isHit = board.isHit(node, point);
         }
-        /**
-         * 需要增加场景测试
-         * hitInsideElement 存的是第一个符合 isInsidePoint 的元素
-         * 当有元素符合 isHit 时结束遍历，并返回 hitElement
-         * 当所有元素都不符合 isHit ，则返回第一个符合 isInsidePoint 的元素
-         * 这样保证最上面的元素优先被探测到；
-         */
-        if (!hitInsideElement && board.isInsidePoint(node, point)) {
-            hitInsideElement = node;
+        catch (error) {
+            if (isDebug()) {
+                console.error('isHit', error, 'node', node);
+            }
+        }
+        if (isHit) {
+            hitElements.push(node);
+            return;
         }
     }, getIsRecursionFunc(board), true);
-    return hitElement || hitInsideElement;
+    return hitElements;
+};
+const getHitElementByPoint = (board, point, match = () => true) => {
+    const pointHitElements = getHitElementsByPoint(board, point, match);
+    const hitElement = board.getHitElement(pointHitElements);
+    return hitElement;
 };
 const getHitSelectedElements = (board, point) => {
     const selectedElements = getSelectedElements(board);
@@ -1681,7 +1782,7 @@ const isSelectedElement = (board, element) => {
 const temporaryDisableSelection = (board) => {
     const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
     board.setPluginOptions(PlaitPluginKey.withSelection, {
-        isDisabledSelect: true
+        isDisabledSelection: true
     });
     setTimeout(() => {
         board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
@@ -1718,7 +1819,9 @@ function drawRoundRectangle(rs, x1, y1, x2, y2, options, outline = false, border
     const point6 = [x1 + radius, y2];
     const point7 = [x1, y2 - radius];
     const point8 = [x1, y1 + radius];
-    return rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, options);
+    const rectangleG = rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, options);
+    setStrokeLinecap(rectangleG, 'round');
+    return rectangleG;
 }
 const drawRectangle = (board, rectangle, options) => {
     const roughSVG = PlaitBoard.getRoughSVG(board);
@@ -1914,11 +2017,7 @@ function updateThemeColor(board, mode) {
 const updatePointerType = (board, pointer) => {
     if (board.pointer === pointer)
         return;
-    const previousPointer = board.pointer;
     board.pointer = pointer;
-    const boardContainer = PlaitBoard.getBoardContainer(board);
-    boardContainer.classList.remove(`pointer-${previousPointer}`);
-    boardContainer.classList.add(`pointer-${pointer}`);
 };
 const BoardTransforms = {
     updatePointerType,
@@ -2218,21 +2317,25 @@ const throttleRAF = (board, key, fn) => {
     scheduleFunc();
 };
 const debounce = (func, wait, options) => {
-    let timerSubscription = null;
-    return () => {
-        if (timerSubscription && !timerSubscription.closed) {
-            timerSubscription.unsubscribe();
-            timerSubscription = timer(wait).subscribe(() => {
-                func();
-            });
+    let timeout = null;
+    return (args) => {
+        if (timeout !== null) {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                func(args);
+                timeout = null;
+            }, wait);
         }
         else {
             if (options?.leading) {
-                timer(0).subscribe(() => {
-                    func();
-                });
+                func(args);
+            }
+            else {
+                timeout = setTimeout(() => {
+                    func(args);
+                    timeout = null;
+                }, wait);
             }
-            timerSubscription = timer(wait).subscribe();
         }
     };
 };
@@ -2286,7 +2389,7 @@ const cacheMovingElements = (board, elements) => {
     setDragging(board, true);
 };
 
-const IMAGE_CONTAINER = 'plait-image-container';
+const FOREIGN_OBJECT_EXPRESSION = `foreignObject[class^='foreign-object']`;
 /**
  * Is element node
  * @param node
@@ -2373,7 +2476,7 @@ function cloneCSSStyle(nativeNode, clonedNode) {
  */
 function batchCloneCSSStyle(sourceNode, cloneNode, inlineStyleClassNames) {
     if (inlineStyleClassNames) {
-        const classNames = inlineStyleClassNames + `,.${IMAGE_CONTAINER}`;
+        const classNames = inlineStyleClassNames + `, ${FOREIGN_OBJECT_EXPRESSION}`;
         const sourceNodes = Array.from(sourceNode.querySelectorAll(classNames));
         const cloneNodes = Array.from(cloneNode.querySelectorAll(classNames));
         sourceNodes.forEach((node, index) => {
@@ -2394,8 +2497,8 @@ function batchCloneCSSStyle(sourceNode, cloneNode, inlineStyleClassNames) {
  * @param cloneNode
  */
 async function batchConvertImage(sourceNode, cloneNode) {
-    const sourceImageNodes = Array.from(sourceNode.querySelectorAll(`.${IMAGE_CONTAINER}`));
-    const cloneImageNodes = Array.from(cloneNode.querySelectorAll(`.${IMAGE_CONTAINER}`));
+    const sourceImageNodes = Array.from(sourceNode.querySelectorAll(`${FOREIGN_OBJECT_EXPRESSION}`));
+    const cloneImageNodes = Array.from(cloneNode.querySelectorAll(`${FOREIGN_OBJECT_EXPRESSION}`));
     await Promise.all(sourceImageNodes.map((_, index) => {
         return new Promise(resolve => {
             const cloneImageNode = cloneImageNodes[index];
@@ -2497,15 +2600,16 @@ var WritableClipboardOperationType;
 })(WritableClipboardOperationType || (WritableClipboardOperationType = {}));
 
 const buildPlaitHtml = (type, data) => {
-    const stringifiedClipboard = JSON.stringify({
+    const stringifiedClipboard = replaceAngleBrackets(JSON.stringify({
         type,
         data
-    });
+    }));
     return `<plait>${stringifiedClipboard}</plait>`;
 };
 const getClipboardFromHtml = (html) => {
-    const plaitString = html?.match(/<plait[^>]*>(.*)<\/plait>/)?.[1];
+    let plaitString = html?.match(/<plait[^>]*>(.*)<\/plait>/)?.[1];
     if (plaitString) {
+        plaitString = reverseReplaceAngleBrackets(plaitString);
         try {
             const plaitJson = JSON.parse(plaitString);
             if (plaitJson) {
@@ -2561,6 +2665,12 @@ const addClipboardContext = (clipboardContext, addition) => {
     }
     return clipboardContext;
 };
+const replaceAngleBrackets = (str) => {
+    return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+};
+const reverseReplaceAngleBrackets = (str) => {
+    return str.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
+};
 
 const setDataTransferClipboard = (dataTransfer, type, data) => {
     dataTransfer?.setData(`text/html`, buildPlaitHtml(type, data));
@@ -2760,11 +2870,11 @@ function clearSelectionMoving(board) {
     setDragging(board, false);
 }
 function isHandleSelection(board) {
-    const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-    return board.pointer !== PlaitPointerType.hand && !options.isDisabledSelect && !PlaitBoard.isReadonly(board);
+    const options = getSelectionOptions(board);
+    return board.pointer !== PlaitPointerType.hand && !options.isDisabledSelection && !PlaitBoard.isReadonly(board);
 }
-function isSetSelectionOperation(board) {
-    return !!board.operations.find(value => value.type === 'set_selection');
+function hasSetSelectionOperation(board) {
+    return !!board.operations.find(op => PlaitOperation.isSetSelectionOperation(op));
 }
 function getTemporaryElements(board) {
     const ref = BOARD_TO_TEMPORARY_ELEMENTS.get(board);
@@ -2876,6 +2986,13 @@ function cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, h
     }
     cacheSelectedElements(board, uniqueById(newElements));
 }
+const getSelectionOptions = (board) => {
+    const options = board.getPluginOptions(PlaitPluginKey.withSelection);
+    return options;
+};
+const setSelectionOptions = (board, options) => {
+    board.setPluginOptions(PlaitPluginKey.withSelection, options);
+};
 
 const getElementsInGroup = (board, group, recursion, includeGroup) => {
     let result = [];
@@ -4007,6 +4124,12 @@ var PlaitPointerType;
 const isSetViewportOperation = (value) => {
     return value.type === 'set_viewport';
 };
+const isSetSelectionOperation = (value) => {
+    return value.type === 'set_selection';
+};
+const isSetThemeOperation = (value) => {
+    return value.type === 'set_theme';
+};
 const inverse = (op) => {
     switch (op.type) {
         case 'insert_node': {
@@ -4088,6 +4211,8 @@ const inverse = (op) => {
 };
 const PlaitOperation = {
     isSetViewportOperation,
+    isSetSelectionOperation,
+    isSetThemeOperation,
     inverse
 };
 
@@ -4888,7 +5013,14 @@ const trackBy = (index, element) => {
 const createPluginComponent = (board, componentType, context, childrenContext) => {
     const instance = new componentType();
     instance.context = context;
-    instance.initialize();
+    try {
+        instance.initialize();
+    }
+    catch (error) {
+        if (isDebug()) {
+            console.error('list-render-initialize', error, 'context', context);
+        }
+    }
     const g = instance.getContainerG();
     mountElementG(context.index, g, childrenContext);
     instance.initializeListRender();
@@ -5240,6 +5372,7 @@ function createBoard(children, options) {
         isRectangleHit: element => false,
         isHit: element => false,
         isInsidePoint: element => false,
+        getHitElement: (data) => data[0],
         isRecursion: element => true,
         isMovable: element => false,
         getRectangle: element => null,
@@ -5422,7 +5555,7 @@ const withHotkey = (board) => {
     const { keyDown, keyUp, globalKeyDown } = board;
     board.keyDown = (event) => {
         const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        if (!PlaitBoard.isReadonly(board) && options.isMultiple && isHotkey('mod+a', event)) {
+        if (!PlaitBoard.isReadonly(board) && options.isMultipleSelection && isHotkey('mod+a', event)) {
             event.preventDefault();
             let elements = [];
             depthFirstRecursion(board, node => {
@@ -6034,11 +6167,10 @@ function withSelection(board) {
         if (isShift && !event.shiftKey) {
             isShift = false;
         }
-        const isHitText = !!(event.target instanceof Element && event.target.closest('.plait-text-container'));
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const isHitTarget = isHitElement(board, point);
-        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && !isHitTarget && options.isMultiple && !options.isDisabledSelect) {
+        const options = getSelectionOptions(board);
+        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && !isHitTarget && options.isMultipleSelection && !options.isDisabledSelection) {
             preventTouchMove(board, event, true);
             // start rectangle selection
             start = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
@@ -6088,7 +6220,8 @@ function withSelection(board) {
             clearSelectionMoving(board);
             Transforms.setSelection(board, { anchor: start, focus: end });
         }
-        if (PlaitBoard.isFocus(board)) {
+        const options = getSelectionOptions(board);
+        if (PlaitBoard.isFocus(board) && !options.isPreventClearSelection) {
             const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
             const isInDocument = event.target instanceof Node && document.contains(event.target);
             const isAttachedElement = event.target instanceof Element && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
@@ -6104,8 +6237,8 @@ function withSelection(board) {
         globalPointerUp(event);
     };
     board.onChange = () => {
-        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        if (options.isDisabledSelect) {
+        const options = getSelectionOptions(board);
+        if (options.isDisabledSelection) {
             clearSelectedElement(board);
         }
         // remove selected element if include
@@ -6114,7 +6247,7 @@ function withSelection(board) {
                 removeSelectedElement(board, op.node, true);
             }
         });
-        if (isHandleSelection(board) && isSetSelectionOperation(board)) {
+        if (isHandleSelection(board) && hasSetSelectionOperation(board)) {
             try {
                 if (!isShift) {
                     selectionRectangleG?.remove();
@@ -6125,7 +6258,7 @@ function withSelection(board) {
                 }
                 else {
                     let elements = getHitElementsBySelection(board);
-                    if (!options.isMultiple && elements.length > 1) {
+                    if (!options.isMultipleSelection && elements.length > 1) {
                         elements = [elements[0]];
                     }
                     const isHitElementWithGroup = elements.some(item => item.groupId);
@@ -6134,6 +6267,12 @@ function withSelection(board) {
                         setSelectedElementsWithGroup(board, elements, isShift);
                     }
                     else {
+                        if (board.selection && Selection.isCollapsed(board.selection)) {
+                            const element = board.getHitElement(elements);
+                            if (element) {
+                                elements = [element];
+                            }
+                        }
                         if (isShift) {
                             const newElements = [...selectedElements];
                             if (board.selection && Selection.isCollapsed(board.selection)) {
@@ -6179,7 +6318,7 @@ function withSelection(board) {
         onChange();
     };
     board.afterChange = () => {
-        if (isHandleSelection(board) && !isSetSelectionOperation(board)) {
+        if (isHandleSelection(board) && !hasSetSelectionOperation(board)) {
             try {
                 const currentSelectedElements = getSelectedElements(board);
                 if (currentSelectedElements.length && currentSelectedElements.length > 1) {
@@ -6202,9 +6341,10 @@ function withSelection(board) {
         }
         afterChange();
     };
-    board.setPluginOptions(PlaitPluginKey.withSelection, {
-        isMultiple: true,
-        isDisabledSelect: false
+    setSelectionOptions(board, {
+        isMultipleSelection: true,
+        isDisabledSelection: false,
+        isPreventClearSelection: false
     });
     return board;
 }
@@ -6396,96 +6536,6 @@ function createModModifierKeys() {
     return modifiers;
 }
 
-const TEMPORARY_G = new Map();
-const getTemporaryGArray = (debugKey) => {
-    return TEMPORARY_G.get(debugKey) || [];
-};
-const setTemporaryGArray = (debugKey, gArray) => {
-    TEMPORARY_G.set(debugKey, gArray);
-};
-class DebugGenerator {
-    constructor(debugKey) {
-        this.debugKey = debugKey;
-    }
-    isDebug() {
-        return isDebug(this.debugKey);
-    }
-    clear() {
-        if (!this.isDebug()) {
-            return;
-        }
-        const gArray = getTemporaryGArray(this.debugKey);
-        setTemporaryGArray(this.debugKey, []);
-        gArray.forEach(g => g.remove());
-    }
-    drawPolygon(board, points, options) {
-        if (!isDebug(this.debugKey)) {
-            return;
-        }
-        const polygonG = PlaitBoard.getRoughSVG(board).polygon(points, options || { stroke: 'red' });
-        polygonG.classList.add(this.debugKey);
-        PlaitBoard.getElementActiveHost(board).append(polygonG);
-        const gArray = getTemporaryGArray(this.debugKey);
-        gArray.push(polygonG);
-        setTemporaryGArray(this.debugKey, gArray);
-        return polygonG;
-    }
-    drawLine(board, points, options) {
-        if (!isDebug(this.debugKey)) {
-            return;
-        }
-        const lineG = PlaitBoard.getRoughSVG(board).linearPath(points, options || { stroke: 'red' });
-        lineG.classList.add(this.debugKey);
-        PlaitBoard.getElementActiveHost(board).append(lineG);
-        const gArray = getTemporaryGArray(this.debugKey);
-        gArray.push(lineG);
-        setTemporaryGArray(this.debugKey, gArray);
-        return lineG;
-    }
-    drawRectangle(board, data, options) {
-        if (!isDebug(this.debugKey)) {
-            return;
-        }
-        let rectangle;
-        if (data instanceof Array) {
-            rectangle = RectangleClient.getRectangleByPoints(data);
-        }
-        else {
-            rectangle = data;
-        }
-        const rectangleG = PlaitBoard.getRoughSVG(board).rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, options || { stroke: 'red' });
-        rectangleG.classList.add(this.debugKey);
-        PlaitBoard.getElementActiveHost(board).append(rectangleG);
-        const gArray = getTemporaryGArray(this.debugKey);
-        gArray.push(rectangleG);
-        setTemporaryGArray(this.debugKey, gArray);
-        return rectangleG;
-    }
-    drawCircles(board, points, diameter = 0, isCumulativeDiameter = false, options) {
-        if (!isDebug(this.debugKey)) {
-            return;
-        }
-        const result = [];
-        points.forEach((p, i) => {
-            const circle = PlaitBoard.getRoughSVG(board).circle(p[0], p[1], isCumulativeDiameter ? diameter * (i + 1) : diameter, Object.assign({}, { stroke: 'red', fill: 'red', fillStyle: 'solid' }, options || {}));
-            circle.classList.add(this.debugKey);
-            PlaitBoard.getElementActiveHost(board).append(circle);
-            const gArray = getTemporaryGArray(this.debugKey);
-            gArray.push(circle);
-            result.push(circle);
-            setTemporaryGArray(this.debugKey, gArray);
-        });
-        return result;
-    }
-}
-const createDebugGenerator = (debugKey) => {
-    return new DebugGenerator(debugKey);
-};
-const isDebug = (key) => {
-    const defaultKey = 'debug:plait';
-    return localStorage.getItem(key || defaultKey) === 'true';
-};
-
 /*
  * Public API Surface of plait
  */
@@ -6494,5 +6544,5 @@ const isDebug = (key) => {
  * Generated bundle index. Do not edit.
  */
 
-export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_AFTER_CHANGE, BOARD_TO_CONTEXT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DebugGenerator, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_REF, END, ENTER, EQUALS, ESCAPE, ElementFlavour, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, ListRender, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MAX_ZOOM, MERGING, META, MIN_ZOOM, MUTE, N, NINE, NODE_TO_CONTAINER_G, NODE_TO_G, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardContext, PlaitElement, PlaitGroupElement, PlaitHistoryBoard, PlaitNode, PlaitOperation, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RESIZE_HANDLE_CLASS_NAME, RIGHT_ARROW, ROTATE_HANDLE_CLASS_NAME, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SNAP_TOLERANCE, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardOperationType, WritableClipboardType, X, Y, Z, ZERO, ZOOM_STEP, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, canSetZIndex, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createBoard, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawDashedLines, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawPendingNodesG, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, getAngleByElement, getBarPoint, getBoardRectangle, getBoundingRectangleByElements, getClipboardData, getClipboardFromHtml, getCrossingPointsBetweenEllipseAndSegment, getDataTransferClipboard, getDataTransferClipboardText, getEditingGroup, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getElementsIndices, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestIndexOfElement, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMinPointDelta, getMovingElements, getNearestDelta, getNearestPointBetweenPointAndEllipse, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, getValidElements, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isHitElement, isHitSelectedRectangle, isInPlaitBoard, isIndicesContinuous, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, isSnapPoint, mountElementG, moveElementsToNewPath, moveElementsToNewPathAfterAddGroup, nonGroupInHighestSelectedElements, normalizeAngle, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setFragment, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, sortElements, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withBoard, withHandPointer, withHistory, withHotkey, withMoving, withOptions, withRelatedFragment, withSelection, withViewport };
+export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_AFTER_CHANGE, BOARD_TO_CONTEXT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DebugGenerator, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_REF, END, ENTER, EQUALS, ESCAPE, ElementFlavour, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, ListRender, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MAX_ZOOM, MERGING, META, MIN_ZOOM, MUTE, N, NINE, NODE_TO_CONTAINER_G, NODE_TO_G, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardContext, PlaitElement, PlaitGroupElement, PlaitHistoryBoard, PlaitNode, PlaitOperation, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RESIZE_HANDLE_CLASS_NAME, RIGHT_ARROW, ROTATE_HANDLE_CLASS_NAME, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SNAP_TOLERANCE, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardOperationType, WritableClipboardType, X, Y, Z, ZERO, ZOOM_STEP, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, canSetZIndex, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createBoard, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawDashedLines, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawPendingNodesG, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, getAngleByElement, getBarPoint, getBoardRectangle, getBoundingRectangleByElements, getClipboardData, getClipboardFromHtml, getCrossingPointsBetweenEllipseAndSegment, getDataTransferClipboard, getDataTransferClipboardText, getEditingGroup, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getElementsIndices, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestIndexOfElement, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMinPointDelta, getMovingElements, getNearestDelta, getNearestPointBetweenPointAndEllipse, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSelectionOptions, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, getValidElements, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasSetSelectionOperation, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isHitElement, isHitSelectedRectangle, isInPlaitBoard, isIndicesContinuous, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetThemeOperation, isSetViewportOperation, isSnapPoint, mountElementG, moveElementsToNewPath, moveElementsToNewPathAfterAddGroup, nonGroupInHighestSelectedElements, normalizeAngle, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, replaceAngleBrackets, reverseReplaceAngleBrackets, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setFragment, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setSelectionOptions, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, sortElements, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withBoard, withHandPointer, withHistory, withHotkey, withMoving, withOptions, withRelatedFragment, withSelection, withViewport };
 //# sourceMappingURL=plait-core.mjs.map