openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化：提取代码中的常量

Browse Source
This commit is contained in:
wanglin2 2023-03-30 14:36:30 +08:00
parent 79ae08fc9a
commit 0a4898697d
9 changed files with 155 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
simple-mind-map/index.js
View File

@ -7,7 +7,7 @@ import Style from './src/Style'
import KeyCommand from './src/KeyCommand' import KeyCommand from './src/KeyCommand'
import Command from './src/Command' import Command from './src/Command'
import BatchExecution from './src/BatchExecution' import BatchExecution from './src/BatchExecution'
import { layoutValueList } from './src/utils/constant' import { layoutValueList, CONSTANTS } from './src/utils/constant'
import { SVG } from '@svgdotjs/svg.js' import { SVG } from '@svgdotjs/svg.js'
import { simpleDeepClone } from './src/utils' import { simpleDeepClone } from './src/utils'
import defaultTheme from './src/themes/default' import defaultTheme from './src/themes/default'
@ -17,7 +17,7 @@ const defaultOpt = {
// 是否只读 // 是否只读
readonly: false, readonly: false,
// 布局 // 布局
layout: 'logicalStructure', layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
// 主题 // 主题
theme: 'default', // 内置主题：default（默认主题） theme: 'default', // 内置主题：default（默认主题）
// 主题配置，会和所选择的主题进行合并 // 主题配置，会和所选择的主题进行合并
@ -66,7 +66,7 @@ const defaultOpt = {
// 可以传一个函数，回调参数为事件对象 // 可以传一个函数，回调参数为事件对象
customHandleMousewheel: null, customHandleMousewheel: null,
// 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效 // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
mousewheelAction: 'zoom',// zoom（放大缩小）、move（上下移动） mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM,// zoom（放大缩小）、move（上下移动）
// 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
mousewheelMoveStep: 100, mousewheelMoveStep: 100,
// 默认插入的二级节点的文字 // 默认插入的二级节点的文字
@ -145,7 +145,7 @@ class MindMap {
handleOpt(opt) { handleOpt(opt) {
// 检查布局配置 // 检查布局配置
if (!layoutValueList.includes(opt.layout)) { if (!layoutValueList.includes(opt.layout)) {
opt.layout = 'logicalStructure' opt.layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
} }
// 检查主题配置 // 检查主题配置
opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default' opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
@ -206,7 +206,7 @@ class MindMap {
setTheme(theme) { setTheme(theme) {
this.renderer.clearAllActive() this.renderer.clearAllActive()
this.opt.theme = theme this.opt.theme = theme
this.render(null, 'changeTheme') this.render(null, CONSTANTS.CHANGE_THEME)
} }
// 获取当前主题 // 获取当前主题
@ -217,7 +217,7 @@ class MindMap {
// 设置主题配置 // 设置主题配置
setThemeConfig(config) { setThemeConfig(config) {
this.opt.themeConfig = config this.opt.themeConfig = config
this.render(null, 'changeTheme') this.render(null, CONSTANTS.CHANGE_THEME)
} }
// 获取自定义主题配置 // 获取自定义主题配置
@ -249,7 +249,7 @@ class MindMap {
setLayout(layout) { setLayout(layout) {
// 检查布局配置 // 检查布局配置
if (!layoutValueList.includes(layout)) { if (!layoutValueList.includes(layout)) {
layout = 'logicalStructure' layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
} }
this.opt.layout = layout this.opt.layout = layout
this.renderer.setLayout() this.renderer.setLayout()
@ -326,10 +326,10 @@ class MindMap {
// 设置只读模式、编辑模式 // 设置只读模式、编辑模式
setMode(mode) { setMode(mode) {
if (!['readonly', 'edit'].includes(mode)) { if (![CONSTANTS.MODE.READONLY, CONSTANTS.MODE.EDIT].includes(mode)) {
return return
} }
this.opt.readonly = mode === 'readonly' this.opt.readonly = mode === CONSTANTS.MODE.READONLY
if (this.opt.readonly) { if (this.opt.readonly) {
// 取消当前激活的元素 // 取消当前激活的元素
this.renderer.clearAllActive() this.renderer.clearAllActive()

17
simple-mind-map/src/Event.js
View File

@ -1,4 +1,5 @@
import EventEmitter from 'eventemitter3' import EventEmitter from 'eventemitter3'
import { CONSTANTS } from './utils/constant'
// 事件类 // 事件类
class Event extends EventEmitter { class Event extends EventEmitter {
@ -107,15 +108,15 @@ class Event extends EventEmitter {
let dir let dir
// 解决mac触控板双指缩放方向相反的问题 // 解决mac触控板双指缩放方向相反的问题
if (e.ctrlKey) { if (e.ctrlKey) {
if (e.deltaY > 0) dir = 'up' if (e.deltaY > 0) dir = CONSTANTS.DIR.UP
if (e.deltaY < 0) dir = 'down' if (e.deltaY < 0) dir = CONSTANTS.DIR.DOWN
if (e.deltaX > 0) dir = 'left' if (e.deltaX > 0) dir = CONSTANTS.DIR.LEFT
if (e.deltaX < 0) dir = 'right' if (e.deltaX < 0) dir = CONSTANTS.DIR.RIGHT
} else { } else {
if ((e.wheelDeltaY || e.detail) > 0) dir = 'up' if ((e.wheelDeltaY || e.detail) > 0) dir = CONSTANTS.DIR.UP
if ((e.wheelDeltaY || e.detail) < 0) dir = 'down' if ((e.wheelDeltaY || e.detail) < 0) dir = CONSTANTS.DIR.DOWN
if ((e.wheelDeltaX || e.detail) > 0) dir = 'left' if ((e.wheelDeltaX || e.detail) > 0) dir = CONSTANTS.DIR.LEFT
if ((e.wheelDeltaX || e.detail) < 0) dir = 'right' if ((e.wheelDeltaX || e.detail) < 0) dir = CONSTANTS.DIR.RIGHT
} }
this.emit('mousewheel', e, dir, this) this.emit('mousewheel', e, dir, this)
} }

41
simple-mind-map/src/KeyboardNavigation.js
View File

@ -1,4 +1,5 @@
import { bfsWalk } from './utils' import { bfsWalk } from './utils'
import { CONSTANTS } from './utils/constant'
// 键盘导航类 // 键盘导航类
class KeyboardNavigation { class KeyboardNavigation {
@ -7,17 +8,17 @@ class KeyboardNavigation {
this.opt = opt this.opt = opt
this.mindMap = opt.mindMap this.mindMap = opt.mindMap
this.onKeyup = this.onKeyup.bind(this) this.onKeyup = this.onKeyup.bind(this)
this.mindMap.keyCommand.addShortcut('Left', () => { this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.LEFT, () => {
this.onKeyup('Left') this.onKeyup(CONSTANTS.KEY_DIR.LEFT)
}) })
this.mindMap.keyCommand.addShortcut('Up', () => { this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.UP, () => {
this.onKeyup('Up') this.onKeyup(CONSTANTS.KEY_DIR.UP)
}) })
this.mindMap.keyCommand.addShortcut('Right', () => { this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.RIGHT, () => {
this.onKeyup('Right') this.onKeyup(CONSTANTS.KEY_DIR.RIGHT)
}) })
this.mindMap.keyCommand.addShortcut('Down', () => { this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.DOWN, () => {
this.onKeyup('Down') this.onKeyup(CONSTANTS.KEY_DIR.DOWN)
}) })
} }
@ -101,19 +102,19 @@ class KeyboardNavigation {
let { left, top, right, bottom } = rect let { left, top, right, bottom } = rect
let match = false let match = false
// 按下了左方向键 // 按下了左方向键
if (dir === 'Left') { if (dir === CONSTANTS.KEY_DIR.LEFT) {
// 判断节点是否在当前节点的左侧 // 判断节点是否在当前节点的左侧
match = right <= currentActiveNodeRect.left match = right <= currentActiveNodeRect.left
// 按下了右方向键 // 按下了右方向键
} else if (dir === 'Right') { } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
// 判断节点是否在当前节点的右侧 // 判断节点是否在当前节点的右侧
match = left >= currentActiveNodeRect.right match = left >= currentActiveNodeRect.right
// 按下了上方向键 // 按下了上方向键
} else if (dir === 'Up') { } else if (dir === CONSTANTS.KEY_DIR.UP) {
// 判断节点是否在当前节点的上面 // 判断节点是否在当前节点的上面
match = bottom <= currentActiveNodeRect.top match = bottom <= currentActiveNodeRect.top
// 按下了下方向键 // 按下了下方向键
} else if (dir === 'Down') { } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
// 判断节点是否在当前节点的下面 // 判断节点是否在当前节点的下面
match = top >= currentActiveNodeRect.bottom match = top >= currentActiveNodeRect.bottom
} }
@ -136,22 +137,22 @@ class KeyboardNavigation {
let rect = this.getNodeRect(node) let rect = this.getNodeRect(node)
let { left, top, right, bottom } = rect let { left, top, right, bottom } = rect
let match = false let match = false
if (dir === 'Left') { if (dir === CONSTANTS.KEY_DIR.LEFT) {
match = match =
left < currentActiveNodeRect.left && left < currentActiveNodeRect.left &&
top < currentActiveNodeRect.bottom && top < currentActiveNodeRect.bottom &&
bottom > currentActiveNodeRect.top bottom > currentActiveNodeRect.top
} else if (dir === 'Right') { } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
match = match =
right > currentActiveNodeRect.right && right > currentActiveNodeRect.right &&
top < currentActiveNodeRect.bottom && top < currentActiveNodeRect.bottom &&
bottom > currentActiveNodeRect.top bottom > currentActiveNodeRect.top
} else if (dir === 'Up') { } else if (dir === CONSTANTS.KEY_DIR.UP) {
match = match =
top < currentActiveNodeRect.top && top < currentActiveNodeRect.top &&
left < currentActiveNodeRect.right && left < currentActiveNodeRect.right &&
right > currentActiveNodeRect.left right > currentActiveNodeRect.left
} else if (dir === 'Down') { } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
match = match =
bottom > currentActiveNodeRect.bottom && bottom > currentActiveNodeRect.bottom &&
left < currentActiveNodeRect.right && left < currentActiveNodeRect.right &&
@ -185,13 +186,13 @@ class KeyboardNavigation {
let offsetY = ccY - cY let offsetY = ccY - cY
if (offsetX === 0 && offsetY === 0) return if (offsetX === 0 && offsetY === 0) return
let match = false let match = false
if (dir === 'Left') { if (dir === CONSTANTS.KEY_DIR.LEFT) {
match = offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY match = offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY
} else if (dir === 'Right') { } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
match = offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY match = offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY
} else if (dir === 'Up') { } else if (dir === CONSTANTS.KEY_DIR.UP) {
match = offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX match = offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX
} else if (dir === 'Down') { } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
match = offsetY > 0 && -offsetY < offsetX && offsetY > offsetX match = offsetY > 0 && -offsetY < offsetX && offsetY > offsetX
} }
if (match) { if (match) {

5
simple-mind-map/src/Node.js
View File

@ -6,6 +6,7 @@ import nodeGeneralizationMethods from './utils/nodeGeneralization'
import nodeExpandBtnMethods from './utils/nodeExpandBtn' import nodeExpandBtnMethods from './utils/nodeExpandBtn'
import nodeCommandWrapsMethods from './utils/nodeCommandWraps' import nodeCommandWrapsMethods from './utils/nodeCommandWraps'
import nodeCreateContentsMethods from './utils/nodeCreateContents' import nodeCreateContentsMethods from './utils/nodeCreateContents'
import { CONSTANTS } from './utils/constant'
// 节点类 // 节点类
@ -452,7 +453,7 @@ class Node {
// 更新节点形状样式 // 更新节点形状样式
updateNodeShape() { updateNodeShape() {
const shape = this.getShape() const shape = this.getShape()
this.style[shape === 'rectangle' ? 'rect' : 'shape'](this.shapeNode) this.style[shape === CONSTANTS.SHAPE.RECTANGLE ? 'rect' : 'shape'](this.shapeNode)
} }
// 递归渲染 // 递归渲染
@ -615,7 +616,7 @@ class Node {
getShape() { getShape() {
// 节点使用功能横线风格的话不支持设置形状，直接使用默认的矩形 // 节点使用功能横线风格的话不支持设置形状，直接使用默认的矩形
return this.mindMap.themeConfig.nodeUseLineStyle return this.mindMap.themeConfig.nodeUseLineStyle
? 'rectangle' ? CONSTANTS.SHAPE.RECTANGLE
: this.style.getStyle('shape', false, false) : this.style.getStyle('shape', false, false)
} }

11
simple-mind-map/src/Render.js
View File

@ -7,17 +7,18 @@ import TextEdit from './TextEdit'
import { copyNodeTree, simpleDeepClone, walk } from './utils' import { copyNodeTree, simpleDeepClone, walk } from './utils'
import { shapeList } from './Shape' import { shapeList } from './Shape'
import { lineStyleProps } from './themes/default' import { lineStyleProps } from './themes/default'
import { CONSTANTS } from './utils/constant'
// 布局列表 // 布局列表
const layouts = { const layouts = {
// 逻辑结构图 // 逻辑结构图
logicalStructure: LogicalStructure, [CONSTANTS.LAYOUT.LOGICAL_STRUCTURE]: LogicalStructure,
// 思维导图 // 思维导图
mindMap: MindMap, [CONSTANTS.LAYOUT.MIND_MAP]: MindMap,
// 目录组织图 // 目录组织图
catalogOrganization: CatalogOrganization, [CONSTANTS.LAYOUT.CATALOG_ORGANIZATION]: CatalogOrganization,
// 组织结构图 // 组织结构图
organizationStructure: OrganizationStructure [CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE]: OrganizationStructure
} }
// 渲染 // 渲染
@ -56,7 +57,7 @@ class Render {
this.layout = new ( this.layout = new (
layouts[this.mindMap.opt.layout] layouts[this.mindMap.opt.layout]
? layouts[this.mindMap.opt.layout] ? layouts[this.mindMap.opt.layout]
: layouts.logicalStructure : layouts[CONSTANTS.LAYOUT.LOGICAL_STRUCTURE]
)(this) )(this)
} }

51
simple-mind-map/src/Shape.js
View File

@ -1,4 +1,5 @@
import { Rect, Polygon, Path } from '@svgdotjs/svg.js' import { Rect, Polygon, Path } from '@svgdotjs/svg.js'
import { CONSTANTS } from './utils/constant'
// 节点形状类 // 节点形状类
export default class Shape { export default class Shape {
@ -15,37 +16,37 @@ export default class Shape {
const actHeight = height + paddingY * 2 const actHeight = height + paddingY * 2
const actOffset = Math.abs(actWidth - actHeight) const actOffset = Math.abs(actWidth - actHeight)
switch (shape) { switch (shape) {
case 'roundedRectangle': case CONSTANTS.SHAPE.ROUNDED_RECTANGLE:
return { return {
paddingX: height > width ? (height - width) / 2 : 0, paddingX: height > width ? (height - width) / 2 : 0,
paddingY: 0 paddingY: 0
} }
case 'diamond': case CONSTANTS.SHAPE.DIAMOND:
return { return {
paddingX: width / 2, paddingX: width / 2,
paddingY: height / 2 paddingY: height / 2
} }
case 'parallelogram': case CONSTANTS.SHAPE.PARALLELOGRAM:
return { return {
paddingX: paddingX <= 0 ? defaultPaddingX : 0, paddingX: paddingX <= 0 ? defaultPaddingX : 0,
paddingY: 0 paddingY: 0
} }
case 'outerTriangularRectangle': case CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE:
return { return {
paddingX: paddingX <= 0 ? defaultPaddingX : 0, paddingX: paddingX <= 0 ? defaultPaddingX : 0,
paddingY: 0 paddingY: 0
} }
case 'innerTriangularRectangle': case CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE:
return { return {
paddingX: paddingX <= 0 ? defaultPaddingX : 0, paddingX: paddingX <= 0 ? defaultPaddingX : 0,
paddingY: 0 paddingY: 0
} }
case 'ellipse': case CONSTANTS.SHAPE.ELLIPSE:
return { return {
paddingX: paddingX <= 0 ? defaultPaddingX : 0, paddingX: paddingX <= 0 ? defaultPaddingX : 0,
paddingY: paddingY <= 0 ? defaultPaddingY : 0 paddingY: paddingY <= 0 ? defaultPaddingY : 0
} }
case 'circle': case CONSTANTS.SHAPE.CIRCLE:
return { return {
paddingX: actHeight > actWidth ? actOffset / 2 : 0, paddingX: actHeight > actWidth ? actOffset / 2 : 0,
paddingY: actHeight < actWidth ? actOffset / 2 : 0 paddingY: actHeight < actWidth ? actOffset / 2 : 0
@ -64,30 +65,30 @@ export default class Shape {
let { width, height } = this.node let { width, height } = this.node
let node = null let node = null
// 矩形 // 矩形
if (shape === 'rectangle') { if (shape === CONSTANTS.SHAPE.RECTANGLE) {
node = new Rect().size(width, height) node = new Rect().size(width, height)
} else if (shape === 'diamond') { } else if (shape === CONSTANTS.SHAPE.DIAMOND) {
// 菱形 // 菱形
node = this.createDiamond() node = this.createDiamond()
} else if (shape === 'parallelogram') { } else if (shape === CONSTANTS.SHAPE.PARALLELOGRAM) {
// 平行四边形 // 平行四边形
node = this.createParallelogram() node = this.createParallelogram()
} else if (shape === 'roundedRectangle') { } else if (shape === CONSTANTS.SHAPE.ROUNDED_RECTANGLE) {
// 圆角矩形 // 圆角矩形
node = this.createRoundedRectangle() node = this.createRoundedRectangle()
} else if (shape === 'octagonalRectangle') { } else if (shape === CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE) {
// 八角矩形 // 八角矩形
node = this.createOctagonalRectangle() node = this.createOctagonalRectangle()
} else if (shape === 'outerTriangularRectangle') { } else if (shape === CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE) {
// 外三角矩形 // 外三角矩形
node = this.createOuterTriangularRectangle() node = this.createOuterTriangularRectangle()
} else if (shape === 'innerTriangularRectangle') { } else if (shape === CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE) {
// 内三角矩形 // 内三角矩形
node = this.createInnerTriangularRectangle() node = this.createInnerTriangularRectangle()
} else if (shape === 'ellipse') { } else if (shape === CONSTANTS.SHAPE.ELLIPSE) {
// 椭圆 // 椭圆
node = this.createEllipse() node = this.createEllipse()
} else if (shape === 'circle') { } else if (shape === CONSTANTS.SHAPE.CIRCLE) {
// 圆 // 圆
node = this.createCircle() node = this.createCircle()
} }
@ -216,13 +217,13 @@ export default class Shape {
// 形状列表 // 形状列表
export const shapeList = [ export const shapeList = [
'rectangle', CONSTANTS.SHAPE.RECTANGLE,
'diamond', CONSTANTS.SHAPE.DIAMOND,
'parallelogram', CONSTANTS.SHAPE.PARALLELOGRAM,
'roundedRectangle', CONSTANTS.SHAPE.ROUNDED_RECTANGLE,
'octagonalRectangle', CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE,
'outerTriangularRectangle', CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE,
'innerTriangularRectangle', CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE,
'ellipse', CONSTANTS.SHAPE.ELLIPSE,
'circle' CONSTANTS.SHAPE.CIRCLE
] ]

20
simple-mind-map/src/View.js
View File

@ -1,3 +1,5 @@
import { CONSTANTS } from './utils/constant'
// 视图操作类 // 视图操作类
class View { class View {
// 构造函数 // 构造函数
@ -58,35 +60,35 @@ class View {
if (this.mindMap.opt.customHandleMousewheel && typeof this.mindMap.opt.customHandleMousewheel === 'function') { if (this.mindMap.opt.customHandleMousewheel && typeof this.mindMap.opt.customHandleMousewheel === 'function') {
return this.mindMap.opt.customHandleMousewheel(e) return this.mindMap.opt.customHandleMousewheel(e)
} }
if (this.mindMap.opt.mousewheelAction === 'zoom') { if (this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) {
switch (dir) { switch (dir) {
// 鼠标滚轮，向上和向左，都是缩小 // 鼠标滚轮，向上和向左，都是缩小
case 'up': case CONSTANTS.DIR.UP:
case 'left': case CONSTANTS.DIR.LEFT:
this.narrow() this.narrow()
break break
// 鼠标滚轮，向下和向右，都是放大 // 鼠标滚轮，向下和向右，都是放大
case 'down': case CONSTANTS.DIR.DOWN:
case 'right': case CONSTANTS.DIR.RIGHT:
this.enlarge() this.enlarge()
break break
} }
} else { } else {
switch (dir){ switch (dir){
// 上移 // 上移
case 'down': case CONSTANTS.DIR.DOWN:
this.translateY(-this.mindMap.opt.mousewheelMoveStep) this.translateY(-this.mindMap.opt.mousewheelMoveStep)
break break
// 下移 // 下移
case 'up': case CONSTANTS.DIR.UP:
this.translateY(this.mindMap.opt.mousewheelMoveStep) this.translateY(this.mindMap.opt.mousewheelMoveStep)
break break
// 右移 // 右移
case 'left': case CONSTANTS.DIR.LEFT:
this.translateX(-this.mindMap.opt.mousewheelMoveStep) this.translateX(-this.mindMap.opt.mousewheelMoveStep)
break break
// 左移 // 左移
case 'right': case CONSTANTS.DIR.RIGHT:
this.translateX(this.mindMap.opt.mousewheelMoveStep) this.translateX(this.mindMap.opt.mousewheelMoveStep)
break break
} }

3
simple-mind-map/src/layouts/Base.js
View File

@ -1,4 +1,5 @@
import Node from '../Node' import Node from '../Node'
import { CONSTANTS } from '../utils/constant'
// 布局基类 // 布局基类
class Base { class Base {
@ -42,7 +43,7 @@ class Base {
newNode.reset() newNode.reset()
newNode.layerIndex = layerIndex newNode.layerIndex = layerIndex
// 主题或主题配置改变了需要重新计算节点大小和布局 // 主题或主题配置改变了需要重新计算节点大小和布局
if (this.renderer.renderSource === 'changeTheme') { if (this.renderer.renderSource === CONSTANTS.CHANGE_THEME) {
newNode.getSize() newNode.getSize()
newNode.needLayout = true newNode.needLayout = true
} }

94
simple-mind-map/src/utils/constant.js
View File

@ -22,32 +22,6 @@ export const tagColorList = [
} }
] ]
// 布局结构列表
export const layoutList = [
{
name: '逻辑结构图',
value: 'logicalStructure',
},
{
name: '思维导图',
value: 'mindMap',
},
{
name: '组织结构图',
value: 'organizationStructure',
},
{
name: '目录组织图',
value: 'catalogOrganization',
}
]
export const layoutValueList = [
'logicalStructure',
'mindMap',
'catalogOrganization',
'organizationStructure'
]
// 主题列表 // 主题列表
export const themeList = [ export const themeList = [
{ {
@ -139,3 +113,71 @@ export const themeList = [
value: 'romanticPurple', value: 'romanticPurple',
} }
] ]
// 常量
export const CONSTANTS = {
CHANGE_THEME: 'changeTheme',
MODE: {
READONLY: 'readonly',
EDIT: 'edit'
},
LAYOUT: {
LOGICAL_STRUCTURE: 'logicalStructure',
MIND_MAP: 'mindMap',
ORGANIZATION_STRUCTURE: 'organizationStructure',
CATALOG_ORGANIZATION: 'catalogOrganization'
},
DIR: {
UP: 'up',
LEFT: 'left',
DOWN: 'down',
RIGHT: 'right'
},
KEY_DIR: {
LEFT: 'Left',
UP: 'Up',
RIGHT: 'Right',
DOWN: 'Down'
},
SHAPE: {
RECTANGLE: 'rectangle',
DIAMOND: 'diamond',
PARALLELOGRAM: 'parallelogram',
ROUNDED_RECTANGLE: 'roundedRectangle',
OCTAGONAL_RECTANGLE: 'octagonalRectangle',
OUTER_TRIANGULAR_RECTANGLE: 'outerTriangularRectangle',
INNER_TRIANGULAR_RECTANGLE: 'innerTriangularRectangle',
ELLIPSE: 'ellipse',
CIRCLE: 'circle'
},
MOUSE_WHEEL_ACTION: {
ZOOM: 'zoom',
MOVE: 'move'
}
}
// 布局结构列表
export const layoutList = [
{
name: '逻辑结构图',
value: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
},
{
name: '思维导图',
value: CONSTANTS.LAYOUT.MIND_MAP,
},
{
name: '组织结构图',
value: CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
},
{
name: '目录组织图',
value: CONSTANTS.LAYOUT.CATALOG_ORGANIZATION,
}
]
export const layoutValueList = [
CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
CONSTANTS.LAYOUT.MIND_MAP,
CONSTANTS.LAYOUT.CATALOG_ORGANIZATION,
CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE
]