diff --git a/README.md b/README.md index 689f0f4f..cc6c0df4 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ npm run build # 安装 -> 当前仓库版本：0.2.14，当前npm版本：0.2.14 +> 当前仓库版本：0.2.15，当前npm版本：0.2.15 ```bash npm i simple-mind-map @@ -205,30 +205,31 @@ v0.1.7+。切换模式为只读或编辑。 监听事件，事件列表： -| 事件名称 | 描述 | 回调参数 | -| ------------------------- | --------------------- | ----------------------------------------------------- | -| data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） | -| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发 | data（当前视图状态数据） | -| back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） | -| draw_click | *画布的单击事件* | e（事件对象） | -| svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） | -| mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） | -| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） | -| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） | -| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） | -| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） | -| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） | -| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） | -| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） | -| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） | -| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） | -| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） | -| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） | -| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） | -| expand_btn_click | 节点展开或收缩事件 | this（节点实例） | -| before_show_text_edit | 节点文本编辑框即将打开事件 | | -| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） | -| scale | 放大缩小事件 | scale（缩放比例） | +| 事件名称 | 描述 | 回调参数 | +| ----------------------------- | ------------------------------------------ | ------------------------------------------------------------ | +| data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） | +| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发 | data（当前视图状态数据） | +| back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） | +| draw_click | *画布的单击事件* | e（事件对象） | +| svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） | +| mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） | +| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） | +| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） | +| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） | +| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） | +| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） | +| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） | +| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） | +| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） | +| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） | +| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） | +| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） | +| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） | +| expand_btn_click | 节点展开或收缩事件 | this（节点实例） | +| before_show_text_edit | 节点文本编辑框即将打开事件 | | +| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） | +| scale | 放大缩小事件 | scale（缩放比例） | +| node_img_dblclick（v0.2.15+） | 节点内图片的双击事件 | this（节点实例）、e（事件对象） | #### emit(event, ...args) diff --git a/index.html b/index.html index 3cb789fb..c098abc8 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -一个简单的web思维导图实现
\ No newline at end of file +一个简单的web思维导图实现
\ No newline at end of file diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index 45251055..7d62b0ba 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.2.14", + "version": "0.2.15", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index fa143b23..b44501d7 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -367,6 +367,9 @@ class Node { if (this.nodeData.data.imageTitle) { node.attr('title', this.nodeData.data.imageTitle) } + node.on('dblclick', (e) => { + this.mindMap.emit('node_img_dblclick', this, e) + }) return { node, width: imgSize[0], diff --git a/web/package.json b/web/package.json index 1315a3b5..2316b00a 100644 --- a/web/package.json +++ b/web/package.json @@ -12,6 +12,7 @@ "@toast-ui/editor": "^3.1.5", "core-js": "^3.6.5", "element-ui": "^2.15.1", + "v-viewer": "^1.6.4", "vue": "^2.6.11", "vue-router": "^3.5.1", "vuex": "^3.6.2" diff --git a/web/src/main.js b/web/src/main.js index bbf920d2..749a4755 100644 --- a/web/src/main.js +++ b/web/src/main.js @@ -4,11 +4,14 @@ import router from './router' import store from './store' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' -import '@/assets/icon-font/iconfont.css'; +import '@/assets/icon-font/iconfont.css' +import 'viewerjs/dist/viewer.css' +import VueViewer from 'v-viewer' Vue.config.productionTip = false Vue.prototype.$bus = new Vue() Vue.use(ElementUI) +Vue.use(VueViewer) new Vue({ render: h => h(App), diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 3591b8de..a86aef79 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -12,6 +12,7 @@ + @@ -28,7 +29,8 @@ import ShortcutKey from './ShortcutKey' import Contextmenu from './Contextmenu' import NodeNoteContentShow from './NodeNoteContentShow.vue' import { getData, storeData, storeConfig } from '@/api' -import Navigator from './Navigator.vue'; +import Navigator from './Navigator.vue' +import NodeImgPreview from './NodeImgPreview.vue' /** * @Author: 王林 @@ -48,7 +50,8 @@ export default { ShortcutKey, Contextmenu, NodeNoteContentShow, - Navigator + Navigator, + NodeImgPreview }, data() { return { diff --git a/web/src/pages/Edit/components/NodeImgPreview.vue b/web/src/pages/Edit/components/NodeImgPreview.vue new file mode 100644 index 00000000..9ee92d32 --- /dev/null +++ b/web/src/pages/Edit/components/NodeImgPreview.vue @@ -0,0 +1,41 @@ + + + + +