@plait/mind 0.16.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base/image-base.component.d.ts +16 -0
- package/base/index.d.ts +1 -0
- package/drawer/node-image.drawer.d.ts +16 -0
- package/esm2020/base/image-base.component.mjs +28 -0
- package/esm2020/base/index.mjs +2 -1
- package/esm2020/drawer/node-image.drawer.mjs +61 -0
- package/esm2020/interfaces/element-data.mjs +1 -1
- package/esm2020/interfaces/element.mjs +9 -1
- package/esm2020/interfaces/options.mjs +1 -1
- package/esm2020/node.component.mjs +12 -1
- package/esm2020/plugins/with-mind-image.mjs +49 -0
- package/esm2020/plugins/with-mind.mjs +3 -2
- package/esm2020/transforms/emoji.mjs +2 -2
- package/esm2020/transforms/image.mjs +10 -0
- package/esm2020/transforms/index.mjs +4 -2
- package/esm2020/transforms/node.mjs +2 -6
- package/esm2020/utils/draw/node-dnd.mjs +8 -1
- package/esm2020/utils/mind.mjs +2 -2
- package/esm2020/utils/position/emoji.mjs +8 -8
- package/esm2020/utils/position/image.mjs +21 -0
- package/esm2020/utils/position/index.mjs +2 -1
- package/esm2020/utils/space/node-space.mjs +23 -5
- package/fesm2015/plait-mind.mjs +213 -16
- package/fesm2015/plait-mind.mjs.map +1 -1
- package/fesm2020/plait-mind.mjs +210 -16
- package/fesm2020/plait-mind.mjs.map +1 -1
- package/interfaces/element-data.d.ts +9 -0
- package/interfaces/element.d.ts +2 -1
- package/interfaces/options.d.ts +3 -1
- package/node.component.d.ts +3 -0
- package/package.json +1 -1
- package/plugins/with-mind-image.d.ts +2 -0
- package/transforms/image.d.ts +3 -0
- package/transforms/index.d.ts +1 -0
- package/utils/position/emoji.d.ts +4 -4
- package/utils/position/image.d.ts +6 -0
- package/utils/position/index.d.ts +1 -0
- package/utils/space/node-space.d.ts +1 -0
package/fesm2015/plait-mind.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, NgModule, NgZone,
|
|
2
|
+
import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, NgZone, HostListener } from '@angular/core';
|
|
3
3
|
import * as i2 from '@plait/core';
|
|
4
4
|
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';
|
|
5
5
|
import { MindLayoutType, isIndentedLayout, AbstractNode, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
|
|
@@ -186,7 +186,9 @@ const NodeDefaultSpace = {
|
|
|
186
186
|
emojiAndText: BASE * 1.5
|
|
187
187
|
},
|
|
188
188
|
vertical: {
|
|
189
|
-
nodeAndText: BASE * 1.5
|
|
189
|
+
nodeAndText: BASE * 1.5,
|
|
190
|
+
nodeAndImage: BASE,
|
|
191
|
+
imageAndText: BASE * 1.5
|
|
190
192
|
}
|
|
191
193
|
};
|
|
192
194
|
const RootDefaultSpace = {
|
|
@@ -215,18 +217,27 @@ const getSpaceEmojiAndText = (element) => {
|
|
|
215
217
|
};
|
|
216
218
|
const NodeSpace = {
|
|
217
219
|
getNodeWidth(board, element) {
|
|
220
|
+
var _a;
|
|
218
221
|
const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
|
|
222
|
+
const imageWidth = MindElement.hasImage(element) ? (_a = element.data.image) === null || _a === void 0 ? void 0 : _a.width : 0;
|
|
219
223
|
if (MindElement.hasEmojis(element)) {
|
|
220
224
|
return (NodeSpace.getEmojiLeftSpace(board, element) +
|
|
221
225
|
getEmojisWidthHeight(board, element).width +
|
|
222
226
|
getSpaceEmojiAndText(element) +
|
|
223
|
-
element.width +
|
|
227
|
+
Math.max(element.width, imageWidth) +
|
|
224
228
|
nodeAndText);
|
|
225
229
|
}
|
|
226
|
-
return nodeAndText + element.width + nodeAndText;
|
|
230
|
+
return nodeAndText + Math.max(element.width, imageWidth) + nodeAndText;
|
|
227
231
|
},
|
|
228
232
|
getNodeHeight(board, element) {
|
|
229
233
|
const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
|
|
234
|
+
if (MindElement.hasImage(element)) {
|
|
235
|
+
return (NodeDefaultSpace.vertical.nodeAndImage +
|
|
236
|
+
element.data.image.height +
|
|
237
|
+
NodeDefaultSpace.vertical.imageAndText +
|
|
238
|
+
element.height +
|
|
239
|
+
nodeAndText);
|
|
240
|
+
}
|
|
230
241
|
return nodeAndText + element.height + nodeAndText;
|
|
231
242
|
},
|
|
232
243
|
getTextLeftSpace(board, element) {
|
|
@@ -240,7 +251,15 @@ const NodeSpace = {
|
|
|
240
251
|
},
|
|
241
252
|
getTextTopSpace(element) {
|
|
242
253
|
const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
|
|
243
|
-
|
|
254
|
+
if (MindElement.hasImage(element)) {
|
|
255
|
+
return element.data.image.height + NodeDefaultSpace.vertical.nodeAndImage + NodeDefaultSpace.vertical.imageAndText;
|
|
256
|
+
}
|
|
257
|
+
else {
|
|
258
|
+
return nodeAndText;
|
|
259
|
+
}
|
|
260
|
+
},
|
|
261
|
+
getImageTopSpace(element) {
|
|
262
|
+
return NodeDefaultSpace.vertical.nodeAndImage;
|
|
244
263
|
},
|
|
245
264
|
getEmojiLeftSpace(board, element) {
|
|
246
265
|
const options = board.getPluginOptions(WithMindPluginKey);
|
|
@@ -267,12 +286,12 @@ function getEmojiRectangle(board, element) {
|
|
|
267
286
|
function getEmojiForeignRectangle(board, element) {
|
|
268
287
|
let { x, y } = getRectangleByNode(MindElement.getNode(element));
|
|
269
288
|
x = x + NodeSpace.getEmojiLeftSpace(board, element);
|
|
270
|
-
const { width
|
|
289
|
+
const { width } = getEmojisWidthHeight(board, element);
|
|
271
290
|
return {
|
|
272
291
|
x,
|
|
273
292
|
y,
|
|
274
293
|
width,
|
|
275
|
-
height:
|
|
294
|
+
height: NodeSpace.getNodeHeight(board, element)
|
|
276
295
|
};
|
|
277
296
|
}
|
|
278
297
|
const isHitEmojis = (board, element, point) => {
|
|
@@ -294,6 +313,23 @@ function getTopicRectangleByElement(board, nodeRectangle, element) {
|
|
|
294
313
|
return { height, width, x, y };
|
|
295
314
|
}
|
|
296
315
|
|
|
316
|
+
function getImageForeignRectangle(board, element) {
|
|
317
|
+
let { x, y } = getRectangleByNode(MindElement.getNode(element));
|
|
318
|
+
x = x + NodeSpace.getTextLeftSpace(board, element);
|
|
319
|
+
y = NodeSpace.getImageTopSpace(element) + y;
|
|
320
|
+
const { width, height } = element.data.image;
|
|
321
|
+
return {
|
|
322
|
+
x,
|
|
323
|
+
y,
|
|
324
|
+
width,
|
|
325
|
+
height
|
|
326
|
+
};
|
|
327
|
+
}
|
|
328
|
+
const isHitImage = (board, element, range) => {
|
|
329
|
+
const client = getImageForeignRectangle(board, element);
|
|
330
|
+
return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
|
|
331
|
+
};
|
|
332
|
+
|
|
297
333
|
const NODE_MIN_WIDTH = 18;
|
|
298
334
|
|
|
299
335
|
function editTopic(element) {
|
|
@@ -403,7 +439,7 @@ const copyNewNode = (node) => {
|
|
|
403
439
|
const extractNodesText = (node) => {
|
|
404
440
|
let str = '';
|
|
405
441
|
if (node) {
|
|
406
|
-
str += Node.string(node.data.topic
|
|
442
|
+
str += Node.string(node.data.topic) + ' ';
|
|
407
443
|
for (const childNode of node.children) {
|
|
408
444
|
str += extractNodesText(childNode);
|
|
409
445
|
}
|
|
@@ -1356,6 +1392,12 @@ const drawFakeDragNode = (board, element, offsetX, offsetY) => {
|
|
|
1356
1392
|
updateForeignObject(fakeEmojisG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
|
|
1357
1393
|
dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(fakeEmojisG);
|
|
1358
1394
|
}
|
|
1395
|
+
if (MindElement.hasImage(element)) {
|
|
1396
|
+
const fakeImageG = activeComponent.imageDrawer.g.cloneNode(true);
|
|
1397
|
+
const foreignRectangle = getImageForeignRectangle(board, element);
|
|
1398
|
+
updateForeignObject(fakeImageG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
|
|
1399
|
+
dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(fakeImageG);
|
|
1400
|
+
}
|
|
1359
1401
|
return dragFakeNodeG;
|
|
1360
1402
|
};
|
|
1361
1403
|
const drawFakeDropNode = (board, dropTarget, path) => {
|
|
@@ -1867,6 +1909,14 @@ const MindElement = {
|
|
|
1867
1909
|
return false;
|
|
1868
1910
|
}
|
|
1869
1911
|
},
|
|
1912
|
+
hasImage(element) {
|
|
1913
|
+
if (element.data.image) {
|
|
1914
|
+
return true;
|
|
1915
|
+
}
|
|
1916
|
+
else {
|
|
1917
|
+
return false;
|
|
1918
|
+
}
|
|
1919
|
+
},
|
|
1870
1920
|
getEmojis(element) {
|
|
1871
1921
|
return element.data.emojis;
|
|
1872
1922
|
},
|
|
@@ -2152,10 +2202,7 @@ const normalizeWidthAndHeight = (board, width, height) => {
|
|
|
2152
2202
|
return { width: newWidth, height: newHeight };
|
|
2153
2203
|
};
|
|
2154
2204
|
const setTopic = (board, element, topic, width, height) => {
|
|
2155
|
-
const newElement = Object.assign({ data: { topic } }, normalizeWidthAndHeight(board, width, height));
|
|
2156
|
-
if (MindElement.hasEmojis(element)) {
|
|
2157
|
-
newElement.data.emojis = element.data.emojis;
|
|
2158
|
-
}
|
|
2205
|
+
const newElement = Object.assign({ data: Object.assign(Object.assign({}, element.data), { topic }) }, normalizeWidthAndHeight(board, width, height));
|
|
2159
2206
|
const path = PlaitBoard.findPath(board, element);
|
|
2160
2207
|
Transforms.setNode(board, newElement, path);
|
|
2161
2208
|
};
|
|
@@ -2229,7 +2276,7 @@ const removeEmoji = (board, element, emojiItem) => {
|
|
|
2229
2276
|
};
|
|
2230
2277
|
const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
|
|
2231
2278
|
const newElement = {
|
|
2232
|
-
data: {
|
|
2279
|
+
data: Object.assign({}, element.data)
|
|
2233
2280
|
};
|
|
2234
2281
|
const newEmojis = element.data.emojis.map(value => {
|
|
2235
2282
|
if (value === oldEmoji) {
|
|
@@ -2242,6 +2289,15 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
|
|
|
2242
2289
|
Transforms.setNode(board, newElement, path);
|
|
2243
2290
|
};
|
|
2244
2291
|
|
|
2292
|
+
const removeImage = (board, element) => {
|
|
2293
|
+
const newElement = {
|
|
2294
|
+
data: Object.assign({}, element.data)
|
|
2295
|
+
};
|
|
2296
|
+
delete newElement.data.image;
|
|
2297
|
+
const path = PlaitBoard.findPath(board, element);
|
|
2298
|
+
Transforms.setNode(board, newElement, path);
|
|
2299
|
+
};
|
|
2300
|
+
|
|
2245
2301
|
const MindTransforms = {
|
|
2246
2302
|
setLayout,
|
|
2247
2303
|
setTopic,
|
|
@@ -2255,7 +2311,8 @@ const MindTransforms = {
|
|
|
2255
2311
|
removeElements,
|
|
2256
2312
|
insertNodes,
|
|
2257
2313
|
insertAbstractNodes,
|
|
2258
|
-
setRightNodeCountByRefs
|
|
2314
|
+
setRightNodeCountByRefs,
|
|
2315
|
+
removeImage
|
|
2259
2316
|
};
|
|
2260
2317
|
|
|
2261
2318
|
class BaseDrawer {
|
|
@@ -2574,6 +2631,90 @@ class CollapseDrawer extends BaseDrawer {
|
|
|
2574
2631
|
}
|
|
2575
2632
|
}
|
|
2576
2633
|
|
|
2634
|
+
class MindImageBaseComponent {
|
|
2635
|
+
get nativeElement() {
|
|
2636
|
+
return this.elementRef.nativeElement;
|
|
2637
|
+
}
|
|
2638
|
+
constructor(elementRef) {
|
|
2639
|
+
this.elementRef = elementRef;
|
|
2640
|
+
}
|
|
2641
|
+
ngOnInit() { }
|
|
2642
|
+
}
|
|
2643
|
+
MindImageBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2644
|
+
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 });
|
|
2645
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, decorators: [{
|
|
2646
|
+
type: Directive,
|
|
2647
|
+
args: [{
|
|
2648
|
+
host: {
|
|
2649
|
+
class: 'mind-node-image'
|
|
2650
|
+
}
|
|
2651
|
+
}]
|
|
2652
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { imageItem: [{
|
|
2653
|
+
type: Input
|
|
2654
|
+
}], board: [{
|
|
2655
|
+
type: Input
|
|
2656
|
+
}], element: [{
|
|
2657
|
+
type: Input
|
|
2658
|
+
}] } });
|
|
2659
|
+
|
|
2660
|
+
class NodeImageDrawer {
|
|
2661
|
+
constructor(board, viewContainerRef) {
|
|
2662
|
+
this.board = board;
|
|
2663
|
+
this.viewContainerRef = viewContainerRef;
|
|
2664
|
+
this.componentRef = null;
|
|
2665
|
+
}
|
|
2666
|
+
drawImage(element) {
|
|
2667
|
+
this.destroy();
|
|
2668
|
+
if (MindElement.hasImage(element)) {
|
|
2669
|
+
this.g = createG();
|
|
2670
|
+
const foreignRectangle = getImageForeignRectangle(this.board, element);
|
|
2671
|
+
const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
|
|
2672
|
+
this.g.append(foreignObject);
|
|
2673
|
+
if (this.componentRef) {
|
|
2674
|
+
this.componentRef.destroy();
|
|
2675
|
+
this.componentRef = null;
|
|
2676
|
+
}
|
|
2677
|
+
const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType || MindImageBaseComponent;
|
|
2678
|
+
if (!componentType) {
|
|
2679
|
+
throw new Error('Not implement drawEmoji method error.');
|
|
2680
|
+
}
|
|
2681
|
+
this.componentRef = this.viewContainerRef.createComponent(componentType);
|
|
2682
|
+
this.componentRef.instance.board = this.board;
|
|
2683
|
+
this.componentRef.instance.element = element;
|
|
2684
|
+
this.componentRef.instance.imageItem = element.data.image;
|
|
2685
|
+
foreignObject.append(this.componentRef.instance.nativeElement);
|
|
2686
|
+
return this.g;
|
|
2687
|
+
}
|
|
2688
|
+
return undefined;
|
|
2689
|
+
}
|
|
2690
|
+
drawActive(element) {
|
|
2691
|
+
var _a;
|
|
2692
|
+
this.destroyActive();
|
|
2693
|
+
const imageRectangle = getImageForeignRectangle(this.board, element);
|
|
2694
|
+
const rectangle = RectangleClient.getOutlineRectangle(imageRectangle, -1);
|
|
2695
|
+
const roughSVG = PlaitBoard.getRoughSVG(this.board);
|
|
2696
|
+
this.activeG = roughSVG.rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, {
|
|
2697
|
+
stroke: PRIMARY_COLOR,
|
|
2698
|
+
fill: '',
|
|
2699
|
+
fillStyle: 'solid'
|
|
2700
|
+
});
|
|
2701
|
+
(_a = this.g) === null || _a === void 0 ? void 0 : _a.append(this.activeG);
|
|
2702
|
+
}
|
|
2703
|
+
destroyActive() {
|
|
2704
|
+
var _a;
|
|
2705
|
+
(_a = this.activeG) === null || _a === void 0 ? void 0 : _a.remove();
|
|
2706
|
+
}
|
|
2707
|
+
destroy() {
|
|
2708
|
+
if (this.g) {
|
|
2709
|
+
this.g.remove();
|
|
2710
|
+
}
|
|
2711
|
+
if (this.componentRef) {
|
|
2712
|
+
this.componentRef.destroy();
|
|
2713
|
+
this.componentRef = null;
|
|
2714
|
+
}
|
|
2715
|
+
}
|
|
2716
|
+
}
|
|
2717
|
+
|
|
2577
2718
|
// 1. When the text at the end has an italic attribute, the text is partially covered
|
|
2578
2719
|
// 2. There will be some differences in the width measured by different browsers
|
|
2579
2720
|
const WIDTH_BUFFER = 4;
|
|
@@ -2593,6 +2734,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2593
2734
|
this.nodeInsertDrawer = new NodeInsertDrawer(this.board);
|
|
2594
2735
|
this.activeDrawer = new NodeActiveDrawer(this.board);
|
|
2595
2736
|
this.collapseDrawer = new CollapseDrawer(this.board);
|
|
2737
|
+
this.imageDrawer = new NodeImageDrawer(this.board, this.viewContainerRef);
|
|
2596
2738
|
const plugins = this.board.getPluginOptions(WithMindPluginKey).textPlugins;
|
|
2597
2739
|
this.textManage = new TextManage(this.board, this.viewContainerRef, () => {
|
|
2598
2740
|
const rect = getTopicRectangleByNode(this.board, this.node);
|
|
@@ -2623,6 +2765,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2623
2765
|
this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
|
|
2624
2766
|
this.drawEmojis();
|
|
2625
2767
|
this.drawExtend();
|
|
2768
|
+
this.drawImage();
|
|
2626
2769
|
if (PlaitMind.isMind(this.context.parent)) {
|
|
2627
2770
|
this.g.classList.add('branch');
|
|
2628
2771
|
}
|
|
@@ -2645,6 +2788,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2645
2788
|
this.drawShape();
|
|
2646
2789
|
this.drawLink();
|
|
2647
2790
|
this.drawEmojis();
|
|
2791
|
+
this.drawImage();
|
|
2648
2792
|
this.drawExtend();
|
|
2649
2793
|
this.textManage.updateText(this.element.data.topic);
|
|
2650
2794
|
this.textManage.updateRectangle();
|
|
@@ -2666,6 +2810,12 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2666
2810
|
this.g.append(g);
|
|
2667
2811
|
}
|
|
2668
2812
|
}
|
|
2813
|
+
drawImage() {
|
|
2814
|
+
const image = this.imageDrawer.drawImage(this.element);
|
|
2815
|
+
if (image) {
|
|
2816
|
+
this.g.append(image);
|
|
2817
|
+
}
|
|
2818
|
+
}
|
|
2669
2819
|
drawShape() {
|
|
2670
2820
|
this.destroyShape();
|
|
2671
2821
|
const shape = getShapeByElement(this.board, this.node.origin);
|
|
@@ -2734,6 +2884,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2734
2884
|
super.ngOnDestroy();
|
|
2735
2885
|
this.textManage.destroy();
|
|
2736
2886
|
this.nodeEmojisDrawer.destroy();
|
|
2887
|
+
this.imageDrawer.destroy();
|
|
2737
2888
|
this.destroy$.next();
|
|
2738
2889
|
this.destroy$.complete();
|
|
2739
2890
|
if (ELEMENT_TO_NODE.get(this.element) === this.node) {
|
|
@@ -3554,6 +3705,52 @@ const removeHovered = (element) => {
|
|
|
3554
3705
|
}
|
|
3555
3706
|
};
|
|
3556
3707
|
|
|
3708
|
+
const withMindImage = (board) => {
|
|
3709
|
+
let selectedImageElement = null;
|
|
3710
|
+
const { keydown, mousedown } = board;
|
|
3711
|
+
board.mousedown = (event) => {
|
|
3712
|
+
if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
|
|
3713
|
+
mousedown(event);
|
|
3714
|
+
return;
|
|
3715
|
+
}
|
|
3716
|
+
const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
|
|
3717
|
+
const range = { anchor: point, focus: point };
|
|
3718
|
+
const hitElements = getHitElements(board, { ranges: [range] });
|
|
3719
|
+
const hasImage = hitElements.length && MindElement.hasImage(hitElements[0]);
|
|
3720
|
+
const hitImage = hasImage && isHitImage(board, hitElements[0], range);
|
|
3721
|
+
if (hitImage) {
|
|
3722
|
+
const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
|
|
3723
|
+
board.setPluginOptions(PlaitPluginKey.withSelection, {
|
|
3724
|
+
isDisabledSelect: true
|
|
3725
|
+
});
|
|
3726
|
+
setTimeout(() => {
|
|
3727
|
+
board.setPluginOptions(PlaitPluginKey.withSelection, Object.assign({}, currentOptions));
|
|
3728
|
+
}, 0);
|
|
3729
|
+
selectedImageElement = hitElements[0];
|
|
3730
|
+
const component = PlaitElement.getComponent(selectedImageElement);
|
|
3731
|
+
component.imageDrawer.drawActive(selectedImageElement);
|
|
3732
|
+
clearSelectedElement(board);
|
|
3733
|
+
}
|
|
3734
|
+
else {
|
|
3735
|
+
if (selectedImageElement) {
|
|
3736
|
+
const component = PlaitElement.getComponent(selectedImageElement);
|
|
3737
|
+
component && component.imageDrawer.destroyActive();
|
|
3738
|
+
}
|
|
3739
|
+
selectedImageElement = null;
|
|
3740
|
+
}
|
|
3741
|
+
mousedown(event);
|
|
3742
|
+
};
|
|
3743
|
+
board.keydown = (event) => {
|
|
3744
|
+
if (!PlaitBoard.isReadonly(board) && selectedImageElement && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
|
|
3745
|
+
MindTransforms.removeImage(board, selectedImageElement);
|
|
3746
|
+
selectedImageElement = null;
|
|
3747
|
+
return;
|
|
3748
|
+
}
|
|
3749
|
+
keydown(event);
|
|
3750
|
+
};
|
|
3751
|
+
return board;
|
|
3752
|
+
};
|
|
3753
|
+
|
|
3557
3754
|
const withMind = (board) => {
|
|
3558
3755
|
const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
|
|
3559
3756
|
board.drawElement = (context) => {
|
|
@@ -3671,7 +3868,7 @@ const withMind = (board) => {
|
|
|
3671
3868
|
MindTransforms.removeElements(board, selectedElements);
|
|
3672
3869
|
deleteFragment(data);
|
|
3673
3870
|
};
|
|
3674
|
-
return withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))));
|
|
3871
|
+
return withMindImage(withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))));
|
|
3675
3872
|
};
|
|
3676
3873
|
|
|
3677
3874
|
class MindEmojiBaseComponent {
|
|
@@ -3725,5 +3922,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
|
|
|
3725
3922
|
* Generated bundle index. Do not edit.
|
|
3726
3923
|
*/
|
|
3727
3924
|
|
|
3728
|
-
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 };
|
|
3925
|
+
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, 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 };
|
|
3729
3926
|
//# sourceMappingURL=plait-mind.mjs.map
|