@plait/mind 0.5.0 → 0.7.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/constants/node-style.d.ts +0 -6
- package/constants/theme.d.ts +6 -0
- package/esm2020/constants/node-style.mjs +4 -10
- package/esm2020/constants/theme.mjs +73 -0
- package/esm2020/drawer/emojis.drawer.mjs +2 -3
- package/esm2020/drawer/quick-insert.drawer.mjs +4 -2
- package/esm2020/interfaces/index.mjs +2 -1
- package/esm2020/interfaces/theme-color.mjs +57 -0
- package/esm2020/node.component.mjs +4 -3
- package/esm2020/plugins/with-mind-hotkey.mjs +28 -0
- package/esm2020/plugins/with-mind.mjs +18 -2
- package/esm2020/utils/draw/node-dnd.mjs +2 -3
- package/esm2020/utils/draw/node-link/indented-link.mjs +2 -2
- package/esm2020/utils/draw/node-link/logic-link.mjs +2 -2
- package/esm2020/utils/draw/node-shape.mjs +5 -3
- package/esm2020/utils/draw/node-topic.mjs +3 -3
- package/esm2020/utils/mind.mjs +8 -9
- package/esm2020/utils/node/create-node.mjs +19 -29
- package/esm2020/utils/node-style/branch.mjs +19 -8
- package/esm2020/utils/node-style/common.mjs +2 -11
- package/esm2020/utils/node-style/shape.mjs +6 -12
- package/fesm2015/plait-mind.mjs +199 -75
- package/fesm2015/plait-mind.mjs.map +1 -1
- package/fesm2020/plait-mind.mjs +229 -75
- package/fesm2020/plait-mind.mjs.map +1 -1
- package/interfaces/index.d.ts +1 -0
- package/interfaces/theme-color.d.ts +17 -0
- package/package.json +1 -1
- package/plugins/with-mind-hotkey.d.ts +3 -0
- package/plugins/with-mind.d.ts +1 -1
- package/styles/mixins.scss +31 -0
- package/styles/styles.scss +4 -0
- package/utils/mind.d.ts +5 -5
- package/utils/node/create-node.d.ts +6 -3
- package/utils/node-style/branch.d.ts +4 -2
- package/utils/node-style/shape.d.ts +1 -1
package/fesm2020/plait-mind.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Component, ChangeDetectionStrategy, NgModule, Directive, Input, HostListener } from '@angular/core';
|
|
3
3
|
import * as i2 from '@plait/core';
|
|
4
|
-
import { distanceBetweenPointAndRectangle, RectangleClient, PlaitElement, PlaitBoard, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, depthFirstRecursion, Path, drawRoundRectangle, drawLinearPath, createG, PlaitNode, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF,
|
|
4
|
+
import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, distanceBetweenPointAndRectangle, RectangleClient, PlaitElement, PlaitBoard, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, depthFirstRecursion, Path, drawRoundRectangle, drawLinearPath, createG, updateForeignObject, PlaitNode, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, createForeignObject, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
|
|
5
5
|
import { MindLayoutType, isIndentedLayout, getNonAbstractChildren, isStandardLayout, AbstractNode, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
|
|
6
|
-
import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT,
|
|
6
|
+
import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, drawRichtext, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
|
|
7
7
|
import { fromEvent, Subject, timer } from 'rxjs';
|
|
8
8
|
import { take, takeUntil, filter, debounceTime } from 'rxjs/operators';
|
|
9
9
|
import { Node, Path as Path$1, Editor, Operation } from 'slate';
|
|
@@ -30,19 +30,13 @@ const DefaultAbstractNodeStyle = {
|
|
|
30
30
|
strokeColor: GRAY_COLOR,
|
|
31
31
|
strokeWidth: 2,
|
|
32
32
|
branchColor: GRAY_COLOR,
|
|
33
|
-
branchWidth: 2
|
|
34
|
-
fill: '#FFFFFF'
|
|
33
|
+
branchWidth: 2
|
|
35
34
|
};
|
|
36
35
|
const DefaultNodeStyle = {
|
|
37
36
|
strokeWidth: 3,
|
|
38
37
|
branchWidth: 3,
|
|
39
|
-
fill: '
|
|
38
|
+
fill: 'none'
|
|
40
39
|
};
|
|
41
|
-
const DefaultRootStyle = {
|
|
42
|
-
fill: '#F5F5F5',
|
|
43
|
-
strokeColor: '#F5F5F5',
|
|
44
|
-
};
|
|
45
|
-
const BRANCH_COLORS = ['#A287E1', '#6F81DB', '#6EC4C4', '#DFB85D', '#B1C774', '#77C386', '#C28976', '#E48484', '#E482D4', '#69B1E4'];
|
|
46
40
|
|
|
47
41
|
const TOPIC_COLOR = '#333';
|
|
48
42
|
const TOPIC_FONT_SIZE = 14;
|
|
@@ -93,6 +87,134 @@ var MindPointerType;
|
|
|
93
87
|
MindPointerType["mind"] = "mind";
|
|
94
88
|
})(MindPointerType || (MindPointerType = {}));
|
|
95
89
|
|
|
90
|
+
const DEFAULT_BRANCH_COLORS = [
|
|
91
|
+
'#A287E0',
|
|
92
|
+
'#6E80DB',
|
|
93
|
+
'#6DC4C4',
|
|
94
|
+
'#E0B75E',
|
|
95
|
+
'#B1C675',
|
|
96
|
+
'#77C386',
|
|
97
|
+
'#C18976',
|
|
98
|
+
'#E48484',
|
|
99
|
+
'#E582D4',
|
|
100
|
+
'#6AB1E4'
|
|
101
|
+
];
|
|
102
|
+
const COLORFUL_BRANCH_COLORS = [
|
|
103
|
+
'#F94239',
|
|
104
|
+
'#FF8612',
|
|
105
|
+
'#F3D222',
|
|
106
|
+
'#B3D431',
|
|
107
|
+
'#00BC7B',
|
|
108
|
+
'#06ADBF',
|
|
109
|
+
'#476BFF',
|
|
110
|
+
'#4E49BE',
|
|
111
|
+
'#8957E5',
|
|
112
|
+
'#FE5DA1'
|
|
113
|
+
];
|
|
114
|
+
const SOFT_BRANCH_COLORS = [
|
|
115
|
+
'#6D89C1',
|
|
116
|
+
'#F2BDC7',
|
|
117
|
+
'#B796D9',
|
|
118
|
+
'#5BA683',
|
|
119
|
+
'#B3D431 ',
|
|
120
|
+
'#F2DC6C',
|
|
121
|
+
'#F7C98D',
|
|
122
|
+
'#60B4D1',
|
|
123
|
+
'#838F9E',
|
|
124
|
+
'#C1A381'
|
|
125
|
+
];
|
|
126
|
+
const RETRO_BRANCH_COLORS = [
|
|
127
|
+
'#459476',
|
|
128
|
+
'#9A894F',
|
|
129
|
+
'#D48444',
|
|
130
|
+
'#E9C358 ',
|
|
131
|
+
'#4B9D9D',
|
|
132
|
+
'#C14C41',
|
|
133
|
+
'#827086 ',
|
|
134
|
+
'#60718D',
|
|
135
|
+
'#D38183',
|
|
136
|
+
'#9DC19D'
|
|
137
|
+
];
|
|
138
|
+
const DARK_BRANCH_COLORS = [
|
|
139
|
+
'#3DD1AE',
|
|
140
|
+
'#F6C659',
|
|
141
|
+
'#A9E072',
|
|
142
|
+
'#FF877B ',
|
|
143
|
+
'#F693E7',
|
|
144
|
+
'#5DCFFF',
|
|
145
|
+
'#868AF6',
|
|
146
|
+
'#4C6DC7',
|
|
147
|
+
'#D97C26',
|
|
148
|
+
'#268FAC'
|
|
149
|
+
];
|
|
150
|
+
const STARRY_BRANCH_COLORS = [
|
|
151
|
+
'#E46C57',
|
|
152
|
+
'#579360',
|
|
153
|
+
'#B98339',
|
|
154
|
+
'#3A62D1 ',
|
|
155
|
+
'#B883B7',
|
|
156
|
+
'#42ABE5',
|
|
157
|
+
'#2B9D8F',
|
|
158
|
+
'#A4705E',
|
|
159
|
+
'#265833',
|
|
160
|
+
'#787865'
|
|
161
|
+
];
|
|
162
|
+
|
|
163
|
+
const MindDefaultThemeColor = {
|
|
164
|
+
...DefaultThemeColor,
|
|
165
|
+
branchColors: DEFAULT_BRANCH_COLORS,
|
|
166
|
+
rootFill: '#f5f5f5',
|
|
167
|
+
rootTextColor: '#333333'
|
|
168
|
+
};
|
|
169
|
+
const MindColorfulThemeColor = {
|
|
170
|
+
...ColorfulThemeColor,
|
|
171
|
+
branchColors: COLORFUL_BRANCH_COLORS,
|
|
172
|
+
rootFill: '#333333',
|
|
173
|
+
rootTextColor: '#FFFFFF'
|
|
174
|
+
};
|
|
175
|
+
const MindSoftThemeColor = {
|
|
176
|
+
...SoftThemeColor,
|
|
177
|
+
branchColors: SOFT_BRANCH_COLORS,
|
|
178
|
+
rootFill: '#FFFFFF',
|
|
179
|
+
rootTextColor: '#333333'
|
|
180
|
+
};
|
|
181
|
+
const MindRetroThemeColor = {
|
|
182
|
+
...RetroThemeColor,
|
|
183
|
+
branchColors: RETRO_BRANCH_COLORS,
|
|
184
|
+
rootFill: '#153D5D',
|
|
185
|
+
rootTextColor: '#FFFFFF'
|
|
186
|
+
};
|
|
187
|
+
const MindDarkThemeColor = {
|
|
188
|
+
...DarkThemeColor,
|
|
189
|
+
branchColors: DARK_BRANCH_COLORS,
|
|
190
|
+
rootFill: '#FFFFFF',
|
|
191
|
+
rootTextColor: '#333333'
|
|
192
|
+
};
|
|
193
|
+
const MindStarryThemeColor = {
|
|
194
|
+
...StarryThemeColor,
|
|
195
|
+
branchColors: STARRY_BRANCH_COLORS,
|
|
196
|
+
rootFill: '#FFFFFF',
|
|
197
|
+
rootTextColor: '#333333'
|
|
198
|
+
};
|
|
199
|
+
const MindThemeColors = [
|
|
200
|
+
MindDefaultThemeColor,
|
|
201
|
+
MindColorfulThemeColor,
|
|
202
|
+
MindSoftThemeColor,
|
|
203
|
+
MindRetroThemeColor,
|
|
204
|
+
MindDarkThemeColor,
|
|
205
|
+
MindStarryThemeColor
|
|
206
|
+
];
|
|
207
|
+
const MindThemeColor = {
|
|
208
|
+
isMindThemeColor(value) {
|
|
209
|
+
if (value.branchColors && value.rootFill && value.rootTextColor) {
|
|
210
|
+
return true;
|
|
211
|
+
}
|
|
212
|
+
else {
|
|
213
|
+
return false;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
|
|
96
218
|
function getRectangleByNode(node) {
|
|
97
219
|
const x = node.x + node.hGap;
|
|
98
220
|
let y = node.y + node.vGap;
|
|
@@ -223,13 +345,13 @@ const createEmptyMind = (board, point) => {
|
|
|
223
345
|
return rootElement;
|
|
224
346
|
};
|
|
225
347
|
const createDefaultMind = (point, rightNodeCount, layout) => {
|
|
226
|
-
const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, {
|
|
348
|
+
const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { layout });
|
|
227
349
|
root.rightNodeCount = rightNodeCount;
|
|
228
350
|
root.isRoot = true;
|
|
229
351
|
root.type = 'mindmap';
|
|
230
352
|
root.points = [point];
|
|
231
353
|
const children = [1, 1, 1].map(() => {
|
|
232
|
-
return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, {
|
|
354
|
+
return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, {});
|
|
233
355
|
});
|
|
234
356
|
root.children = children;
|
|
235
357
|
return root;
|
|
@@ -242,35 +364,26 @@ const createMindElement = (text, width, height, options) => {
|
|
|
242
364
|
},
|
|
243
365
|
children: [],
|
|
244
366
|
width,
|
|
245
|
-
height
|
|
246
|
-
fill: options.fill,
|
|
247
|
-
strokeColor: options.strokeColor,
|
|
248
|
-
strokeWidth: options.strokeWidth,
|
|
249
|
-
shape: options.shape
|
|
367
|
+
height
|
|
250
368
|
};
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
}
|
|
257
|
-
if (!isNullOrUndefined(options.strokeWidth)) {
|
|
258
|
-
newElement.strokeWidth = options.strokeWidth;
|
|
259
|
-
}
|
|
260
|
-
if (options.shape) {
|
|
261
|
-
newElement.shape = options.shape;
|
|
262
|
-
}
|
|
263
|
-
if (options.layout) {
|
|
264
|
-
newElement.layout = options.layout;
|
|
265
|
-
}
|
|
266
|
-
if (options.branchColor) {
|
|
267
|
-
newElement.branchColor = options.branchColor;
|
|
268
|
-
}
|
|
269
|
-
if (!isNullOrUndefined(options.branchWidth)) {
|
|
270
|
-
newElement.branchWidth = options.branchWidth;
|
|
369
|
+
let key;
|
|
370
|
+
for (key in options) {
|
|
371
|
+
if (!isNullOrUndefined(options[key])) {
|
|
372
|
+
newElement[key] = options[key];
|
|
373
|
+
}
|
|
271
374
|
}
|
|
272
375
|
return newElement;
|
|
273
376
|
};
|
|
377
|
+
const INHERIT_ATTRIBUTE_KEYS = [
|
|
378
|
+
'fill',
|
|
379
|
+
'strokeColor',
|
|
380
|
+
'strokeWidth',
|
|
381
|
+
'shape',
|
|
382
|
+
'layout',
|
|
383
|
+
'branchColor',
|
|
384
|
+
'branchWidth',
|
|
385
|
+
'branchShape'
|
|
386
|
+
];
|
|
274
387
|
|
|
275
388
|
const getChildrenCount = (element) => {
|
|
276
389
|
const count = element.children.reduce((p, c) => {
|
|
@@ -327,14 +440,14 @@ const extractNodesText = (node) => {
|
|
|
327
440
|
};
|
|
328
441
|
// layoutLevel 用来表示插入兄弟节点还是子节点
|
|
329
442
|
const insertMindElement = (board, inheritNode, path) => {
|
|
330
|
-
|
|
443
|
+
const newNode = {};
|
|
331
444
|
if (!inheritNode.isRoot) {
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
445
|
+
INHERIT_ATTRIBUTE_KEYS.forEach(attr => {
|
|
446
|
+
newNode[attr] = inheritNode[attr];
|
|
447
|
+
});
|
|
448
|
+
delete newNode.layout;
|
|
335
449
|
}
|
|
336
|
-
|
|
337
|
-
const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, { fill, strokeColor, strokeWidth, shape });
|
|
450
|
+
const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, newNode);
|
|
338
451
|
Transforms.insertNode(board, newElement, path);
|
|
339
452
|
clearSelectedElement(board);
|
|
340
453
|
addSelectedElement(board, newElement);
|
|
@@ -470,15 +583,7 @@ const getRootLayout = (root) => {
|
|
|
470
583
|
};
|
|
471
584
|
|
|
472
585
|
const getAvailableProperty = (board, element, propertyKey) => {
|
|
473
|
-
|
|
474
|
-
ancestors.unshift(element);
|
|
475
|
-
const ancestor = ancestors.find(value => value[propertyKey]);
|
|
476
|
-
if (ancestor) {
|
|
477
|
-
return ancestor[propertyKey];
|
|
478
|
-
}
|
|
479
|
-
else {
|
|
480
|
-
return undefined;
|
|
481
|
-
}
|
|
586
|
+
return element[propertyKey];
|
|
482
587
|
};
|
|
483
588
|
|
|
484
589
|
/**
|
|
@@ -509,31 +614,37 @@ const getAbstractBranchColor = (board, element) => {
|
|
|
509
614
|
}
|
|
510
615
|
return DefaultAbstractNodeStyle.branchColor;
|
|
511
616
|
};
|
|
512
|
-
const getNextBranchColor = (root) => {
|
|
617
|
+
const getNextBranchColor = (board, root) => {
|
|
513
618
|
const index = root.children.length;
|
|
514
|
-
return getDefaultBranchColorByIndex(index);
|
|
619
|
+
return getDefaultBranchColorByIndex(board, index);
|
|
515
620
|
};
|
|
516
621
|
const getDefaultBranchColor = (board, element) => {
|
|
517
622
|
const path = PlaitBoard.findPath(board, element);
|
|
518
|
-
return getDefaultBranchColorByIndex(path[1]);
|
|
623
|
+
return getDefaultBranchColorByIndex(board, path[1]);
|
|
519
624
|
};
|
|
520
|
-
const getDefaultBranchColorByIndex = (index) => {
|
|
521
|
-
const
|
|
625
|
+
const getDefaultBranchColorByIndex = (board, index) => {
|
|
626
|
+
const themeColor = getMindThemeColor(board);
|
|
627
|
+
const length = themeColor.branchColors.length;
|
|
522
628
|
const remainder = index % length;
|
|
523
|
-
return
|
|
629
|
+
return themeColor.branchColors[remainder];
|
|
630
|
+
};
|
|
631
|
+
const getMindThemeColor = (board) => {
|
|
632
|
+
const themeColors = PlaitBoard.getThemeColors(board);
|
|
633
|
+
const themeColor = themeColors.find(val => val.mode === board.theme.themeColorMode);
|
|
634
|
+
if (themeColor && MindThemeColor.isMindThemeColor(themeColor)) {
|
|
635
|
+
return themeColor;
|
|
636
|
+
}
|
|
637
|
+
else {
|
|
638
|
+
return MindDefaultThemeColor;
|
|
639
|
+
}
|
|
524
640
|
};
|
|
525
641
|
|
|
526
642
|
const getStrokeByMindElement = (board, element) => {
|
|
527
643
|
if (PlaitMind.isMind(element)) {
|
|
528
|
-
|
|
644
|
+
const defaultRootStroke = getMindThemeColor(board).rootFill;
|
|
645
|
+
return element.strokeColor || defaultRootStroke;
|
|
529
646
|
}
|
|
530
|
-
|
|
531
|
-
ancestors.unshift(element);
|
|
532
|
-
const ancestor = ancestors.find(value => value.strokeColor);
|
|
533
|
-
if (ancestor && ancestor.strokeColor && !PlaitMind.isMind(ancestor)) {
|
|
534
|
-
return ancestor.strokeColor;
|
|
535
|
-
}
|
|
536
|
-
return getDefaultBranchColor(board, element);
|
|
647
|
+
return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
|
|
537
648
|
};
|
|
538
649
|
const getShapeByElement = (board, element) => {
|
|
539
650
|
const shape = getAvailableProperty(board, element, 'shape');
|
|
@@ -790,7 +901,8 @@ function drawRoundRectangleByNode(board, node) {
|
|
|
790
901
|
return drawRoundRectangleByElement(board, rectangle, node.origin);
|
|
791
902
|
}
|
|
792
903
|
function drawRoundRectangleByElement(board, nodeRectangle, element) {
|
|
793
|
-
const
|
|
904
|
+
const defaultRootFill = getMindThemeColor(board).rootFill;
|
|
905
|
+
const fill = element.fill ? element.fill : element.isRoot ? defaultRootFill : DefaultNodeStyle.fill;
|
|
794
906
|
const stroke = getStrokeByMindElement(board, element);
|
|
795
907
|
const strokeWidth = element.strokeWidth ? element.strokeWidth : DefaultNodeStyle.strokeWidth;
|
|
796
908
|
const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), nodeRectangle.x, nodeRectangle.y, nodeRectangle.x + nodeRectangle.width, nodeRectangle.y + nodeRectangle.height, {
|
|
@@ -934,7 +1046,7 @@ const transformPlacement = (placement, direction) => {
|
|
|
934
1046
|
|
|
935
1047
|
function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true, defaultStrokeWidth) {
|
|
936
1048
|
const branchShape = getBranchShapeByMindElement(board, node.origin);
|
|
937
|
-
const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board,
|
|
1049
|
+
const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, node.origin);
|
|
938
1050
|
const branchColor = defaultStroke || getBranchColorByMindElement(board, child.origin);
|
|
939
1051
|
const isUnderlineShape = getShapeByElement(board, child.origin) === MindElementShape.underline;
|
|
940
1052
|
let beginX, beginY, endX, endY, beginNode = node, endNode = child;
|
|
@@ -982,7 +1094,7 @@ function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnde
|
|
|
982
1094
|
function drawLogicLink(board, parent, node, isHorizontal, defaultStroke = null, defaultStrokeWidth) {
|
|
983
1095
|
const branchShape = getBranchShapeByMindElement(board, parent.origin);
|
|
984
1096
|
const branchColor = defaultStroke || getBranchColorByMindElement(board, node.origin);
|
|
985
|
-
const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board,
|
|
1097
|
+
const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, parent.origin);
|
|
986
1098
|
const hasStraightLine = !parent.origin.isRoot;
|
|
987
1099
|
const parentShape = getShapeByElement(board, parent.origin);
|
|
988
1100
|
const shape = node.origin.shape ? node.origin.shape : parentShape;
|
|
@@ -2433,7 +2545,9 @@ class QuickInsertDrawer extends BaseDrawer {
|
|
|
2433
2545
|
underlineCoordinates[MindLayoutType.right].startY -= height * 0.5;
|
|
2434
2546
|
underlineCoordinates[MindLayoutType.right].endY -= height * 0.5;
|
|
2435
2547
|
}
|
|
2436
|
-
const branchColor = PlaitMind.isMind(element)
|
|
2548
|
+
const branchColor = PlaitMind.isMind(element)
|
|
2549
|
+
? getNextBranchColor(this.board, element)
|
|
2550
|
+
: getBranchColorByMindElement(this.board, element);
|
|
2437
2551
|
let nodeLayout = MindQueries.getCorrectLayoutByElement(this.board, element);
|
|
2438
2552
|
if (element.isRoot && isStandardLayout(nodeLayout)) {
|
|
2439
2553
|
const root = element;
|
|
@@ -2544,7 +2658,8 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2544
2658
|
}
|
|
2545
2659
|
const isEqualNode = RectangleClient.isEqual(this.node, newNode);
|
|
2546
2660
|
this.node = newNode;
|
|
2547
|
-
|
|
2661
|
+
const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
|
|
2662
|
+
if (!isEqualNode || value.element !== previous.element || isChangeTheme) {
|
|
2548
2663
|
this.drawActiveG();
|
|
2549
2664
|
this.updateActiveClass();
|
|
2550
2665
|
this.drawShape();
|
|
@@ -2762,7 +2877,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
|
|
|
2762
2877
|
}
|
|
2763
2878
|
// interactive
|
|
2764
2879
|
fromEvent(collapseG, 'mouseup')
|
|
2765
|
-
.pipe(filter(() => !this.handActive || PlaitBoard.isReadonly(this.board)), take(1))
|
|
2880
|
+
.pipe(filter(() => !this.handActive || !!PlaitBoard.isReadonly(this.board)), take(1))
|
|
2766
2881
|
.subscribe(() => {
|
|
2767
2882
|
const isCollapsed = !this.node.origin.isCollapsed;
|
|
2768
2883
|
const newElement = { isCollapsed };
|
|
@@ -3598,7 +3713,7 @@ const withCreateMind = (board) => {
|
|
|
3598
3713
|
fakeCreateNodeRef.nodeG = nodeG;
|
|
3599
3714
|
PlaitBoard.getHost(board).append(nodeG);
|
|
3600
3715
|
PlaitBoard.getHost(board).append(fakeCreateNodeRef.topicG);
|
|
3601
|
-
updateForeignObject
|
|
3716
|
+
updateForeignObject(fakeCreateNodeRef.topicG, topicRectangle.width, topicRectangle.height, topicRectangle.x, topicRectangle.y);
|
|
3602
3717
|
}
|
|
3603
3718
|
}
|
|
3604
3719
|
});
|
|
@@ -3643,6 +3758,31 @@ const withCreateMind = (board) => {
|
|
|
3643
3758
|
return newBoard;
|
|
3644
3759
|
};
|
|
3645
3760
|
|
|
3761
|
+
const withMindHotkey = (board) => {
|
|
3762
|
+
const { keydown } = board;
|
|
3763
|
+
board.keydown = (keyboardEvent) => {
|
|
3764
|
+
if (!PlaitBoard.getMovingPoint(board)) {
|
|
3765
|
+
return;
|
|
3766
|
+
}
|
|
3767
|
+
if (isExpandHotkey(keyboardEvent)) {
|
|
3768
|
+
const selectedMindElements = getSelectedElements(board).filter(element => MindElement.isMindElement(board, element));
|
|
3769
|
+
if (selectedMindElements.length === 1 &&
|
|
3770
|
+
!PlaitMind.isMind(selectedMindElements[0]) &&
|
|
3771
|
+
selectedMindElements[0].children &&
|
|
3772
|
+
selectedMindElements[0].children.length > 0) {
|
|
3773
|
+
const element = selectedMindElements[0];
|
|
3774
|
+
Transforms.setNode(board, { isCollapsed: element.isCollapsed ? false : true }, PlaitBoard.findPath(board, element));
|
|
3775
|
+
return;
|
|
3776
|
+
}
|
|
3777
|
+
}
|
|
3778
|
+
keydown(keyboardEvent);
|
|
3779
|
+
};
|
|
3780
|
+
return board;
|
|
3781
|
+
};
|
|
3782
|
+
const isExpandHotkey = (keyboardEvent) => {
|
|
3783
|
+
return isKeyHotkey('mod+/', keyboardEvent);
|
|
3784
|
+
};
|
|
3785
|
+
|
|
3646
3786
|
const withMind = (board) => {
|
|
3647
3787
|
const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
|
|
3648
3788
|
board.drawElement = (context) => {
|
|
@@ -3654,6 +3794,20 @@ const withMind = (board) => {
|
|
|
3654
3794
|
}
|
|
3655
3795
|
return drawElement(context);
|
|
3656
3796
|
};
|
|
3797
|
+
board.applyTheme = (element) => {
|
|
3798
|
+
const mindElement = element;
|
|
3799
|
+
const shouldClearProperty = !PlaitBoard.isBoard(element) && (mindElement?.branchColor || mindElement?.fill || mindElement?.strokeColor);
|
|
3800
|
+
const isAbstract = AbstractNode.isAbstract(element);
|
|
3801
|
+
if (shouldClearProperty) {
|
|
3802
|
+
const path = PlaitBoard.findPath(board, element);
|
|
3803
|
+
if (isAbstract) {
|
|
3804
|
+
Transforms.setNode(board, { fill: null, strokeColor: DefaultAbstractNodeStyle.strokeColor, branchColor: DefaultAbstractNodeStyle.branchColor }, path);
|
|
3805
|
+
}
|
|
3806
|
+
else {
|
|
3807
|
+
Transforms.setNode(board, { fill: null, strokeColor: null, branchColor: null }, path);
|
|
3808
|
+
}
|
|
3809
|
+
}
|
|
3810
|
+
};
|
|
3657
3811
|
board.getRectangle = element => {
|
|
3658
3812
|
if (MindElement.isMindElement(board, element)) {
|
|
3659
3813
|
return getRectangleByNode(MindElement.getNode(element));
|
|
@@ -3831,7 +3985,7 @@ const withMind = (board) => {
|
|
|
3831
3985
|
MindTransforms.removeElements(board, selectedElements);
|
|
3832
3986
|
deleteFragment(data);
|
|
3833
3987
|
};
|
|
3834
|
-
return withMindExtend(withCreateMind(withAbstract(withDnd(board))));
|
|
3988
|
+
return withMindHotkey(withMindExtend(withCreateMind(withAbstract(withDnd(board)))));
|
|
3835
3989
|
};
|
|
3836
3990
|
|
|
3837
3991
|
class MindEmojiBaseComponent {
|
|
@@ -3885,5 +4039,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
|
|
|
3885
4039
|
* Generated bundle index. Do not edit.
|
|
3886
4040
|
*/
|
|
3887
4041
|
|
|
3888
|
-
export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE,
|
|
4042
|
+
export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_WIDTH, BaseDrawer, BranchShape, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, 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, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, enterNodeEditing, 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, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
|
|
3889
4043
|
//# sourceMappingURL=plait-mind.mjs.map
|