mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 18:37:43 +08:00
243 lines
9.7 KiB
JavaScript
243 lines
9.7 KiB
JavaScript
import { CONSTANTS } from './constant'
|
||
|
||
// 默认选项配置
|
||
export const defaultOpt = {
|
||
// 是否只读
|
||
readonly: false,
|
||
// 布局
|
||
layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
|
||
// 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
|
||
fishboneDeg: 45,
|
||
// 主题
|
||
theme: 'default', // 内置主题：default（默认主题）
|
||
// 主题配置，会和所选择的主题进行合并
|
||
themeConfig: {},
|
||
// 放大缩小的增量比例
|
||
scaleRatio: 0.2,
|
||
// 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点
|
||
mouseScaleCenterUseMousePosition: true,
|
||
// 最多显示几个标签
|
||
maxTag: 5,
|
||
// 展开收缩按钮尺寸
|
||
expandBtnSize: 20,
|
||
// 节点里图片和文字的间距
|
||
imgTextMargin: 5,
|
||
// 节点里各种文字信息的间距，如图标和文字的间距
|
||
textContentMargin: 2,
|
||
// 多选节点时鼠标移动到边缘时的画布移动偏移量
|
||
selectTranslateStep: 3,
|
||
// 多选节点时鼠标移动距边缘多少距离时开始偏移
|
||
selectTranslateLimit: 20,
|
||
// 自定义节点备注内容显示
|
||
customNoteContentShow: null,
|
||
/*
|
||
{
|
||
show(){},
|
||
hide(){}
|
||
}
|
||
*/
|
||
// 是否开启节点自由拖拽
|
||
enableFreeDrag: false,
|
||
// 水印配置
|
||
watermarkConfig: {
|
||
text: '',
|
||
lineSpacing: 100,
|
||
textSpacing: 100,
|
||
angle: 30,
|
||
textStyle: {
|
||
color: '#999',
|
||
opacity: 0.5,
|
||
fontSize: 14
|
||
}
|
||
},
|
||
// 达到该宽度文本自动换行
|
||
textAutoWrapWidth: 500,
|
||
// 自定义鼠标滚轮事件处理
|
||
// 可以传一个函数，回调参数为事件对象
|
||
customHandleMousewheel: null,
|
||
// 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
|
||
mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.MOVE, // zoom（放大缩小）、move（上下移动）
|
||
// 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
|
||
mousewheelMoveStep: 100,
|
||
// 当mousewheelAction设为zoom时，或者按住Ctrl键时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来
|
||
mousewheelZoomActionReverse: true,
|
||
// 默认插入的二级节点的文字
|
||
defaultInsertSecondLevelNodeText: '二级节点',
|
||
// 默认插入的二级以下节点的文字
|
||
defaultInsertBelowSecondLevelNodeText: '分支主题',
|
||
// 展开收起按钮的颜色
|
||
expandBtnStyle: {
|
||
color: '#808080',
|
||
fill: '#fff',
|
||
fontSize: 13,
|
||
strokeColor: '#333333'
|
||
},
|
||
// 自定义展开收起按钮的图标
|
||
expandBtnIcon: {
|
||
open: '', // svg字符串
|
||
close: ''
|
||
},
|
||
// 处理收起节点数量
|
||
expandBtnNumHandler: num => {
|
||
return num
|
||
},
|
||
// 是否显示带数量的收起按钮
|
||
isShowExpandNum: true,
|
||
// 是否只有当鼠标在画布内才响应快捷键事件
|
||
enableShortcutOnlyWhenMouseInSvg: true,
|
||
// 初始根节点的位置
|
||
initRootNodePosition: null,
|
||
// 导出png、svg、pdf时的图形内边距，注意是单侧内边距
|
||
exportPaddingX: 10,
|
||
exportPaddingY: 10,
|
||
// 节点文本编辑框的z-index
|
||
nodeTextEditZIndex: 3000,
|
||
// 节点备注浮层的z-index
|
||
nodeNoteTooltipZIndex: 3000,
|
||
// 是否在点击了画布外的区域时结束节点文本的编辑状态
|
||
isEndNodeTextEditOnClickOuter: true,
|
||
// 最大历史记录数
|
||
maxHistoryCount: 1000,
|
||
// 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
|
||
alwaysShowExpandBtn: false,
|
||
// 扩展节点可插入的图标
|
||
iconList: [
|
||
// {
|
||
// name: '',// 分组名称
|
||
// type: '',// 分组的值
|
||
// list: [// 分组下的图标列表
|
||
// {
|
||
// name: '',// 图标名称
|
||
// icon:''// 图标，可以传svg或图片
|
||
// }
|
||
// ]
|
||
// }
|
||
],
|
||
// 节点最大缓存数量
|
||
maxNodeCacheCount: 1000,
|
||
// 关联线默认文字
|
||
defaultAssociativeLineText: '关联',
|
||
// 思维导图适应画布大小时的内边距
|
||
fitPadding: 50,
|
||
// 是否开启按住ctrl键多选节点功能
|
||
enableCtrlKeyNodeSelection: true,
|
||
// 设置为左键多选节点，右键拖动画布
|
||
useLeftKeySelectionRightKeyDrag: false,
|
||
// 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例
|
||
beforeTextEdit: null,
|
||
// 是否开启自定义节点内容
|
||
isUseCustomNodeContent: false,
|
||
// 自定义返回节点内容的方法
|
||
customCreateNodeContent: null,
|
||
// 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下
|
||
customInnerElsAppendTo: null,
|
||
// 拖拽元素时，指示元素新位置的块的最大高度
|
||
nodeDragPlaceholderMaxSize: 20,
|
||
// 是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式
|
||
// 开启该特性后，需要给你的输入框绑定keydown事件，并禁止冒泡
|
||
enableAutoEnterTextEditWhenKeydown: false,
|
||
// 设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果
|
||
// 需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果
|
||
richTextEditFakeInPlace: false,
|
||
// 自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片，默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据，如果你想处理其他思维导图的数据，比如processon、zhixi等，那么可以传递一个函数，接受当前剪贴板中的文本为参数，返回处理后的数据，可以返回两种类型：
|
||
/*
|
||
1.返回一个纯文本，那么会直接以该文本创建一个子节点
|
||
|
||
2.返回一个节点对象，格式如下：
|
||
{
|
||
// 代表是simple-mind-map格式的数据
|
||
simpleMindMap: true,
|
||
// 节点数据，同simple-mind-map节点数据格式
|
||
data: {
|
||
data: {
|
||
text: ''
|
||
},
|
||
children: []
|
||
}
|
||
}
|
||
*/
|
||
// 如果你的处理逻辑存在异步逻辑，也可以返回一个promise
|
||
customHandleClipboardText: null,
|
||
// 禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放
|
||
disableMouseWheelZoom: false,
|
||
// 禁止双指缩放，你仍旧可以使用api进行缩放
|
||
// 需要注册TouchEvent插件后生效
|
||
disableTouchZoom: false,
|
||
// 错误处理函数
|
||
errorHandler: (code, error) => {
|
||
console.error(code, error)
|
||
},
|
||
// 设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖
|
||
// 如果不覆盖，会发生偏移问题
|
||
resetCss: `
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
`,
|
||
// 是否在鼠标双击时回到根节点，也就是让根节点居中显示
|
||
enableDblclickBackToRootNode: false,
|
||
// 导出图片时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值
|
||
minExportImgCanvasScale: 2,
|
||
// 节点鼠标hover和激活时显示的矩形边框的颜色
|
||
hoverRectColor: 'rgb(94, 200, 248)',
|
||
// 节点鼠标hover和激活时显示的矩形边框距节点内容的距离
|
||
hoverRectPadding: 2,
|
||
// 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中
|
||
selectTextOnEnterEditText: false,
|
||
// 删除节点后激活相邻节点
|
||
deleteNodeActive: true,
|
||
// 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动
|
||
autoMoveWhenMouseInEdgeOnDrag: true,
|
||
// 是否首次加载fit view
|
||
fit: false,
|
||
// 拖拽多个节点时随鼠标移动的示意矩形的样式配置
|
||
dragMultiNodeRectConfig: {
|
||
width: 40,
|
||
height: 20,
|
||
fill: '' // 填充颜色，如果不传默认使用连线的颜色
|
||
},
|
||
// 节点拖拽时新位置的示意矩形的填充颜色，如果不传默认使用连线的颜色
|
||
dragPlaceholderRectFill: '',
|
||
// 节点拖拽时的透明度配置
|
||
dragOpacityConfig: {
|
||
cloneNodeOpacity: 0.5, // 跟随鼠标移动的克隆节点或矩形的透明度
|
||
beingDragNodeOpacity: 0.3 // 被拖拽节点的透明度
|
||
},
|
||
// 自定义标签的颜色
|
||
// {pass: 'green, unpass: 'red'}
|
||
tagsColorMap: {},
|
||
// 节点协作样式配置
|
||
cooperateStyle: {
|
||
avatarSize: 22, // 头像大小
|
||
fontSize: 12 // 如果是文字头像，那么文字的大小
|
||
},
|
||
// 关联线是否始终显示在节点上层
|
||
// false：即创建关联线和激活关联线时处于最顶层，其他情况下处于节点下方
|
||
associativeLineIsAlwaysAboveNode: true,
|
||
// 插入概要的默认文本
|
||
defaultGeneralizationText: '概要',
|
||
// 粘贴文本的方式创建新节点时，控制是否按换行自动分割节点，即如果存在换行，那么会根据换行创建多个节点，否则只会创建一个节点
|
||
// 可以传递一个函数，返回promise，resolve代表根据换行分割，reject代表忽略换行
|
||
handleIsSplitByWrapOnPasteCreateNewNode: null,
|
||
// 多少时间内只允许添加一次历史记录，避免添加没有必要的中间状态，单位：ms
|
||
addHistoryTime: 100,
|
||
// 是否禁止拖动画布
|
||
isDisableDrag: false,
|
||
// 鼠标移入概要高亮所属节点时的高亮框样式
|
||
highlightNodeBoxStyle: {
|
||
stroke: 'rgb(94, 200, 248)',
|
||
fill: 'transparent'
|
||
},
|
||
// 创建新节点时的行为
|
||
/*
|
||
DEFAULT ：默认会激活新创建的节点，并且进入编辑模式。如果同时创建了多个新节点，那么只会激活而不会进入编辑模式
|
||
NOT_ACTIVE : 不激活新创建的节点
|
||
ACTIVE_ONLY : 只激活新创建的节点，不进入编辑模式
|
||
*/
|
||
createNewNodeBehavior: CONSTANTS.CREATE_NEW_NODE_BEHAVIOR.DEFAULT,
|
||
// 当节点图片加载失败时显示的默认图片
|
||
defaultNodeImage: ''
|
||
}
|