@plait/mind 0.5.0 → 0.7.0

package/esm2020/utils/node-style/shape.mjs

@@ -1,21 +1,15 @@
-import { MindElement, MindElementShape, PlaitMind } from '../../interfaces/element';
-import { DefaultRootStyle } from '../../constants/node-style';
+import { MindElementShape, PlaitMind } from '../../interfaces/element';
 import { getAvailableProperty } from './common';
-import { getDefaultBranchColor } from './branch';
+import { getDefaultBranchColor, getMindThemeColor } from './branch';
 export const getStrokeByMindElement = (board, element) => {
     if (PlaitMind.isMind(element)) {
-        return element.strokeColor || DefaultRootStyle.strokeColor;
+        const defaultRootStroke = getMindThemeColor(board).rootFill;
+        return element.strokeColor || defaultRootStroke;
     }
-    const ancestors = MindElement.getAncestors(board, element);
-    ancestors.unshift(element);
-    const ancestor = ancestors.find(value => value.strokeColor);
-    if (ancestor && ancestor.strokeColor && !PlaitMind.isMind(ancestor)) {
-        return ancestor.strokeColor;
-    }
-    return getDefaultBranchColor(board, element);
+    return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
 };
 export const getShapeByElement = (board, element) => {
     const shape = getAvailableProperty(board, element, 'shape');
     return shape || MindElementShape.roundRectangle;
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9taW5kL3NyYy91dGlscy9ub2RlLXN0eWxlL3NoYXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxXQUFXLEVBQUUsZ0JBQWdCLEVBQUUsU0FBUyxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDcEYsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDOUQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2hELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUVqRCxNQUFNLENBQUMsTUFBTSxzQkFBc0IsR0FBRyxDQUFDLEtBQWlCLEVBQUUsT0FBb0IsRUFBRSxFQUFFO0lBQzlFLElBQUksU0FBUyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsRUFBRTtRQUMzQixPQUFPLE9BQU8sQ0FBQyxXQUFXLElBQUksZ0JBQWdCLENBQUMsV0FBVyxDQUFDO0tBQzlEO0lBRUQsTUFBTSxTQUFTLEdBQUcsV0FBVyxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFrQixDQUFDO0lBQzVFLFNBQVMsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDM0IsTUFBTSxRQUFRLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUM1RCxJQUFJLFFBQVEsSUFBSSxRQUFRLENBQUMsV0FBVyxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsRUFBRTtRQUNqRSxPQUFPLFFBQVEsQ0FBQyxXQUFXLENBQUM7S0FDL0I7SUFDRCxPQUFPLHFCQUFxQixDQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsQ0FBQztBQUNqRCxDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLEtBQWlCLEVBQUUsT0FBb0IsRUFBb0IsRUFBRTtJQUMzRixNQUFNLEtBQUssR0FBRyxvQkFBb0IsQ0FBQyxLQUFLLEVBQUUsT0FBTyxFQUFFLE9BQU8sQ0FBQyxDQUFDO0lBQzVELE9BQU8sS0FBSyxJQUFJLGdCQUFnQixDQUFDLGNBQWMsQ0FBQztBQUNwRCxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQbGFpdEJvYXJkIH0gZnJvbSAnQHBsYWl0L2NvcmUnO1xuaW1wb3J0IHsgTWluZEVsZW1lbnQsIE1pbmRFbGVtZW50U2hhcGUsIFBsYWl0TWluZCB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvZWxlbWVudCc7XG5pbXBvcnQgeyBEZWZhdWx0Um9vdFN0eWxlIH0gZnJvbSAnLi4vLi4vY29uc3RhbnRzL25vZGUtc3R5bGUnO1xuaW1wb3J0IHsgZ2V0QXZhaWxhYmxlUHJvcGVydHkgfSBmcm9tICcuL2NvbW1vbic7XG5pbXBvcnQgeyBnZXREZWZhdWx0QnJhbmNoQ29sb3IgfSBmcm9tICcuL2JyYW5jaCc7XG5cbmV4cG9ydCBjb25zdCBnZXRTdHJva2VCeU1pbmRFbGVtZW50ID0gKGJvYXJkOiBQbGFpdEJvYXJkLCBlbGVtZW50OiBNaW5kRWxlbWVudCkgPT4ge1xuICAgIGlmIChQbGFpdE1pbmQuaXNNaW5kKGVsZW1lbnQpKSB7XG4gICAgICAgIHJldHVybiBlbGVtZW50LnN0cm9rZUNvbG9yIHx8IERlZmF1bHRSb290U3R5bGUuc3Ryb2tlQ29sb3I7XG4gICAgfVxuXG4gICAgY29uc3QgYW5jZXN0b3JzID0gTWluZEVsZW1lbnQuZ2V0QW5jZXN0b3JzKGJvYXJkLCBlbGVtZW50KSBhcyBNaW5kRWxlbWVudFtdO1xuICAgIGFuY2VzdG9ycy51bnNoaWZ0KGVsZW1lbnQpO1xuICAgIGNvbnN0IGFuY2VzdG9yID0gYW5jZXN0b3JzLmZpbmQodmFsdWUgPT4gdmFsdWUuc3Ryb2tlQ29sb3IpO1xuICAgIGlmIChhbmNlc3RvciAmJiBhbmNlc3Rvci5zdHJva2VDb2xvciAmJiAhUGxhaXRNaW5kLmlzTWluZChhbmNlc3RvcikpIHtcbiAgICAgICAgcmV0dXJuIGFuY2VzdG9yLnN0cm9rZUNvbG9yO1xuICAgIH1cbiAgICByZXR1cm4gZ2V0RGVmYXVsdEJyYW5jaENvbG9yKGJvYXJkLCBlbGVtZW50KTtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRTaGFwZUJ5RWxlbWVudCA9IChib2FyZDogUGxhaXRCb2FyZCwgZWxlbWVudDogTWluZEVsZW1lbnQpOiBNaW5kRWxlbWVudFNoYXBlID0+IHtcbiAgICBjb25zdCBzaGFwZSA9IGdldEF2YWlsYWJsZVByb3BlcnR5KGJvYXJkLCBlbGVtZW50LCAnc2hhcGUnKTtcbiAgICByZXR1cm4gc2hhcGUgfHwgTWluZEVsZW1lbnRTaGFwZS5yb3VuZFJlY3RhbmdsZTtcbn07XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9taW5kL3NyYy91dGlscy9ub2RlLXN0eWxlL3NoYXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBZSxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNwRixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDaEQsT0FBTyxFQUFFLHFCQUFxQixFQUFFLGlCQUFpQixFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRXBFLE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFHLENBQUMsS0FBaUIsRUFBRSxPQUFvQixFQUFFLEVBQUU7SUFDOUUsSUFBSSxTQUFTLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxFQUFFO1FBQzNCLE1BQU0saUJBQWlCLEdBQUcsaUJBQWlCLENBQUMsS0FBSyxDQUFDLENBQUMsUUFBUSxDQUFDO1FBQzVELE9BQU8sT0FBTyxDQUFDLFdBQVcsSUFBSSxpQkFBaUIsQ0FBQztLQUNuRDtJQUVELE9BQU8sb0JBQW9CLENBQUMsS0FBSyxFQUFFLE9BQU8sRUFBRSxhQUFhLENBQUMsSUFBSSxxQkFBcUIsQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDLENBQUM7QUFDeEcsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsQ0FBQyxLQUFpQixFQUFFLE9BQW9CLEVBQW9CLEVBQUU7SUFDM0YsTUFBTSxLQUFLLEdBQUcsb0JBQW9CLENBQUMsS0FBSyxFQUFFLE9BQU8sRUFBRSxPQUFPLENBQUMsQ0FBQztJQUM1RCxPQUFPLEtBQUssSUFBSSxnQkFBZ0IsQ0FBQyxjQUFjLENBQUM7QUFDcEQsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGxhaXRCb2FyZCB9IGZyb20gJ0BwbGFpdC9jb3JlJztcbmltcG9ydCB7IE1pbmRFbGVtZW50LCBNaW5kRWxlbWVudFNoYXBlLCBQbGFpdE1pbmQgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2VsZW1lbnQnO1xuaW1wb3J0IHsgZ2V0QXZhaWxhYmxlUHJvcGVydHkgfSBmcm9tICcuL2NvbW1vbic7XG5pbXBvcnQgeyBnZXREZWZhdWx0QnJhbmNoQ29sb3IsIGdldE1pbmRUaGVtZUNvbG9yIH0gZnJvbSAnLi9icmFuY2gnO1xuXG5leHBvcnQgY29uc3QgZ2V0U3Ryb2tlQnlNaW5kRWxlbWVudCA9IChib2FyZDogUGxhaXRCb2FyZCwgZWxlbWVudDogTWluZEVsZW1lbnQpID0+IHtcbiAgICBpZiAoUGxhaXRNaW5kLmlzTWluZChlbGVtZW50KSkge1xuICAgICAgICBjb25zdCBkZWZhdWx0Um9vdFN0cm9rZSA9IGdldE1pbmRUaGVtZUNvbG9yKGJvYXJkKS5yb290RmlsbDtcbiAgICAgICAgcmV0dXJuIGVsZW1lbnQuc3Ryb2tlQ29sb3IgfHwgZGVmYXVsdFJvb3RTdHJva2U7XG4gICAgfVxuXG4gICAgcmV0dXJuIGdldEF2YWlsYWJsZVByb3BlcnR5KGJvYXJkLCBlbGVtZW50LCAnc3Ryb2tlQ29sb3InKSB8fCBnZXREZWZhdWx0QnJhbmNoQ29sb3IoYm9hcmQsIGVsZW1lbnQpO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldFNoYXBlQnlFbGVtZW50ID0gKGJvYXJkOiBQbGFpdEJvYXJkLCBlbGVtZW50OiBNaW5kRWxlbWVudCk6IE1pbmRFbGVtZW50U2hhcGUgPT4ge1xuICAgIGNvbnN0IHNoYXBlID0gZ2V0QXZhaWxhYmxlUHJvcGVydHkoYm9hcmQsIGVsZW1lbnQsICdzaGFwZScpO1xuICAgIHJldHVybiBzaGFwZSB8fCBNaW5kRWxlbWVudFNoYXBlLnJvdW5kUmVjdGFuZ2xlO1xufTtcbiJdfQ==

package/fesm2015/plait-mind.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, Directive, Input, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-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, updateForeignObject as updateForeignObject$1, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+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';
 import { MindLayoutType, isIndentedLayout, getNonAbstractChildren, isStandardLayout, AbstractNode, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
-import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, updateForeignObject, drawRichtext, createForeignObject, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
+import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, drawRichtext, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
 import { fromEvent, Subject, timer } from 'rxjs';
 import { take, takeUntil, filter, debounceTime } from 'rxjs/operators';
 import { Node, Path as Path$1, Editor, Operation } from 'slate';
@@ -30,19 +30,13 @@ const DefaultAbstractNodeStyle = {
     strokeColor: GRAY_COLOR,
     strokeWidth: 2,
     branchColor: GRAY_COLOR,
-    branchWidth: 2,
-    fill: '#FFFFFF'
+    branchWidth: 2
 };
 const DefaultNodeStyle = {
     strokeWidth: 3,
     branchWidth: 3,
-    fill: '#FFFFFF'
+    fill: 'none'
 };
-const DefaultRootStyle = {
-    fill: '#F5F5F5',
-    strokeColor: '#F5F5F5',
-};
-const BRANCH_COLORS = ['#A287E1', '#6F81DB', '#6EC4C4', '#DFB85D', '#B1C774', '#77C386', '#C28976', '#E48484', '#E482D4', '#69B1E4'];
 
 const TOPIC_COLOR = '#333';
 const TOPIC_FONT_SIZE = 14;
@@ -93,6 +87,104 @@ var MindPointerType;
     MindPointerType["mind"] = "mind";
 })(MindPointerType || (MindPointerType = {}));
 
