@plait/core 0.0.57 → 0.0.58

package/fesm2020/plait-core.mjs

@@ -371,81 +371,68 @@ const ViewportTransforms = {
     setViewport
 };
 
-const Transforms = {
-    ...GeneralTransforms,
-    ...ViewportTransforms,
-    ...SelectionTransforms,
-    ...NodeTransforms
-};
-
-// record richtext type status
-const FLUSHING = new WeakMap();
-const IS_TEXT_EDITABLE = new WeakMap();
-const BOARD_TO_ON_CHANGE = new WeakMap();
-const HOST_TO_ROUGH_SVG = new WeakMap();
-const PLAIT_BOARD_TO_COMPONENT = new WeakMap();
+function transformPoints(board, points) {
+    const newPoints = points.map(point => {
+        return transformPoint(board, point);
+    });
+    return newPoints;
+}
+function transformPoint(board, point) {
+    const { width, height } = board.host.getBoundingClientRect();
+    const viewBox = board.host.viewBox.baseVal;
+    const x = (point[0] / width) * viewBox.width + viewBox.x;
+    const y = (point[1] / height) * viewBox.height + viewBox.y;
+    const newPoint = [x, y];
+    return newPoint;
+}
+function isNoSelectionElement(e) {
+    return e.target?.closest('.plait-board-attached');
+}
 
-function createBoard(host, children, options) {
-    const board = {
-        host,
-        viewport: {
-            zoom: 1,
-            viewBackgroundColor: '#000'
-        },
-        children,
-        operations: [],
-        history: {
-            redos: [],
-            undos: []
-        },
-        selection: null,
-        pointer: PlaitPointerType.selection,
-        options: options || {
-            readonly: false,
-            allowClearBoard: false,
-            hideScrollbar: false
-        },
-        undo: () => { },
-        redo: () => { },
-        apply: (operation) => {
-            board.operations.push(operation);
-            Transforms.transform(board, operation);
-            if (!FLUSHING.get(board)) {
-                FLUSHING.set(board, true);
-                Promise.resolve().then(() => {
-                    FLUSHING.set(board, false);
-                    board.onChange();
-                    board.operations = [];
-                });
-            }
-        },
-        onChange: () => { },
-        mousedown: (event) => { },
-        globalMouseup: (event) => { },
-        mousemove: (event) => { },
-        keydown: (event) => { },
-        keyup: (event) => { },
-        dblclick: (event) => { },
-        setFragment: (data) => { },
-        insertFragment: (data) => { },
-        deleteFragment: (data) => { },
-        drawElement: (context) => [],
-        redrawElement: (context, previousContext) => { },
-        destroyElement: (context) => { }
-    };
-    return board;
+const NS = 'http://www.w3.org/2000/svg';
+function toPoint(x, y, container) {
+    const rect = container.getBoundingClientRect();
+    return [x - rect.x, y - rect.y];
+}
+function createG() {
+    const newG = document.createElementNS(NS, 'g');
+    return newG;
+}
+function createSVG() {
+    const svg = document.createElementNS(NS, 'svg');
+    return svg;
+}
+function createText(x, y, fill, textContent) {
+    var text = document.createElementNS(NS, 'text');
+    text.setAttribute('x', `${x}`);
+    text.setAttribute('y', `${y}`);
+    text.setAttribute('fill', fill);
+    text.textContent = textContent;
+    return text;
 }
 
-function withBoard(board) {
-    const { onChange } = board;
-    board.onChange = () => {
-        const onContextChange = BOARD_TO_ON_CHANGE.get(board);
-        if (onContextChange) {
-            onContextChange();
-        }
-        onChange();
-    };
-    return board;
+const IS_IOS = typeof navigator !== 'undefined' &&
+    typeof window !== 'undefined' &&
+    /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+    !window.MSStream;
+const IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
+const IS_FIREFOX = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
+const IS_SAFARI = typeof navigator !== 'undefined' && /Version\/[\d\.]+.*Safari/.test(navigator.userAgent);
+// "modern" Edge was released at 79.x
+const IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent);
+const IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent);
+// Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput
+const IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent);
+
+function toRectangleClient(points) {
+    const xArray = points.map(ele => ele[0]);
+    const yArray = points.map(ele => ele[1]);
+    const xMin = Math.min(...xArray);
+    const xMax = Math.max(...xArray);
+    const yMin = Math.min(...yArray);
+    const yMax = Math.max(...yArray);
+    const rect = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
+    return rect;
 }
 
 /**
@@ -538,70 +525,6 @@ const PlaitOperation = {
 const SAVING = new WeakMap();
 const MERGING = new WeakMap();
 
-function transformPoints(board, points) {
-    const newPoints = points.map(point => {
-        return transformPoint(board, point);
-    });
-    return newPoints;
-}
-function transformPoint(board, point) {
-    const { width, height } = board.host.getBoundingClientRect();
-    const viewBox = board.host.viewBox.baseVal;
-    const x = (point[0] / width) * viewBox.width + viewBox.x;
-    const y = (point[1] / height) * viewBox.height + viewBox.y;
-    const newPoint = [x, y];
-    return newPoint;
-}
-function isNoSelectionElement(e) {
-    return e.target?.closest('.plait-board-attached');
-}
-
-const NS = 'http://www.w3.org/2000/svg';
-function toPoint(x, y, container) {
-    const rect = container.getBoundingClientRect();
-    return [x - rect.x, y - rect.y];
-}
-function createG() {
-    const newG = document.createElementNS(NS, 'g');
-    return newG;
-}
-function createSVG() {
-    const svg = document.createElementNS(NS, 'svg');
-    return svg;
-}
-function createText(x, y, fill, textContent) {
-    var text = document.createElementNS(NS, 'text');
-    text.setAttribute('x', `${x}`);
-    text.setAttribute('y', `${y}`);
-    text.setAttribute('fill', fill);
-    text.textContent = textContent;
-    return text;
-}
-
-const IS_IOS = typeof navigator !== 'undefined' &&
-    typeof window !== 'undefined' &&
-    /iPad|iPhone|iPod/.test(navigator.userAgent) &&
-    !window.MSStream;
-const IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
-const IS_FIREFOX = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
-const IS_SAFARI = typeof navigator !== 'undefined' && /Version\/[\d\.]+.*Safari/.test(navigator.userAgent);
-// "modern" Edge was released at 79.x
-const IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent);
-const IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent);
-// Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput
-const IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent);
-
-function toRectangleClient(points) {
-    const xArray = points.map(ele => ele[0]);
-    const yArray = points.map(ele => ele[1]);
-    const xMin = Math.min(...xArray);
-    const xMax = Math.max(...xArray);
-    const yMin = Math.min(...yArray);
-    const yMax = Math.max(...yArray);
-    const rect = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
-    return rect;
-}
-
 /**
  * Check whether to merge an operation into the previous operation.
  */
