Skip to content

V
vue-gojs
Commit 34606e2c by 吴斌
Options

update：旋转，连接，选中效果。但是缩放不行。

parent a64bbe50
Showing with 665 additions and 44 deletions
package.json
......@@ -9,12 +9,17 @@
"preview": "vite preview"
},
"dependencies": {
"@types/node": "^20.6.0",
"element-plus": "^2.3.12",
"gojs": "^2.1.48",
"vue": "^3.3.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"autoprefixer": "^10.4.15",
"tailwindcss": "^3.3.3",
"typescript": "^5.0.2",
"unocss": "^0.55.7",
"vite": "^4.4.5",
"vue-tsc": "^1.8.5"
}
......
src/App.vue
<template>
<!-- <template>
<div id="myDiagramDiv" style="width:800px; height:800px;"></div>
</template>
......@@ -54,6 +54,7 @@ myDiagram.linkTemplateMap.add(
reshapable: true,
resegmentable: true,
},
$(go.Shape, { isPanelMain:true, strokeWidth: 7, stroke: 'black'}),
$(go.Shape, { isPanelMain:true, strokeWidth: 5, stroke: 'red'}),
$(go.Shape, { isPanelMain:true, strokeWidth: 5, stroke: 'green',name:"PIPE", strokeDashArray: [5, 10]}),
$(go.Shape, { toArrow: "Standard", stroke: null })
......@@ -80,7 +81,7 @@ function animatePIPE(){
// Animate the flow in the pipes
myAnimation = new go.Animation();
myAnimation.easing = go.Animation.EaseLinear;
myDiagram.links.each(link => link.findObject("PIPE")?myAnimation.add(link.findObject("PIPE"), "strokeDashOffset", 15, 0): null);
myDiagram.links.each((link:any) => link.findObject("PIPE")?myAnimation.add(link.findObject("PIPE"), "strokeDashOffset", 15, 0): null);
// Run indefinitely
myAnimation.runCount = Infinity;
myAnimation.start();
......@@ -90,7 +91,7 @@ function animateBucket(){
// Animate the flow in the pipes
bucketAnimation = new go.Animation();
bucketAnimation.easing = go.Animation.EaseLinear;
myDiagram.nodes.each(node => node.findObject("BUCKET")?
myDiagram.nodes.each((node:any) => node.findObject("BUCKET")?
// ()=>{
bucketAnimation.add(node.findObject("BUCKET"), "height", 100, 0)
// bucketAnimation.add(node.findObject("BUCKET"), "position", 0, 100)
......@@ -106,4 +107,34 @@ onMounted(()=>{
animatePIPE();
animateBucket();
})
</script> -->
<template>
<div class="space-y-4 h-90vh">
<div class="flex h-full space-x-4">
<SourcePanel class="w-[400px] h-full border-solid border-2 border-black rounded"></SourcePanel>
<CenterCanvas class="w-full h-full border-2 border-red-200 border-solid rounded"></CenterCanvas>
<PropPanel class="w-[400px] h-full border-solid border-2 border-black rounded"></PropPanel>
</div>
<div class="flex">
<div class="w-full"></div>
<el-button @click="importData">导入</el-button>
<el-button type="primary" @click="exportData">导出</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import CenterCanvas from './components/center-diagram/center-canvas.vue';
import PropPanel from './components/prop-panel/prop-panel.vue';
import SourcePanel from './components/source-panel/source-panel.vue';
function importData(){
console.log("import");
}
function exportData(){
console.log("export");
}
</script>
\ No newline at end of file
src/assets/models/pump/卧式泵.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="60px" height="36px" viewBox="0 0 60 36" enable-background="new 0 0 60 36" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M11.063,35.5c-2.481,0-4.5-2.019-4.5-4.5V11c0-2.481,2.019-4.5,4.5-4.5s4.5,2.019,4.5,4.5v20
C15.563,33.481,13.545,35.5,11.063,35.5z"/>
<path d="M11.063,7c2.206,0,4,1.794,4,4v20c0,2.206-1.794,4-4,4s-4-1.794-4-4V11C7.063,8.794,8.858,7,11.063,7 M11.063,6
c-2.761,0-5,2.239-5,5v20c0,2.761,2.239,5,5,5s5-2.239,5-5V11C16.063,8.239,13.825,6,11.063,6L11.063,6z"/>
</g>
<g>
<rect x="10.562" y="0.507" width="1.004" height="5.64"/>
</g>
<g>
<rect x="7.063" width="8" height="1"/>
</g>
<g>
<rect y="20.303" width="6.523" height="1.004"/>
</g>
<g>
<rect y="16.805" width="1" height="8"/>
</g>
<g>
<path fill="#FFFFFF" d="M35,25.364c-2.481,0-4.5-2.019-4.5-4.5s2.019-4.5,4.5-4.5h20c2.481,0,4.5,2.019,4.5,4.5s-2.019,4.5-4.5,4.5
H35z"/>
<path d="M55,16.864c2.206,0,4,1.794,4,4s-1.794,4-4,4H35c-2.206,0-4-1.794-4-4s1.794-4,4-4H55 M55,15.864H35c-2.761,0-5,2.239-5,5
s2.239,5,5,5h20c2.761,0,5-2.239,5-5S57.761,15.864,55,15.864L55,15.864z"/>
</g>
<g>
<rect x="33.942" y="15.989" width="1.035" height="9.75"/>
</g>
<g>
<rect x="55.026" y="15.989" width="1.035" height="9.75"/>
</g>
<rect x="15.955" y="19.755" width="14.415" height="2"/>
</svg>
src/assets/models/pump/旋转泵.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="20px" height="40px" viewBox="0 0 20 40" enable-background="new 0 0 20 40" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M10,19.5c-5.238,0-9.5-4.262-9.5-9.5S4.762,0.5,10,0.5s9.5,4.262,9.5,9.5S15.238,19.5,10,19.5z"/>
<path d="M10,1c4.963,0,9,4.037,9,9s-4.037,9-9,9s-9-4.037-9-9S5.037,1,10,1 M10,0C4.477,0,0,4.477,0,10s4.477,10,10,10
s10-4.477,10-10S15.523,0,10,0L10,0z"/>
</g>
<g>
<path fill="#FFFFFF" d="M10,39.5c-5.238,0-9.5-4.262-9.5-9.5s4.262-9.5,9.5-9.5s9.5,4.262,9.5,9.5S15.238,39.5,10,39.5z"/>
<path d="M10,21c4.963,0,9,4.037,9,9s-4.037,9-9,9s-9-4.037-9-9S5.037,21,10,21 M10,20C4.477,20,0,24.477,0,30s4.477,10,10,10
s10-4.477,10-10S15.523,20,10,20L10,20z"/>
</g>
<g>
<rect y="19.5" width="20" height="1"/>
</g>
</svg>
src/assets/models/pump/油池泵.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="60px" viewBox="0 0 30 60" enable-background="new 0 0 30 60" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M15,30.881c-5.117,0-9.439-2.143-9.439-4.68V5.24c0-2.537,4.323-4.68,9.439-4.68
c5.116,0,9.439,2.143,9.439,4.68v20.961C24.439,28.738,20.116,30.881,15,30.881z"/>
<path d="M15,1.121c5.232,0,8.879,2.171,8.879,4.119v20.961c0,1.948-3.646,4.119-8.879,4.119s-8.879-2.171-8.879-4.119V5.24
C6.121,3.292,9.768,1.121,15,1.121 M15,0C9.477,0,5,2.346,5,5.24v20.961c0,2.894,4.477,5.24,10,5.24s10-2.346,10-5.24V5.24
C25,2.346,20.523,0,15,0L15,0z"/>
</g>
<g>
<path fill="#FFFFFF" d="M5,56.307c-2.481,0-4.5-2.019-4.5-4.5s2.019-4.5,4.5-4.5h20c2.481,0,4.5,2.019,4.5,4.5s-2.019,4.5-4.5,4.5
H5z"/>
<path d="M25,47.806c2.206,0,4,1.794,4,4s-1.794,4-4,4H5c-2.206,0-4-1.794-4-4s1.794-4,4-4H25 M25,46.806H5c-2.761,0-5,2.239-5,5
s2.239,5,5,5h20c2.761,0,5-2.239,5-5S27.761,46.806,25,46.806L25,46.806z"/>
</g>
<g>
<rect x="5.194" y="25.4" width="19.612" height="1"/>
</g>
<g>
<rect x="17.232" y="32.102" width="11.351" height="0.93"/>
</g>
<g>
<rect x="21.324" y="32.725" width="1" height="14.108"/>
</g>
<g>
<rect x="28.074" y="32.083" width="1.018" height="16.971"/>
</g>
<rect x="13.027" y="30.6" fill="#FFFFFF" stroke="#000000" stroke-width="0.9941" stroke-miterlimit="10" width="4" height="16.591"/>
<g>
<rect x="8.471" y="56.457" fill="#FFFFFF" width="13.059" height="3.086"/>
<path d="M21.072,56.914v2.172H8.928v-2.172H21.072 M21.986,56H8.014v4h13.973V56L21.986,56z"/>
</g>
<g>
<rect x="5.194" y="4.483" width="19.612" height="1"/>
</g>
<rect x="1.25" y="35.921" width="27.333" height="2"/>
</svg>
src/assets/models/pump/立式泵.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="54px" viewBox="0 0 40 54" enable-background="new 0 0 40 54" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M34.5,49c0,2.481-2.019,4.5-4.5,4.5H10c-2.481,0-4.5-2.019-4.5-4.5s2.019-4.5,4.5-4.5h20
C32.481,44.5,34.5,46.519,34.5,49z"/>
<path d="M6,49c0-2.206,1.794-4,4-4h20c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H10C7.794,53,6,51.206,6,49 M5,49
c0,2.761,2.239,5,5,5h20c2.761,0,5-2.239,5-5s-2.239-5-5-5H10C7.239,44,5,46.239,5,49L5,49z"/>
</g>
<g>
<g>
<rect x="0.507" y="48.393" width="4.89" height="1.004"/>
</g>
<g>
<rect y="44.895" width="1" height="8"/>
</g>
</g>
<g>
<g>
<rect x="34.602" y="48.393" width="4.89" height="1.004"/>
</g>
<g>
<rect x="39" y="44.895" width="1" height="8"/>
</g>
</g>
<g>
<path fill="#FFFFFF" d="M24.5,25c0,2.481-2.019,4.5-4.5,4.5s-4.5-2.019-4.5-4.5V5c0-2.481,2.019-4.5,4.5-4.5s4.5,2.019,4.5,4.5V25z
"/>
<path d="M16,5c0-2.206,1.794-4,4-4s4,1.794,4,4v20c0,2.206-1.794,4-4,4s-4-1.794-4-4V5 M15,5v20c0,2.761,2.239,5,5,5s5-2.239,5-5V5
c0-2.761-2.239-5-5-5C17.239,0,15,2.239,15,5L15,5z"/>
</g>
<g>
<rect x="15.125" y="24.981" width="9.75" height="1.035"/>
</g>
<g>
<rect x="15.125" y="3.897" width="9.75" height="1.035"/>
</g>
<rect x="19" y="29.588" width="2" height="14.415"/>
</svg>
src/assets/models/valve/阀-2.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="65px" height="55px" viewBox="0 0 65 55" enable-background="new 0 0 65 55" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="404.5899" y1="-942.4389" x2="404.5899" y2="-938.65" gradientTransform="matrix(4.489659e-011 1 -1 4.489659e-011 -908.1667 -390.5)">
<stop offset="0.0056" style="stop-color:#717071"/>
<stop offset="0.1763" style="stop-color:#9C9C9D"/>
<stop offset="0.3483" style="stop-color:#C6C7C8"/>
<stop offset="0.5219" style="stop-color:#FFFFFF"/>
<stop offset="0.6946" style="stop-color:#D9DADA"/>
<stop offset="0.7395" style="stop-color:#D5D6D6"/>
<stop offset="0.7841" style="stop-color:#C9CACA"/>
<stop offset="0.8284" style="stop-color:#B6B6B7"/>
<stop offset="0.836" style="stop-color:#B2B2B3"/>
<stop offset="1" style="stop-color:#6B6A6A"/>
</linearGradient>
<rect x="30.667" y="6.59" fill="url(#SVGID_1_)" width="3.667" height="15"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="7.5" y1="23.3333" x2="7.5" y2="54.3333">
<stop offset="0.0056" style="stop-color:#717071"/>
<stop offset="0.1763" style="stop-color:#9C9C9D"/>
<stop offset="0.3483" style="stop-color:#C6C7C8"/>
<stop offset="0.5219" style="stop-color:#FFFFFF"/>
<stop offset="0.6946" style="stop-color:#D9DADA"/>
<stop offset="0.7395" style="stop-color:#D5D6D6"/>
<stop offset="0.7841" style="stop-color:#C9CACA"/>
<stop offset="0.8284" style="stop-color:#B6B6B7"/>
<stop offset="0.836" style="stop-color:#B2B2B3"/>
<stop offset="1" style="stop-color:#6B6A6A"/>
</linearGradient>
<rect x="0" y="22.833" fill="url(#SVGID_2_)" width="15" height="30"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="57.5" y1="23.3333" x2="57.5" y2="54.3333">
<stop offset="0.0056" style="stop-color:#717071"/>
<stop offset="0.1763" style="stop-color:#9C9C9D"/>
<stop offset="0.3483" style="stop-color:#C6C7C8"/>
<stop offset="0.5219" style="stop-color:#FFFFFF"/>
<stop offset="0.6946" style="stop-color:#D9DADA"/>
<stop offset="0.7395" style="stop-color:#D5D6D6"/>
<stop offset="0.7841" style="stop-color:#C9CACA"/>
<stop offset="0.8284" style="stop-color:#B6B6B7"/>
<stop offset="0.836" style="stop-color:#B2B2B3"/>
<stop offset="1" style="stop-color:#6B6A6A"/>
</linearGradient>
<rect x="50" y="22.833" fill="url(#SVGID_3_)" width="15" height="30"/>
<radialGradient id="SVGID_4_" cx="32.5835" cy="37.5" r="17.5" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#878787"/>
</radialGradient>
<circle fill="url(#SVGID_4_)" cx="32.583" cy="37.5" r="17.5"/>
</g>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-571.7982" y1="-2071.5149" x2="-527.3083" y2="-2071.5149" gradientTransform="matrix(-1 0 0 -0.5033 -517.3332 -1038.5193)">
<stop offset="0.0056" style="stop-color:#717071"/>
<stop offset="0.1763" style="stop-color:#9C9C9D"/>
<stop offset="0.3483" style="stop-color:#C6C7C8"/>
<stop offset="0.5219" style="stop-color:#FFFFFF"/>
<stop offset="0.6946" style="stop-color:#D9DADA"/>
<stop offset="0.7395" style="stop-color:#D5D6D6"/>
<stop offset="0.7841" style="stop-color:#C9CACA"/>
<stop offset="0.8284" style="stop-color:#B6B6B7"/>
<stop offset="0.836" style="stop-color:#B2B2B3"/>
<stop offset="1" style="stop-color:#6B6A6A"/>
</linearGradient>
<polygon fill="url(#SVGID_5_)" points="54.745,0 32.5,8.255 10.255,0 "/>
</svg>
src/assets/models/valve/阀.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="90px" height="50px" viewBox="0 0 90 50" enable-background="new 0 0 90 50" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="45" y1="1.044341e-005" x2="45" y2="50">
<stop offset="0.0056" style="stop-color:#717071"/>
<stop offset="0.1763" style="stop-color:#9E9E9F"/>
<stop offset="0.3483" style="stop-color:#C8C9CA"/>
<stop offset="0.5219" style="stop-color:#FFFFFF"/>
<stop offset="0.6946" style="stop-color:#DBDCDC"/>
<stop offset="0.7395" style="stop-color:#D7D8D8"/>
<stop offset="0.7841" style="stop-color:#CBCCCC"/>
<stop offset="0.8284" style="stop-color:#B8B8B9"/>
<stop offset="0.836" style="stop-color:#B4B4B5"/>
<stop offset="1" style="stop-color:#6B6A6A"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#C8C9CA" stroke-width="0.1877" stroke-miterlimit="10" d="M87.442,0.224L45.738,23.568
c-0.371,0.208-0.609,0.522-0.738,0.867c-0.129-0.345-0.366-0.659-0.738-0.867L2.558,0.224C1.421-0.412,0,0.383,0,1.656v46.688
c0,1.273,1.421,2.068,2.558,1.432l41.704-23.344c0.371-0.208,0.609-0.522,0.738-0.867c0.129,0.345,0.366,0.659,0.738,0.867
l41.704,23.344C88.579,50.412,90,49.617,90,48.344V1.656C90,0.383,88.579-0.412,87.442,0.224z"/>
</svg>
src/assets/models/valve/阀门-01.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="33px" height="30px" viewBox="0 0 33 30" enable-background="new 0 0 33 30" xml:space="preserve">
<g>
<g>
<polygon fill="#FFFFFF" points="0.5,10.866 16.327,20 0.5,29.134 "/>
<path fill="#231815" d="M1,11.732L15.327,20L1,28.268V11.732 M0,10v20l17.327-10L0,10L0,10z"/>
</g>
<g>
<polygon fill="#FFFFFF" points="16.673,20 32.5,10.866 32.5,29.134 "/>
<path fill="#231815" d="M32,11.732v16.537L17.673,20L32,11.732 M33,10L15.673,20L33,30V10L33,10z"/>
</g>
</g>
</svg>
src/assets/models/valve/阀门2-01.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="33px" height="30px" viewBox="0 0 33 30" enable-background="new 0 0 33 30" xml:space="preserve">
<g>
<g>
<polygon fill="#FFFFFF" points="0.5,10.866 16.327,20 0.5,29.134 "/>
<path fill="#231815" d="M1,11.732L15.327,20L1,28.268V11.732 M0,10v20l17.327-10L0,10L0,10z"/>
</g>
<g>
<polygon fill="#FFFFFF" points="16.673,20 32.5,10.866 32.5,29.134 "/>
<path fill="#231815" d="M32,11.732v16.537L17.673,20L32,11.732 M33,10L15.673,20L33,30V10L33,10z"/>
</g>
</g>
<circle fill="#231815" cx="16.5" cy="19.917" r="2"/>
</svg>
src/components/HelloWorld.vue deleted 100644 → 0
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Install
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
in your IDE for a better DX
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
src/components/center-diagram/center-canvas.vue 0 → 100644
<template>
<div id="myDiagram"></div>
</template>
<script setup lang="ts">
import {onMounted} from 'vue'
import go from 'gojs'
import {$, makePort, showSmallPorts} from '../../kit/GOJSKit.ts'
import {
nodeSelectionAdornmentTemplate,
nodeResizeAdornmentTemplate,
nodeRotateAdornmentTemplate,
makeTopRotatingTool
} from "../../kit/NodeTemplateKit.ts";
import { linkSelectionAdornmentTemplate } from '../../kit/LinkTemplateKit.ts'
var myDiagram:any = null
function initDiagram() {
myDiagram = $(go.Diagram, "myDiagram", {
initialContentAlignment: go.Spot.Center,
//允许撤销
"undoManager.isEnabled": true,
//展示网格
"grid.visible": true,
//滚轮缩放
"allowZoom": true,
//连线是否可以不和节点连接。
"draggingTool.dragsLink": true,
//旋转点相关
"rotatingTool": $(makeTopRotatingTool()),
"rotatingTool.handleAngle": 270,
"rotatingTool.handleDistance": 50,
"rotatingTool.snapAngleMultiple": 15,
"rotatingTool.snapAngleEpsilon": 15,
//连接线相关
"draggingTool.dragsLink": true,
"draggingTool.isGridSnapEnabled": true,
"linkingTool.isUnconnectedLinkValid": true,
"linkingTool.portGravity": 20,
"relinkingTool.isUnconnectedLinkValid": true,
"relinkingTool.portGravity": 20,
"relinkingTool.fromHandleArchetype":
$(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
"relinkingTool.toHandleArchetype":
$(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
"linkReshapingTool.handleArchetype":
$(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
})
myDiagram.nodeTemplate = $(go.Node, "Spot",
new go.Binding('location', "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
{ resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
{ rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot:go.Spot.Center },
new go.Binding('angle').makeTwoWay(),
$(go.Panel, "Vertical",
// {name:"PANEL", cursor: "pointer", background: "lightblue"},
{name:"PANEL", cursor: "pointer"},
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Picture, new go.Binding("source", "img")),
// $(go.Shape, "Rectangle", {stroke:"red", fill:"yellow", name:"IMAGE"}),
// $(go.TextBlock, {margin: 4, text:"", editable:true, background:"green"}, new go.Binding("text", "name")),
$(go.TextBlock, {margin: 4, text:"", editable:true}, new go.Binding("text", "name")),
),
// four small named ports, one on each side:
makePort("T", go.Spot.Top, true, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true),
{ // handle mouse enter/leave events to show/hide the ports
mouseEnter: function(e, node) { showSmallPorts(node, true); },
mouseLeave: function(e, node) { showSmallPorts(node, false); }
}
)
myDiagram.linkTemplate = $(go.Link,
{ selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
{ relinkableFrom: true, relinkableTo: true, reshapable: true },
{ routing: go.Link.AvoidsNodes, corner: 5, curve: go.Link.JumpOver, toShortLength: 4 },
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 }),
$(go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }),
$(go.Panel, "Auto",
// new go.Binding("visible", "isSelected").ofObject(),
$(go.Shape, "RoundedRectangle", // the link shape
{ fill: "transparent", stroke: null }),
$(go.TextBlock,
{
textAlign: "center",
font: "10pt",
stroke: "#000000",
margin: 2,
minSize: new go.Size(10, NaN),
editable: true
}
)
)
);
myDiagram.addDiagramListener("Modified", function(e) {
if (myDiagram.isModified) {
console.log(myDiagram.model.toJson())
}
});
}
function init() {
initDiagram()
}
onMounted(() => {
init()
})
</script>
\ No newline at end of file
src/components/prop-panel/prop-panel.vue 0 → 100644
<template>
<div></div>
</template>
<script setup lang="ts">
</script>
\ No newline at end of file
src/components/source-panel/source-collapse.vue 0 → 100644
<template>
<div :id="category"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import go from 'gojs'
import {$} from '../../kit/GOJSKit'
import { PictureNodeTemplate} from '../../kit/NodeTemplateKit';
import {picModel} from '../../kit/ModelData.ts'
const props = defineProps({
category: {
type: String,
default: 'valve'
}
})
var sourcePalette: any = ref(null)
var sourceModel:any = ref(null)
function init(){
sourcePalette = $(go.Palette, props.category, {
layout: $(go.GridLayout, { alignment: go.GridLayout.Location }),
nodeTemplate: PictureNodeTemplate,
allowZoom: false
})
sourceModel.value = picModel.filter((item:any) => {
return item.category === props.category
})
sourcePalette.model = new go.GraphLinksModel(sourceModel.value)
}
onMounted(() => {
init()
})
</script>
\ No newline at end of file
src/components/source-panel/source-panel.vue 0 → 100644
<template>
<el-collapse>
<el-collapse-item class="m-2" v-for="category in categoryList" :title=category.name>
<SourceCollapse class="w-full h-[240px] m-4" :category="category.key"></SourceCollapse>
</el-collapse-item>
</el-collapse>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { picCategory } from '../../kit/ModelData.ts'
import SourceCollapse from './source-collapse.vue';
const categoryList: any = ref(null)
function init(){
categoryList.value = picCategory
}
onMounted(() => {
init()
})
</script>
\ No newline at end of file
src/index.css 0 → 100644
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 其他 CSS 文件的导入 */
\ No newline at end of file
src/kit/GOJSKit.ts 0 → 100644
import go from 'gojs';
export var $ = go.GraphObject.make;
/**
* 用于连接的锚点效果
* @param {String} name 锚点名称
* @param {Spot} spot 锚点位置
* @param {Boolean} output 是否可以从此锚点连接出去
* @param {Boolean} input 是否可以连接到此锚点
*/
export function makePort(name, spot, output, input) {
return $(go.Shape, "Circle",
{
fill: null,
stroke: null,
desiredSize: new go.Size(10, 10),
alignment: spot,
alignmentFocus: spot,
portId: name,
fromSpot: spot, toSpot: spot,
fromLinkable: output, toLinkable: input,
cursor: "pointer"
});
}
/**
* 展示连接锚点
* @param {Node} node 节点
* @param {Boolean} show 是否展示
*/
export function showSmallPorts(node, show) {
node.ports.each(function(port) {
if (port.portId !== "") { // don't change the default port, which is the big shape
port.fill = show ? "rgba(0,0,0,.3)" : null;
}
});
}
\ No newline at end of file
src/kit/LinkTemplateKit.ts 0 → 100644
import {$} from './GOJSKit'
import go from 'gojs'
export var linkSelectionAdornmentTemplate =
$(go.Adornment, "Link",
$(go.Shape,
// isPanelMain declares that this Shape shares the Link.geometry
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }) // use selection object's strokeWidth
);
\ No newline at end of file
src/kit/ModelData.ts 0 → 100644
export const picCategory = [
{key:"valve",name:"阀门"},
{key:"pump",name:"泵"},
]
export const picModel = [
{ name: "computer1", category: "comnputer", img: "src/assets/models/computer/电脑.svg"},
{ name: "valve2", category: "valve", img: "src/assets/models/valve/阀-2.svg"},
{ name: "vavle3", category: "valve", img: "src/assets/models/valve/阀.svg"},
{ name: "vavle4", category: "valve", img: "src/assets/models/valve/阀门-01.svg"},
{ name: "vavle5", category: "valve", img: "src/assets/models/valve/阀门2-01.svg"},
{name: "pump1", category: "pump", img: "src/assets/models/pump/立式泵.svg"},
{name: "pump2", category: "pump", img: "src/assets/models/pump/卧式泵.svg"},
{name: "pump3", category: "pump", img: "src/assets/models/pump/旋转泵.svg"},
{name: "pump4", category: "pump", img: "src/assets/models/pump/油池泵.svg"},
]
src/kit/NodeTemplateKit.ts 0 → 100644
import {$} from './GOJSKit.js';
import go from 'gojs';
// 节点选中时的边框效果
export var nodeSelectionAdornmentTemplate =
$(go.Adornment, "Auto",
$(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
$(go.Placeholder)
);
// 表示节点旋转的锚点效果
export const makeTopRotatingTool = () => (
class TopRotatingTool extends go.RotatingTool {
updateAdornments(part) {
go.RotatingTool.prototype.updateAdornments.call(this, part)
const adornment = part.findAdornment('Rotating');
if (adornment !== null) {
adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)) // above middle top
}
}
//动一下就是 90 度
// rotate(newangle) {
// go.RotatingTool.prototype.rotate.call(this, newangle + 90)
// }
}
)
export var nodeRotateAdornmentTemplate =
$(go.Adornment,
{ locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
$(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] })
);
// 可以调整节点大小的锚点效果
export var nodeResizeAdornmentTemplate =
$(go.Adornment, "Spot",
{ locationSpot: go.Spot.Right },
$(go.Placeholder),
$(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
);
export var PictureNodeTemplate =
$(go.Node, "Vertical",
$(go.Picture,
{ width:80,height:80},
new go.Binding("source", "img")
),
$(go.TextBlock,
{ margin: 8 ,text: "123"},
new go.Binding("text", "name"))
)
src/main.ts
import { createApp } from 'vue'
import './style.css'
// import './style.css'
// import './index.css'
import App from './App.vue'
import gojs from 'gojs'
import ElementUI from 'element-plus';
import "element-plus/theme-chalk/index.css"
import 'virtual:uno.css'
createApp(App, {go: gojs}).mount('#app')
let app = createApp(App, {go: gojs})
app.use(ElementUI)
app.mount('#app')
src/pages/index.vue 0 → 100644
<template>
</template>
<script setup lang="ts">
</script>
\ No newline at end of file
tailwind.config.js 0 → 100644
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
uno.config.js 0 → 100644
import { defineConfig, presetAttributify, presetUno } from 'unocss'
export default defineConfig({
// ...UnoCSS选项
presets: [
presetAttributify({
/* 预设选项 */
}),
presetUno()
// ...自定义预设
]
})
\ No newline at end of file
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCss from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
plugins: [vue(), UnoCss()],
server:{
host:'0.0.0.0' ,//ip地址
port: 2345, // 设置服务启动端口号
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment