1 line
6.1 KiB
JSON
1 line
6.1 KiB
JSON
{"remainingRequest":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\src\\views\\acs\\stage\\editor\\components\\Diagram.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\src\\views\\acs\\stage\\editor\\components\\Diagram.vue","mtime":1732871026626},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1732872824662},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":1732872825017},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1732872824662},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1732872825835}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport LogicFlow from '@logicflow/core'\r\nimport { SelectionSelect } from '@logicflow/extension'\r\nimport '@logicflow/core/dist/style/index.css'\r\nimport '@logicflow/extension/lib/style/index.css'\r\nimport DiagramToolbar from './DiagramToolbar.vue'\r\nimport DiagramSidebar from './DiagramSidebar.vue'\r\nimport PropertyPanel from './PropertyPanel.vue'\r\nimport { registerCustomElement } from './node'\r\n\r\nexport default {\r\n name: 'Diagram',\r\n components: {\r\n DiagramToolbar,\r\n DiagramSidebar,\r\n PropertyPanel\r\n },\r\n data() {\r\n return {\r\n sidebarWidth: 200,\r\n diagramWidth: 0,\r\n diagramHeight: 0,\r\n lf: '',\r\n filename: '',\r\n activeNodes: [],\r\n activeEdges: [],\r\n properties: {}\r\n }\r\n },\r\n mounted() {\r\n let data = ''\r\n if (window.location.search) {\r\n const query = window.location.search.substring(1).split('&').reduce((map, kv) => {\r\n const [key, value] = kv.split('=')\r\n map[key] = value\r\n return map\r\n }, {})\r\n this.filename = query.filename\r\n const d = window.sessionStorage.getItem(this.filename)\r\n if (d) {\r\n data = JSON.parse(d)\r\n }\r\n }\r\n this.initLogicFlow(data)\r\n },\r\n methods: {\r\n initLogicFlow(data) {\r\n // 引入框选插件\r\n LogicFlow.use(SelectionSelect)\r\n const lf = new LogicFlow({\r\n container: this.$refs.diagram,\r\n overlapMode: 1,\r\n autoWrap: true,\r\n metaKeyMultipleSelected: true,\r\n keyboard: {\r\n enabled: true\r\n },\r\n grid: {\r\n visible: false,\r\n size: 5\r\n },\r\n background: {\r\n backgroundImage: 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=\")',\r\n backgroundRepeat: 'repeat'\r\n }\r\n })\r\n lf.setTheme(\r\n {\r\n baseEdge: { strokeWidth: 1 },\r\n baseNode: { strokeWidth: 1 },\r\n nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },\r\n edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }\r\n }\r\n )\r\n // 注册自定义元素\r\n registerCustomElement(lf)\r\n lf.setDefaultEdgeType('pro-polyline')\r\n lf.render(data)\r\n this.lf = lf\r\n this.lf.on('selection:selected,node:click,blank:click,edge:click', () => {\r\n this.$nextTick(() => {\r\n const { nodes, edges } = this.lf.getSelectElements()\r\n this.$set(this, 'activeNodes', nodes)\r\n this.activeNodes = nodes\r\n this.activeEdges = edges\r\n this.$_getProperty()\r\n })\r\n })\r\n },\r\n // 获取可以进行设置的属性\r\n $_getProperty() {\r\n let properties = {}\r\n const { nodes, edges } = this.lf.getSelectElements()\r\n nodes.forEach(node => {\r\n properties = { ...properties, ...node.properties }\r\n })\r\n edges.forEach(edge => {\r\n properties = { ...properties, ...edge.properties }\r\n })\r\n this.properties = properties\r\n return properties\r\n },\r\n $_dragInNode(type) {\r\n this.lf.dnd.startDrag({\r\n type\r\n })\r\n },\r\n $_changeNodeFill(color) {\r\n const { nodes } = this.lf.graphModel.getSelectElements()\r\n nodes.forEach(({ id }) => {\r\n this.lf.setProperties(id, {\r\n fill: color\r\n })\r\n })\r\n },\r\n $_setStyle(item) {\r\n this.activeNodes.forEach(({ id }) => {\r\n this.lf.setProperties(id, item)\r\n })\r\n this.activeEdges.forEach(({ id }) => {\r\n this.lf.setProperties(id, item)\r\n })\r\n this.$_getProperty()\r\n },\r\n $_setZIndex(type) {\r\n this.activeNodes.forEach(({ id }) => {\r\n this.lf.setElementZIndex(id, type)\r\n })\r\n this.activeEdges.forEach(({ id }) => {\r\n this.lf.setElementZIndex(id, type)\r\n })\r\n },\r\n $_saveGraph() {\r\n const data = this.lf.getGraphData()\r\n this.download(this.filename, JSON.stringify(data))\r\n },\r\n download(filename, text) {\r\n window.sessionStorage.setItem(filename, text)\r\n const element = document.createElement('a')\r\n element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))\r\n element.setAttribute('download', filename)\r\n element.style.display = 'none'\r\n document.body.appendChild(element)\r\n element.click()\r\n document.body.removeChild(element)\r\n }\r\n }\r\n}\r\n",null]} |