@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/fesm2020/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';
|
|
@@ -216,7 +216,9 @@ const NodeDefaultSpace = {
|
|
|
216
216
|
emojiAndText: BASE * 1.5
|
|
217
217
|
},
|
|
218
218
|
vertical: {
|
|
219
|
-
nodeAndText: BASE * 1.5
|
|
219
|
+
nodeAndText: BASE * 1.5,
|
|
220
|
+
nodeAndImage: BASE,
|
|
221
|
+
imageAndText: BASE * 1.5
|
|
220
222
|
}
|
|
221
223
|
};
|
|
222
224
|
const RootDefaultSpace = {
|
|
@@ -246,17 +248,25 @@ const getSpaceEmojiAndText = (element) => {
|
|
|
246
248
|
const NodeSpace = {
|
|
247
249
|
getNodeWidth(board, element) {
|
|
248
250
|
const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
|
|
251
|
+
const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
|
|
249
252
|
if (MindElement.hasEmojis(element)) {
|
|
250
253
|
return (NodeSpace.getEmojiLeftSpace(board, element) +
|
|
251
254
|
getEmojisWidthHeight(board, element).width +
|
|
252
255
|
getSpaceEmojiAndText(element) +
|
|
253
|
-
element.width +
|
|
256
|
+
Math.max(element.width, imageWidth) +
|
|
254
257
|
nodeAndText);
|
|
255
258
|
}
|
|
256
|
-
return nodeAndText + element.width + nodeAndText;
|
|
259
|
+
return nodeAndText + Math.max(element.width, imageWidth) + nodeAndText;
|
|
257
260
|
},
|
|
258
261
|
getNodeHeight(board, element) {
|
|
259
262
|
const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
|
|
263
|
+
if (MindElement.hasImage(element)) {
|
|
264
|
+
return (NodeDefaultSpace.vertical.nodeAndImage +
|
|
265
|
+
element.data.image.height +
|
|
266
|
+
NodeDefaultSpace.vertical.imageAndText +
|
|
267
|
+
element.height +
|
|
268
|
+
nodeAndText);
|
|
269
|
+
}
|
|
260
270
|
return nodeAndText + element.height + nodeAndText;
|
|
261
271
|
},
|
|
262
272
|
getTextLeftSpace(board, element) {
|
|
@@ -270,7 +280,15 @@ const NodeSpace = {
|
|
|
270
280
|
},
|
|
271
281
|
getTextTopSpace(element) {
|
|
272
282
|
const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
|
|
273
|
-
|
|
283
|
+
if (MindElement.hasImage(element)) {
|
|
284
|
+
return element.data.image.height + NodeDefaultSpace.vertical.nodeAndImage + NodeDefaultSpace.vertical.imageAndText;
|
|
285
|
+
}
|
|
286
|
+
else {
|
|
287
|
+
return nodeAndText;
|
|
288
|
+
}
|
|
289
|
+
},
|
|
290
|
+
getImageTopSpace(element) {
|
|
291
|
+
return NodeDefaultSpace.vertical.nodeAndImage;
|
|
274
292
|
},
|
|
275
293
|
getEmojiLeftSpace(board, element) {
|
|
276
294
|
const options = board.getPluginOptions(WithMindPluginKey);
|
|
@@ -297,12 +315,12 @@ function getEmojiRectangle(board, element) {
|
|
|
297
315
|
function getEmojiForeignRectangle(board, element) {
|
|
298
316
|
let { x, y } = getRectangleByNode(MindElement.getNode(element));
|
|
299
317
|
x = x + NodeSpace.getEmojiLeftSpace(board, element);
|
|
300
|
-
const { width
|
|
318
|
+
const { width } = getEmojisWidthHeight(board, element);
|
|
301
319
|
return {
|
|
302
320
|
x,
|
|
303
321
|
y,
|
|
304
322
|
width,
|
|
305
|
-
height:
|
|
323
|
+
height: NodeSpace.getNodeHeight(board, element)
|
|
306
324
|
};
|
|
307
325
|
}
|
|
308
326
|
const isHitEmojis = (board, element, point) => {
|
|
@@ -324,6 +342,23 @@ function getTopicRectangleByElement(board, nodeRectangle, element) {
|
|
|
324
342
|
return { height, width, x, y };
|
|
325
343
|
}
|
|
326
344
|
|
|
345
|
+
function getImageForeignRectangle(board, element) {
|
|
346
|
+
let { x, y } = getRectangleByNode(MindElement.getNode(element));
|
|
347
|
+
x = x + NodeSpace.getTextLeftSpace(board, element);
|
|
348
|
+
y = NodeSpace.getImageTopSpace(element) + y;
|
|
349
|
+
const { width, height } = element.data.image;
|
|
350
|
+
return {
|
|
351
|
+
x,
|
|
352
|
+
y,
|
|
353
|
+
width,
|
|
354
|
+
height
|
|
355
|
+
};
|
|
356
|
+
}
|
|
357
|
+
const isHitImage = (board, element, range) => {
|
|
358
|
+
const client = getImageForeignRectangle(board, element);
|
|
359
|
+
return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
|
|
360
|
+
};
|
|
361
|
+
|
|
327
362
|
const NODE_MIN_WIDTH = 18;
|
|
328
363
|
|
|
329
364
|
function editTopic(element) {
|
|
@@ -433,7 +468,7 @@ const copyNewNode = (node) => {
|
|
|
433
468
|
const extractNodesText = (node) => {
|
|
434
469
|
let str = '';
|
|
435
470
|
if (node) {
|
|
436
|
-
str += Node.string(node.data.topic
|
|
471
|
+
str += Node.string(node.data.topic) + ' ';
|
|
437
472
|
for (const childNode of node.children) {
|
|
438
473
|
str += extractNodesText(childNode);
|
|
439
474
|
}
|
|
@@ -1393,6 +1428,12 @@ const drawFakeDragNode = (board, element, offsetX, offsetY) => {
|
|
|
1393
1428
|
updateForeignObject(fakeEmojisG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
|
|
1394
1429
|
dragFakeNodeG?.append(fakeEmojisG);
|
|
1395
1430
|
}
|
|
1431
|
+
if (MindElement.hasImage(element)) {
|
|
1432
|
+
const fakeImageG = activeComponent.imageDrawer.g.cloneNode(true);
|
|
1433
|
+
const foreignRectangle = getImageForeignRectangle(board, element);
|
|
1434
|
+
updateForeignObject(fakeImageG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
|
|
1435
|
+
dragFakeNodeG?.append(fakeImageG);
|
|
1436
|
+
}
|
|
1396
1437
|
return dragFakeNodeG;
|
|
1397
1438
|
};
|
|
1398
1439
|
const drawFakeDropNode = (board, dropTarget, path) => {
|
|
@@ -1923,6 +1964,14 @@ const MindElement = {
|
|
|
1923
1964
|
return false;
|
|
1924
1965
|
}
|
|
1925
1966
|
},
|
|
1967
|
+
hasImage(element) {
|
|
1968
|
+
if (element.data.image) {
|
|
1969
|
+
return true;
|
|
1970
|
+
}
|
|
1971
|
+
else {
|
|
1972
|
+
return false;
|
|
1973
|
+
}
|
|
1974
|
+
},
|
|
1926
1975
|
getEmojis(element) {
|
|
1927
1976
|
return element.data.emojis;
|
|
1928
1977
|
},
|
|
@@ -2207,12 +2256,9 @@ const normalizeWidthAndHeight = (board, width, height) => {
|
|
|
2207
2256
|
};
|
|
2208
2257
|
const setTopic = (board, element, topic, width, height) => {
|
|
2209
2258
|
const newElement = {
|
|
2210
|
-
data: { topic },
|
|
2259
|
+
data: { ...element.data, topic },
|
|
2211
2260
|
...normalizeWidthAndHeight(board, width, height)
|
|
2212
2261
|
};
|
|
2213
|
-
if (MindElement.hasEmojis(element)) {
|
|
2214
|
-
newElement.data.emojis = element.data.emojis;
|
|
2215
|
-
}
|
|
2216
2262
|
const path = PlaitBoard.findPath(board, element);
|
|
2217
2263
|
Transforms.setNode(board, newElement, path);
|
|
2218
2264
|
};
|
|
@@ -2291,7 +2337,7 @@ const removeEmoji = (board, element, emojiItem) => {
|
|
|
2291
2337
|
};
|
|
2292
2338
|
const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
|
|
2293
2339
|
const newElement = {
|
|
2294
|
-
data: {
|
|
2340
|
+
data: { ...element.data }
|
|
2295
2341
|
};
|
|
2296
2342
|
const newEmojis = element.data.emojis.map(value => {
|
|
2297
2343
|
if (value === oldEmoji) {
|
|
@@ -2304,6 +2350,15 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
|
|
|
2304
2350
|
Transforms.setNode(board, newElement, path);
|
|
2305
2351
|
};
|
|
2306
2352
|
|
|
2353
|
+
const removeImage = (board, element) => {
|
|
2354
|
+
const newElement = {
|
|
2355
|
+
data: { ...element.data }
|
|
2356
|
+
};
|
|
2357
|
+
delete newElement.data.image;
|
|
2358
|
+
const path = PlaitBoard.findPath(board, element);
|
|
2359
|
+
Transforms.setNode(board, newElement, path);
|
|
2360
|
+
};
|
|
2361
|
+
|
|
2307
2362
|
const MindTransforms = {
|
|
2308
2363
|
setLayout,
|
|
2309
2364
|
setTopic,
|
|
@@ -2317,7 +2372,8 @@ const MindTransforms = {
|
|
|
2317
2372
|
removeElements,
|
|
2318
2373
|
insertNodes,
|
|
2319
2374
|
insertAbstractNodes,
|
|
2320
|
-
setRightNodeCountByRefs
|
|
2375
|
+
setRightNodeCountByRefs,
|
|
2376
|
+
removeImage
|
|
2321
2377
|
};
|
|
2322
2378
|
|
|
2323
2379
|
class BaseDrawer {
|
|
@@ -2636,6 +2692,88 @@ class CollapseDrawer extends BaseDrawer {
|
|
|
2636
2692
|
}
|
|
2637
2693
|
}
|
|
2638
2694
|
|
|
2695
|
+
class MindImageBaseComponent {
|
|
2696
|
+
get nativeElement() {
|
|
2697
|
+
return this.elementRef.nativeElement;
|
|
2698
|
+
}
|
|
2699
|
+
constructor(elementRef) {
|
|
2700
|
+
this.elementRef = elementRef;
|
|
2701
|
+
}
|
|
2702
|
+
ngOnInit() { }
|
|
2703
|
+
}
|
|
2704
|
+
MindImageBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2705
|
+
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 });
|
|
2706
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, decorators: [{
|
|
2707
|
+
type: Directive,
|
|
2708
|
+
args: [{
|
|
2709
|
+
host: {
|
|
2710
|
+
class: 'mind-node-image'
|
|
2711
|
+
}
|
|
2712
|
+
}]
|
|
2713
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { imageItem: [{
|
|
2714
|
+
type: Input
|
|
2715
|
+
}], board: [{
|
|
2716
|
+
type: Input
|
|
2717
|
+
}], element: [{
|
|
2718
|
+
type: Input
|
|
2719
|
+
}] } });
|
|
2720
|
+
|
|
2721
|
+
class NodeImageDrawer {
|
|
2722
|
+
constructor(board, viewContainerRef) {
|
|
2723
|
+
this.board = board;
|
|
2724
|
+
this.viewContainerRef = viewContainerRef;
|
|
2725
|
+
this.componentRef = null;
|
|
2726
|
+
}
|
|
2727
|
+
drawImage(element) {
|
|
2728
|
+
this.destroy();
|
|
2729
|
+
if (MindElement.hasImage(element)) {
|
|
2730
|
+
this.g = createG();
|
|
2731
|
+
const foreignRectangle = getImageForeignRectangle(this.board, element);
|
|
2732
|
+
const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
|
|
2733
|
+
this.g.append(foreignObject);
|
|
2734
|
+
if (this.componentRef) {
|
|
2735
|
+
this.componentRef.destroy();
|
|
2736
|
+
this.componentRef = null;
|
|
2737
|
+
}
|
|
2738
|
+
const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType || MindImageBaseComponent;
|
|
2739
|
+
if (!componentType) {
|
|
2740
|
+
throw new Error('Not implement drawEmoji method error.');
|
|
2741
|
+
}
|
|
2742
|
+
this.componentRef = this.viewContainerRef.createComponent(componentType);
|
|
2743
|
+
this.componentRef.instance.board = this.board;
|
|
2744
|
+
this.componentRef.instance.element = element;
|
|
2745
|
+
this.componentRef.instance.imageItem = element.data.image;
|
|
2746
|
+
foreignObject.append(this.componentRef.instance.nativeElement);
|
|
2747
|
+
return this.g;
|
|
2748
|
+
}
|
|
2749
|
+
return undefined;
|
|
2750
|
+
}
|
|
2751
|
+
drawActive(element) {
|
|
2752
|
+
this.destroyActive();
|
|
2753
|
+
const imageRectangle = getImageForeignRectangle(this.board, element);
|
|
2754
|
+
const rectangle = RectangleClient.getOutlineRectangle(imageRectangle, -1);
|
|
2755
|
+
const roughSVG = PlaitBoard.getRoughSVG(this.board);
|
|
2756
|
+
this.activeG = roughSVG.rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, {
|
|
2757
|
+
stroke: PRIMARY_COLOR,
|
|
2758
|
+
fill: '',
|
|
2759
|
+
fillStyle: 'solid'
|
|
2760
|
+
});
|
|
2761
|
+
this.g?.append(this.activeG);
|
|
2762
|
+
}
|
|
2763
|
+
destroyActive() {
|
|
2764
|
+
this.activeG?.remove();
|
|
2765
|
+
}
|
|
2766
|
+
destroy() {
|
|
2767
|
+
if (this.g) {
|
|
2768
|
+
this.g.remove();
|
|
2769
|
+
}
|
|
2770
|
+
if (this.componentRef) {
|
|
2771
|
+
this.componentRef.destroy();
|
|
2772
|
+
this.componentRef = null;
|
|
2773
|
+
}
|
|
2774
|
+
}
|
|
2775
|
+
}
|
|
2776
|
+
|
|
2639
2777
|
// 1. When the text at the end has an italic attribute, the text is partially covered
|
|
2640
2778
|
// 2. There will be some differences in the width measured by different browsers
|
|
2641
2779
|
const WIDTH_BUFFER = 4;
|
|
@@ -2655,6 +2793,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2655
2793
|
this.nodeInsertDrawer = new NodeInsertDrawer(this.board);
|
|
2656
2794
|
this.activeDrawer = new NodeActiveDrawer(this.board);
|
|
2657
2795
|
this.collapseDrawer = new CollapseDrawer(this.board);
|
|
2796
|
+
this.imageDrawer = new NodeImageDrawer(this.board, this.viewContainerRef);
|
|
2658
2797
|
const plugins = this.board.getPluginOptions(WithMindPluginKey).textPlugins;
|
|
2659
2798
|
this.textManage = new TextManage(this.board, this.viewContainerRef, () => {
|
|
2660
2799
|
const rect = getTopicRectangleByNode(this.board, this.node);
|
|
@@ -2685,6 +2824,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2685
2824
|
this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
|
|
2686
2825
|
this.drawEmojis();
|
|
2687
2826
|
this.drawExtend();
|
|
2827
|
+
this.drawImage();
|
|
2688
2828
|
if (PlaitMind.isMind(this.context.parent)) {
|
|
2689
2829
|
this.g.classList.add('branch');
|
|
2690
2830
|
}
|
|
@@ -2707,6 +2847,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2707
2847
|
this.drawShape();
|
|
2708
2848
|
this.drawLink();
|
|
2709
2849
|
this.drawEmojis();
|
|
2850
|
+
this.drawImage();
|
|
2710
2851
|
this.drawExtend();
|
|
2711
2852
|
this.textManage.updateText(this.element.data.topic);
|
|
2712
2853
|
this.textManage.updateRectangle();
|
|
@@ -2728,6 +2869,12 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2728
2869
|
this.g.append(g);
|
|
2729
2870
|
}
|
|
2730
2871
|
}
|
|
2872
|
+
drawImage() {
|
|
2873
|
+
const image = this.imageDrawer.drawImage(this.element);
|
|
2874
|
+
if (image) {
|
|
2875
|
+
this.g.append(image);
|
|
2876
|
+
}
|
|
2877
|
+
}
|
|
2731
2878
|
drawShape() {
|
|
2732
2879
|
this.destroyShape();
|
|
2733
2880
|
const shape = getShapeByElement(this.board, this.node.origin);
|
|
@@ -2796,6 +2943,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2796
2943
|
super.ngOnDestroy();
|
|
2797
2944
|
this.textManage.destroy();
|
|
2798
2945
|
this.nodeEmojisDrawer.destroy();
|
|
2946
|
+
this.imageDrawer.destroy();
|
|
2799
2947
|
this.destroy$.next();
|
|
2800
2948
|
this.destroy$.complete();
|
|
2801
2949
|
if (ELEMENT_TO_NODE.get(this.element) === this.node) {
|
|
@@ -3622,6 +3770,52 @@ const removeHovered = (element) => {
|
|
|
3622
3770
|
}
|
|
3623
3771
|
};
|
|
3624
3772
|
|
|
3773
|
+
const withMindImage = (board) => {
|
|
3774
|
+
let selectedImageElement = null;
|
|
3775
|
+
const { keydown, mousedown } = board;
|
|
3776
|
+
board.mousedown = (event) => {
|
|
3777
|
+
if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
|
|
3778
|
+
mousedown(event);
|
|
3779
|
+
return;
|
|
3780
|
+
}
|
|
3781
|
+
const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
|
|
3782
|
+
const range = { anchor: point, focus: point };
|
|
3783
|
+
const hitElements = getHitElements(board, { ranges: [range] });
|
|
3784
|
+
const hasImage = hitElements.length && MindElement.hasImage(hitElements[0]);
|
|
3785
|
+
const hitImage = hasImage && isHitImage(board, hitElements[0], range);
|
|
3786
|
+
if (hitImage) {
|
|
3787
|
+
const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
|
|
3788
|
+
board.setPluginOptions(PlaitPluginKey.withSelection, {
|
|
3789
|
+
isDisabledSelect: true
|
|
3790
|
+
});
|
|
3791
|
+
setTimeout(() => {
|
|
3792
|
+
board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
|
|
3793
|
+
}, 0);
|
|
3794
|
+
selectedImageElement = hitElements[0];
|
|
3795
|
+
const component = PlaitElement.getComponent(selectedImageElement);
|
|
3796
|
+
component.imageDrawer.drawActive(selectedImageElement);
|
|
3797
|
+
clearSelectedElement(board);
|
|
3798
|
+
}
|
|
3799
|
+
else {
|
|
3800
|
+
if (selectedImageElement) {
|
|
3801
|
+
const component = PlaitElement.getComponent(selectedImageElement);
|
|
3802
|
+
component && component.imageDrawer.destroyActive();
|
|
3803
|
+
}
|
|
3804
|
+
selectedImageElement = null;
|
|
3805
|
+
}
|
|
3806
|
+
mousedown(event);
|
|
3807
|
+
};
|
|
3808
|
+
board.keydown = (event) => {
|
|
3809
|
+
if (!PlaitBoard.isReadonly(board) && selectedImageElement && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
|
|
3810
|
+
MindTransforms.removeImage(board, selectedImageElement);
|
|
3811
|
+
selectedImageElement = null;
|
|
3812
|
+
return;
|
|
3813
|
+
}
|
|
3814
|
+
keydown(event);
|
|
3815
|
+
};
|
|
3816
|
+
return board;
|
|
3817
|
+
};
|
|
3818
|
+
|
|
3625
3819
|
const withMind = (board) => {
|
|
3626
3820
|
const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
|
|
3627
3821
|
board.drawElement = (context) => {
|
|
@@ -3739,7 +3933,7 @@ const withMind = (board) => {
|
|
|
3739
3933
|
MindTransforms.removeElements(board, selectedElements);
|
|
3740
3934
|
deleteFragment(data);
|
|
3741
3935
|
};
|
|
3742
|
-
return withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))));
|
|
3936
|
+
return withMindImage(withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))));
|
|
3743
3937
|
};
|
|
3744
3938
|
|
|
3745
3939
|
class MindEmojiBaseComponent {
|
|
@@ -3793,5 +3987,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
|
|
|
3793
3987
|
* Generated bundle index. Do not edit.
|
|
3794
3988
|
*/
|
|
3795
3989
|
|
|
3796
|
-
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 };
|
|
3990
|
+
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 };
|
|
3797
3991
|
//# sourceMappingURL=plait-mind.mjs.map
|