+const DEFAULT_BRANCH_COLORS = [
+    '#A287E0',
+    '#6E80DB',
+    '#6DC4C4',
+    '#E0B75E',
+    '#B1C675',
+    '#77C386',
+    '#C18976',
+    '#E48484',
+    '#E582D4',
+    '#6AB1E4'
+];
+const COLORFUL_BRANCH_COLORS = [
+    '#F94239',
+    '#FF8612',
+    '#F3D222',
+    '#B3D431',
+    '#00BC7B',
+    '#06ADBF',
+    '#476BFF',
+    '#4E49BE',
+    '#8957E5',
+    '#FE5DA1'
+];
+const SOFT_BRANCH_COLORS = [
+    '#6D89C1',
+    '#F2BDC7',
+    '#B796D9',
+    '#5BA683',
+    '#B3D431 ',
+    '#F2DC6C',
+    '#F7C98D',
+    '#60B4D1',
+    '#838F9E',
+    '#C1A381'
+];
+const RETRO_BRANCH_COLORS = [
+    '#459476',
+    '#9A894F',
+    '#D48444',
+    '#E9C358 ',
+    '#4B9D9D',
+    '#C14C41',
+    '#827086 ',
+    '#60718D',
+    '#D38183',
+    '#9DC19D'
+];
+const DARK_BRANCH_COLORS = [
+    '#3DD1AE',
+    '#F6C659',
+    '#A9E072',
+    '#FF877B ',
+    '#F693E7',
+    '#5DCFFF',
+    '#868AF6',
+    '#4C6DC7',
+    '#D97C26',
+    '#268FAC'
+];
+const STARRY_BRANCH_COLORS = [
+    '#E46C57',
+    '#579360',
+    '#B98339',
+    '#3A62D1 ',
+    '#B883B7',
+    '#42ABE5',
+    '#2B9D8F',
+    '#A4705E',
+    '#265833',
+    '#787865'
+];
+
+const MindDefaultThemeColor = Object.assign(Object.assign({}, DefaultThemeColor), { branchColors: DEFAULT_BRANCH_COLORS, rootFill: '#f5f5f5', rootTextColor: '#333333' });
+const MindColorfulThemeColor = Object.assign(Object.assign({}, ColorfulThemeColor), { branchColors: COLORFUL_BRANCH_COLORS, rootFill: '#333333', rootTextColor: '#FFFFFF' });
+const MindSoftThemeColor = Object.assign(Object.assign({}, SoftThemeColor), { branchColors: SOFT_BRANCH_COLORS, rootFill: '#FFFFFF', rootTextColor: '#333333' });
+const MindRetroThemeColor = Object.assign(Object.assign({}, RetroThemeColor), { branchColors: RETRO_BRANCH_COLORS, rootFill: '#153D5D', rootTextColor: '#FFFFFF' });
+const MindDarkThemeColor = Object.assign(Object.assign({}, DarkThemeColor), { branchColors: DARK_BRANCH_COLORS, rootFill: '#FFFFFF', rootTextColor: '#333333' });
+const MindStarryThemeColor = Object.assign(Object.assign({}, StarryThemeColor), { branchColors: STARRY_BRANCH_COLORS, rootFill: '#FFFFFF', rootTextColor: '#333333' });
+const MindThemeColors = [
+    MindDefaultThemeColor,
+    MindColorfulThemeColor,
+    MindSoftThemeColor,
+    MindRetroThemeColor,
+    MindDarkThemeColor,
+    MindStarryThemeColor
+];
+const MindThemeColor = {
+    isMindThemeColor(value) {
+        if (value.branchColors && value.rootFill && value.rootTextColor) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+};
+
 function getRectangleByNode(node) {
     const x = node.x + node.hGap;
     let y = node.y + node.vGap;
@@ -218,13 +310,13 @@ const createEmptyMind = (board, point) => {
     return rootElement;
 };
 const createDefaultMind = (point, rightNodeCount, layout) => {
-    const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { shape: MindElementShape.roundRectangle, layout });
+    const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { layout });
     root.rightNodeCount = rightNodeCount;
     root.isRoot = true;
     root.type = 'mindmap';
     root.points = [point];
     const children = [1, 1, 1].map(() => {
-        return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, { shape: MindElementShape.roundRectangle });
+        return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, {});
     });
     root.children = children;
     return root;