@@ -981,6 +904,92 @@ function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
     return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
 }
 
+// record richtext type status
+const FLUSHING = new WeakMap();
+const IS_TEXT_EDITABLE = new WeakMap();
+const BOARD_TO_ON_CHANGE = new WeakMap();
+const HOST_TO_ROUGH_SVG = new WeakMap();
+const PLAIT_BOARD_TO_COMPONENT = new WeakMap();
+
+const updatePointerType = (board, pointer) => {
+    board.pointer = pointer;
+    const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
+    boardComponent?.markForCheck();
+};
+const BoardTransforms = {
+    updatePointerType
+};
+
+const Transforms = {
+    ...GeneralTransforms,
+    ...ViewportTransforms,
+    ...SelectionTransforms,
+    ...NodeTransforms
+};
+
+function createBoard(host, children, options) {
+    const board = {
+        host,
+        viewport: {
+            zoom: 1,
+            viewBackgroundColor: '#000'
+        },
+        children,
+        operations: [],
+        history: {
+            redos: [],
+            undos: []
+        },
+        selection: null,
+        pointer: PlaitPointerType.selection,
+        options: options || {
+            readonly: false,
+            allowClearBoard: false,
+            hideScrollbar: false
+        },
+        undo: () => { },
+        redo: () => { },
+        apply: (operation) => {
+            board.operations.push(operation);
+            Transforms.transform(board, operation);
+            if (!FLUSHING.get(board)) {
+                FLUSHING.set(board, true);
+                Promise.resolve().then(() => {
+                    FLUSHING.set(board, false);
+                    board.onChange();
+                    board.operations = [];
+                });
+            }
+        },
+        onChange: () => { },
+        mousedown: (event) => { },
+        globalMouseup: (event) => { },
+        mousemove: (event) => { },
+        keydown: (event) => { },
+        keyup: (event) => { },
+        dblclick: (event) => { },
+        setFragment: (data) => { },
+        insertFragment: (data) => { },
+        deleteFragment: (data) => { },
+        drawElement: (context) => [],
+        redrawElement: (context, previousContext) => { },
+        destroyElement: (context) => { }
+    };
+    return board;
+}
+
+function withBoard(board) {
+    const { onChange } = board;
+    board.onChange = () => {
+        const onContextChange = BOARD_TO_ON_CHANGE.get(board);
+        if (onContextChange) {
+            onContextChange();
+        }
+        onChange();
+    };
+    return board;
+}
+
 function withHistory(board) {
     const { apply, keydown } = board;
     board.history = { undos: [], redos: [] };
@@ -1065,12 +1074,6 @@ function withHistory(board) {
     return board;
 }
 
-const updatePointerType = (board, pointer) => {
-    board.pointer = pointer;
-    const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
-    boardComponent?.markForCheck();
-};
-
 function withHandPointer(board) {
     const { mousedown, mousemove, globalMouseup, keydown, keyup } = board;
     const plaitBoardMove = {
@@ -1335,8 +1338,7 @@ class PlaitBoardComponent {
         this.destroy$ = new Subject();
         this.viewportState = {
             zoom: 1,
-            autoFitPadding: 8,
-            scrollBarWidth: SCROLL_BAR_WIDTH
+            autoFitPadding: 8
         };
         this.isMoving = false;
         this.plaitValue = [];
@@ -1411,12 +1413,10 @@ class PlaitBoardComponent {
         this.board = board;
         if (this.plaitViewport) {
             this.board.viewport = this.plaitViewport;
+            this.updateViewportState({
+                zoom: this.plaitViewport?.zoom ?? 1
+            });
         }
-        const scrollBarWidth = this.plaitOptions?.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-        this.updateViewportState({
-            scrollBarWidth,
-            zoom: this.board.viewport?.zoom ?? 1
-        });
     }
     initializeEvents() {
         fromEvent(this.host, 'mousedown')
@@ -1516,8 +1516,7 @@ class PlaitBoardComponent {
         this.renderer2.setStyle(this.viewportContainer.nativeElement, 'width', `${width}px`);
         this.renderer2.setStyle(this.viewportContainer.nativeElement, 'height', `${height}px`);
     }
-    initViewport() {
-        const viewport = this.board.viewport;
+    initViewport(viewport = this.board.viewport) {
         const originationCoord = viewport?.originationCoord;
         const zoom = viewport?.zoom ?? this.viewportState.zoom;
         if (originationCoord) {
@@ -1535,7 +1534,7 @@ class PlaitBoardComponent {
     }
     calcViewBox(zoom = this.viewportState.zoom) {
         zoom = clampZoomLevel(zoom);
-        const scrollBarWidth = this.viewportState.scrollBarWidth;
+        const scrollBarWidth = this.plaitOptions?.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
         const viewportContainerBox = getViewportContainerBox(this.board);
         const groupBBox = getRootGroupBBox(this.board, zoom);
         const horizontalPadding = viewportContainerBox.width / 2;
@@ -1584,13 +1583,15 @@ class PlaitBoardComponent {
     }
     setScrollLeft(left) {
         const viewportContainerBox = getViewportContainerBox(this.board);
-        const { viewportWidth, scrollBarWidth } = this.viewportState;
+        const scrollBarWidth = this.plaitOptions?.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+        const { viewportWidth } = this.viewportState;
         const width = viewportWidth - viewportContainerBox.width + scrollBarWidth;
         this.viewportState.scrollLeft = left < 0 ? 0 : left > width ? width : left;
     }
     setScrollTop(top) {
         const viewportContainerBox = getViewportContainerBox(this.board);
-        const { viewportHeight, scrollBarWidth } = this.viewportState;
+        const scrollBarWidth = this.plaitOptions?.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+        const { viewportHeight } = this.viewportState;
         const height = viewportHeight - viewportContainerBox.height + scrollBarWidth;
         this.viewportState.scrollTop = top < 0 ? 0 : top > height ? height : top;
     }
@@ -1698,8 +1699,8 @@ class PlaitBoardComponent {
         const svgRect = this.host.getBoundingClientRect();
         const viewportContainerBox = getViewportContainerBox(this.board);
         if (svgRect.width > viewportContainerBox.width || svgRect.height > viewportContainerBox.height) {
+            const scrollBarWidth = this.plaitOptions?.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
             const matrix = this.getMatrix();
-            const scrollBarWidth = this.viewportState.scrollBarWidth;
             const [nodePointX, nodePointY] = convertToViewportCoordinates([client.x, client.y], matrix);
             const [fullNodePointX, fullNodePointY] = convertToViewportCoordinates([client.x + client.width, client.y + client.height], matrix);
             let newLeft = this.viewportState.scrollLeft;
@@ -1894,5 +1895,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BOARD_TO_ON_CHANGE, CLIP_BOARD_FORMAT_KEY, ELEMENT_TO_PLUGIN_COMPONENT, FLUSHING, HOST_TO_ROUGH_SVG, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MERGING, NS, PLAIT_BOARD_TO_COMPONENT, Path, PlaitBoardComponent, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPointerType, PlaitToolbarComponent, SAVING, SCROLL_BAR_WIDTH, Transforms, Viewport, clampZoomLevel, convertToViewportCoordinates, createG, createSVG, createText, distanceBetweenPointAndPoint, distanceBetweenPointAndSegment, getBoardClientBox, getRootGroupBBox, getViewportContainerBox, hasBeforeContextChange, hotkeys, idCreator, inverse, invertMatrix, invertViewportCoordinates, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, normalizePoint, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformMat3, transformPoint, transformPoints };
+export { BOARD_TO_ON_CHANGE, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ELEMENT_TO_PLUGIN_COMPONENT, FLUSHING, HOST_TO_ROUGH_SVG, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MERGING, NS, PLAIT_BOARD_TO_COMPONENT, Path, PlaitBoardComponent, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPointerType, PlaitToolbarComponent, SAVING, SCROLL_BAR_WIDTH, Transforms, Viewport, clampZoomLevel, convertToViewportCoordinates, createG, createSVG, createText, distanceBetweenPointAndPoint, distanceBetweenPointAndSegment, getBoardClientBox, getRootGroupBBox, getViewportContainerBox, hasBeforeContextChange, hotkeys, idCreator, inverse, invertMatrix, invertViewportCoordinates, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, normalizePoint, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformMat3, transformPoint, transformPoints };
 //# sourceMappingURL=plait-core.mjs.map