@plait/core 0.0.24 → 0.0.29

package/fesm2020/plait-core.mjs

@@ -1,32 +1,13 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input, EventEmitter, HostBinding, ViewChild, Output, NgModule } from '@angular/core';
-import produce, { createDraft, finishDraft, isDraft } from 'immer';
+import rough from 'roughjs/bin/rough';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter } from 'rxjs/operators';
-import rough from 'roughjs/bin/rough';
+import produce, { createDraft, finishDraft, isDraft } from 'immer';
 import { isKeyHotkey, isHotkey } from 'is-hotkey';
 import * as i2 from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 
-// 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();
-
-function isNullOrUndefined(value) {
-    return value === null || value === undefined;
-}
-
-const Viewport = {
-    isViewport: (value) => {
-        return (!isNullOrUndefined(value.offsetX) &&
-            !isNullOrUndefined(value.offsetY) &&
-            !isNullOrUndefined(value.zoom) &&
-            !isNullOrUndefined(value.viewBackgroundColor));
-    }
-};
-
 const Path = {
     parent(path) {
         if (path.length === 0) {
@@ -165,6 +146,108 @@ const Path = {
     }
 };
 
+const isSetViewportOperation = (value) => {
+    return value.type === 'set_viewport';
+};
+const inverse = (op) => {
+    switch (op.type) {
+        case 'insert_node': {
+            return { ...op, type: 'remove_node' };
+        }
+        case 'remove_node': {
+            return { ...op, type: 'insert_node' };
+        }
+        case 'move_node': {
+            const { newPath, path } = op;
+            // PERF: in this case the move operation is a no-op anyways.
+            if (Path.equals(newPath, path)) {
+                return op;
+            }
+            // If the move happens completely within a single parent the path and
+            // newPath are stable with respect to each other.
+            if (Path.isSibling(path, newPath)) {
+                return { ...op, path: newPath, newPath: path };
+            }
+            // If the move does not happen within a single parent it is possible
+            // for the move to impact the true path to the location where the node
+            // was removed from and where it was inserted. We have to adjust for this
+            // and find the original path. We can accomplish this (only in non-sibling)
+            // moves by looking at the impact of the move operation on the node
+            // after the original move path.
+            const inversePath = Path.transform(path, op);
+            const inverseNewPath = Path.transform(Path.next(path), op);
+            return { ...op, path: inversePath, newPath: inverseNewPath };
+        }
+        case 'set_node': {
+            const { properties, newProperties } = op;
+            return { ...op, properties: newProperties, newProperties: properties };
+        }
+        case 'set_selection': {
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: null
+                };
+            }
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: null,
+                    newProperties: properties
+                };
+            }
+            else {
+                return { ...op, properties: newProperties, newProperties: properties };
+            }
+        }
+        case 'set_viewport': {
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: newProperties
+                };
+            }
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: properties,
+                    newProperties: properties
+                };
+            }
+            else {
+                return { ...op, properties: newProperties, newProperties: properties };
+            }
+        }
+    }
+};
+const PlaitOperation = {
+    isSetViewportOperation,
+    inverse
+};
+
+// 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();
+
+function isNullOrUndefined(value) {
+    return value === null || value === undefined;
+}
+
+const Viewport = {
+    isViewport: (value) => {
+        return (!isNullOrUndefined(value.offsetX) &&
+            !isNullOrUndefined(value.offsetY) &&
+            !isNullOrUndefined(value.zoom) &&
+            !isNullOrUndefined(value.viewBackgroundColor));
+    }
+};
+
 const PlaitNode = {
     parent: (board, path) => {
         const parentPath = Path.parent(path);
@@ -446,6 +529,13 @@ function withBoard(board) {
     return board;
 }
 
+/**
+ * Extendable Custom Types Interface
+ */
+
+const SAVING = new WeakMap();
+const MERGING = new WeakMap();
+
 const NS = 'http://www.w3.org/2000/svg';
 function toPoint(x, y, container) {
     const rect = container.getBoundingClientRect();
@@ -468,174 +558,6 @@ function createText(x, y, fill, textContent) {
     return text;
 }
 
-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;
-}
-
-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 = getViewBox(board);
-    let x = (point[0] / width) * viewBox.width + viewBox.minX;
-    let y = (point[1] / height) * viewBox.height + viewBox.minY;
-    const newPoint = [x - board.viewport.offsetX, y - board.viewport.offsetY];
-    return newPoint;
-}
-function getViewBox(board) {
-    const { width, height } = board.host.getBoundingClientRect();
-    const scaleWidth = (board.viewport.zoom - 1) * width;
-    const scaleHeight = (board.viewport.zoom - 1) * height;
-    const viewBoxWidth = width - scaleWidth;
-    const viewBoxHeight = height - scaleHeight;
-    const minX = scaleWidth / 2;
-    const minY = scaleHeight / 2;
-    return { minX, minY: minY, width: viewBoxWidth, height: viewBoxHeight };
-}
-function isNoSelectionElement(e) {
-    return e.target?.closest('.plait-board-attached');
-}
-
-function withSelection(board) {
-    const { mousedown, mousemove, globalMouseup } = board;
-    let start = null;
-    let end = null;
-    board.mousedown = (event) => {
-        mousedown(event);
-    };
-    board.mousemove = (event) => {
-        const movedTarget = toPoint(event.x, event.y, board.host);
-        if (start) {
-            const rectangleClient = toRectangleClient([start, movedTarget]);
-            if (start && Math.hypot(rectangleClient.width, rectangleClient.height) > 5) {
-                end = movedTarget;
-            }
-        }
-        mousemove(event);
-    };
-    board.globalMouseup = (event) => {
-        if (isNoSelectionElement(event)) {
-            return globalMouseup(event);
-        }
-        else {
-            if (!start && event.target instanceof Node && board.host.contains(event.target)) {
-                start = toPoint(event.x, event.y, board.host);
-            }
-        }
-        if (start) {
-            Transforms.setSelection(board, { anchor: start, focus: start });
-        }
-        else {
-            Transforms.setSelection(board, null);
-        }
-        start = null;
-        end = null;
-        globalMouseup(event);
-    };
-    return board;
-}
-
-const isSetViewportOperation = (value) => {
-    return value.type === 'set_viewport';
-};
-const inverse = (op) => {
-    switch (op.type) {
-        case 'insert_node': {
-            return { ...op, type: 'remove_node' };
-        }
-        case 'remove_node': {
-            return { ...op, type: 'insert_node' };
-        }
-        case 'move_node': {
-            const { newPath, path } = op;
-            // PERF: in this case the move operation is a no-op anyways.
-            if (Path.equals(newPath, path)) {
-                return op;
-            }
-            // If the move happens completely within a single parent the path and
-            // newPath are stable with respect to each other.
-            if (Path.isSibling(path, newPath)) {
-                return { ...op, path: newPath, newPath: path };
-            }
-            // If the move does not happen within a single parent it is possible
-            // for the move to impact the true path to the location where the node
-            // was removed from and where it was inserted. We have to adjust for this
-            // and find the original path. We can accomplish this (only in non-sibling)
-            // moves by looking at the impact of the move operation on the node
-            // after the original move path.
-            const inversePath = Path.transform(path, op);
-            const inverseNewPath = Path.transform(Path.next(path), op);
-            return { ...op, path: inversePath, newPath: inverseNewPath };
-        }
-        case 'set_node': {
-            const { properties, newProperties } = op;
-            return { ...op, properties: newProperties, newProperties: properties };
-        }
-        case 'set_selection': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: null
-                };
-            }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: null,
-                    newProperties: properties
-                };
-            }
-            else {
-                return { ...op, properties: newProperties, newProperties: properties };
-            }
-        }
-        case 'set_viewport': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: newProperties
-                };
-            }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: properties,
-                    newProperties: properties
-                };
-            }
-            else {
-                return { ...op, properties: newProperties, newProperties: properties };
-            }
-        }
-    }
-};
-const PlaitOperation = {
-    isSetViewportOperation,
-    inverse
-};
-
-/**
- * Extendable Custom Types Interface
- */
-
-const SAVING = new WeakMap();
-const MERGING = new WeakMap();
-
 const IS_IOS = typeof navigator !== 'undefined' &&
     typeof window !== 'undefined' &&
     /iPad|iPhone|iPod/.test(navigator.userAgent) &&