@@ -237,35 +329,26 @@ const createMindElement = (text, width, height, options) => {
         },
         children: [],
         width,
-        height,
-        fill: options.fill,
-        strokeColor: options.strokeColor,
-        strokeWidth: options.strokeWidth,
-        shape: options.shape
+        height
     };
-    if (options.fill) {
-        newElement.fill = options.fill;
-    }
-    if (options.strokeColor) {
-        newElement.strokeColor = options.strokeColor;
-    }
-    if (!isNullOrUndefined(options.strokeWidth)) {
-        newElement.strokeWidth = options.strokeWidth;
-    }
-    if (options.shape) {
-        newElement.shape = options.shape;
-    }
-    if (options.layout) {
-        newElement.layout = options.layout;
-    }
-    if (options.branchColor) {
-        newElement.branchColor = options.branchColor;
-    }
-    if (!isNullOrUndefined(options.branchWidth)) {
-        newElement.branchWidth = options.branchWidth;
+    let key;
+    for (key in options) {
+        if (!isNullOrUndefined(options[key])) {
+            newElement[key] = options[key];
+        }
     }
     return newElement;
 };
+const INHERIT_ATTRIBUTE_KEYS = [
+    'fill',
+    'strokeColor',
+    'strokeWidth',
+    'shape',
+    'layout',
+    'branchColor',
+    'branchWidth',
+    'branchShape'
+];
 
 const getChildrenCount = (element) => {
     const count = element.children.reduce((p, c) => {
@@ -322,14 +405,14 @@ const extractNodesText = (node) => {
 };
 // layoutLevel 用来表示插入兄弟节点还是子节点
 const insertMindElement = (board, inheritNode, path) => {
-    let fill, strokeColor, strokeWidth, shape = MindElementShape.roundRectangle;
+    const newNode = {};
     if (!inheritNode.isRoot) {
-        fill = inheritNode.fill;
-        strokeColor = inheritNode.strokeColor;
-        strokeWidth = inheritNode.strokeWidth;
+        INHERIT_ATTRIBUTE_KEYS.forEach(attr => {
+            newNode[attr] = inheritNode[attr];
+        });
+        delete newNode.layout;
     }
-    shape = inheritNode.shape;
-    const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, { fill, strokeColor, strokeWidth, shape });
+    const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, newNode);
     Transforms.insertNode(board, newElement, path);
     clearSelectedElement(board);
     addSelectedElement(board, newElement);
@@ -465,15 +548,7 @@ const getRootLayout = (root) => {
 };
 
 const getAvailableProperty = (board, element, propertyKey) => {
-    const ancestors = MindElement.getAncestors(board, element);
-    ancestors.unshift(element);
-    const ancestor = ancestors.find(value => value[propertyKey]);
-    if (ancestor) {
-        return ancestor[propertyKey];
-    }
-    else {
-        return undefined;
-    }
+    return element[propertyKey];
 };
 
 /**
@@ -505,31 +580,37 @@ const getAbstractBranchColor = (board, element) => {
     }
     return DefaultAbstractNodeStyle.branchColor;
 };
-const getNextBranchColor = (root) => {
+const getNextBranchColor = (board, root) => {
     const index = root.children.length;
-    return getDefaultBranchColorByIndex(index);
+    return getDefaultBranchColorByIndex(board, index);
 };
 const getDefaultBranchColor = (board, element) => {
     const path = PlaitBoard.findPath(board, element);
-    return getDefaultBranchColorByIndex(path[1]);
+    return getDefaultBranchColorByIndex(board, path[1]);
 };
-const getDefaultBranchColorByIndex = (index) => {
-    const length = BRANCH_COLORS.length;
+const getDefaultBranchColorByIndex = (board, index) => {
+    const themeColor = getMindThemeColor(board);
+    const length = themeColor.branchColors.length;
     const remainder = index % length;
-    return BRANCH_COLORS[remainder];
+    return themeColor.branchColors[remainder];
+};
+const getMindThemeColor = (board) => {
+    const themeColors = PlaitBoard.getThemeColors(board);
+    const themeColor = themeColors.find(val => val.mode === board.theme.themeColorMode);
+    if (themeColor && MindThemeColor.isMindThemeColor(themeColor)) {
+        return themeColor;
+    }
+    else {
+        return MindDefaultThemeColor;
+    }
 };
 
 const getStrokeByMindElement = (board, element) => {
     if (PlaitMind.isMind(element)) {
-        return element.strokeColor || DefaultRootStyle.strokeColor;
-    }
-    const ancestors = MindElement.getAncestors(board, element);
-    ancestors.unshift(element);
-    const ancestor = ancestors.find(value => value.strokeColor);
-    if (ancestor && ancestor.strokeColor && !PlaitMind.isMind(ancestor)) {
-        return ancestor.strokeColor;
+        const defaultRootStroke = getMindThemeColor(board).rootFill;
+        return element.strokeColor || defaultRootStroke;
     }
-    return getDefaultBranchColor(board, element);
+    return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
 };
 const getShapeByElement = (board, element) => {
     const shape = getAvailableProperty(board, element, 'shape');
@@ -786,7 +867,8 @@ function drawRoundRectangleByNode(board, node) {
     return drawRoundRectangleByElement(board, rectangle, node.origin);
 }
 function drawRoundRectangleByElement(board, nodeRectangle, element) {
-    const fill = element.fill ? element.fill : element.isRoot ? DefaultRootStyle.fill : DefaultNodeStyle.fill;
+    const defaultRootFill = getMindThemeColor(board).rootFill;
+    const fill = element.fill ? element.fill : element.isRoot ? defaultRootFill : DefaultNodeStyle.fill;
     const stroke = getStrokeByMindElement(board, element);
     const strokeWidth = element.strokeWidth ? element.strokeWidth : DefaultNodeStyle.strokeWidth;
     const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), nodeRectangle.x, nodeRectangle.y, nodeRectangle.x + nodeRectangle.width, nodeRectangle.y + nodeRectangle.height, {
@@ -930,7 +1012,7 @@ const transformPlacement = (placement, direction) => {
 
 function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true, defaultStrokeWidth) {
     const branchShape = getBranchShapeByMindElement(board, node.origin);
-    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, child.origin);
+    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, node.origin);
     const branchColor = defaultStroke || getBranchColorByMindElement(board, child.origin);
     const isUnderlineShape = getShapeByElement(board, child.origin) === MindElementShape.underline;
     let beginX, beginY, endX, endY, beginNode = node, endNode = child;
@@ -978,7 +1060,7 @@ function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnde
 function drawLogicLink(board, parent, node, isHorizontal, defaultStroke = null, defaultStrokeWidth) {
     const branchShape = getBranchShapeByMindElement(board, parent.origin);
     const branchColor = defaultStroke || getBranchColorByMindElement(board, node.origin);
-    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, node.origin);
+    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, parent.origin);
     const hasStraightLine = !parent.origin.isRoot;
     const parentShape = getShapeByElement(board, parent.origin);
     const shape = node.origin.shape ? node.origin.shape : parentShape;
@@ -2405,7 +2487,9 @@ class QuickInsertDrawer extends BaseDrawer {
             underlineCoordinates[MindLayoutType.right].startY -= height * 0.5;
             underlineCoordinates[MindLayoutType.right].endY -= height * 0.5;
         }
-        const branchColor = PlaitMind.isMind(element) ? getNextBranchColor(element) : getBranchColorByMindElement(this.board, element);
+        const branchColor = PlaitMind.isMind(element)
+            ? getNextBranchColor(this.board, element)
+            : getBranchColorByMindElement(this.board, element);
         let nodeLayout = MindQueries.getCorrectLayoutByElement(this.board, element);
         if (element.isRoot && isStandardLayout(nodeLayout)) {
             const root = element;
@@ -2517,7 +2601,8 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
         const isEqualNode = RectangleClient.isEqual(this.node, newNode);
         this.node = newNode;
-        if (!isEqualNode || value.element !== previous.element) {
+        const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
+        if (!isEqualNode || value.element !== previous.element || isChangeTheme) {
             this.drawActiveG();
             this.updateActiveClass();
             this.drawShape();
@@ -2737,7 +2822,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
         // interactive
         fromEvent(collapseG, 'mouseup')
-            .pipe(filter(() => !this.handActive || PlaitBoard.isReadonly(this.board)), take(1))
+            .pipe(filter(() => !this.handActive || !!PlaitBoard.isReadonly(this.board)), take(1))
             .subscribe(() => {
             const isCollapsed = !this.node.origin.isCollapsed;
             const newElement = { isCollapsed };
@@ -3570,7 +3655,7 @@ const withCreateMind = (board) => {
                         fakeCreateNodeRef.nodeG = nodeG;
                         PlaitBoard.getHost(board).append(nodeG);
                         PlaitBoard.getHost(board).append(fakeCreateNodeRef.topicG);
-                        updateForeignObject$1(fakeCreateNodeRef.topicG, topicRectangle.width, topicRectangle.height, topicRectangle.x, topicRectangle.y);
+                        updateForeignObject(fakeCreateNodeRef.topicG, topicRectangle.width, topicRectangle.height, topicRectangle.x, topicRectangle.y);
                     }
                 }
             });
@@ -3615,6 +3700,31 @@ const withCreateMind = (board) => {
     return newBoard;
 };
 
+const withMindHotkey = (board) => {
+    const { keydown } = board;
+    board.keydown = (keyboardEvent) => {
+        if (!PlaitBoard.getMovingPoint(board)) {
+            return;
+        }
+        if (isExpandHotkey(keyboardEvent)) {
+            const selectedMindElements = getSelectedElements(board).filter(element => MindElement.isMindElement(board, element));
+            if (selectedMindElements.length === 1 &&
+                !PlaitMind.isMind(selectedMindElements[0]) &&
+                selectedMindElements[0].children &&
+                selectedMindElements[0].children.length > 0) {
+                const element = selectedMindElements[0];
+                Transforms.setNode(board, { isCollapsed: element.isCollapsed ? false : true }, PlaitBoard.findPath(board, element));
+                return;
+            }
+        }
+        keydown(keyboardEvent);
+    };
+    return board;
+};
+const isExpandHotkey = (keyboardEvent) => {
+    return isKeyHotkey('mod+/', keyboardEvent);
+};
+
 const withMind = (board) => {
     const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
@@ -3626,6 +3736,20 @@ const withMind = (board) => {
         }
         return drawElement(context);
     };
+    board.applyTheme = (element) => {
+        const mindElement = element;
+        const shouldClearProperty = !PlaitBoard.isBoard(element) && ((mindElement === null || mindElement === void 0 ? void 0 : mindElement.branchColor) || (mindElement === null || mindElement === void 0 ? void 0 : mindElement.fill) || (mindElement === null || mindElement === void 0 ? void 0 : mindElement.strokeColor));
+        const isAbstract = AbstractNode.isAbstract(element);
+        if (shouldClearProperty) {
+            const path = PlaitBoard.findPath(board, element);
+            if (isAbstract) {
+                Transforms.setNode(board, { fill: null, strokeColor: DefaultAbstractNodeStyle.strokeColor, branchColor: DefaultAbstractNodeStyle.branchColor }, path);
+            }
+            else {
+                Transforms.setNode(board, { fill: null, strokeColor: null, branchColor: null }, path);
+            }
+        }
+    };
     board.getRectangle = element => {
         if (MindElement.isMindElement(board, element)) {
             return getRectangleByNode(MindElement.getNode(element));
@@ -3803,7 +3927,7 @@ const withMind = (board) => {
         MindTransforms.removeElements(board, selectedElements);
         deleteFragment(data);
     };
-    return withMindExtend(withCreateMind(withAbstract(withDnd(board))));
+    return withMindHotkey(withMindExtend(withCreateMind(withAbstract(withDnd(board)))));
 };
 
 class MindEmojiBaseComponent {
@@ -3857,5 +3981,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_COLORS, BRANCH_WIDTH, BaseDrawer, BranchShape, DefaultAbstractNodeStyle, DefaultNodeStyle, DefaultRootStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, 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, 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 };
+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 };
 //# sourceMappingURL=plait-mind.mjs.map