mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-26 12:08:41 +08:00
Compare commits
6 Commits
0.5.5
...
0.5.5-fix.
| Author | SHA1 | Date | |
|---|---|---|---|
|
d08a317920 | ||
|
|
bd805836cd | ||
|
|
e804a8f2f7 | ||
|
|
8bf876d446 | ||
|
|
f2521f663e | ||
|
|
e676bff453 |
@@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.d16bc076.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.09a9e943.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.1ed9e72b.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.6deaeca5.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.54a22da0.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.35d98938.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.e6f73d7a.js" rel="prefetch"><link href="dist/js/chunk-2d0ac5dc.60cca854.js" rel="prefetch"><link href="dist/js/chunk-2d0afe0d.9d477efa.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.2ce2efbe.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.fa8a1448.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.c69acfc6.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.e5fb004d.js" rel="prefetch"><link href="dist/js/chunk-2d0b978a.f8cf18a3.js" rel="prefetch"><link href="dist/js/chunk-2d0b9b64.74778ebe.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.90c10c16.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.317837bd.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.c7eb53c0.js" rel="prefetch"><link href="dist/js/chunk-2d0c09f6.11d06ad8.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.c796f5a9.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.a76580c3.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.1c42b5f8.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.5aac283d.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.957de630.js" rel="prefetch"><link href="dist/js/chunk-2d0c4a65.cd9f2135.js" rel="prefetch"><link href="dist/js/chunk-2d0c5538.88c61b8a.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.84b9239b.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.7a02f652.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.48b95a81.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.015541ec.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.cee455b8.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.131fde2d.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.bbe358e7.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.c5497b45.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.30c25366.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.2f357c47.js" rel="prefetch"><link href="dist/js/chunk-2d0e4e1f.9e5366fb.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.0eca5330.js" rel="prefetch"><link href="dist/js/chunk-2d0e9726.cb0b7af1.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.9792465b.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.7b2165cb.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.488ecfcd.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.ded9201c.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.79752ab7.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.33633e99.js" rel="prefetch"><link href="dist/js/chunk-2d20ff53.5a293f49.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.07e1e1c8.js" rel="prefetch"><link href="dist/js/chunk-2d216004.7800d5f8.js" rel="prefetch"><link href="dist/js/chunk-2d216037.f55e8a4f.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.907f6f9c.js" rel="prefetch"><link href="dist/js/chunk-2d216642.9e7e4c69.js" rel="prefetch"><link href="dist/js/chunk-2d217907.325d840d.js" rel="prefetch"><link href="dist/js/chunk-2d221c76.8f8c1623.js" rel="prefetch"><link href="dist/js/chunk-2d2254a4.8ebe1825.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.0d16e8ba.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.c1a94e96.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.c772670d.js" rel="prefetch"><link href="dist/js/chunk-2d230098.5927b8ca.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.d701f22e.js" rel="prefetch"><link href="dist/js/chunk-2d2375fa.3667bfcc.js" rel="prefetch"><link href="dist/js/chunk-2d238428.b57532b8.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.83e1648b.js" rel="prefetch"><link href="dist/css/app.c2a500f4.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.a2c9b092.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.c2a500f4.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.a2c9b092.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.f65edb6a.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.c7fa9bf5.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.e29a252d.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.2bfca9df.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.b7704b45.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.6925b340.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.ea32d42a.js" rel="prefetch"><link href="dist/js/chunk-2d0ac5dc.6328bdad.js" rel="prefetch"><link href="dist/js/chunk-2d0afe0d.df309fec.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.5efa59de.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.dd0567e9.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.aff3d9d7.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.779a7c9f.js" rel="prefetch"><link href="dist/js/chunk-2d0b978a.643b5e0c.js" rel="prefetch"><link href="dist/js/chunk-2d0b9b64.2023b7db.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.3b19bbd9.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.a22b8498.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.4f4fc821.js" rel="prefetch"><link href="dist/js/chunk-2d0c09f6.ccaf9ac9.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.4d61ba72.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.a338b811.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.a1f7ae24.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.3da5865f.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.a91c8b79.js" rel="prefetch"><link href="dist/js/chunk-2d0c4a65.f8c26b0a.js" rel="prefetch"><link href="dist/js/chunk-2d0c5538.73405b11.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.d46ba4aa.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.a0b6048e.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.486a586c.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.c81a8c1b.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.75101c06.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.36adac2d.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.ec72c046.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.8d3deaef.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.d1820d54.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.c91835b5.js" rel="prefetch"><link href="dist/js/chunk-2d0e4e1f.b56f94a9.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.082813b9.js" rel="prefetch"><link href="dist/js/chunk-2d0e9726.2893feb2.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.e3d97f92.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.8d1f7924.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.fd3e917c.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.c86e7586.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.cbb3ec23.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.1d2eaf57.js" rel="prefetch"><link href="dist/js/chunk-2d20ff53.ca8f28f6.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.a401e8b2.js" rel="prefetch"><link href="dist/js/chunk-2d216004.fe306a0b.js" rel="prefetch"><link href="dist/js/chunk-2d216037.d65dbca3.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.bef96e4a.js" rel="prefetch"><link href="dist/js/chunk-2d216642.371f6182.js" rel="prefetch"><link href="dist/js/chunk-2d217907.de88650b.js" rel="prefetch"><link href="dist/js/chunk-2d221c76.a6011be0.js" rel="prefetch"><link href="dist/js/chunk-2d2254a4.ee67ab51.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.0796f66a.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.d02a02d0.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.e73454d0.js" rel="prefetch"><link href="dist/js/chunk-2d230098.bc74e114.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.0e3fe2c2.js" rel="prefetch"><link href="dist/js/chunk-2d2375fa.ca821568.js" rel="prefetch"><link href="dist/js/chunk-2d238428.e2cda95a.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.9385700d.js" rel="prefetch"><link href="dist/css/app.3d2c51aa.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.35c312a8.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.3d2c51aa.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.35c312a8.js"></script></body></html>
|
||||
@@ -281,6 +281,7 @@ class MindMap {
|
||||
layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
|
||||
}
|
||||
this.opt.layout = layout
|
||||
this.view.reset()
|
||||
this.renderer.setLayout()
|
||||
this.render()
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.5.5",
|
||||
"version": "0.5.5-fix.1",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@@ -17,7 +17,7 @@ class Select {
|
||||
|
||||
// 绑定事件
|
||||
bindEvent() {
|
||||
this.checkInNodes = throttle(this.checkInNodes, 500, this)
|
||||
this.checkInNodes = throttle(this.checkInNodes, 300, this)
|
||||
this.mindMap.on('mousedown', e => {
|
||||
if (this.mindMap.opt.readonly) {
|
||||
return
|
||||
@@ -146,22 +146,26 @@ class Select {
|
||||
let bottom = (top + height) * scaleY + translateY
|
||||
left = left * scaleX + translateX
|
||||
top = top * scaleY + translateY
|
||||
if (left >= minx && right <= maxx && top >= miny && bottom <= maxy) {
|
||||
this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
|
||||
if ((left >= minx && left <= maxx ||
|
||||
right >= minx && right <= maxx) &&
|
||||
(top >= miny && top <= maxy ||
|
||||
bottom >= miny && bottom <= maxy)
|
||||
) {
|
||||
// this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
|
||||
if (node.nodeData.data.isActive) {
|
||||
return
|
||||
}
|
||||
this.mindMap.renderer.setNodeActive(node, true)
|
||||
this.mindMap.renderer.addActiveNode(node)
|
||||
})
|
||||
// })
|
||||
} else if (node.nodeData.data.isActive) {
|
||||
this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
|
||||
// this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
|
||||
if (!node.nodeData.data.isActive) {
|
||||
return
|
||||
}
|
||||
this.mindMap.renderer.setNodeActive(node, false)
|
||||
this.mindMap.renderer.removeActiveNode(node)
|
||||
})
|
||||
// })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { getStrWithBrFromHtml } from './utils'
|
||||
import { getStrWithBrFromHtml, checkNodeOuter } from './utils'
|
||||
|
||||
// 节点文字编辑类
|
||||
export default class TextEdit {
|
||||
@@ -60,6 +60,8 @@ export default class TextEdit {
|
||||
|
||||
// 显示文本编辑框
|
||||
show(node) {
|
||||
let { offsetLeft, offsetTop } = checkNodeOuter(this.mindMap, node)
|
||||
this.mindMap.view.translateXY(offsetLeft, offsetTop)
|
||||
let rect = node._textData.node.node.getBoundingClientRect()
|
||||
if (this.mindMap.richText) {
|
||||
this.mindMap.richText.showEditText(node, rect)
|
||||
|
||||
@@ -124,6 +124,13 @@ class View {
|
||||
}
|
||||
}
|
||||
|
||||
// 平移x,y方向
|
||||
translateXY(x, y) {
|
||||
this.x += x
|
||||
this.y += y
|
||||
this.transform()
|
||||
}
|
||||
|
||||
// 平移x方向
|
||||
translateX(step) {
|
||||
this.x += step
|
||||
@@ -160,10 +167,14 @@ class View {
|
||||
|
||||
// 恢复
|
||||
reset() {
|
||||
let scaleChange = this.scale !== 1
|
||||
this.scale = 1
|
||||
this.x = 0
|
||||
this.y = 0
|
||||
this.transform()
|
||||
if (scaleChange) {
|
||||
this.mindMap.emit('scale', this.scale)
|
||||
}
|
||||
}
|
||||
|
||||
// 缩小
|
||||
|
||||
@@ -302,4 +302,34 @@ export const nextTick = function (fn, ctx) {
|
||||
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
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,11 @@
|
||||
# Changelog
|
||||
|
||||
## 0.5.5-fix.1
|
||||
|
||||
Fix: 1.Fix the issue where the edit box is also outside the canvas when editing nodes outside the canvas. 2.After modifying the structure, reset the transformation to prevent the problem of sudden position changes during the first drag after switching the structure during scaling.
|
||||
|
||||
optimization: 1.When multiple nodes are selected, as long as there is a cross between the node and the selection area, it is considered selected.
|
||||
|
||||
## 0.5.5
|
||||
|
||||
New: 1.Supports configuring the padding when exporting to PNG, SVG, or PDF. 2.Support the configuration of z-index for node text editing boxes and node comment floating layer elements. 3.Support clicking on areas outside the canvas to end node editing status.
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.5.5-fix.1</h2>
|
||||
<p>Fix: 1.Fix the issue where the edit box is also outside the canvas when editing nodes outside the canvas. 2.After modifying the structure, reset the transformation to prevent the problem of sudden position changes during the first drag after switching the structure during scaling.</p>
|
||||
<p>optimization: 1.When multiple nodes are selected, as long as there is a cross between the node and the selection area, it is considered selected.</p>
|
||||
<h2>0.5.5</h2>
|
||||
<p>New: 1.Supports configuring the padding when exporting to PNG, SVG, or PDF. 2.Support the configuration of z-index for node text editing boxes and node comment floating layer elements. 3.Support clicking on areas outside the canvas to end node editing status.</p>
|
||||
<h2>0.5.4</h2>
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
|
||||
新增：1.支持配置导出为png、svg、pdf时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的z-index。 3.支持点击画布外的区域结束节点编辑状态。
|
||||
|
||||
## 0.5.5-fix.1
|
||||
|
||||
修复：1.修复节点在画布外编辑时编辑框也在画布外的问题。 2.修改结构后复位变换，防止存在缩放时切换结构后第一次拖动时会发生位置突变的问题。
|
||||
|
||||
优化：1.节点多选时只要节点和选区存在交叉即认为被选中。
|
||||
|
||||
## 0.5.4
|
||||
|
||||
新增：1.添加新主题。 2.新增时间轴和鱼骨结构。
|
||||
|
||||
@@ -3,6 +3,9 @@
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.5.5</h2>
|
||||
<p>新增：1.支持配置导出为png、svg、pdf时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的z-index。 3.支持点击画布外的区域结束节点编辑状态。</p>
|
||||
<h2>0.5.5-fix.1</h2>
|
||||
<p>修复：1.修复节点在画布外编辑时编辑框也在画布外的问题。 2.修改结构后复位变换，防止存在缩放时切换结构后第一次拖动时会发生位置突变的问题。</p>
|
||||
<p>优化：1.节点多选时只要节点和选区存在交叉即认为被选中。</p>
|
||||
<h2>0.5.4</h2>
|
||||
<p>新增：1.添加新主题。 2.新增时间轴和鱼骨结构。</p>
|
||||
<p>修复：1.修复节点右键和画布右键的冲突问题。 2.修复组织结构图、目录组织图等节点拖拽时存在线段未隐藏的bug。</p>
|
||||
|
||||
@@ -277,6 +277,8 @@ export default {
|
||||
theme: theme.template,
|
||||
themeConfig: theme.config,
|
||||
viewData: view,
|
||||
nodeTextEditZIndex: 1000,
|
||||
nodeNoteTooltipZIndex: 1000,
|
||||
customNoteContentShow: {
|
||||
show: (content, left, top) => {
|
||||
this.$bus.$emit('showNoteContent', content, left, top)
|
||||
|
||||
Reference in New Issue
Block a user