@plait/core 0.5.0 → 0.6.0

package/fesm2020/plait-core.mjs

@@ -61,6 +61,14 @@ function getRectangleByElements(board, elements, recursion) {
             calcRectangleClient(element);
         }
     });
+    if (boundaryBox.left === Number.MAX_VALUE) {
+        return {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
+    }
     return {
         x: boundaryBox.left,
         y: boundaryBox.top,
@@ -72,6 +80,54 @@ function getBoardRectangle(board) {
     return getRectangleByElements(board, board.children, true);
 }
 
+var ThemeColorMode;
+(function (ThemeColorMode) {
+    ThemeColorMode["default"] = "default";
+    ThemeColorMode["colorful"] = "colorful";
+    ThemeColorMode["soft"] = "soft";
+    ThemeColorMode["retro"] = "retro";
+    ThemeColorMode["dark"] = "dark";
+    ThemeColorMode["starry"] = "starry";
+})(ThemeColorMode || (ThemeColorMode = {}));
+const DefaultThemeColor = {
+    mode: ThemeColorMode.default,
+    boardBackground: '#ffffff',
+    textColor: '#333333'
+};
+const ColorfulThemeColor = {
+    mode: ThemeColorMode.colorful,
+    boardBackground: '#ffffff',
+    textColor: '#333333'
+};
+const SoftThemeColor = {
+    mode: ThemeColorMode.soft,
+    boardBackground: '#f5f5f5',
+    textColor: '#333333'
+};
+const RetroThemeColor = {
+    mode: ThemeColorMode.retro,
+    boardBackground: '#f9f8ed',
+    textColor: '#333333'
+};
+const DarkThemeColor = {
+    mode: ThemeColorMode.dark,
+    boardBackground: '#141414',
+    textColor: '#FFFFFF'
+};
+const StarryThemeColor = {
+    mode: ThemeColorMode.starry,
+    boardBackground: '#0d2537',
+    textColor: '#FFFFFF'
+};
+const ThemeColors = [
+    DefaultThemeColor,
+    ColorfulThemeColor,
+    SoftThemeColor,
+    RetroThemeColor,
+    DarkThemeColor,
+    StarryThemeColor
+];
+
 const PlaitBoard = {
     isBoard(value) {
         const cachedIsBoard = IS_BOARD_CACHE.get(value);
@@ -142,6 +198,9 @@ const PlaitBoard = {
     },
     getMovingPoint(board) {
         return BOARD_TO_MOVING_POINT.get(board);
+    },
+    getThemeColors(board) {
+        return (board.options.themeColors || ThemeColors);
     }
 };
 
@@ -393,7 +452,7 @@ const PlaitNode = {
     }
 };
 
-const applyToDraft = (board, selection, viewport, op) => {
+const applyToDraft = (board, selection, viewport, theme, op) => {
     switch (op.type) {
         case 'insert_node': {
             const { path, node } = op;
@@ -498,8 +557,13 @@ const applyToDraft = (board, selection, viewport, op) => {
             }
             break;
         }
+        case 'set_theme': {
+            const { newProperties } = op;
+            theme = newProperties;
+            break;
+        }
     }
-    return { selection, viewport };
+    return { selection, viewport, theme };
 };
 const GeneralTransforms = {
     /**
@@ -509,10 +573,12 @@ const GeneralTransforms = {
         board.children = createDraft(board.children);
         let viewport = board.viewport && createDraft(board.viewport);
         let selection = board.selection && createDraft(board.selection);
+        let theme = board.theme && createDraft(board.theme);
         try {
-            const state = applyToDraft(board, selection, viewport, op);
+            const state = applyToDraft(board, selection, viewport, theme, op);
             viewport = state.viewport;
             selection = state.selection;
+            theme = state.theme;
         }
         finally {
             board.children = finishDraft(board.children);
@@ -523,6 +589,7 @@ const GeneralTransforms = {
                 board.selection = null;
             }
             board.viewport = isDraft(viewport) ? finishDraft(viewport) : viewport;
+            board.theme = isDraft(theme) ? finishDraft(theme) : theme;
         }
     }
 };
@@ -582,7 +649,7 @@ function setViewport(board, viewport) {
     const operation = { type: 'set_viewport', properties: board.viewport, newProperties: viewport };
     board.apply(operation);
 }
-const ViewportTransforms = {
+const ViewportTransforms$1 = {
     setViewport
 };
 
@@ -1350,6 +1417,10 @@ const inverse = (op) => {
                 return { ...op, properties: newProperties, newProperties: properties };
             }
         }
+        case 'set_theme': {
+            const { properties, newProperties } = op;
+            return { ...op, properties: newProperties, newProperties: properties };
+        }
     }
 };
 const PlaitOperation = {
@@ -1443,18 +1514,16 @@ function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
 }
 function getViewBox(board, zoom) {
     const { hideScrollbar } = board.options;
-    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+    const scrollBarWidth = hideScrollbar ? 0 : SCROLL_BAR_WIDTH;
     const viewportContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
     const elementHostBBox = getElementHostBBox(board, zoom);
     const horizontalPadding = viewportContainerRect.width / 2;
     const verticalPadding = viewportContainerRect.height / 2;
-    const viewportWidth = (elementHostBBox.right - elementHostBBox.left) * zoom + 2 * horizontalPadding + scrollBarWidth;
-    const viewportHeight = (elementHostBBox.bottom - elementHostBBox.top) * zoom + 2 * verticalPadding + scrollBarWidth;
     const viewBox = [
         elementHostBBox.left - horizontalPadding / zoom,
         elementHostBBox.top - verticalPadding / zoom,
-        viewportWidth / zoom,
-        viewportHeight / zoom
+        elementHostBBox.right - elementHostBBox.left + (horizontalPadding * 2 - scrollBarWidth) / zoom,
+        elementHostBBox.bottom - elementHostBBox.top + (verticalPadding * 2 - scrollBarWidth) / zoom
     ];
     return viewBox;
 }
@@ -1540,6 +1609,14 @@ const setIsFromViewportChange = (board, state) => {
 };
 function scrollToRectangle(board, client) { }
 
+function setTheme(board, themeColorMode) {
+    const operation = { type: 'set_theme', properties: board.theme, newProperties: themeColorMode };
+    board.apply(operation);
+}
+const ViewportTransforms = {
+    setTheme
+};
+
 function updateViewport(board, origination, zoom) {
     zoom = zoom ?? board.viewport.zoom;
     setViewport(board, {
@@ -1595,16 +1672,28 @@ function fitViewport(board) {
     ];
     updateViewport(board, newOrigination, newZoom);
 }
+/**
+ * apply theme to every element (remove element custom properties)
+ * invoke applyThemeColor
+ */
+function updateThemeColor(board, mode) {
+    mode = mode ?? board.theme.themeColorMode;
+    setTheme(board, { themeColorMode: mode });
+    depthFirstRecursion(board, element => {
+        board.applyTheme(element);
+    });
+}
 const BoardTransforms = {
     updatePointerType,
     updateViewport,
     fitViewport,
-    updateZoom
+    updateZoom,
+    updateThemeColor
 };
 
 const Transforms = {
     ...GeneralTransforms,
-    ...ViewportTransforms,
+    ...ViewportTransforms$1,
     ...SelectionTransforms,
     ...NodeTransforms
 };
@@ -1626,10 +1715,10 @@ const PathRef = {
 function createBoard(children, options) {
     const board = {
         viewport: {
-            zoom: 1,
-            viewBackgroundColor: '#000'
+            zoom: 1
         },
         children,
+        theme: { themeColorMode: ThemeColorMode.default },
         operations: [],
         history: {
             redos: [],
@@ -1703,7 +1792,8 @@ function createBoard(children, options) {
         isHitSelection: element => false,
         isRecursion: element => true,
         isMovable: element => false,
-        getRectangle: element => null
+        getRectangle: element => null,
+        applyTheme: (element) => { }
     };
     return board;
 }
@@ -2327,7 +2417,7 @@ class PlaitBoardComponent {
         return this.svg.nativeElement;
     }
     get hostClass() {
-        return `plait-board-container pointer-${this.board.pointer}`;
+        return `plait-board-container pointer-${this.board.pointer} theme-${this.board.theme.themeColorMode}`;
     }
     get readonly() {
         return this.board.options.readonly;
@@ -2381,7 +2471,8 @@ class PlaitBoardComponent {
                     children: this.board.children,
                     operations: this.board.operations,
                     viewport: this.board.viewport,
-                    selection: this.board.selection
+                    selection: this.board.selection,
+                    theme: this.board.theme
                 };
                 this.updateIslands();
                 this.plaitChange.emit(changeEvent);
@@ -2422,6 +2513,9 @@ class PlaitBoardComponent {
         if (this.plaitViewport) {
             this.board.viewport = this.plaitViewport;
         }
+        if (this.plaitTheme) {
+            this.board.theme = this.plaitTheme;
+        }
     }
     initializeHookListener() {
         fromEvent(this.host, 'mousedown')
@@ -2466,6 +2560,16 @@ class PlaitBoardComponent {
                     event.preventDefault();
                     BoardTransforms.updateZoom(this.board, this.board.viewport.zoom - 0.1);
                 }
+                if (isHotkey('mod+0', { byKey: true })(event)) {
+                    event.preventDefault();
+                    BoardTransforms.updateZoom(this.board, 1);
+                    return;
+                }
+                if (isHotkey('mod+shift+=', { byKey: true })(event)) {
+                    event.preventDefault();
+                    BoardTransforms.fitViewport(this.board);
+                    return;
+                }
             }
         }), filter(event => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board) && !hasInputOrTextareaTarget(event.target)))
             .subscribe((event) => {
@@ -2569,9 +2673,9 @@ class PlaitBoardComponent {
     }
 }
 PlaitBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions", plaitTheme: "plaitTheme" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="viewport-container" #viewportContainer>
-            <svg #svg width="100%" height="100%" style="position: relative;"><g class="element-host"></g></svg>
+            <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg"><g class="element-host"></g></svg>
             <plait-children [board]="board" [effect]="effect"></plait-children>
         </div>
         <ng-content></ng-content>
@@ -2582,7 +2686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                     selector: 'plait-board',
                     template: `
         <div class="viewport-container" #viewportContainer>
-            <svg #svg width="100%" height="100%" style="position: relative;"><g class="element-host"></g></svg>
+            <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg"><g class="element-host"></g></svg>
             <plait-children [board]="board" [effect]="effect"></plait-children>
         </div>
         <ng-content></ng-content>
@@ -2597,6 +2701,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 type: Input
             }], plaitOptions: [{
                 type: Input
+            }], plaitTheme: [{
+                type: Input
             }], plaitChange: [{
                 type: Output
             }], plaitBoardInitialized: [{
@@ -2676,5 +2782,5 @@ const clearNodeWeakMap = (object) => {
  * Generated bundle index. Do not edit.
  */
 
-export { BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ELEMENT_TO_COMPONENT, FLUSHING, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MAX_RADIUS, MERGING, NODE_TO_INDEX, NODE_TO_PARENT, NS, PATH_REFS, POINTER_BUTTON, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, RectangleClient, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createForeignObject, createG, createPath, createSVG, createSelectionOuterG, createTestingBoard, createText, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, drawAbstractRoundRectangle, drawArrow, drawCircle, drawLine, drawLinearPath, drawRoundRectangle, fakeNodeWeakMap, getBoardRectangle, getElementHostBBox, getHitElements, getMovingElements, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isInPlaitBoard, isIntersectionElements, isMainPointer, isNullOrUndefined, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, shouldClear, shouldMerge, shouldSave, throttleRAF, toPoint, transformPoint, transformPoints, updateForeignObject, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
+export { BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ColorfulThemeColor, DarkThemeColor, DefaultThemeColor, ELEMENT_TO_COMPONENT, FLUSHING, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MAX_RADIUS, MERGING, NODE_TO_INDEX, NODE_TO_PARENT, NS, PATH_REFS, POINTER_BUTTON, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, RectangleClient, RetroThemeColor, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, SoftThemeColor, StarryThemeColor, ThemeColorMode, ThemeColors, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createForeignObject, createG, createPath, createSVG, createSelectionOuterG, createTestingBoard, createText, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, drawAbstractRoundRectangle, drawArrow, drawCircle, drawLine, drawLinearPath, drawRoundRectangle, fakeNodeWeakMap, getBoardRectangle, getElementHostBBox, getHitElements, getMovingElements, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isInPlaitBoard, isIntersectionElements, isMainPointer, isNullOrUndefined, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, shouldClear, shouldMerge, shouldSave, throttleRAF, toPoint, transformPoint, transformPoints, updateForeignObject, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map