import { v4 as uuidv4 } from 'uuid'
import {
nodeDataNoStylePropList,
selfCloseTagList
} from '../constants/constant'
import MersenneTwister from './mersenneTwister'
// 深度优先遍历树
export const walk = (
root,
parent,
beforeCallback,
afterCallback,
isRoot,
layerIndex = 0,
index = 0
) => {
let stop = false
if (beforeCallback) {
stop = beforeCallback(root, parent, isRoot, layerIndex, index)
}
if (!stop && root.children && root.children.length > 0) {
let _layerIndex = layerIndex + 1
root.children.forEach((node, nodeIndex) => {
walk(
node,
root,
beforeCallback,
afterCallback,
false,
_layerIndex,
nodeIndex
)
})
}
afterCallback && afterCallback(root, parent, isRoot, layerIndex, index)
}
// 广度优先遍历树
export const bfsWalk = (root, callback) => {
let stack = [root]
let isStop = false
if (callback(root, null) === 'stop') {
isStop = true
}
while (stack.length) {
if (isStop) {
break
}
let cur = stack.shift()
if (cur.children && cur.children.length) {
cur.children.forEach(item => {
if (isStop) return
stack.push(item)
if (callback(item, cur) === 'stop') {
isStop = true
}
})
}
}
}
// 按原比例缩放图片
export const resizeImgSizeByOriginRatio = (
width,
height,
newWidth,
newHeight
) => {
let arr = []
let nRatio = width / height
let mRatio = newWidth / newHeight
if (nRatio > mRatio) {
// 固定高度
arr = [nRatio * newHeight, newHeight]
} else {
// 固定宽度
arr = [newWidth, newWidth / nRatio]
}
return arr
}
// 缩放图片尺寸
export const resizeImgSize = (width, height, maxWidth, maxHeight) => {
let nRatio = width / height
let arr = []
if (maxWidth && maxHeight) {
if (width <= maxWidth && height <= maxHeight) {
arr = [width, height]
} else {
let mRatio = maxWidth / maxHeight
if (nRatio > mRatio) {
// 固定高度
arr = [nRatio * maxHeight, maxHeight]
} else {
// 固定宽度
arr = [maxWidth, maxWidth / nRatio]
}
}
} else if (maxWidth) {
if (width <= maxWidth) {
arr = [width, height]
} else {
arr = [maxWidth, maxWidth / nRatio]
}
} else if (maxHeight) {
if (height <= maxHeight) {
arr = [width, height]
} else {
arr = [nRatio * maxHeight, maxHeight]
}
}
return arr
}
// 缩放图片
export const resizeImg = (imgUrl, maxWidth, maxHeight) => {
return new Promise((resolve, reject) => {
let img = new Image()
img.src = imgUrl
img.onload = () => {
let arr = resizeImgSize(
img.naturalWidth,
img.naturalHeight,
maxWidth,
maxHeight
)
resolve(arr)
}
img.onerror = e => {
reject(e)
}
})
}
// 从头html结构字符串里获取带换行符的字符串
export const getStrWithBrFromHtml = str => {
str = str.replace(/
/gim, '\n')
let el = document.createElement('div')
el.innerHTML = str
str = el.textContent
return str
}
// 极简的深拷贝
export const simpleDeepClone = data => {
try {
return JSON.parse(JSON.stringify(data))
} catch (error) {
return null
}
}
// 复制渲染树数据
export const copyRenderTree = (tree, root, removeActiveState = false) => {
tree.data = simpleDeepClone(root.data)
if (removeActiveState) {
tree.data.isActive = false
if (tree.data.generalization) {
tree.data.generalization.isActive = false
}
}
tree.children = []
if (root.children && root.children.length > 0) {
root.children.forEach((item, index) => {
tree.children[index] = copyRenderTree({}, item, removeActiveState)
})
}
return tree
}
// 复制节点树数据
export const copyNodeTree = (
tree,
root,
removeActiveState = false,
removeId = true
) => {
tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data)
// 移除节点uid
if (removeId) {
delete tree.data.uid
} else if (!tree.data.uid) {
// 否则保留或生成
tree.data.uid = createUid()
}
if (removeActiveState) {
tree.data.isActive = false
}
tree.children = []
if (root.children && root.children.length > 0) {
root.children.forEach((item, index) => {
tree.children[index] = copyNodeTree({}, item, removeActiveState, removeId)
})
} else if (
root.nodeData &&
root.nodeData.children &&
root.nodeData.children.length > 0
) {
root.nodeData.children.forEach((item, index) => {
tree.children[index] = copyNodeTree({}, item, removeActiveState, removeId)
})
}
return tree
}
// 图片转成dataURL
export const imgToDataUrl = src => {
return new Promise((resolve, reject) => {
const img = new Image()
// 跨域图片需要添加这个属性,否则画布被污染了无法导出图片
img.setAttribute('crossOrigin', 'anonymous')
img.onload = () => {
try {
let canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
let ctx = canvas.getContext('2d')
// 图片绘制到canvas里
ctx.drawImage(img, 0, 0, img.width, img.height)
resolve(canvas.toDataURL())
} catch (e) {
reject(e)
}
}
img.onerror = e => {
reject(e)
}
img.src = src
})
}
// 解析dataUrl
export const parseDataUrl = data => {
if (!/^data:/.test(data)) return data
let [typeStr, base64] = data.split(',')
let res = /^data:[^/]+\/([^;]+);/.exec(typeStr)
let type = res[1]
return {
type,
base64
}
}
// 下载文件
export const downloadFile = (file, fileName) => {
let a = document.createElement('a')
a.href = file
a.download = fileName
a.click()
}
// 节流函数
export const throttle = (fn, time = 300, ctx) => {
let timer = null
return (...args) => {
if (timer) {
return
}
timer = setTimeout(() => {
fn.call(ctx, ...args)
timer = null
}, time)
}
}
// 异步执行任务队列
export const asyncRun = (taskList, callback = () => {}) => {
let index = 0
let len = taskList.length
if (len <= 0) {
return callback()
}
let loop = () => {
if (index >= len) {
callback()
return
}
taskList[index]()
setTimeout(() => {
index++
loop()
}, 0)
}
loop()
}
// 角度转弧度
export const degToRad = deg => {
return deg * (Math.PI / 180)
}
// 驼峰转连字符
export const camelCaseToHyphen = str => {
return str.replace(/([a-z])([A-Z])/g, (...args) => {
return args[1] + '-' + args[2].toLowerCase()
})
}
//计算节点的文本长宽
let measureTextContext = null
export const measureText = (text, { italic, bold, fontSize, fontFamily }) => {
const font = joinFontStr({
italic,
bold,
fontSize,
fontFamily
})
if (!measureTextContext) {
const canvas = document.createElement('canvas')
measureTextContext = canvas.getContext('2d')
}
measureTextContext.save()
measureTextContext.font = font
const { width, actualBoundingBoxAscent, actualBoundingBoxDescent } =
measureTextContext.measureText(text)
measureTextContext.restore()
const height = actualBoundingBoxAscent + actualBoundingBoxDescent
return { width, height }
}
// 拼接font字符串
export const joinFontStr = ({ italic, bold, fontSize, fontFamily }) => {
return `${italic ? 'italic ' : ''} ${
bold ? 'bold ' : ''
} ${fontSize}px ${fontFamily} `
}
// 在下一个事件循环里执行任务
export const nextTick = function (fn, ctx) {
let pending = false
let timerFunc = null
let handle = () => {
pending = false
ctx ? fn.call(ctx) : fn()
}
// 支持MutationObserver接口的话使用MutationObserver
if (typeof MutationObserver !== 'undefined') {
let counter = 1
let observer = new MutationObserver(handle)
let textNode = document.createTextNode(counter)
observer.observe(textNode, {
characterData: true // 设为 true 表示监视指定目标节点或子节点树中节点所包含的字符数据的变化
})
timerFunc = function () {
counter = (counter + 1) % 2 // counter会在0和1两者循环变化
textNode.data = counter // 节点变化会触发回调handle,
}
} else {
// 否则使用定时器
timerFunc = setTimeout
}
return function () {
if (pending) return
pending = true
timerFunc(handle, 0)
}
}
// 检查节点是否超出画布
export const checkNodeOuter = (mindMap, node) => {
let elRect = mindMap.elRect
let { scaleX, scaleY, translateX, translateY } = mindMap.draw.transform()
let { left, top, width, height } = node
let right = (left + width) * scaleX + translateX
let bottom = (top + height) * scaleY + translateY
left = left * scaleX + translateX
top = top * scaleY + translateY
let offsetLeft = 0
let offsetTop = 0
if (left < 0) {
offsetLeft = -left
}
if (right > elRect.width) {
offsetLeft = -(right - elRect.width)
}
if (top < 0) {
offsetTop = -top
}
if (bottom > elRect.height) {
offsetTop = -(bottom - elRect.height)
}
return {
isOuter: offsetLeft !== 0 || offsetTop !== 0,
offsetLeft,
offsetTop
}
}
// 提取html字符串里的纯文本
let getTextFromHtmlEl = null
export const getTextFromHtml = html => {
if (!getTextFromHtmlEl) {
getTextFromHtmlEl = document.createElement('div')
}
getTextFromHtmlEl.innerHTML = html
return getTextFromHtmlEl.textContent
}
// 将blob转成data:url
export const readBlob = blob => {
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.onload = evt => {
resolve(evt.target.result)
}
reader.onerror = err => {
reject(err)
}
reader.readAsDataURL(blob)
})
}
// 将dom节点转换成html字符串
let nodeToHTMLWrapEl = null
export const nodeToHTML = node => {
if (!nodeToHTMLWrapEl) {
nodeToHTMLWrapEl = document.createElement('div')
}
nodeToHTMLWrapEl.innerHTML = ''
nodeToHTMLWrapEl.appendChild(node)
return nodeToHTMLWrapEl.innerHTML
}
// 获取图片大小
export const getImageSize = src => {
return new Promise(resolve => {
let img = new Image()
img.src = src
img.onload = () => {
resolve({
width: img.width,
height: img.height
})
}
img.onerror = () => {
resolve({
width: 0,
height: 0
})
}
})
}
// 创建节点唯一的id
export const createUid = () => {
return uuidv4()
}
// 加载图片文件
export const loadImage = imgFile => {
return new Promise((resolve, reject) => {
let fr = new FileReader()
fr.readAsDataURL(imgFile)
fr.onload = async e => {
let url = e.target.result
let size = await getImageSize(url)
resolve({
url,
size
})
}
fr.onerror = error => {
reject(error)
}
})
}
// 移除字符串中的html实体
export const removeHTMLEntities = str => {
;[[' ', ' ']].forEach(item => {
str = str.replaceAll(item[0], item[1])
})
return str
}
// 获取一个数据的类型
export const getType = data => {
return Object.prototype.toString.call(data).slice(8, -1)
}
// 判断一个数据是否是null和undefined和空字符串
export const isUndef = data => {
return data === null || data === undefined || data === ''
}
// 移除html字符串中节点的内联样式
export const removeHtmlStyle = html => {
return html.replaceAll(/(<[^\s]+)\s+style=["'][^'"]+["']\s*(>)/g, '$1$2')
}
// 给html标签中指定的标签添加内联样式
export const addHtmlStyle = (html, tag, style) => {
const reg = new RegExp(`(<${tag}[^>]*)(>[^<>]*${tag}>)`, 'g')
return html.replaceAll(reg, `$1 style="${style}"$2`)
}
// 检查一个字符串是否是富文本字符
let checkIsRichTextEl = null
export const checkIsRichText = str => {
if (!checkIsRichTextEl) {
checkIsRichTextEl = document.createElement('div')
}
checkIsRichTextEl.innerHTML = str
for (let c = checkIsRichTextEl.childNodes, i = c.length; i--; ) {
if (c[i].nodeType == 1) return true
}
return false
}
// 搜索和替换html字符串中指定的文本
let replaceHtmlTextEl = null
export const replaceHtmlText = (html, searchText, replaceText) => {
if (!replaceHtmlTextEl) {
replaceHtmlTextEl = document.createElement('div')
}
replaceHtmlTextEl.innerHTML = html
let walk = root => {
let childNodes = root.childNodes
childNodes.forEach(node => {
if (node.nodeType === 1) {
// 元素节点
walk(node)
} else if (node.nodeType === 3) {
// 文本节点
root.replaceChild(
document.createTextNode(
node.nodeValue.replaceAll(searchText, replaceText)
),
node
)
}
})
}
walk(replaceHtmlTextEl)
return replaceHtmlTextEl.innerHTML
}
// 判断一个颜色是否是白色
export const isWhite = color => {
color = String(color).replaceAll(/\s+/g, '')
return (
['#fff', '#ffffff', '#FFF', '#FFFFFF', 'rgb(255,255,255)'].includes(
color
) || /rgba\(255,255,255,[^)]+\)/.test(color)
)
}
// 判断一个颜色是否是透明
export const isTransparent = color => {
color = String(color).replaceAll(/\s+/g, '')
return (
['', 'transparent'].includes(color) || /rgba\(\d+,\d+,\d+,0\)/.test(color)
)
}
// 从当前主题里获取一个非透明非白色的颜色
export const getVisibleColorFromTheme = themeConfig => {
let { lineColor, root, second, node } = themeConfig
let list = [
lineColor,
root.fillColor,
root.color,
second.fillColor,
second.color,
node.fillColor,
node.color,
root.borderColor,
second.borderColor,
node.borderColor
]
for (let i = 0; i < list.length; i++) {
let color = list[i]
if (!isTransparent(color) && !isWhite(color)) {
return color
}
}
}
// 去掉DOM节点中的公式标签
export const removeFormulaTags = node => {
const walk = root => {
const childNodes = root.childNodes
childNodes.forEach(node => {
if (node.nodeType === 1) {
if (node.classList.contains('ql-formula')) {
node.parentNode.removeChild(node)
} else {
walk(node)
}
}
})
}
walk(node)
}
// 将
形式的节点富文本内容转换成\n换行的文本
// 会过滤掉节点中的格式节点
let nodeRichTextToTextWithWrapEl = null
export const nodeRichTextToTextWithWrap = html => {
if (!nodeRichTextToTextWithWrapEl) {
nodeRichTextToTextWithWrapEl = document.createElement('div')
}
nodeRichTextToTextWithWrapEl.innerHTML = html
const childNodes = nodeRichTextToTextWithWrapEl.childNodes
let res = ''
for (let i = 0; i < childNodes.length; i++) {
const node = childNodes[i]
if (node.nodeType === 1) {
// 元素节点
removeFormulaTags(node)
if (node.tagName.toLowerCase() === 'p') {
res += node.textContent + '\n'
} else {
res += node.textContent
}
} else if (node.nodeType === 3) {
// 文本节点
res += node.nodeValue
}
}
return res.replace(/\n$/, '')
}
// 将
换行的文本转换成
形式的节点富文本内容 let textToNodeRichTextWithWrapEl = null export const textToNodeRichTextWithWrap = html => { if (!textToNodeRichTextWithWrapEl) { textToNodeRichTextWithWrapEl = document.createElement('div') } textToNodeRichTextWithWrapEl.innerHTML = html const childNodes = textToNodeRichTextWithWrapEl.childNodes let list = [] let str = '' for (let i = 0; i < childNodes.length; i++) { const node = childNodes[i] if (node.nodeType === 1) { // 元素节点 if (node.tagName.toLowerCase() === 'br') { list.push(str) str = '' } else { str += node.textContent } } else if (node.nodeType === 3) { // 文本节点 str += node.nodeValue } } if (str) { list.push(str) } return list .map(item => { return `
${htmlEscape(item)}
` }) .join('') } // 判断是否是移动端环境 export const isMobile = () => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) } // 获取对象改变了的的属性 export const getObjectChangedProps = (oldObject, newObject) => { const res = {} Object.keys(newObject).forEach(prop => { const oldVal = oldObject[prop] const newVal = newObject[prop] if (getType(oldVal) !== getType(newVal)) { res[prop] = newVal return } if (getType(oldVal) === 'Object') { if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) { res[prop] = newVal return } } else { if (oldVal !== newVal) { res[prop] = newVal return } } }) return res } // 判断一个字段是否是节点数据中的样式字段 export const checkIsNodeStyleDataKey = key => { // 用户自定义字段 if (/^_/.test(key)) return false // 不在节点非样式字段列表里,那么就是样式字段 if (!nodeDataNoStylePropList.includes(key)) { return true } return false } // 合并图标数组 // const data = [ // { type: 'priority', name: '优先级图标', list: [{ name: '1', icon: 'a' }, { name: 2, icon: 'b' }] }, // { type: 'priority', name: '优先级图标', list: [{ name: '2', icon: 'c' }, { name: 3, icon: 'd' }] }, // ]; // mergerIconList(data) 结果 // [ // { type: 'priority', name: '优先级图标', list: [{ name: '1', icon: 'a' }, { name: 2, icon: 'c' }, { name: 3, icon: 'd' }] }, // ] export const mergerIconList = list => { return list.reduce((result, item) => { const existingItem = result.find(x => x.type === item.type) if (existingItem) { item.list.forEach(newObj => { const existingObj = existingItem.list.find(x => x.name === newObj.name) if (existingObj) { existingObj.icon = newObj.icon } else { existingItem.list.push(newObj) } }) } else { result.push({ ...item }) } return result }, []) } // 从节点实例列表里找出顶层的节点 export const getTopAncestorsFomNodeList = list => { let res = [] list.forEach(node => { if ( !list.find(item => { return item.uid !== node.uid && item.isAncestor(node) }) ) { res.push(node) } }) return res } // 从给定的节点实例列表里判断是否存在上下级关系 export const checkHasSupSubRelation = list => { for (let i = 0; i < list.length; i++) { const cur = list[i] if ( list.find(item => { return item.uid !== cur.uid && cur.isAncestor(item) }) ) { return true } } return false } // 解析要添加概要的节点实例列表 export const parseAddGeneralizationNodeList = list => { const cache = {} const uidToParent = {} list.forEach(node => { const parent = node.parent if (parent) { const pUid = parent.uid uidToParent[pUid] = parent const index = node.getIndexInBrothers() const data = { node, index } if (cache[pUid]) { if ( !cache[pUid].find(item => { return item.index === data.index }) ) { cache[pUid].push(data) } } else { cache[pUid] = [data] } } }) const res = [] Object.keys(cache).forEach(uid => { if (cache[uid].length > 1) { const rangeList = cache[uid] .map(item => { return item.index }) .sort((a, b) => { return a - b }) res.push({ node: uidToParent[uid], range: [rangeList[0], rangeList[rangeList.length - 1]] }) } else { res.push({ node: cache[uid][0].node }) } }) return res } // 判断两个矩形是否重叠 export const checkTwoRectIsOverlap = ( minx1, maxx1, miny1, maxy1, minx2, maxx2, miny2, maxy2 ) => { return maxx1 > minx2 && maxx2 > minx1 && maxy1 > miny2 && maxy2 > miny1 } // 聚焦指定输入框 export const focusInput = el => { let selection = window.getSelection() let range = document.createRange() range.selectNodeContents(el) range.collapse() selection.removeAllRanges() selection.addRange(range) } // 聚焦全选指定输入框 export const selectAllInput = el => { let selection = window.getSelection() let range = document.createRange() range.selectNodeContents(el) selection.removeAllRanges() selection.addRange(range) } // 给指定的节点列表树数据添加附加数据,会修改原数据 export const addDataToAppointNodes = (appointNodes, data = {}) => { const walk = list => { list.forEach(node => { node.data = { ...node.data, ...data } if (node.children && node.children.length > 0) { walk(node.children) } }) } walk(appointNodes) return appointNodes } // 给指定的节点列表树数据添加uid,会修改原数据 // createNewId默认为false,即如果节点不存在uid的话,会创建新的uid。如果传true,那么无论节点数据原来是否存在uid,都会创建新的uid export const createUidForAppointNodes = (appointNodes, createNewId = false) => { const walk = list => { list.forEach(node => { if (!node.data) { node.data = {} } if (createNewId || isUndef(node.data.uid)) { node.data.uid = createUid() } if (node.children && node.children.length > 0) { walk(node.children) } }) } walk(appointNodes) return appointNodes } // 传入一个数据,如果该数据是数组,那么返回该数组,否则返回一个以该数据为成员的数组 export const formatDataToArray = data => { if (!data) return [] return Array.isArray(data) ? data : [data] } // 获取节点在同级里的位置索引 export const getNodeDataIndex = node => { return node.parent ? node.parent.nodeData.children.findIndex(item => { return item.data.uid === node.uid }) : 0 } // 从一个节点列表里找出某个节点的索引 export const getNodeIndexInNodeList = (node, nodeList) => { return nodeList.findIndex(item => { return item.uid === node.uid }) } // 根据内容生成颜色 export const generateColorByContent = str => { let hash = 0 for (let i = 0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 5) - hash) } // 这里使用伪随机数的原因是因为 // 1. 如果字符串的内容差不多,根据hash生产的颜色就比较相近,不好区分,比如v1.1 v1.2,所以需要加入随机数来使得颜色能够区分开 // 2. 普通的随机数每次数值不一样,就会导致每次新增标签原来的标签颜色就会发生改变,所以加入了这个方法,使得内容不变随机数也不变 const rng = new MersenneTwister(hash) const h = rng.genrand_int32() % 360 return 'hsla(' + h + ', 50%, 50%, 1)' } // html转义 export const htmlEscape = str => { ;[ ['&', '&'], ['<', '<'], ['>', '>'] ].forEach(item => { str = str.replace(new RegExp(item[0], 'g'), item[1]) }) return str } // 判断两个对象是否相同,只处理对象或数组 export const isSameObject = (a, b) => { const type = getType(a) // a、b类型不一致,那么肯定不相同 if (type !== getType(b)) return false // 如果都是对象 if (type === 'Object') { const keysa = Object.keys(a) const keysb = Object.keys(b) // 对象字段数量不一样,肯定不相同 if (keysa.length !== keysb.length) return false // 字段数量一样,那么需要遍历字段进行判断 for (let i = 0; i < keysa.length; i++) { const key = keysa[i] // b没有a的一个字段,那么肯定不相同 if (!keysb.includes(key)) return false // 字段名称一样,那么需要递归判断它们的值 const isSame = isSameObject(a[key], b[key]) if (!isSame) { return false } } return true } else if (type === 'Array') { // 如果都是数组 // 数组长度不一样,肯定不相同 if (a.length !== b.length) return false // 长度一样,那么需要遍历进行判断 for (let i = 0; i < a.length; i++) { const itema = a[i] const itemb = b[i] const typea = getType(itema) const typeb = getType(itemb) if (typea !== typeb) return false const isSame = isSameObject(itema, itemb) if (!isSame) { return false } } return true } else { // 其他类型,直接全等判断 return a === b } } // 将数据设置到用户剪切板中 export const setDataToClipboard = data => { if (navigator.clipboard) { navigator.clipboard.writeText(JSON.stringify(data)) } } // 从用户剪贴板中读取文字和图片 export const getDataFromClipboard = async () => { let text = null let img = null if (navigator.clipboard) { text = await navigator.clipboard.readText() const items = await navigator.clipboard.read() if (items && items.length > 0) { for (const clipboardItem of items) { for (const type of clipboardItem.types) { if (/^image\//.test(type)) { img = await clipboardItem.getType(type) break } } } } } return { text, img } } // 从节点的父节点的nodeData.children列表中移除该节点的数据 export const removeFromParentNodeData = node => { if (!node || !node.parent) return const index = getNodeDataIndex(node) if (index === -1) return node.parent.nodeData.children.splice(index, 1) } // 给html自闭合标签添加闭合状态 export const handleSelfCloseTags = str => { selfCloseTagList.forEach(tagName => { str = str.replaceAll( new RegExp(`<${tagName}([^>]*)>`, 'g'), `<${tagName} $1 />` ) }) return str } // 检查两个节点列表是否包含的节点是一样的 export const checkNodeListIsEqual = (list1, list2) => { if (list1.length !== list2.length) return false for (let i = 0; i < list1.length; i++) { if ( !list2.find(item => { return item.uid === list1[i].uid }) ) { return false } } return true } // 获取浏览器的chrome内核版本 export const getChromeVersion = () => { const match = navigator.userAgent.match(/\s+Chrome\/(.*)\s+/) if (match && match[1]) { return Number.parseFloat(match[1]) } return '' } // 创建smm粘贴的粘贴数据 export const createSmmFormatData = data => { return { simpleMindMap: true, data } } // 检查是否是smm粘贴格式的数据 export const checkSmmFormatData = data => { let smmData = null // 如果是字符串,则尝试解析为对象 if (typeof data === 'string') { try { const parsedData = JSON.parse(data) // 判断是否是对象,且存在属性标志 if (typeof parsedData === 'object' && parsedData.simpleMindMap) { smmData = parsedData.data } } catch (error) {} } else if (typeof data === 'object' && data.simpleMindMap) { // 否则如果是对象,则检查属性标志 smmData = data.data } const isSmm = !!smmData return { isSmm, data: isSmm ? smmData : String(data) } } // 处理输入框的粘贴事件,会去除文本的html格式、换行 export const handleInputPasteText = (e, text) => { e.preventDefault() const selection = window.getSelection() if (!selection.rangeCount) return selection.deleteFromDocument() text = text || e.clipboardData.getData('text') // 去除格式 text = getTextFromHtml(text) // 去除换行 text = text.replaceAll(/\n/g, '') const node = document.createTextNode(text) selection.getRangeAt(0).insertNode(node) selection.collapseToEnd() } // 将思维导图树结构转平级对象 /* { data: { uid: 'xxx' }, children: [ { data: { uid: 'xxx' }, children: [] } ] } 转为: { uid: { children: [uid1, uid2], data: {} } } */ export const transformTreeDataToObject = data => { const res = {} const walk = (root, parent) => { const uid = root.data.uid if (parent) { parent.children.push(uid) } res[uid] = { isRoot: !parent, data: { ...root.data }, children: [] } if (root.children && root.children.length > 0) { root.children.forEach(item => { walk(item, res[uid]) }) } } walk(data, null) return res } // 将平级对象转树结构 // transformTreeDataToObject方法的反向操作 // 找到父节点的uid const _findParentUid = (data, targetUid) => { const uids = Object.keys(data) let res = '' uids.forEach(uid => { const children = data[uid].children const isParent = children.findIndex(childUid => { return childUid === targetUid }) !== -1 if (isParent) { res = uid } }) return res } export const transformObjectToTreeData = data => { const uids = Object.keys(data) if (uids.length <= 0) return null const rootKey = uids.find(uid => { return data[uid].isRoot }) if (!rootKey || !data[rootKey]) return null // 根节点 const res = { data: simpleDeepClone(data[rootKey].data), children: [] } const map = {} map[rootKey] = res uids.forEach(uid => { const parentUid = _findParentUid(data, uid) const cur = data[uid] const node = map[uid] || { data: simpleDeepClone(cur.data), children: [] } if (!map[uid]) { map[uid] = node } if (parentUid) { const index = data[parentUid].children.findIndex(item => { return item === uid }) if (!map[parentUid]) { map[parentUid] = { data: simpleDeepClone(data[parentUid].data), children: [] } } map[parentUid].children[index] = node } }) return res } // 计算两个点的直线距离 export const getTwoPointDistance = (x1, y1, x2, y2) => { return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) } // 判断两个矩形的相对位置 // 第一个矩形在第二个矩形的什么方向 export const getRectRelativePosition = (rect1, rect2) => { // 获取第一个矩形的中心点坐标 const rect1CenterX = rect1.x + rect1.width / 2 const rect1CenterY = rect1.y + rect1.height / 2 // 获取第二个矩形的中心点坐标 const rect2CenterX = rect2.x + rect2.width / 2 const rect2CenterY = rect2.y + rect2.height / 2 // 判断第一个矩形在第二个矩形的哪个方向 if (rect1CenterX < rect2CenterX && rect1CenterY < rect2CenterY) { return 'left-top' } else if (rect1CenterX > rect2CenterX && rect1CenterY < rect2CenterY) { return 'right-top' } else if (rect1CenterX > rect2CenterX && rect1CenterY > rect2CenterY) { return 'right-bottom' } else if (rect1CenterX < rect2CenterX && rect1CenterY > rect2CenterY) { return 'left-bottom' } else if (rect1CenterX < rect2CenterX && rect1CenterY === rect2CenterY) { return 'left' } else if (rect1CenterX > rect2CenterX && rect1CenterY === rect2CenterY) { return 'right' } else if (rect1CenterX === rect2CenterX && rect1CenterY < rect2CenterY) { return 'top' } else if (rect1CenterX === rect2CenterX && rect1CenterY > rect2CenterY) { return 'bottom' } else { return 'overlap' } }