@@ -649,6 +571,17 @@ const IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.u
 // 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;
+}
+
 /**
  * Hotkey mappings for each platform.
  */
@@ -791,6 +724,39 @@ function rotate(x1, y1, x2, y2, angle) {
     // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
     return [(x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2, (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2];
 }
+function distanceBetweenPointAndPoint(x1, y1, x2, y2) {
+    const dx = x1 - x2;
+    const dy = y1 - y2;
+    return Math.hypot(dx, dy);
+}
+
+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 = getViewBox(board);
+    let x = (point[0] / width) * viewBox.width + viewBox.minX;
+    let y = (point[1] / height) * viewBox.height + viewBox.minY;
+    const newPoint = [x - board.viewport.offsetX, y - board.viewport.offsetY];
+    return newPoint;
+}
+function getViewBox(board) {
+    const { width, height } = board.host.getBoundingClientRect();
+    const scaleWidth = (board.viewport.zoom - 1) * width;
+    const scaleHeight = (board.viewport.zoom - 1) * height;
+    const viewBoxWidth = width - scaleWidth;
+    const viewBoxHeight = height - scaleHeight;
+    const minX = scaleWidth / 2;
+    const minY = scaleHeight / 2;
+    return { minX, minY: minY, width: viewBoxWidth, height: viewBoxHeight };
+}
+function isNoSelectionElement(e) {
+    return e.target?.closest('.plait-board-attached');
+}
 
 /**
  * Check whether to merge an operation into the previous operation.
@@ -805,7 +771,7 @@ const shouldMerge = (op, prev) => {
  * Check whether an operation needs to be saved to the history.
  */
 const shouldSave = (op, prev) => {
-    if (op.type === 'set_selection') {
+    if (op.type === 'set_selection' || op.type === 'set_viewport') {
         return false;
     }
     return true;
@@ -938,6 +904,45 @@ function withHistroy(board) {
     return board;
 }
 
+function withSelection(board) {
+    const { mousedown, mousemove, globalMouseup } = board;
+    let start = null;
+    let end = null;
+    board.mousedown = (event) => {
+        mousedown(event);
+    };
+    board.mousemove = (event) => {
+        const movedTarget = toPoint(event.x, event.y, board.host);
+        if (start) {
+            const rectangleClient = toRectangleClient([start, movedTarget]);
+            if (start && Math.hypot(rectangleClient.width, rectangleClient.height) > 5) {
+                end = movedTarget;
+            }
+        }
+        mousemove(event);
+    };
+    board.globalMouseup = (event) => {
+        if (isNoSelectionElement(event)) {
+            return globalMouseup(event);
+        }
+        else {
+            if (!start && event.target instanceof Node && board.host.contains(event.target)) {
+                start = toPoint(event.x, event.y, board.host);
+            }
+        }
+        if (start) {
+            Transforms.setSelection(board, { anchor: start, focus: start });
+        }
+        else {
+            Transforms.setSelection(board, null);
+        }
+        start = null;
+        end = null;
+        globalMouseup(event);
+    };
+    return board;
+}
+
 class PlaitElementComponent {
     constructor(renderer2, viewContainerRef) {
         this.renderer2 = renderer2;
@@ -1028,6 +1033,9 @@ class PlaitBoardComponent {
     get isFocused() {
         return this.board?.selection;
     }
+    get focused() {
+        return this.isFocused;
+    }
     ngOnInit() {
         const roughSVG = rough.svg(this.host, { options: { roughness: 0, strokeWidth: 1 } });
         HOST_TO_ROUGH_SVG.set(this.host, roughSVG);
@@ -1111,7 +1119,7 @@ class PlaitBoardComponent {
             .subscribe((event) => {
             this.board?.keyup(event);
         });
-        fromEvent(this.host, 'copy')
+        fromEvent(document, 'copy')
             .pipe(takeUntil(this.destroy$), filter(() => {
             return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
         }))
@@ -1119,14 +1127,14 @@ class PlaitBoardComponent {
             event.preventDefault();
             this.board?.setFragment(event.clipboardData);
         });
-        fromEvent(this.host, 'paste')
+        fromEvent(document, 'paste')
             .pipe(takeUntil(this.destroy$), filter(() => {
             return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
         }))
             .subscribe((event) => {
             this.board?.insertFragment(event.clipboardData);
         });
-        fromEvent(this.host, 'cut')
+        fromEvent(document, 'cut')
             .pipe(takeUntil(this.destroy$), filter(() => {
             return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
         }))
@@ -1179,7 +1187,7 @@ class PlaitBoardComponent {
     }
 }
 PlaitBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitReadonly: "plaitReadonly", plaitAllowClearBoard: "plaitAllowClearBoard" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass" } }, viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }], ngImport: i0, template: `
+PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitReadonly: "plaitReadonly", plaitAllowClearBoard: "plaitAllowClearBoard" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.focused": "this.focused" } }, viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }], ngImport: i0, template: `
         <svg #svg width="100%" height="100%" style="position: relative"></svg>
         <div *ngIf="isFocused" class="plait-toolbar island zoom-toolbar plait-board-attached">
             <button class="item" (mousedown)="zoomOut($event)">-</button>
@@ -1241,6 +1249,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], plaitBoardInitialized: [{
                 type: Output
+            }], focused: [{
+                type: HostBinding,
+                args: ['class.focused']
             }] } });
 
 class PlaitModule {
@@ -1267,5 +1278,5 @@ const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
  * Generated bundle index. Do not edit.
  */
 
-export { BOARD_TO_ON_CHANGE, BaseCursorStatus, CLIP_BOARD_FORMAT_KEY, 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, Path, PlaitBoardComponent, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, SAVING, Transforms, Viewport, createG, createSVG, createText, distanceBetweenPointAndSegment, getViewBox, hotkeys, idCreator, inverse, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformPoint, transformPoints };
+export { BOARD_TO_ON_CHANGE, BaseCursorStatus, CLIP_BOARD_FORMAT_KEY, 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, Path, PlaitBoardComponent, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, SAVING, Transforms, Viewport, createG, createSVG, createText, distanceBetweenPointAndPoint, distanceBetweenPointAndSegment, getViewBox, hotkeys, idCreator, inverse, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformPoint, transformPoints };
 //# sourceMappingURL=plait-core.mjs.map