@plait/mind 0.16.0 → 0.18.0

package/fesm2015/plait-mind.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, NgModule, NgZone, Directive, Input, HostListener } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, NgZone, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Path, PlaitBoard, depthFirstRecursion, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, drawAbstractRoundRectangle, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Path, PlaitBoard, depthFirstRecursion, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
 import { MindLayoutType, isIndentedLayout, AbstractNode, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
 import { TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
@@ -186,7 +186,9 @@ const NodeDefaultSpace = {
         emojiAndText: BASE * 1.5
     },
     vertical: {
-        nodeAndText: BASE * 1.5
+        nodeAndText: BASE * 1.5,
+        nodeAndImage: BASE,
+        imageAndText: BASE * 1.5
     }
 };
 const RootDefaultSpace = {
@@ -215,18 +217,27 @@ const getSpaceEmojiAndText = (element) => {
 };
 const NodeSpace = {
     getNodeWidth(board, element) {
+        var _a;
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        const imageWidth = MindElement.hasImage(element) ? (_a = element.data.image) === null || _a === void 0 ? void 0 : _a.width : 0;
         if (MindElement.hasEmojis(element)) {
             return (NodeSpace.getEmojiLeftSpace(board, element) +
                 getEmojisWidthHeight(board, element).width +
                 getSpaceEmojiAndText(element) +
-                element.width +
+                Math.max(element.width, imageWidth) +
                 nodeAndText);
         }
-        return nodeAndText + element.width + nodeAndText;
+        return nodeAndText + Math.max(element.width, imageWidth) + nodeAndText;
     },
     getNodeHeight(board, element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        if (MindElement.hasImage(element)) {
+            return (NodeDefaultSpace.vertical.nodeAndImage +
+                element.data.image.height +
+                NodeDefaultSpace.vertical.imageAndText +
+                element.height +
+                nodeAndText);
+        }
         return nodeAndText + element.height + nodeAndText;
     },
     getTextLeftSpace(board, element) {
@@ -240,7 +251,15 @@ const NodeSpace = {
     },
     getTextTopSpace(element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText;
+        if (MindElement.hasImage(element)) {
+            return element.data.image.height + NodeDefaultSpace.vertical.nodeAndImage + NodeDefaultSpace.vertical.imageAndText;
+        }
+        else {
+            return nodeAndText;
+        }
+    },
+    getImageTopSpace(element) {
+        return NodeDefaultSpace.vertical.nodeAndImage;
     },
     getEmojiLeftSpace(board, element) {
         const options = board.getPluginOptions(WithMindPluginKey);
@@ -267,12 +286,12 @@ function getEmojiRectangle(board, element) {
 function getEmojiForeignRectangle(board, element) {
     let { x, y } = getRectangleByNode(MindElement.getNode(element));
     x = x + NodeSpace.getEmojiLeftSpace(board, element);
-    const { width, height } = getEmojisWidthHeight(board, element);
+    const { width } = getEmojisWidthHeight(board, element);
     return {
         x,
         y,
         width,
-        height: height + NodeSpace.getEmojiTopSpace(element) * 2
+        height: NodeSpace.getNodeHeight(board, element)
     };
 }
 const isHitEmojis = (board, element, point) => {
@@ -294,6 +313,23 @@ function getTopicRectangleByElement(board, nodeRectangle, element) {
     return { height, width, x, y };
 }
 
+function getImageForeignRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getTextLeftSpace(board, element);
+    y = NodeSpace.getImageTopSpace(element) + y;
+    const { width, height } = element.data.image;
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+const isHitImage = (board, element, range) => {
+    const client = getImageForeignRectangle(board, element);
+    return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
+};
+
 const NODE_MIN_WIDTH = 18;
 
 function editTopic(element) {
@@ -403,7 +439,7 @@ const copyNewNode = (node) => {
 const extractNodesText = (node) => {
     let str = '';
     if (node) {
-        str += Node.string(node.data.topic.children[0]) + ' ';
+        str += Node.string(node.data.topic) + ' ';
         for (const childNode of node.children) {
             str += extractNodesText(childNode);
         }
@@ -590,15 +626,20 @@ const adjustNodeToRoot = (board, node) => {
 };
 
 const DefaultAbstractNodeStyle = {
-    strokeColor: GRAY_COLOR,
-    strokeWidth: 2,
     branchColor: GRAY_COLOR,
-    branchWidth: 2
+    branchWidth: 2,
+    shape: {
+        strokeColor: GRAY_COLOR,
+        strokeWidth: 2
+    }
 };
 const DefaultNodeStyle = {
-    strokeWidth: 3,
     branchWidth: 3,
-    fill: 'none'
+    shape: {
+        rectangleRadius: 4,
+        strokeWidth: 3,
+        fill: 'none'
+    }
 };
 
 const getAvailableProperty = (board, element, propertyKey) => {
@@ -833,11 +874,15 @@ const getStrokeByMindElement = (board, element) => {
         return element.strokeColor || defaultRootStroke;
     }
     if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
-        return element.strokeColor || DefaultAbstractNodeStyle.strokeColor;
-        ;
+        return element.strokeColor || DefaultAbstractNodeStyle.shape.strokeColor;
     }
     return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
 };
+const getStrokeWidthByElement = (board, element) => {
+    const strokeWidth = element.strokeWidth ||
+        (AbstractNode.isAbstract(element) ? DefaultAbstractNodeStyle.shape.strokeWidth : DefaultNodeStyle.shape.strokeWidth);
+    return strokeWidth;
+};
 const getShapeByElement = (board, element) => {
     const shape = getAvailableProperty(board, element, 'shape');
     return shape || MindElementShape.roundRectangle;
@@ -1278,7 +1323,7 @@ function drawLogicLink(board, parent, node, isHorizontal, defaultStroke = null,
     const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, parent.origin);
     const hasStraightLine = branchShape === BranchShape.polyline ? true : !parent.origin.isRoot;
     const parentShape = getShapeByElement(board, parent.origin);
-    const shape = node.origin.shape ? node.origin.shape : parentShape;
+    const shape = getShapeByElement(board, node.origin);
     const hasUnderlineShape = shape === MindElementShape.underline;
     const hasUnderlineShapeOfParent = parentShape === MindElementShape.underline;
     const nodeClient = getRectangleByNode(node);
@@ -1356,6 +1401,12 @@ const drawFakeDragNode = (board, element, offsetX, offsetY) => {
         updateForeignObject(fakeEmojisG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
         dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(fakeEmojisG);
     }
+    if (MindElement.hasImage(element)) {
+        const fakeImageG = activeComponent.imageDrawer.g.cloneNode(true);
+        const foreignRectangle = getImageForeignRectangle(board, element);
+        updateForeignObject(fakeImageG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
+        dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(fakeImageG);
+    }
     return dragFakeNodeG;
 };
 const drawFakeDropNode = (board, dropTarget, path) => {
@@ -1867,6 +1918,14 @@ const MindElement = {
             return false;
         }
     },
+    hasImage(element) {
+        if (element.data.image) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
     getEmojis(element) {
         return element.data.emojis;
     },
@@ -1930,15 +1989,15 @@ function drawRoundRectangleByNode(board, node) {
 }
 function drawRoundRectangleByElement(board, nodeRectangle, element) {
     const defaultRootFill = getMindThemeColor(board).rootFill;
-    const fill = element.fill ? element.fill : element.isRoot ? defaultRootFill : DefaultNodeStyle.fill;
+    const fill = element.fill ? element.fill : element.isRoot ? defaultRootFill : DefaultNodeStyle.shape.fill;
     const stroke = getStrokeByMindElement(board, element);
-    const strokeWidth = element.strokeWidth ? element.strokeWidth : DefaultNodeStyle.strokeWidth;
+    const strokeWidth = getStrokeWidthByElement(board, element);
     const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), nodeRectangle.x, nodeRectangle.y, nodeRectangle.x + nodeRectangle.width, nodeRectangle.y + nodeRectangle.height, {
         stroke,
         strokeWidth,
         fill,
         fillStyle: 'solid'
-    });
+    }, false, DefaultNodeStyle.shape.rectangleRadius);
     return nodeG;
 }
 
@@ -2152,10 +2211,7 @@ const normalizeWidthAndHeight = (board, width, height) => {
     return { width: newWidth, height: newHeight };
 };
 const setTopic = (board, element, topic, width, height) => {
-    const newElement = Object.assign({ data: { topic } }, normalizeWidthAndHeight(board, width, height));
-    if (MindElement.hasEmojis(element)) {
-        newElement.data.emojis = element.data.emojis;
-    }
+    const newElement = Object.assign({ data: Object.assign(Object.assign({}, element.data), { topic }) }, normalizeWidthAndHeight(board, width, height));
     const path = PlaitBoard.findPath(board, element);
     Transforms.setNode(board, newElement, path);
 };
@@ -2229,7 +2285,7 @@ const removeEmoji = (board, element, emojiItem) => {
 };
 const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
     const newElement = {
-        data: { topic: element.data.topic }
+        data: Object.assign({}, element.data)
     };
     const newEmojis = element.data.emojis.map(value => {
         if (value === oldEmoji) {
@@ -2242,6 +2298,15 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
     Transforms.setNode(board, newElement, path);
 };
 
+const removeImage = (board, element) => {
+    const newElement = {
+        data: Object.assign({}, element.data)
+    };
+    delete newElement.data.image;
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+
 const MindTransforms = {
     setLayout,
     setTopic,
@@ -2255,7 +2320,8 @@ const MindTransforms = {
     removeElements,
     insertNodes,
     insertAbstractNodes,
-    setRightNodeCountByRefs
+    setRightNodeCountByRefs,
+    removeImage
 };
 
 class BaseDrawer {
@@ -2443,6 +2509,48 @@ function handleBoardClass(board, activeHandlePosition, isHorizontal) {
         PlaitBoard.getBoardContainer(board).classList.remove('abstract-resizing-vertical');
     }
 }
+function drawAbstractRoundRectangle(rs, x1, y1, x2, y2, isHorizontal, options) {
+    const width = Math.abs(x1 - x2);
+    const height = Math.abs(y1 - y2);
+    const radius = 5;
+    const handleGap = 4;
+    const handleLength = 10;
+    const handleSpace = handleLength + handleGap * 2;
+    if (isHorizontal) {
+        const handleSideLine = (width - handleSpace - radius * 2) / 2;
+        const sideLine = height - radius * 2;
+        return rs.path(`M${x1 + radius},${y1}
+            l${handleSideLine},0
+            m${handleSpace},0
+            l${handleSideLine},0
+            a${radius},${radius},0,0,1,${radius},${radius}
+            l0,${sideLine}
+            a${radius},${radius},0,0,1,-${radius},${radius}
+            l-${handleSideLine},0
+            m-${handleSpace},0
+            l-${handleSideLine},0
+            a${radius},${radius},0,0,1,-${radius},-${radius}
+            l0,-${sideLine}
+            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
+    }
+    else {
+        const handleSideLine = (height - handleSpace - radius * 2) / 2;
+        const sideLine = width - radius * 2;
+        return rs.path(`M${x1 + radius},${y1}
+            l${sideLine},0
+            a${radius},${radius},0,0,1,${radius},${radius}
+            l0,${handleSideLine}
+            m0,${handleSpace}
+            l0,${handleSideLine}
+            a${radius},${radius},0,0,1,-${radius},${radius}
+            l-${sideLine},0
+            a${radius},${radius},0,0,1,-${radius},-${radius}
+            l0,-${handleSideLine}
+            m0,-${handleSpace}
+            l0,-${handleSideLine}
+            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
+    }
+}
 
 class NodeActiveDrawer extends BaseDrawer {
     canDraw(element, data) {
@@ -2461,14 +2569,13 @@ class NodeActiveDrawer extends BaseDrawer {
             activeG.append(this.abstractOutlineG);
         }
         const node = MindElement.getNode(element);
-        let { x, y, width, height } = getRectangleByNode(node);
-        const strokeG = drawRoundRectangle(PlaitBoard.getRoughSVG(this.board), x - 2, y - 2, x + width + 2, y + height + 2, { stroke: PRIMARY_COLOR, strokeWidth: 2, fill: '' }, true);
+        const rectangle = getRectangleByNode(node);
+        const activeStrokeWidth = 2;
+        // add 0.1 to avoid white gap
+        const offset = (getStrokeWidthByElement(this.board, element) + activeStrokeWidth) / 2 - 0.1;
+        const activeRectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
+        const strokeG = drawRoundRectangle(PlaitBoard.getRoughSVG(this.board), activeRectangle.x, activeRectangle.y, activeRectangle.x + activeRectangle.width, activeRectangle.y + activeRectangle.height, { stroke: PRIMARY_COLOR, strokeWidth: activeStrokeWidth, fill: '' }, true, DefaultNodeStyle.shape.rectangleRadius + offset);
         this.g.appendChild(strokeG);
-        if (!data.isEditing) {
-            const fillG = drawRoundRectangle(PlaitBoard.getRoughSVG(this.board), x - 2, y - 2, x + width + 2, y + height + 2, { stroke: PRIMARY_COLOR, fill: PRIMARY_COLOR, fillStyle: 'solid' }, true);
-            fillG.style.opacity = '0.15';
-            this.g.appendChild(fillG);
-        }
         return activeG;
     }
     updateAbstractOutline(element, activeHandlePosition, resizingLocation) {
@@ -2574,6 +2681,90 @@ class CollapseDrawer extends BaseDrawer {
     }
 }
 
+class MindImageBaseComponent {
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() { }
+}
+MindImageBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+MindImageBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindImageBaseComponent, inputs: { imageItem: "imageItem", board: "board", element: "element" }, host: { classAttribute: "mind-node-image" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        class: 'mind-node-image'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { imageItem: [{
+                type: Input
+            }], board: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }] } });
+
+class NodeImageDrawer {
+    constructor(board, viewContainerRef) {
+        this.board = board;
+        this.viewContainerRef = viewContainerRef;
+        this.componentRef = null;
+    }
+    drawImage(element) {
+        this.destroy();
+        if (MindElement.hasImage(element)) {
+            this.g = createG();
+            const foreignRectangle = getImageForeignRectangle(this.board, element);
+            const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
+            this.g.append(foreignObject);
+            if (this.componentRef) {
+                this.componentRef.destroy();
+                this.componentRef = null;
+            }
+            const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType || MindImageBaseComponent;
+            if (!componentType) {
+                throw new Error('Not implement drawEmoji method error.');
+            }
+            this.componentRef = this.viewContainerRef.createComponent(componentType);
+            this.componentRef.instance.board = this.board;
+            this.componentRef.instance.element = element;
+            this.componentRef.instance.imageItem = element.data.image;
+            foreignObject.append(this.componentRef.instance.nativeElement);
+            return this.g;
+        }
+        return undefined;
+    }
+    drawActive(element) {
+        var _a;
+        this.destroyActive();
+        const imageRectangle = getImageForeignRectangle(this.board, element);
+        const rectangle = RectangleClient.getOutlineRectangle(imageRectangle, -1);
+        const roughSVG = PlaitBoard.getRoughSVG(this.board);
+        this.activeG = roughSVG.rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, {
+            stroke: PRIMARY_COLOR,
+            fill: '',
+            fillStyle: 'solid'
+        });
+        (_a = this.g) === null || _a === void 0 ? void 0 : _a.append(this.activeG);
+    }
+    destroyActive() {
+        var _a;
+        (_a = this.activeG) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+    destroy() {
+        if (this.g) {
+            this.g.remove();
+        }
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+}
+
 // 1. When the text at the end has an italic attribute, the text is partially covered
 // 2. There will be some differences in the width measured by different browsers
 const WIDTH_BUFFER = 4;
@@ -2593,6 +2784,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.nodeInsertDrawer = new NodeInsertDrawer(this.board);
         this.activeDrawer = new NodeActiveDrawer(this.board);
         this.collapseDrawer = new CollapseDrawer(this.board);
+        this.imageDrawer = new NodeImageDrawer(this.board, this.viewContainerRef);
         const plugins = this.board.getPluginOptions(WithMindPluginKey).textPlugins;
         this.textManage = new TextManage(this.board, this.viewContainerRef, () => {
             const rect = getTopicRectangleByNode(this.board, this.node);
@@ -2623,6 +2815,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
         this.drawEmojis();
         this.drawExtend();
+        this.drawImage();
         if (PlaitMind.isMind(this.context.parent)) {
             this.g.classList.add('branch');
         }
@@ -2645,6 +2838,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.drawShape();
             this.drawLink();
             this.drawEmojis();
+            this.drawImage();
             this.drawExtend();
             this.textManage.updateText(this.element.data.topic);
             this.textManage.updateRectangle();
@@ -2666,6 +2860,12 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.g.append(g);
         }
     }
+    drawImage() {
+        const image = this.imageDrawer.drawImage(this.element);
+        if (image) {
+            this.g.append(image);
+        }
+    }
     drawShape() {
         this.destroyShape();
         const shape = getShapeByElement(this.board, this.node.origin);
@@ -2734,6 +2934,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         super.ngOnDestroy();
         this.textManage.destroy();
         this.nodeEmojisDrawer.destroy();
+        this.imageDrawer.destroy();
         this.destroy$.next();
         this.destroy$.complete();
         if (ELEMENT_TO_NODE.get(this.element) === this.node) {
@@ -3554,6 +3755,52 @@ const removeHovered = (element) => {
     }
 };
 
+const withMindImage = (board) => {
+    let selectedImageElement = null;
+    const { keydown, mousedown } = board;
+    board.mousedown = (event) => {
+        if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
+            mousedown(event);
+            return;
+        }
+        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const range = { anchor: point, focus: point };
+        const hitElements = getHitElements(board, { ranges: [range] });
+        const hasImage = hitElements.length && MindElement.hasImage(hitElements[0]);
+        const hitImage = hasImage && isHitImage(board, hitElements[0], range);
+        if (hitImage) {
+            const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
+            board.setPluginOptions(PlaitPluginKey.withSelection, {
+                isDisabledSelect: true
+            });
+            setTimeout(() => {
+                board.setPluginOptions(PlaitPluginKey.withSelection, Object.assign({}, currentOptions));
+            }, 0);
+            selectedImageElement = hitElements[0];
+            const component = PlaitElement.getComponent(selectedImageElement);
+            component.imageDrawer.drawActive(selectedImageElement);
+            clearSelectedElement(board);
+        }
+        else {
+            if (selectedImageElement) {
+                const component = PlaitElement.getComponent(selectedImageElement);
+                component && component.imageDrawer.destroyActive();
+            }
+            selectedImageElement = null;
+        }
+        mousedown(event);
+    };
+    board.keydown = (event) => {
+        if (!PlaitBoard.isReadonly(board) && selectedImageElement && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
+            MindTransforms.removeImage(board, selectedImageElement);
+            selectedImageElement = null;
+            return;
+        }
+        keydown(event);
+    };
+    return board;
+};
+
 const withMind = (board) => {
     const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
@@ -3568,15 +3815,9 @@ const withMind = (board) => {
     board.applyTheme = (element) => {
         const mindElement = element;
         const shouldClearProperty = !PlaitBoard.isBoard(element) && ((mindElement === null || mindElement === void 0 ? void 0 : mindElement.branchColor) || (mindElement === null || mindElement === void 0 ? void 0 : mindElement.fill) || (mindElement === null || mindElement === void 0 ? void 0 : mindElement.strokeColor));
-        const isAbstract = AbstractNode.isAbstract(element);
         if (shouldClearProperty) {
             const path = PlaitBoard.findPath(board, element);
-            if (isAbstract) {
-                Transforms.setNode(board, { fill: null, strokeColor: DefaultAbstractNodeStyle.strokeColor, branchColor: DefaultAbstractNodeStyle.branchColor }, path);
-            }
-            else {
-                Transforms.setNode(board, { fill: null, strokeColor: null, branchColor: null }, path);
-            }
+            Transforms.setNode(board, { fill: null, strokeColor: null, branchColor: null }, path);
         }
     };
     board.getRectangle = element => {
@@ -3671,7 +3912,7 @@ const withMind = (board) => {
         MindTransforms.removeElements(board, selectedElements);
         deleteFragment(data);
     };
-    return withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))));
+    return withMindImage(withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))));
 };
 
 class MindEmojiBaseComponent {
@@ -3725,5 +3966,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindImageBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map