@plait/mind 0.48.0 → 0.49.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/esm2022/plugins/with-abstract-resize.mjs +4 -5
- package/esm2022/plugins/with-mind-create.mjs +12 -12
- package/esm2022/plugins/with-mind.mjs +3 -3
- package/esm2022/plugins/with-node-dnd.mjs +5 -5
- package/esm2022/plugins/with-node-image.mjs +3 -3
- package/esm2022/transforms/index.mjs +6 -2
- package/esm2022/transforms/layout.mjs +3 -13
- package/esm2022/transforms/node.mjs +2 -2
- package/esm2022/transforms/property.mjs +34 -0
- package/esm2022/utils/clipboard.mjs +4 -4
- package/esm2022/utils/mind.mjs +13 -4
- package/esm2022/utils/node/adjust-node.mjs +2 -3
- package/esm2022/utils/node-hover/extend.mjs +3 -3
- package/esm2022/utils/space/node-space.mjs +4 -8
- package/fesm2022/plait-mind.mjs +450 -422
- package/fesm2022/plait-mind.mjs.map +1 -1
- package/package.json +1 -1
- package/transforms/index.d.ts +5 -1
- package/transforms/layout.d.ts +1 -1
- package/transforms/property.d.ts +8 -0
- package/utils/mind.d.ts +2 -1
- package/utils/space/node-space.d.ts +1 -2
package/fesm2022/plait-mind.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Component, ChangeDetectionStrategy, NgZone, Directive, Input, HostListener } from '@angular/core';
|
|
3
|
-
import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard,
|
|
3
|
+
import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, updateForeignObject, getRectangleByElements, NODE_TO_PARENT, createForeignObject, removeSelectedElement, PlaitHistoryBoard, setStrokeLinecap, ACTIVE_STROKE_WIDTH, createText, PlaitPointerType, NODE_TO_INDEX, PlaitChildrenElementComponent, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, temporaryDisableSelection, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, setClipboardData, setClipboardDataByText, getDataFromClipboard, PlaitPluginKey } from '@plait/core';
|
|
4
4
|
import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
|
|
5
|
-
import {
|
|
5
|
+
import { TEXT_DEFAULT_HEIGHT, buildText, PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, getTextSize, TextManage, ExitOrigin, getTextFromClipboard } from '@plait/text';
|
|
6
6
|
import { fromEvent, Subject } from 'rxjs';
|
|
7
|
-
import { getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, removeElementOfFocusedImage, getFirstTextManage, Generator, CommonPluginElement, ImageGenerator, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, MediaKeys, acceptImageTypes, buildImage, withResize, ResizeHandle } from '@plait/common';
|
|
7
|
+
import { getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, removeElementOfFocusedImage, getFirstTextManage, PropertyTransforms, Generator, CommonPluginElement, ImageGenerator, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, MediaKeys, acceptImageTypes, buildImage, withResize, ResizeHandle } from '@plait/common';
|
|
8
8
|
import { Node as Node$1, Path as Path$1 } from 'slate';
|
|
9
9
|
import { pointsOnBezierCurves } from 'points-on-curve';
|
|
10
10
|
import { take, filter } from 'rxjs/operators';
|
|
@@ -208,18 +208,6 @@ function getEmojiFontSize(element) {
|
|
|
208
208
|
}
|
|
209
209
|
}
|
|
210
210
|
|
|
211
|
-
const TOPIC_COLOR = '#333';
|
|
212
|
-
const TOPIC_FONT_SIZE = 14;
|
|
213
|
-
const ROOT_TOPIC_FONT_SIZE = 18;
|
|
214
|
-
const ROOT_TOPIC_HEIGHT = 25;
|
|
215
|
-
const ROOT_TOPIC_WIDTH = 72;
|
|
216
|
-
const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
|
|
217
|
-
const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
|
|
218
|
-
const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
|
|
219
|
-
const NodeTopicThreshold = {
|
|
220
|
-
defaultTextMaxWidth: 34 * 14
|
|
221
|
-
};
|
|
222
|
-
|
|
223
211
|
const getAvailableProperty = (board, element, propertyKey) => {
|
|
224
212
|
return element[propertyKey];
|
|
225
213
|
};
|
|
@@ -491,240 +479,6 @@ const getShapeByElement = (board, element) => {
|
|
|
491
479
|
return shape || MindElementShape.roundRectangle;
|
|
492
480
|
};
|
|
493
481
|
|
|
494
|
-
const NodeDefaultSpace = {
|
|
495
|
-
horizontal: {
|
|
496
|
-
nodeAndText: BASE * 2.5,
|
|
497
|
-
emojiAndText: BASE * 1.5
|
|
498
|
-
},
|
|
499
|
-
vertical: {
|
|
500
|
-
nodeAndText: BASE,
|
|
501
|
-
nodeAndImage: BASE,
|
|
502
|
-
imageAndText: BASE * 1.5
|
|
503
|
-
}
|
|
504
|
-
};
|
|
505
|
-
const RootDefaultSpace = {
|
|
506
|
-
horizontal: {
|
|
507
|
-
nodeAndText: BASE * 4,
|
|
508
|
-
emojiAndText: BASE * 2
|
|
509
|
-
},
|
|
510
|
-
vertical: {
|
|
511
|
-
nodeAndText: BASE * 2
|
|
512
|
-
}
|
|
513
|
-
};
|
|
514
|
-
const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
|
|
515
|
-
const isMind = PlaitMind.isMind(element);
|
|
516
|
-
const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
|
|
517
|
-
const strokeWidth = getStrokeWidthByElement(board, element);
|
|
518
|
-
return nodeAndText + strokeWidth;
|
|
519
|
-
};
|
|
520
|
-
const getVerticalSpaceBetweenNodeAndText = (board, element) => {
|
|
521
|
-
const isMind = PlaitMind.isMind(element);
|
|
522
|
-
const strokeWidth = getStrokeWidthByElement(board, element);
|
|
523
|
-
const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
|
|
524
|
-
return nodeAndText + strokeWidth;
|
|
525
|
-
};
|
|
526
|
-
const getSpaceEmojiAndText = (element) => {
|
|
527
|
-
const isMind = PlaitMind.isMind(element);
|
|
528
|
-
const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
|
|
529
|
-
return emojiAndText;
|
|
530
|
-
};
|
|
531
|
-
const NodeSpace = {
|
|
532
|
-
getNodeWidth(board, element) {
|
|
533
|
-
const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
|
|
534
|
-
if (MindElement.hasEmojis(element)) {
|
|
535
|
-
return (NodeSpace.getEmojiLeftSpace(board, element) +
|
|
536
|
-
getEmojisWidthHeight(board, element).width +
|
|
537
|
-
getSpaceEmojiAndText(element) +
|
|
538
|
-
NodeSpace.getNodeDynamicWidth(board, element) +
|
|
539
|
-
nodeAndText);
|
|
540
|
-
}
|
|
541
|
-
return nodeAndText + NodeSpace.getNodeDynamicWidth(board, element) + nodeAndText;
|
|
542
|
-
},
|
|
543
|
-
getNodeHeight(board, element) {
|
|
544
|
-
const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
|
|
545
|
-
if (MindElement.hasImage(element)) {
|
|
546
|
-
return NodeSpace.getTextTopSpace(board, element) + element.height + nodeAndText;
|
|
547
|
-
}
|
|
548
|
-
return nodeAndText + element.height + nodeAndText;
|
|
549
|
-
},
|
|
550
|
-
getNodeDynamicWidth(board, element) {
|
|
551
|
-
const width = element.manualWidth || element.width;
|
|
552
|
-
const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
|
|
553
|
-
return Math.max(width, imageWidth);
|
|
554
|
-
},
|
|
555
|
-
/**
|
|
556
|
-
* use it when upload image first or resize image
|
|
557
|
-
*/
|
|
558
|
-
getNodeNewDynamicWidth(board, element, imageWidth) {
|
|
559
|
-
const width = element.manualWidth || element.width;
|
|
560
|
-
return Math.max(width, imageWidth);
|
|
561
|
-
},
|
|
562
|
-
getNodeResizableMinWidth(board, element) {
|
|
563
|
-
const minTopicWidth = NodeSpace.getNodeTopicMinWidth(board, element);
|
|
564
|
-
if (MindElement.hasImage(element) && element.data.image.width > minTopicWidth) {
|
|
565
|
-
return element.data.image.width;
|
|
566
|
-
}
|
|
567
|
-
else {
|
|
568
|
-
return minTopicWidth;
|
|
569
|
-
}
|
|
570
|
-
},
|
|
571
|
-
getNodeTopicMinWidth(board, element, isRoot = false) {
|
|
572
|
-
const defaultFontSize = getNodeDefaultFontSize(isRoot);
|
|
573
|
-
const editor = getFirstTextEditor(element);
|
|
574
|
-
const marks = PlaitMarkEditor.getMarks(editor);
|
|
575
|
-
const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
|
|
576
|
-
return fontSize;
|
|
577
|
-
},
|
|
578
|
-
getTextLeftSpace(board, element) {
|
|
579
|
-
const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
|
|
580
|
-
if (MindElement.hasEmojis(element)) {
|
|
581
|
-
return NodeSpace.getEmojiLeftSpace(board, element) + getEmojisWidthHeight(board, element).width + getSpaceEmojiAndText(element);
|
|
582
|
-
}
|
|
583
|
-
else {
|
|
584
|
-
return nodeAndText;
|
|
585
|
-
}
|
|
586
|
-
},
|
|
587
|
-
getTextTopSpace(board, element) {
|
|
588
|
-
const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
|
|
589
|
-
if (MindElement.hasImage(element)) {
|
|
590
|
-
return NodeSpace.getImageTopSpace(board, element) + element.data.image.height + NodeDefaultSpace.vertical.imageAndText;
|
|
591
|
-
}
|
|
592
|
-
else {
|
|
593
|
-
return nodeAndText;
|
|
594
|
-
}
|
|
595
|
-
},
|
|
596
|
-
getImageTopSpace(board, element) {
|
|
597
|
-
const strokeWidth = getStrokeWidthByElement(board, element);
|
|
598
|
-
return strokeWidth + NodeDefaultSpace.vertical.nodeAndImage;
|
|
599
|
-
},
|
|
600
|
-
getEmojiLeftSpace(board, element) {
|
|
601
|
-
const options = board.getPluginOptions(WithMindPluginKey);
|
|
602
|
-
const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
|
|
603
|
-
return nodeAndText - options.emojiPadding;
|
|
604
|
-
},
|
|
605
|
-
getEmojiTopSpace(board, element) {
|
|
606
|
-
const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
|
|
607
|
-
return nodeAndText;
|
|
608
|
-
}
|
|
609
|
-
};
|
|
610
|
-
const getFontSizeBySlateElement = (text) => {
|
|
611
|
-
const defaultFontSize = DEFAULT_FONT_SIZE;
|
|
612
|
-
if (typeof text === 'string') {
|
|
613
|
-
return defaultFontSize;
|
|
614
|
-
}
|
|
615
|
-
const marks = PlaitMarkEditor.getMarksByElement(text);
|
|
616
|
-
const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
|
|
617
|
-
return fontSize;
|
|
618
|
-
};
|
|
619
|
-
const getNodeDefaultFontSize = (isRoot = false) => {
|
|
620
|
-
const defaultFontSize = isRoot ? ROOT_TOPIC_FONT_SIZE : DEFAULT_FONT_SIZE;
|
|
621
|
-
return defaultFontSize;
|
|
622
|
-
};
|
|
623
|
-
|
|
624
|
-
function getRectangleByNode(node) {
|
|
625
|
-
const x = node.x + node.hGap;
|
|
626
|
-
let y = node.y + node.vGap;
|
|
627
|
-
const width = node.width - node.hGap * 2;
|
|
628
|
-
const height = node.height - node.vGap * 2;
|
|
629
|
-
return {
|
|
630
|
-
x,
|
|
631
|
-
y,
|
|
632
|
-
width,
|
|
633
|
-
height
|
|
634
|
-
};
|
|
635
|
-
}
|
|
636
|
-
function getRectangleByElement(board, element) {
|
|
637
|
-
const width = NodeSpace.getNodeWidth(board, element);
|
|
638
|
-
const height = NodeSpace.getNodeHeight(board, element);
|
|
639
|
-
const nodeRectangle = {
|
|
640
|
-
x: element.points[0][0],
|
|
641
|
-
y: element.points[0][1],
|
|
642
|
-
width,
|
|
643
|
-
height
|
|
644
|
-
};
|
|
645
|
-
return nodeRectangle;
|
|
646
|
-
}
|
|
647
|
-
function isHitMindElement(board, point, element) {
|
|
648
|
-
const node = MindElement.getNode(element);
|
|
649
|
-
if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
|
|
650
|
-
return true;
|
|
651
|
-
}
|
|
652
|
-
else {
|
|
653
|
-
return false;
|
|
654
|
-
}
|
|
655
|
-
}
|
|
656
|
-
|
|
657
|
-
function getEmojiRectangle(board, element) {
|
|
658
|
-
let { x, y } = getRectangleByNode(MindElement.getNode(element));
|
|
659
|
-
x = x + NodeSpace.getEmojiLeftSpace(board, element);
|
|
660
|
-
const { width, height } = getEmojisWidthHeight(board, element);
|
|
661
|
-
return {
|
|
662
|
-
x,
|
|
663
|
-
y,
|
|
664
|
-
width,
|
|
665
|
-
height
|
|
666
|
-
};
|
|
667
|
-
}
|
|
668
|
-
function getEmojiForeignRectangle(board, element) {
|
|
669
|
-
let { x, y } = getRectangleByNode(MindElement.getNode(element));
|
|
670
|
-
x = x + NodeSpace.getEmojiLeftSpace(board, element);
|
|
671
|
-
const { width } = getEmojisWidthHeight(board, element);
|
|
672
|
-
return {
|
|
673
|
-
x,
|
|
674
|
-
y,
|
|
675
|
-
width,
|
|
676
|
-
height: NodeSpace.getNodeHeight(board, element)
|
|
677
|
-
};
|
|
678
|
-
}
|
|
679
|
-
const isHitEmojis = (board, element, point) => {
|
|
680
|
-
return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
|
|
681
|
-
};
|
|
682
|
-
|
|
683
|
-
function getTopicRectangleByNode(board, node) {
|
|
684
|
-
let nodeRectangle = getRectangleByNode(node);
|
|
685
|
-
const result = getTopicRectangleByElement(board, nodeRectangle, node.origin);
|
|
686
|
-
result.width = result.width;
|
|
687
|
-
return result;
|
|
688
|
-
}
|
|
689
|
-
function getTopicRectangleByElement(board, nodeRectangle, element) {
|
|
690
|
-
const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
|
|
691
|
-
const y = nodeRectangle.y + NodeSpace.getTextTopSpace(board, element);
|
|
692
|
-
const width = NodeSpace.getNodeDynamicWidth(board, element);
|
|
693
|
-
const height = Math.ceil(element.height);
|
|
694
|
-
return { height, width, x, y };
|
|
695
|
-
}
|
|
696
|
-
|
|
697
|
-
function getImageForeignRectangle(board, element) {
|
|
698
|
-
let { x, y } = getRectangleByNode(MindElement.getNode(element));
|
|
699
|
-
const elementWidth = element.manualWidth || element.width;
|
|
700
|
-
x =
|
|
701
|
-
elementWidth > element.data.image.width
|
|
702
|
-
? x + NodeSpace.getTextLeftSpace(board, element) + (elementWidth - element.data.image.width) / 2
|
|
703
|
-
: x + NodeSpace.getTextLeftSpace(board, element);
|
|
704
|
-
y = NodeSpace.getImageTopSpace(board, element) + y;
|
|
705
|
-
const { width, height } = element.data.image;
|
|
706
|
-
const rectangle = {
|
|
707
|
-
x,
|
|
708
|
-
y,
|
|
709
|
-
width,
|
|
710
|
-
height
|
|
711
|
-
};
|
|
712
|
-
return rectangle;
|
|
713
|
-
}
|
|
714
|
-
const isHitImage = (board, element, point) => {
|
|
715
|
-
const imageRectangle = getImageForeignRectangle(board, element);
|
|
716
|
-
const imageOutlineRectangle = RectangleClient.getOutlineRectangle(imageRectangle, -RESIZE_HANDLE_DIAMETER / 2);
|
|
717
|
-
return RectangleClient.isPointInRectangle(imageOutlineRectangle, point);
|
|
718
|
-
};
|
|
719
|
-
const getHitImageResizeHandleDirection = (board, element, point) => {
|
|
720
|
-
const imageRectangle = getImageForeignRectangle(board, element);
|
|
721
|
-
const resizeHandleRefs = getRectangleResizeHandleRefs(imageRectangle, RESIZE_HANDLE_DIAMETER);
|
|
722
|
-
const result = resizeHandleRefs.find(resizeHandleRef => {
|
|
723
|
-
return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeHandleRef.rectangle);
|
|
724
|
-
});
|
|
725
|
-
return result;
|
|
726
|
-
};
|
|
727
|
-
|
|
728
482
|
function editTopic(element) {
|
|
729
483
|
const component = PlaitElement.getComponent(element);
|
|
730
484
|
component?.editTopic();
|
|
@@ -734,6 +488,18 @@ const getSelectedMindElements = (board) => {
|
|
|
734
488
|
return selectedElements;
|
|
735
489
|
};
|
|
736
490
|
|
|
491
|
+
const TOPIC_COLOR = '#333';
|
|
492
|
+
const TOPIC_FONT_SIZE = 14;
|
|
493
|
+
const ROOT_TOPIC_FONT_SIZE = 18;
|
|
494
|
+
const ROOT_TOPIC_HEIGHT = 25;
|
|
495
|
+
const ROOT_TOPIC_WIDTH = 72;
|
|
496
|
+
const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
|
|
497
|
+
const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
|
|
498
|
+
const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
|
|
499
|
+
const NodeTopicThreshold = {
|
|
500
|
+
defaultTextMaxWidth: 34 * 14
|
|
501
|
+
};
|
|
502
|
+
|
|
737
503
|
const getBranchDirectionsByLayouts = (branchLayouts) => {
|
|
738
504
|
const branchDirections = [];
|
|
739
505
|
branchLayouts.forEach(l => {
|
|
@@ -907,142 +673,381 @@ const createEmptyMind = (board, point) => {
|
|
|
907
673
|
element.type = 'mindmap';
|
|
908
674
|
const width = NodeSpace.getNodeWidth(board, element);
|
|
909
675
|
const height = NodeSpace.getNodeHeight(board, element);
|
|
910
|
-
element.points = [[point[0] - width / 2, point[1] - height / 2]];
|
|
911
|
-
return element;
|
|
912
|
-
};
|
|
913
|
-
const createDefaultMind = (point, rightNodeCount, layout) => {
|
|
914
|
-
const root = createMindElement('思维导图', ROOT_TOPIC_WIDTH, ROOT_TOPIC_HEIGHT, { layout });
|
|
915
|
-
root.rightNodeCount = rightNodeCount;
|
|
916
|
-
root.isRoot = true;
|
|
917
|
-
root.type = 'mindmap';
|
|
918
|
-
root.points = [point];
|
|
919
|
-
const children = [1, 1, 1].map(() => {
|
|
920
|
-
return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, {});
|
|
921
|
-
});
|
|
922
|
-
root.children = children;
|
|
923
|
-
return root;
|
|
924
|
-
};
|
|
925
|
-
const createMindElement = (text, width, height, options) => {
|
|
926
|
-
const newElement = {
|
|
927
|
-
id: idCreator(),
|
|
928
|
-
data: {
|
|
929
|
-
topic: buildText(text)
|
|
930
|
-
},
|
|
931
|
-
children: [],
|
|
676
|
+
element.points = [[point[0] - width / 2, point[1] - height / 2]];
|
|
677
|
+
return element;
|
|
678
|
+
};
|
|
679
|
+
const createDefaultMind = (point, rightNodeCount, layout) => {
|
|
680
|
+
const root = createMindElement('思维导图', ROOT_TOPIC_WIDTH, ROOT_TOPIC_HEIGHT, { layout });
|
|
681
|
+
root.rightNodeCount = rightNodeCount;
|
|
682
|
+
root.isRoot = true;
|
|
683
|
+
root.type = 'mindmap';
|
|
684
|
+
root.points = [point];
|
|
685
|
+
const children = [1, 1, 1].map(() => {
|
|
686
|
+
return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, {});
|
|
687
|
+
});
|
|
688
|
+
root.children = children;
|
|
689
|
+
return root;
|
|
690
|
+
};
|
|
691
|
+
const createMindElement = (text, width, height, options) => {
|
|
692
|
+
const newElement = {
|
|
693
|
+
id: idCreator(),
|
|
694
|
+
data: {
|
|
695
|
+
topic: buildText(text)
|
|
696
|
+
},
|
|
697
|
+
children: [],
|
|
698
|
+
width,
|
|
699
|
+
height
|
|
700
|
+
};
|
|
701
|
+
let key;
|
|
702
|
+
for (key in options) {
|
|
703
|
+
if (!isNullOrUndefined(options[key])) {
|
|
704
|
+
newElement[key] = options[key];
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
return newElement;
|
|
708
|
+
};
|
|
709
|
+
const INHERIT_ATTRIBUTE_KEYS = [
|
|
710
|
+
'fill',
|
|
711
|
+
'strokeColor',
|
|
712
|
+
'strokeWidth',
|
|
713
|
+
'shape',
|
|
714
|
+
'layout',
|
|
715
|
+
'branchColor',
|
|
716
|
+
'branchWidth',
|
|
717
|
+
'branchShape'
|
|
718
|
+
];
|
|
719
|
+
|
|
720
|
+
const getChildrenCount = (element) => {
|
|
721
|
+
const count = element.children.reduce((p, c) => {
|
|
722
|
+
return p + getChildrenCount(c);
|
|
723
|
+
}, 0);
|
|
724
|
+
return count + element.children.length;
|
|
725
|
+
};
|
|
726
|
+
const isChildElement = (origin, child) => {
|
|
727
|
+
let parent = MindElement.findParent(child);
|
|
728
|
+
while (parent) {
|
|
729
|
+
if (parent === origin) {
|
|
730
|
+
return true;
|
|
731
|
+
}
|
|
732
|
+
parent = MindElement.findParent(parent);
|
|
733
|
+
}
|
|
734
|
+
return false;
|
|
735
|
+
};
|
|
736
|
+
const getFirstLevelElement = (elements) => {
|
|
737
|
+
let result = [];
|
|
738
|
+
elements.forEach(element => {
|
|
739
|
+
const isChild = elements.some(node => {
|
|
740
|
+
return isChildElement(node, element);
|
|
741
|
+
});
|
|
742
|
+
if (!isChild) {
|
|
743
|
+
result.push(element);
|
|
744
|
+
}
|
|
745
|
+
});
|
|
746
|
+
return result;
|
|
747
|
+
};
|
|
748
|
+
const isChildRight = (node, child) => {
|
|
749
|
+
return node.x < child.x;
|
|
750
|
+
};
|
|
751
|
+
const isChildUp = (node, child) => {
|
|
752
|
+
return node.y > child.y;
|
|
753
|
+
};
|
|
754
|
+
const copyNewNode = (node) => {
|
|
755
|
+
const newNode = { ...node };
|
|
756
|
+
newNode.id = idCreator();
|
|
757
|
+
newNode.children = [];
|
|
758
|
+
for (const childNode of node.children) {
|
|
759
|
+
newNode.children.push(copyNewNode(childNode));
|
|
760
|
+
}
|
|
761
|
+
return newNode;
|
|
762
|
+
};
|
|
763
|
+
const extractNodesText = (node) => {
|
|
764
|
+
let str = '';
|
|
765
|
+
if (node) {
|
|
766
|
+
str += Node$1.string(node.data.topic) + ' ';
|
|
767
|
+
for (const childNode of node.children) {
|
|
768
|
+
str += extractNodesText(childNode);
|
|
769
|
+
}
|
|
770
|
+
}
|
|
771
|
+
return str;
|
|
772
|
+
};
|
|
773
|
+
const insertMindElement = (board, inheritNode, path) => {
|
|
774
|
+
const newNode = {};
|
|
775
|
+
if (!inheritNode.isRoot) {
|
|
776
|
+
INHERIT_ATTRIBUTE_KEYS.forEach(attr => {
|
|
777
|
+
newNode[attr] = inheritNode[attr];
|
|
778
|
+
});
|
|
779
|
+
delete newNode.layout;
|
|
780
|
+
}
|
|
781
|
+
const newElement = createMindElement('', TOPIC_FONT_SIZE, TEXT_DEFAULT_HEIGHT, newNode);
|
|
782
|
+
Transforms.insertNode(board, newElement, path);
|
|
783
|
+
clearSelectedElement(board);
|
|
784
|
+
addSelectedElement(board, newElement);
|
|
785
|
+
setTimeout(() => {
|
|
786
|
+
editTopic(newElement);
|
|
787
|
+
});
|
|
788
|
+
};
|
|
789
|
+
const findLastChild = (child) => {
|
|
790
|
+
let result = child;
|
|
791
|
+
while (result.children.length !== 0) {
|
|
792
|
+
result = result.children[result.children.length - 1];
|
|
793
|
+
}
|
|
794
|
+
return result;
|
|
795
|
+
};
|
|
796
|
+
const divideElementByParent = (elements) => {
|
|
797
|
+
const abstractIncludedGroups = [];
|
|
798
|
+
const parentElements = [];
|
|
799
|
+
for (let i = 0; i < elements.length; i++) {
|
|
800
|
+
const parent = MindElement.getParent(elements[i]);
|
|
801
|
+
const parentIndex = parentElements.indexOf(parent);
|
|
802
|
+
if (parentIndex === -1) {
|
|
803
|
+
parentElements.push(parent);
|
|
804
|
+
abstractIncludedGroups.push([elements[i]]);
|
|
805
|
+
}
|
|
806
|
+
else {
|
|
807
|
+
abstractIncludedGroups[parentIndex].push(elements[i]);
|
|
808
|
+
}
|
|
809
|
+
}
|
|
810
|
+
return { parentElements, abstractIncludedGroups };
|
|
811
|
+
};
|
|
812
|
+
const getDefaultMindElementFontSize = (board, element) => {
|
|
813
|
+
if (PlaitMind.isMind(element)) {
|
|
814
|
+
return ROOT_TOPIC_FONT_SIZE;
|
|
815
|
+
}
|
|
816
|
+
if (MindElement.isMindElement(board, element)) {
|
|
817
|
+
return TOPIC_FONT_SIZE;
|
|
818
|
+
}
|
|
819
|
+
throw new Error('can not find default font-size');
|
|
820
|
+
};
|
|
821
|
+
|
|
822
|
+
const NodeDefaultSpace = {
|
|
823
|
+
horizontal: {
|
|
824
|
+
nodeAndText: BASE * 2.5,
|
|
825
|
+
emojiAndText: BASE * 1.5
|
|
826
|
+
},
|
|
827
|
+
vertical: {
|
|
828
|
+
nodeAndText: BASE,
|
|
829
|
+
nodeAndImage: BASE,
|
|
830
|
+
imageAndText: BASE * 1.5
|
|
831
|
+
}
|
|
832
|
+
};
|
|
833
|
+
const RootDefaultSpace = {
|
|
834
|
+
horizontal: {
|
|
835
|
+
nodeAndText: BASE * 4,
|
|
836
|
+
emojiAndText: BASE * 2
|
|
837
|
+
},
|
|
838
|
+
vertical: {
|
|
839
|
+
nodeAndText: BASE * 2
|
|
840
|
+
}
|
|
841
|
+
};
|
|
842
|
+
const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
|
|
843
|
+
const isMind = PlaitMind.isMind(element);
|
|
844
|
+
const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
|
|
845
|
+
const strokeWidth = getStrokeWidthByElement(board, element);
|
|
846
|
+
return nodeAndText + strokeWidth;
|
|
847
|
+
};
|
|
848
|
+
const getVerticalSpaceBetweenNodeAndText = (board, element) => {
|
|
849
|
+
const isMind = PlaitMind.isMind(element);
|
|
850
|
+
const strokeWidth = getStrokeWidthByElement(board, element);
|
|
851
|
+
const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
|
|
852
|
+
return nodeAndText + strokeWidth;
|
|
853
|
+
};
|
|
854
|
+
const getSpaceEmojiAndText = (element) => {
|
|
855
|
+
const isMind = PlaitMind.isMind(element);
|
|
856
|
+
const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
|
|
857
|
+
return emojiAndText;
|
|
858
|
+
};
|
|
859
|
+
const NodeSpace = {
|
|
860
|
+
getNodeWidth(board, element) {
|
|
861
|
+
const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
|
|
862
|
+
if (MindElement.hasEmojis(element)) {
|
|
863
|
+
return (NodeSpace.getEmojiLeftSpace(board, element) +
|
|
864
|
+
getEmojisWidthHeight(board, element).width +
|
|
865
|
+
getSpaceEmojiAndText(element) +
|
|
866
|
+
NodeSpace.getNodeDynamicWidth(board, element) +
|
|
867
|
+
nodeAndText);
|
|
868
|
+
}
|
|
869
|
+
return nodeAndText + NodeSpace.getNodeDynamicWidth(board, element) + nodeAndText;
|
|
870
|
+
},
|
|
871
|
+
getNodeHeight(board, element) {
|
|
872
|
+
const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
|
|
873
|
+
if (MindElement.hasImage(element)) {
|
|
874
|
+
return NodeSpace.getTextTopSpace(board, element) + element.height + nodeAndText;
|
|
875
|
+
}
|
|
876
|
+
return nodeAndText + element.height + nodeAndText;
|
|
877
|
+
},
|
|
878
|
+
getNodeDynamicWidth(board, element) {
|
|
879
|
+
const width = element.manualWidth || element.width;
|
|
880
|
+
const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
|
|
881
|
+
return Math.max(width, imageWidth);
|
|
882
|
+
},
|
|
883
|
+
/**
|
|
884
|
+
* use it when upload image first or resize image
|
|
885
|
+
*/
|
|
886
|
+
getNodeNewDynamicWidth(board, element, imageWidth) {
|
|
887
|
+
const width = element.manualWidth || element.width;
|
|
888
|
+
return Math.max(width, imageWidth);
|
|
889
|
+
},
|
|
890
|
+
getNodeResizableMinWidth(board, element) {
|
|
891
|
+
const minTopicWidth = NodeSpace.getNodeTopicMinWidth(board, element);
|
|
892
|
+
if (MindElement.hasImage(element) && element.data.image.width > minTopicWidth) {
|
|
893
|
+
return element.data.image.width;
|
|
894
|
+
}
|
|
895
|
+
else {
|
|
896
|
+
return minTopicWidth;
|
|
897
|
+
}
|
|
898
|
+
},
|
|
899
|
+
getNodeTopicMinWidth(board, element) {
|
|
900
|
+
const defaultFontSize = getDefaultMindElementFontSize(board, element);
|
|
901
|
+
const editor = getFirstTextEditor(element);
|
|
902
|
+
const marks = PlaitMarkEditor.getMarks(editor);
|
|
903
|
+
const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
|
|
904
|
+
return fontSize;
|
|
905
|
+
},
|
|
906
|
+
getTextLeftSpace(board, element) {
|
|
907
|
+
const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
|
|
908
|
+
if (MindElement.hasEmojis(element)) {
|
|
909
|
+
return NodeSpace.getEmojiLeftSpace(board, element) + getEmojisWidthHeight(board, element).width + getSpaceEmojiAndText(element);
|
|
910
|
+
}
|
|
911
|
+
else {
|
|
912
|
+
return nodeAndText;
|
|
913
|
+
}
|
|
914
|
+
},
|
|
915
|
+
getTextTopSpace(board, element) {
|
|
916
|
+
const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
|
|
917
|
+
if (MindElement.hasImage(element)) {
|
|
918
|
+
return NodeSpace.getImageTopSpace(board, element) + element.data.image.height + NodeDefaultSpace.vertical.imageAndText;
|
|
919
|
+
}
|
|
920
|
+
else {
|
|
921
|
+
return nodeAndText;
|
|
922
|
+
}
|
|
923
|
+
},
|
|
924
|
+
getImageTopSpace(board, element) {
|
|
925
|
+
const strokeWidth = getStrokeWidthByElement(board, element);
|
|
926
|
+
return strokeWidth + NodeDefaultSpace.vertical.nodeAndImage;
|
|
927
|
+
},
|
|
928
|
+
getEmojiLeftSpace(board, element) {
|
|
929
|
+
const options = board.getPluginOptions(WithMindPluginKey);
|
|
930
|
+
const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
|
|
931
|
+
return nodeAndText - options.emojiPadding;
|
|
932
|
+
},
|
|
933
|
+
getEmojiTopSpace(board, element) {
|
|
934
|
+
const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
|
|
935
|
+
return nodeAndText;
|
|
936
|
+
}
|
|
937
|
+
};
|
|
938
|
+
const getFontSizeBySlateElement = (text) => {
|
|
939
|
+
const defaultFontSize = DEFAULT_FONT_SIZE;
|
|
940
|
+
if (typeof text === 'string') {
|
|
941
|
+
return defaultFontSize;
|
|
942
|
+
}
|
|
943
|
+
const marks = PlaitMarkEditor.getMarksByElement(text);
|
|
944
|
+
const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
|
|
945
|
+
return fontSize;
|
|
946
|
+
};
|
|
947
|
+
|
|
948
|
+
function getRectangleByNode(node) {
|
|
949
|
+
const x = node.x + node.hGap;
|
|
950
|
+
let y = node.y + node.vGap;
|
|
951
|
+
const width = node.width - node.hGap * 2;
|
|
952
|
+
const height = node.height - node.vGap * 2;
|
|
953
|
+
return {
|
|
954
|
+
x,
|
|
955
|
+
y,
|
|
956
|
+
width,
|
|
957
|
+
height
|
|
958
|
+
};
|
|
959
|
+
}
|
|
960
|
+
function getRectangleByElement(board, element) {
|
|
961
|
+
const width = NodeSpace.getNodeWidth(board, element);
|
|
962
|
+
const height = NodeSpace.getNodeHeight(board, element);
|
|
963
|
+
const nodeRectangle = {
|
|
964
|
+
x: element.points[0][0],
|
|
965
|
+
y: element.points[0][1],
|
|
932
966
|
width,
|
|
933
967
|
height
|
|
934
968
|
};
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
969
|
+
return nodeRectangle;
|
|
970
|
+
}
|
|
971
|
+
function isHitMindElement(board, point, element) {
|
|
972
|
+
const node = MindElement.getNode(element);
|
|
973
|
+
if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
|
|
974
|
+
return true;
|
|
940
975
|
}
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
const INHERIT_ATTRIBUTE_KEYS = [
|
|
944
|
-
'fill',
|
|
945
|
-
'strokeColor',
|
|
946
|
-
'strokeWidth',
|
|
947
|
-
'shape',
|
|
948
|
-
'layout',
|
|
949
|
-
'branchColor',
|
|
950
|
-
'branchWidth',
|
|
951
|
-
'branchShape'
|
|
952
|
-
];
|
|
953
|
-
|
|
954
|
-
const getChildrenCount = (element) => {
|
|
955
|
-
const count = element.children.reduce((p, c) => {
|
|
956
|
-
return p + getChildrenCount(c);
|
|
957
|
-
}, 0);
|
|
958
|
-
return count + element.children.length;
|
|
959
|
-
};
|
|
960
|
-
const isChildElement = (origin, child) => {
|
|
961
|
-
let parent = MindElement.findParent(child);
|
|
962
|
-
while (parent) {
|
|
963
|
-
if (parent === origin) {
|
|
964
|
-
return true;
|
|
965
|
-
}
|
|
966
|
-
parent = MindElement.findParent(parent);
|
|
976
|
+
else {
|
|
977
|
+
return false;
|
|
967
978
|
}
|
|
968
|
-
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
function getEmojiRectangle(board, element) {
|
|
982
|
+
let { x, y } = getRectangleByNode(MindElement.getNode(element));
|
|
983
|
+
x = x + NodeSpace.getEmojiLeftSpace(board, element);
|
|
984
|
+
const { width, height } = getEmojisWidthHeight(board, element);
|
|
985
|
+
return {
|
|
986
|
+
x,
|
|
987
|
+
y,
|
|
988
|
+
width,
|
|
989
|
+
height
|
|
990
|
+
};
|
|
991
|
+
}
|
|
992
|
+
function getEmojiForeignRectangle(board, element) {
|
|
993
|
+
let { x, y } = getRectangleByNode(MindElement.getNode(element));
|
|
994
|
+
x = x + NodeSpace.getEmojiLeftSpace(board, element);
|
|
995
|
+
const { width } = getEmojisWidthHeight(board, element);
|
|
996
|
+
return {
|
|
997
|
+
x,
|
|
998
|
+
y,
|
|
999
|
+
width,
|
|
1000
|
+
height: NodeSpace.getNodeHeight(board, element)
|
|
1001
|
+
};
|
|
1002
|
+
}
|
|
1003
|
+
const isHitEmojis = (board, element, point) => {
|
|
1004
|
+
return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
|
|
969
1005
|
};
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
});
|
|
976
|
-
if (!isChild) {
|
|
977
|
-
result.push(element);
|
|
978
|
-
}
|
|
979
|
-
});
|
|
1006
|
+
|
|
1007
|
+
function getTopicRectangleByNode(board, node) {
|
|
1008
|
+
let nodeRectangle = getRectangleByNode(node);
|
|
1009
|
+
const result = getTopicRectangleByElement(board, nodeRectangle, node.origin);
|
|
1010
|
+
result.width = result.width;
|
|
980
1011
|
return result;
|
|
1012
|
+
}
|
|
1013
|
+
function getTopicRectangleByElement(board, nodeRectangle, element) {
|
|
1014
|
+
const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
|
|
1015
|
+
const y = nodeRectangle.y + NodeSpace.getTextTopSpace(board, element);
|
|
1016
|
+
const width = NodeSpace.getNodeDynamicWidth(board, element);
|
|
1017
|
+
const height = Math.ceil(element.height);
|
|
1018
|
+
return { height, width, x, y };
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
function getImageForeignRectangle(board, element) {
|
|
1022
|
+
let { x, y } = getRectangleByNode(MindElement.getNode(element));
|
|
1023
|
+
const elementWidth = element.manualWidth || element.width;
|
|
1024
|
+
x =
|
|
1025
|
+
elementWidth > element.data.image.width
|
|
1026
|
+
? x + NodeSpace.getTextLeftSpace(board, element) + (elementWidth - element.data.image.width) / 2
|
|
1027
|
+
: x + NodeSpace.getTextLeftSpace(board, element);
|
|
1028
|
+
y = NodeSpace.getImageTopSpace(board, element) + y;
|
|
1029
|
+
const { width, height } = element.data.image;
|
|
1030
|
+
const rectangle = {
|
|
1031
|
+
x,
|
|
1032
|
+
y,
|
|
1033
|
+
width,
|
|
1034
|
+
height
|
|
1035
|
+
};
|
|
1036
|
+
return rectangle;
|
|
1037
|
+
}
|
|
1038
|
+
const isHitImage = (board, element, point) => {
|
|
1039
|
+
const imageRectangle = getImageForeignRectangle(board, element);
|
|
1040
|
+
const imageOutlineRectangle = RectangleClient.getOutlineRectangle(imageRectangle, -RESIZE_HANDLE_DIAMETER / 2);
|
|
1041
|
+
return RectangleClient.isPointInRectangle(imageOutlineRectangle, point);
|
|
981
1042
|
};
|
|
982
|
-
const
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
const
|
|
986
|
-
|
|
987
|
-
};
|
|
988
|
-
const copyNewNode = (node) => {
|
|
989
|
-
const newNode = { ...node };
|
|
990
|
-
newNode.id = idCreator();
|
|
991
|
-
newNode.children = [];
|
|
992
|
-
for (const childNode of node.children) {
|
|
993
|
-
newNode.children.push(copyNewNode(childNode));
|
|
994
|
-
}
|
|
995
|
-
return newNode;
|
|
996
|
-
};
|
|
997
|
-
const extractNodesText = (node) => {
|
|
998
|
-
let str = '';
|
|
999
|
-
if (node) {
|
|
1000
|
-
str += Node$1.string(node.data.topic) + ' ';
|
|
1001
|
-
for (const childNode of node.children) {
|
|
1002
|
-
str += extractNodesText(childNode);
|
|
1003
|
-
}
|
|
1004
|
-
}
|
|
1005
|
-
return str;
|
|
1006
|
-
};
|
|
1007
|
-
const insertMindElement = (board, inheritNode, path) => {
|
|
1008
|
-
const newNode = {};
|
|
1009
|
-
if (!inheritNode.isRoot) {
|
|
1010
|
-
INHERIT_ATTRIBUTE_KEYS.forEach(attr => {
|
|
1011
|
-
newNode[attr] = inheritNode[attr];
|
|
1012
|
-
});
|
|
1013
|
-
delete newNode.layout;
|
|
1014
|
-
}
|
|
1015
|
-
const newElement = createMindElement('', getNodeDefaultFontSize(), TEXT_DEFAULT_HEIGHT, newNode);
|
|
1016
|
-
Transforms.insertNode(board, newElement, path);
|
|
1017
|
-
clearSelectedElement(board);
|
|
1018
|
-
addSelectedElement(board, newElement);
|
|
1019
|
-
setTimeout(() => {
|
|
1020
|
-
editTopic(newElement);
|
|
1043
|
+
const getHitImageResizeHandleDirection = (board, element, point) => {
|
|
1044
|
+
const imageRectangle = getImageForeignRectangle(board, element);
|
|
1045
|
+
const resizeHandleRefs = getRectangleResizeHandleRefs(imageRectangle, RESIZE_HANDLE_DIAMETER);
|
|
1046
|
+
const result = resizeHandleRefs.find(resizeHandleRef => {
|
|
1047
|
+
return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeHandleRef.rectangle);
|
|
1021
1048
|
});
|
|
1022
|
-
};
|
|
1023
|
-
const findLastChild = (child) => {
|
|
1024
|
-
let result = child;
|
|
1025
|
-
while (result.children.length !== 0) {
|
|
1026
|
-
result = result.children[result.children.length - 1];
|
|
1027
|
-
}
|
|
1028
1049
|
return result;
|
|
1029
1050
|
};
|
|
1030
|
-
const divideElementByParent = (elements) => {
|
|
1031
|
-
const abstractIncludedGroups = [];
|
|
1032
|
-
const parentElements = [];
|
|
1033
|
-
for (let i = 0; i < elements.length; i++) {
|
|
1034
|
-
const parent = MindElement.getParent(elements[i]);
|
|
1035
|
-
const parentIndex = parentElements.indexOf(parent);
|
|
1036
|
-
if (parentIndex === -1) {
|
|
1037
|
-
parentElements.push(parent);
|
|
1038
|
-
abstractIncludedGroups.push([elements[i]]);
|
|
1039
|
-
}
|
|
1040
|
-
else {
|
|
1041
|
-
abstractIncludedGroups[parentIndex].push(elements[i]);
|
|
1042
|
-
}
|
|
1043
|
-
}
|
|
1044
|
-
return { parentElements, abstractIncludedGroups };
|
|
1045
|
-
};
|
|
1046
1051
|
|
|
1047
1052
|
const adjustRootToNode = (board, node) => {
|
|
1048
1053
|
const newNode = { ...node };
|
|
@@ -1075,7 +1080,7 @@ const adjustNodeToRoot = (board, node) => {
|
|
|
1075
1080
|
fontFamily: BRANCH_FONT_FAMILY,
|
|
1076
1081
|
width: node.manualWidth ? node.manualWidth : undefined
|
|
1077
1082
|
});
|
|
1078
|
-
newElement.width = Math.max(width,
|
|
1083
|
+
newElement.width = Math.max(width, ROOT_TOPIC_FONT_SIZE);
|
|
1079
1084
|
newElement.height = height;
|
|
1080
1085
|
return {
|
|
1081
1086
|
...newElement,
|
|
@@ -2376,33 +2381,8 @@ const insertAbstractNode = (board, path, start, end) => {
|
|
|
2376
2381
|
addSelectedElement(board, mindElement);
|
|
2377
2382
|
};
|
|
2378
2383
|
|
|
2379
|
-
const setLayout = (board, layout, path) => {
|
|
2380
|
-
correctLogicLayoutNode(board, layout, path);
|
|
2381
|
-
const element = PlaitNode.get(board, path);
|
|
2382
|
-
if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
|
|
2383
|
-
MindTransforms.setAbstractByStandardLayout(board, element);
|
|
2384
|
-
}
|
|
2385
|
-
Transforms.setNode(board, { layout }, path);
|
|
2386
|
-
};
|
|
2387
|
-
const correctLogicLayoutNode = (board, layout, path) => {
|
|
2388
|
-
const node = PlaitNode.get(board, path);
|
|
2389
|
-
if (node && layout) {
|
|
2390
|
-
node.children?.forEach((value, index) => {
|
|
2391
|
-
if (value.layout) {
|
|
2392
|
-
if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
|
|
2393
|
-
(isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
|
|
2394
|
-
Transforms.setNode(board, { layout: null }, [...path, index]);
|
|
2395
|
-
}
|
|
2396
|
-
if (value.children?.length) {
|
|
2397
|
-
correctLogicLayoutNode(board, layout, [...path, index]);
|
|
2398
|
-
}
|
|
2399
|
-
}
|
|
2400
|
-
});
|
|
2401
|
-
}
|
|
2402
|
-
};
|
|
2403
|
-
|
|
2404
2384
|
const normalizeWidthAndHeight = (board, element, width, height) => {
|
|
2405
|
-
const minWidth = NodeSpace.getNodeTopicMinWidth(board, element
|
|
2385
|
+
const minWidth = NodeSpace.getNodeTopicMinWidth(board, element);
|
|
2406
2386
|
const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
|
|
2407
2387
|
const newHeight = height / board.viewport.zoom;
|
|
2408
2388
|
return { width: Math.ceil(newWidth), height: newHeight };
|
|
@@ -2554,8 +2534,57 @@ const setImage = (board, element, imageItem) => {
|
|
|
2554
2534
|
Transforms.setNode(board, newElement, path);
|
|
2555
2535
|
};
|
|
2556
2536
|
|
|
2537
|
+
const correctLogicLayoutNode = (board, layout, path) => {
|
|
2538
|
+
const node = PlaitNode.get(board, path);
|
|
2539
|
+
if (node && layout) {
|
|
2540
|
+
node.children?.forEach((value, index) => {
|
|
2541
|
+
if (value.layout) {
|
|
2542
|
+
if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
|
|
2543
|
+
(isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
|
|
2544
|
+
Transforms.setNode(board, { layout: null }, [...path, index]);
|
|
2545
|
+
}
|
|
2546
|
+
if (value.children?.length) {
|
|
2547
|
+
correctLogicLayoutNode(board, layout, [...path, index]);
|
|
2548
|
+
}
|
|
2549
|
+
}
|
|
2550
|
+
});
|
|
2551
|
+
}
|
|
2552
|
+
};
|
|
2553
|
+
|
|
2554
|
+
const setLayout = (board, type) => {
|
|
2555
|
+
const callback = (element, path) => {
|
|
2556
|
+
if (MindElement.isMindElement(board, element)) {
|
|
2557
|
+
correctLogicLayoutNode(board, type, path);
|
|
2558
|
+
const element = PlaitNode.get(board, path);
|
|
2559
|
+
if (PlaitMind.isMind(element) && isStandardLayout(type)) {
|
|
2560
|
+
let properties = { rightNodeCount: element.children.length / 2 };
|
|
2561
|
+
Transforms.setNode(board, properties, path);
|
|
2562
|
+
setAbstractByStandardLayout(board, element);
|
|
2563
|
+
}
|
|
2564
|
+
Transforms.setNode(board, { layout: type }, path);
|
|
2565
|
+
}
|
|
2566
|
+
};
|
|
2567
|
+
PropertyTransforms.setProperty(board, {}, { callback });
|
|
2568
|
+
};
|
|
2569
|
+
const setShape = (board, shape) => {
|
|
2570
|
+
PropertyTransforms.setProperty(board, { shape });
|
|
2571
|
+
};
|
|
2572
|
+
const setBranchShape = (board, branchShape) => {
|
|
2573
|
+
PropertyTransforms.setProperty(board, { branchShape });
|
|
2574
|
+
};
|
|
2575
|
+
const setBranchWidth = (board, branchWidth) => {
|
|
2576
|
+
PropertyTransforms.setProperty(board, { branchWidth });
|
|
2577
|
+
};
|
|
2578
|
+
const setBranchColor = (board, branchColor) => {
|
|
2579
|
+
PropertyTransforms.setProperty(board, { branchColor });
|
|
2580
|
+
};
|
|
2581
|
+
|
|
2557
2582
|
const MindTransforms = {
|
|
2558
2583
|
setLayout,
|
|
2584
|
+
setShape,
|
|
2585
|
+
setBranchShape,
|
|
2586
|
+
setBranchWidth,
|
|
2587
|
+
setBranchColor,
|
|
2559
2588
|
setTopic,
|
|
2560
2589
|
setTopicSize,
|
|
2561
2590
|
setNodeManualWidth,
|
|
@@ -3189,7 +3218,7 @@ const withNodeDnd = (board) => {
|
|
|
3189
3218
|
pointerDown(event);
|
|
3190
3219
|
return;
|
|
3191
3220
|
}
|
|
3192
|
-
const point =
|
|
3221
|
+
const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
|
|
3193
3222
|
const selectedElements = getSelectedElements(board);
|
|
3194
3223
|
const hitElement = getHitElementByPoint(board, point);
|
|
3195
3224
|
if (hitElement &&
|
|
@@ -3217,14 +3246,14 @@ const withNodeDnd = (board) => {
|
|
|
3217
3246
|
if (!board.options.readonly && activeElements.length && startPoint) {
|
|
3218
3247
|
// prevent text from being selected
|
|
3219
3248
|
event.preventDefault();
|
|
3220
|
-
const endPoint =
|
|
3249
|
+
const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
|
|
3221
3250
|
const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
|
|
3222
3251
|
if (distance < DRAG_MOVE_BUFFER) {
|
|
3223
3252
|
return;
|
|
3224
3253
|
}
|
|
3225
3254
|
setIsDragging(board, true);
|
|
3226
3255
|
fakeDropNodeG?.remove();
|
|
3227
|
-
const detectPoint =
|
|
3256
|
+
const detectPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
|
|
3228
3257
|
dropTarget = detectDropTarget(board, detectPoint, dropTarget, [...activeElements, ...correspondingElements]);
|
|
3229
3258
|
if (dropTarget?.target) {
|
|
3230
3259
|
targetPath = getPathByDropTarget(board, dropTarget);
|
|
@@ -3354,8 +3383,7 @@ const withAbstract = (board) => {
|
|
|
3354
3383
|
return;
|
|
3355
3384
|
}
|
|
3356
3385
|
const activeAbstractElements = getSelectedElements(board).filter(element => AbstractNode.isAbstract(element));
|
|
3357
|
-
const
|
|
3358
|
-
const point = transformPoint(board, toPoint(event.x, event.y, host));
|
|
3386
|
+
const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
|
|
3359
3387
|
activeAbstractElement = activeAbstractElements.find(element => {
|
|
3360
3388
|
abstractHandlePosition = getHitAbstractHandle(board, element, point);
|
|
3361
3389
|
return abstractHandlePosition;
|
|
@@ -3372,7 +3400,7 @@ const withAbstract = (board) => {
|
|
|
3372
3400
|
board.pointerMove = (event) => {
|
|
3373
3401
|
getSelectedElements(board);
|
|
3374
3402
|
const host = BOARD_TO_HOST.get(board);
|
|
3375
|
-
const endPoint =
|
|
3403
|
+
const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
|
|
3376
3404
|
touchedAbstract = handleTouchedAbstract(board, touchedAbstract, endPoint);
|
|
3377
3405
|
if (abstractHandlePosition && activeAbstractElement) {
|
|
3378
3406
|
// prevent text from being selected
|
|
@@ -3454,25 +3482,25 @@ const withMindExtend = (board) => {
|
|
|
3454
3482
|
const DefaultHotkey = 'm';
|
|
3455
3483
|
const withCreateMind = (board) => {
|
|
3456
3484
|
const newBoard = board;
|
|
3457
|
-
const { keydown,
|
|
3485
|
+
const { keydown, pointerDown, pointerMove, pointerUp } = board;
|
|
3458
3486
|
let fakeCreateNodeRef = null;
|
|
3459
3487
|
let emptyMind = null;
|
|
3460
|
-
newBoard.
|
|
3488
|
+
newBoard.pointerDown = (event) => {
|
|
3461
3489
|
const isMindPointer = PlaitBoard.isPointer(board, MindPointerType.mind);
|
|
3462
3490
|
let movingPoint = PlaitBoard.getMovingPointInBoard(board);
|
|
3463
3491
|
if (!PlaitBoard.isReadonly(board) && movingPoint && isDrawingMode(board) && isMindPointer) {
|
|
3464
|
-
movingPoint =
|
|
3492
|
+
movingPoint = toViewBoxPoint(board, toHostPoint(board, movingPoint[0], movingPoint[1]));
|
|
3465
3493
|
const emptyMind = createEmptyMind(newBoard, movingPoint);
|
|
3466
3494
|
Transforms.insertNode(board, emptyMind, [board.children.length]);
|
|
3467
3495
|
clearSelectedElement(board);
|
|
3468
3496
|
addSelectedElement(board, emptyMind);
|
|
3469
3497
|
BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
|
|
3470
3498
|
}
|
|
3471
|
-
|
|
3499
|
+
pointerDown(event);
|
|
3472
3500
|
};
|
|
3473
|
-
newBoard.
|
|
3501
|
+
newBoard.pointerMove = (event) => {
|
|
3474
3502
|
if (PlaitBoard.isReadonly(board)) {
|
|
3475
|
-
|
|
3503
|
+
pointerMove(event);
|
|
3476
3504
|
return;
|
|
3477
3505
|
}
|
|
3478
3506
|
const isMindPointer = PlaitBoard.isPointer(board, MindPointerType.mind);
|
|
@@ -3480,7 +3508,7 @@ const withCreateMind = (board) => {
|
|
|
3480
3508
|
throttleRAF(() => {
|
|
3481
3509
|
let movingPoint = PlaitBoard.getMovingPointInBoard(board);
|
|
3482
3510
|
if (movingPoint) {
|
|
3483
|
-
movingPoint =
|
|
3511
|
+
movingPoint = toViewBoxPoint(newBoard, toHostPoint(board, movingPoint[0], movingPoint[1]));
|
|
3484
3512
|
emptyMind = createEmptyMind(newBoard, movingPoint);
|
|
3485
3513
|
const nodeRectangle = getRectangleByElement(newBoard, emptyMind);
|
|
3486
3514
|
const nodeG = drawRoundRectangleByElement(board, nodeRectangle, emptyMind);
|
|
@@ -3519,9 +3547,9 @@ const withCreateMind = (board) => {
|
|
|
3519
3547
|
else {
|
|
3520
3548
|
destroy();
|
|
3521
3549
|
}
|
|
3522
|
-
|
|
3550
|
+
pointerMove(event);
|
|
3523
3551
|
};
|
|
3524
|
-
newBoard.
|
|
3552
|
+
newBoard.pointerUp = (event) => {
|
|
3525
3553
|
if (emptyMind) {
|
|
3526
3554
|
Transforms.insertNode(board, emptyMind, [board.children.length]);
|
|
3527
3555
|
clearSelectedElement(board);
|
|
@@ -3530,7 +3558,7 @@ const withCreateMind = (board) => {
|
|
|
3530
3558
|
emptyMind = null;
|
|
3531
3559
|
}
|
|
3532
3560
|
destroy();
|
|
3533
|
-
|
|
3561
|
+
pointerUp(event);
|
|
3534
3562
|
};
|
|
3535
3563
|
board.keydown = (event) => {
|
|
3536
3564
|
if (PlaitBoard.isReadonly(board) || getSelectedElements(board).length > 0) {
|
|
@@ -3599,7 +3627,7 @@ const withMindHotkey = (baseBoard) => {
|
|
|
3599
3627
|
|
|
3600
3628
|
const mouseMoveHandle = (board, event, nodeHoveredExtendRef) => {
|
|
3601
3629
|
let target = null;
|
|
3602
|
-
const point =
|
|
3630
|
+
const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
|
|
3603
3631
|
depthFirstRecursion(board, element => {
|
|
3604
3632
|
if (target) {
|
|
3605
3633
|
return;
|
|
@@ -3674,7 +3702,7 @@ const withNodeImage = (board) => {
|
|
|
3674
3702
|
pointerDown(event);
|
|
3675
3703
|
return;
|
|
3676
3704
|
}
|
|
3677
|
-
const point =
|
|
3705
|
+
const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
|
|
3678
3706
|
const hitElement = getHitElementByPoint(board, point);
|
|
3679
3707
|
const isHitImageResult = hitElement &&
|
|
3680
3708
|
MindElement.isMindElement(board, hitElement) &&
|
|
@@ -3929,7 +3957,7 @@ const insertClipboardData = (board, elements, targetPoint) => {
|
|
|
3929
3957
|
...styles,
|
|
3930
3958
|
width: newElement.manualWidth ? newElement.manualWidth : undefined
|
|
3931
3959
|
});
|
|
3932
|
-
newElement.width = Math.max(width,
|
|
3960
|
+
newElement.width = Math.max(width, ROOT_TOPIC_FONT_SIZE);
|
|
3933
3961
|
newElement.height = height;
|
|
3934
3962
|
}
|
|
3935
3963
|
// handle abstract start and end
|
|
@@ -4115,7 +4143,7 @@ const withMind = (baseBoard) => {
|
|
|
4115
4143
|
dblclick(event);
|
|
4116
4144
|
return;
|
|
4117
4145
|
}
|
|
4118
|
-
const point =
|
|
4146
|
+
const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
|
|
4119
4147
|
board.children
|
|
4120
4148
|
.filter(value => PlaitMind.isMind(value))
|
|
4121
4149
|
.forEach(mindMap => {
|
|
@@ -4184,5 +4212,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4184
4212
|
* Generated bundle index. Do not edit.
|
|
4185
4213
|
*/
|
|
4186
4214
|
|
|
4187
|
-
export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BranchShape, DEFAULT_FONT_FAMILY, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, NodeTopicThreshold, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, ROOT_TOPIC_WIDTH, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, findNewChildNodePath, findNewSiblingNodePath, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor,
|
|
4215
|
+
export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BranchShape, DEFAULT_FONT_FAMILY, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, NodeTopicThreshold, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, ROOT_TOPIC_WIDTH, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, findNewChildNodePath, findNewSiblingNodePath, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getDefaultMindElementFontSize, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedMindElements, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, removeActiveOnDragOrigin, removeImageFocus, separateChildren, setIsDragging, withMind, withMindExtend };
|
|
4188
4216
|
//# sourceMappingURL=plait-mind.mjs.map
|