Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
G
gojs-project
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
jlc
gojs-project
Commits
18c4e3c4
Commit
18c4e3c4
authored
Jun 25, 2024
by
jlc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update:标定点的增加和删除
parent
bf84a30b
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
223 additions
and
115 deletions
+223
-115
imageNode.vue
src/stageAchievements/imageNode.vue
+223
-115
No files found.
src/stageAchievements/imageNode.vue
View file @
18c4e3c4
...
...
@@ -15,12 +15,20 @@
<button
@
click=
"exportData"
>
导出数据
</button>
</div>
<el-dialog
v-model=
"dialogVisible"
title=
"给
节点添加端口
"
>
<el-dialog
v-model=
"dialogVisible"
title=
"给
当前节点添加端口/标定点
"
>
<div>
<button
@
click=
"addPort('top')"
>
添加上端口
</button>
<button
@
click=
"addPort('bottom')"
>
添加下端口
</button>
<button
@
click=
"addPort('left')"
>
添加左端口
</button>
<button
@
click=
"addPort('right')"
>
添加右端口
</button>
<el-switch
v-model=
"changeModel"
@
change=
"toggleDivs"
>
</el-switch>
<br>
<div
v-if=
"changeModel"
>
<button
@
click=
"addPort('top')"
>
添加上端口
</button>
<button
@
click=
"addPort('bottom')"
>
添加下端口
</button>
<button
@
click=
"addPort('left')"
>
添加左端口
</button>
<button
@
click=
"addPort('right')"
>
添加右端口
</button>
</div>
<div
v-else
>
<button
@
click=
"addMark()"
>
添加标定点
</button>
</div>
</div>
</el-dialog>
</
template
>
...
...
@@ -37,7 +45,13 @@ import { RotateMultipleTool } from './extensions/RotateMultipleTool';
const
$
=
go
.
GraphObject
.
make
;
var
myDiagram
:
any
;
const
dialogVisible
=
ref
(
false
)
const
dialogVisible
=
ref
(
false
)
const
changeModel
=
ref
(
true
)
// 切换添加端口/标定点的形式
function
toggleDivs
(
value
:
boolean
)
{
changeModel
.
value
=
value
;
}
function
initDiagram
()
{
myDiagram
=
$
(
go
.
Diagram
,
"diagramDiv"
,
{
...
...
@@ -127,12 +141,42 @@ function initDiagram() {
),
},
$
(
go
.
Panel
,
'Spot'
,
$
(
go
.
Shape
,
"RoundedRectangle"
,
{
fill
:
"white"
,
strokeWidth
:
0
// 标定点模板
new
go
.
Binding
(
'itemArray'
,
'markArray'
),
{
itemTemplate
:
$
(
go
.
Panel
,
{
portId
:
"mark"
,
cursor
:
'pointer'
,
alignment
:
new
go
.
Spot
(
0.5
,
0.2
),
contextMenu
:
$
(
"ContextMenu"
,
$
(
"ContextMenuButton"
,
$
(
go
.
TextBlock
,
"Remove Mark"
,
{
font
:
"bold 12px sans-serif"
,
width
:
100
,
textAlign
:
"center"
}),
{
click
:
(
e
:
any
,
obj
:
any
)
=>
removeMark
(
obj
.
part
.
adornedObject
),
"ButtonBorder.fill"
:
"white"
,
"_buttonFillOver"
:
"skyblue"
}
)
),
},
new
go
.
Binding
(
'portId'
,
'markId'
),
$
(
go
.
Shape
,
'Rectangle'
,
{
strokeWidth
:
1
,
desiredSize
:
new
go
.
Size
(
6
,
6
),
fill
:
"red"
},
new
go
.
Binding
(
"fill"
,
"color"
),
)
)
},
$
(
go
.
Panel
,
'Spot'
,
$
(
go
.
Shape
,
"RoundedRectangle"
,
{
fill
:
"white"
,
strokeWidth
:
0
},
new
go
.
Binding
(
"fill"
,
"color"
),
),
$
(
go
.
TextBlock
,
{
...
...
@@ -179,6 +223,7 @@ function initDiagram() {
dialogVisible
.
value
=
true
;
}
},
)
),
),
...
...
@@ -193,118 +238,147 @@ function initDiagram() {
new
go
.
Binding
(
"location"
,
"loc"
),
new
go
.
Binding
(
"desiredSize"
,
"size"
,
go
.
Size
.
parse
).
makeTwoWay
(
go
.
Size
.
stringify
),
// 进行元素位置信息的绑定
new
go
.
Binding
(
'itemArray'
,
'portArray'
),
{
itemTemplate
:
$
(
go
.
Panel
,
{
portId
:
"Top"
,
fromSpot
:
go
.
Spot
.
Top
,
toSpot
:
go
.
Spot
.
Top
,
fromLinkable
:
true
,
toLinkable
:
true
,
cursor
:
'pointer'
,
alignment
:
go
.
Spot
.
Top
,
contextMenu
:
$
(
"ContextMenu"
,
$
(
"ContextMenuButton"
,
$
(
go
.
TextBlock
,
"Remove Port"
,
{
font
:
"bold 12px sans-serif"
,
width
:
100
,
textAlign
:
"center"
}),
{
click
:
(
e
:
any
,
obj
:
any
)
=>
removePort
(
obj
.
part
.
adornedObject
),
"ButtonBorder.fill"
:
"white"
,
"_buttonFillOver"
:
"skyblue"
}
)
),
},
new
go
.
Binding
(
'portId'
,
'portId'
),
new
go
.
Binding
(
'alignment'
,
'portKey'
,
(
portKey
:
string
)
=>
{
switch
(
portKey
)
{
case
"top"
:
return
go
.
Spot
.
Top
;
case
"bottom"
:
return
go
.
Spot
.
Bottom
;
case
"left"
:
return
go
.
Spot
.
Left
;
case
"right"
:
return
go
.
Spot
.
Right
;
default
:
return
go
.
Spot
.
Top
;
}
}),
new
go
.
Binding
(
'fromSpot'
,
'portKey'
,
(
portKey
:
string
)
=>
{
switch
(
portKey
)
{
case
"top"
:
return
go
.
Spot
.
Top
;
case
"bottom"
:
return
go
.
Spot
.
Bottom
;
case
"left"
:
return
go
.
Spot
.
Left
;
case
"right"
:
return
go
.
Spot
.
Right
;
default
:
return
go
.
Spot
.
Top
;
}
}),
new
go
.
Binding
(
'toSpot'
,
'portKey'
,
(
portKey
:
string
)
=>
{
switch
(
portKey
)
{
case
"top"
:
return
go
.
Spot
.
Top
;
case
"bottom"
:
return
go
.
Spot
.
Bottom
;
case
"left"
:
return
go
.
Spot
.
Left
;
case
"right"
:
return
go
.
Spot
.
Right
;
default
:
return
go
.
Spot
.
Top
;
}
}),
$
(
go
.
Shape
,
'Rectangle'
,
{
strokeWidth
:
1
,
desiredSize
:
new
go
.
Size
(
6
,
6
),
},
)
itemTemplate
:
$
(
go
.
Panel
,
{
portId
:
"Top"
,
fromSpot
:
go
.
Spot
.
Top
,
toSpot
:
go
.
Spot
.
Top
,
fromLinkable
:
true
,
toLinkable
:
true
,
cursor
:
'pointer'
,
alignment
:
go
.
Spot
.
Top
,
contextMenu
:
$
(
"ContextMenu"
,
$
(
"ContextMenuButton"
,
$
(
go
.
TextBlock
,
"Remove Port"
,
{
font
:
"bold 12px sans-serif"
,
width
:
100
,
textAlign
:
"center"
}),
{
click
:
(
e
:
any
,
obj
:
any
)
=>
removePort
(
obj
.
part
.
adornedObject
),
"ButtonBorder.fill"
:
"white"
,
"_buttonFillOver"
:
"skyblue"
}
)
),
},
$
(
go
.
Panel
,
'Spot'
,
$
(
go
.
Shape
,
"RoundedRectangle"
,
{
geometry
:
go
.
Geometry
.
parse
(
"XFM88 77.8 0 77.8 0 53.8 88 53.8 136.6 0 181.4 0 181.4 35.3 157.5 35.3 157.5 24.5 136.6 24.5z XM 86.8 70.1 L 141.7 10.2 XM 82.8 66.1 L 137.1 6.4 XM142 8.8B 0 360 139 8.8 3 3 XM87 68.8B 0 360 84 68.8 3 3"
),
stroke
:
"black"
,
fill
:
"white"
,
strokeWidth
:
1.5
},
),
$
(
go
.
TextBlock
,
{
margin
:
10
,
textAlign
:
'center'
,
font
:
'bold 14px Segoe UI,sans-serif'
,
stroke
:
'#484848'
,
editable
:
true
,
_isNodeLabel
:
true
,
cursor
:
"move"
new
go
.
Binding
(
'portId'
,
'portId'
),
new
go
.
Binding
(
'alignment'
,
'portKey'
,
(
portKey
:
string
)
=>
{
switch
(
portKey
)
{
case
"top"
:
return
go
.
Spot
.
Top
;
case
"bottom"
:
return
go
.
Spot
.
Bottom
;
case
"left"
:
return
go
.
Spot
.
Left
;
case
"right"
:
return
go
.
Spot
.
Right
;
default
:
return
go
.
Spot
.
Top
;
}
}),
new
go
.
Binding
(
'fromSpot'
,
'portKey'
,
(
portKey
:
string
)
=>
{
switch
(
portKey
)
{
case
"top"
:
return
go
.
Spot
.
Top
;
case
"bottom"
:
return
go
.
Spot
.
Bottom
;
case
"left"
:
return
go
.
Spot
.
Left
;
case
"right"
:
return
go
.
Spot
.
Right
;
default
:
return
go
.
Spot
.
Top
;
}
}),
new
go
.
Binding
(
'toSpot'
,
'portKey'
,
(
portKey
:
string
)
=>
{
switch
(
portKey
)
{
case
"top"
:
return
go
.
Spot
.
Top
;
case
"bottom"
:
return
go
.
Spot
.
Bottom
;
case
"left"
:
return
go
.
Spot
.
Left
;
case
"right"
:
return
go
.
Spot
.
Right
;
default
:
return
go
.
Spot
.
Top
;
}
}),
$
(
go
.
Shape
,
'Rectangle'
,
{
strokeWidth
:
1
,
desiredSize
:
new
go
.
Size
(
6
,
6
),
},
new
go
.
Binding
(
'text'
,
'key'
).
makeTwoWay
(),
)
),
},
$
(
go
.
Panel
,
'Spot'
,
// 标定点模板
new
go
.
Binding
(
'itemArray'
,
'markArray'
),
{
itemTemplate
:
$
(
go
.
Panel
,
{
toolTip
:
// 定义节点工具提示
$
(
"ToolTip"
,
$
(
go
.
TextBlock
,
{
margin
:
4
},
new
go
.
Binding
(
"text"
,
"key"
))
// 绑定节点的颜色信息
)
},
{
contextMenu
:
// 为每个节点定义上下文菜单
$
(
"ContextMenu"
,
$
(
"ContextMenuButton"
,
$
(
go
.
TextBlock
,
"Cut"
,
{
font
:
"bold 12px sans-serif"
,
width
:
100
,
textAlign
:
"center"
}),
{
click
:
(
e
)
=>
e
.
diagram
.
commandHandler
.
cutSelection
(),
"ButtonBorder.fill"
:
"white"
,
"_buttonFillOver"
:
"skyblue"
,
}
),
portId
:
"mark"
,
cursor
:
'pointer'
,
alignment
:
new
go
.
Spot
(
0.9
,
0.2
),
contextMenu
:
$
(
"ContextMenu"
,
$
(
"ContextMenuButton"
,
$
(
go
.
TextBlock
,
"
Copy
"
,
{
font
:
"bold 12px sans-serif"
,
width
:
100
,
textAlign
:
"center"
}),
{
click
:
(
e
)
=>
e
.
diagram
.
commandHandler
.
copySelection
(
),
$
(
go
.
TextBlock
,
"
Remove Mark
"
,
{
font
:
"bold 12px sans-serif"
,
width
:
100
,
textAlign
:
"center"
}),
{
click
:
(
e
:
any
,
obj
:
any
)
=>
removeMark
(
obj
.
part
.
adornedObject
),
"ButtonBorder.fill"
:
"white"
,
"_buttonFillOver"
:
"skyblue"
,
"_buttonFillOver"
:
"skyblue"
}
)
)
),
},
new
go
.
Binding
(
'portId'
,
'markId'
),
$
(
go
.
Shape
,
'Rectangle'
,
{
strokeWidth
:
1
,
desiredSize
:
new
go
.
Size
(
6
,
6
),
fill
:
"red"
},
))
},
$
(
go
.
Panel
,
'Spot'
,
$
(
go
.
Shape
,
"RoundedRectangle"
,
{
geometry
:
go
.
Geometry
.
parse
(
"XFM88 77.8 0 77.8 0 53.8 88 53.8 136.6 0 181.4 0 181.4 35.3 157.5 35.3 157.5 24.5 136.6 24.5z XM 86.8 70.1 L 141.7 10.2 XM 82.8 66.1 L 137.1 6.4 XM142 8.8B 0 360 139 8.8 3 3 XM87 68.8B 0 360 84 68.8 3 3"
),
stroke
:
"black"
,
fill
:
"white"
,
strokeWidth
:
1.5
},
{
doubleClick
:
function
(){
// 在节点中鼠标左键双击打开添加节点端口弹出框
dialogVisible
.
value
=
true
;
}
}
),
$
(
go
.
TextBlock
,
{
margin
:
10
,
textAlign
:
'center'
,
font
:
'bold 14px Segoe UI,sans-serif'
,
stroke
:
'#484848'
,
editable
:
true
,
_isNodeLabel
:
true
,
cursor
:
"move"
},
new
go
.
Binding
(
'text'
,
'key'
).
makeTwoWay
(),
),
{
toolTip
:
// 定义节点工具提示
$
(
"ToolTip"
,
$
(
go
.
TextBlock
,
{
margin
:
4
},
new
go
.
Binding
(
"text"
,
"key"
))
// 绑定节点的颜色信息
)
},
{
contextMenu
:
// 为每个节点定义上下文菜单
$
(
"ContextMenu"
,
$
(
"ContextMenuButton"
,
$
(
go
.
TextBlock
,
"Cut"
,
{
font
:
"bold 12px sans-serif"
,
width
:
100
,
textAlign
:
"center"
}),
{
click
:
(
e
)
=>
e
.
diagram
.
commandHandler
.
cutSelection
(),
"ButtonBorder.fill"
:
"white"
,
"_buttonFillOver"
:
"skyblue"
,
}
),
$
(
"ContextMenuButton"
,
$
(
go
.
TextBlock
,
"Copy"
,
{
font
:
"bold 12px sans-serif"
,
width
:
100
,
textAlign
:
"center"
}),
{
click
:
(
e
)
=>
e
.
diagram
.
commandHandler
.
copySelection
(),
"ButtonBorder.fill"
:
"white"
,
"_buttonFillOver"
:
"skyblue"
,
}
)
)
},
{
doubleClick
:
function
(){
// 在节点中鼠标左键双击打开添加节点端口弹出框
dialogVisible
.
value
=
true
;
}
}
)),
)
);
...
...
@@ -417,8 +491,8 @@ function initDiagram() {
const
nodeDataArray
=
[
{
key
:
"add1"
,
color
:
"lightyellow"
,
loc
:
new
go
.
Point
(
-
150
,
200
),
portArray
:
[{
portId
:
"top0"
,
portKey
:
"top"
},
{
portId
:
"left0"
,
portKey
:
"left"
},
{
portId
:
"right0"
,
portKey
:
"right"
},
{
portId
:
"bottom0"
,
portKey
:
"bottom"
}]
},
{
key
:
"add2"
,
color
:
"lightblue"
,
loc
:
new
go
.
Point
(
100
,
50
),
category
:
"zhaChi"
,
portArray
:
[{
portId
:
"bottom0"
,
portKey
:
"bottom"
}]
},
{
key
:
"add1"
,
color
:
"lightyellow"
,
loc
:
new
go
.
Point
(
-
150
,
200
),
portArray
:
[{
portId
:
"top0"
,
portKey
:
"top"
},
{
portId
:
"left0"
,
portKey
:
"left"
},
{
portId
:
"right0"
,
portKey
:
"right"
},
{
portId
:
"bottom0"
,
portKey
:
"bottom"
}]
,
markArray
:
[{
markId
:
"mark0"
}]
},
{
key
:
"add2"
,
color
:
"lightblue"
,
loc
:
new
go
.
Point
(
100
,
50
),
category
:
"zhaChi"
,
portArray
:
[{
portId
:
"bottom0"
,
portKey
:
"bottom"
}]
,
markArray
:
[{
markId
:
"mark0"
}]
},
];
const
linkDataArray
=
[
{
from
:
"add1"
,
fromPort
:
"top0"
,
to
:
"add2"
,
toPort
:
"bottom0"
,
text
:
"1->2"
},
...
...
@@ -494,7 +568,8 @@ function drop(event: any) {
key
:
key
,
color
:
'aqua'
,
loc
:
new
go
.
Point
(
point
.
x
,
point
.
y
),
portArray
:
[{
portId
:
"bottom0"
,
portKey
:
"bottom"
}],
portArray
:
[],
markArray
:
[],
category
:
category
};
myDiagram
.
model
.
addNodeData
(
newData
);
...
...
@@ -543,6 +618,39 @@ function removePort(port: any) {
myDiagram
.
commitTransaction
(
'removePort'
);
}
// 添加标定点
function
addMark
()
{
myDiagram
.
startTransaction
(
'addMark'
);
myDiagram
.
selection
.
each
((
node
:
any
)
=>
{
if
(
!
(
node
instanceof
go
.
Node
))
return
;
let
i
=
0
;
while
(
node
.
findPort
(
"mark"
+
i
.
toString
())
!==
node
)
i
++
;
const
name
=
"mark"
+
i
.
toString
();
const
newMarkData
=
{
markId
:
name
};
const
arr
=
node
.
data
.
markArray
;
if
(
arr
)
{
myDiagram
.
model
.
insertArrayItem
(
arr
,
-
1
,
newMarkData
);
}
});
myDiagram
.
commitTransaction
(
'addMark'
);
}
// 删除标定点
function
removeMark
(
mark
:
any
)
{
myDiagram
.
startTransaction
(
'removeMark'
);
const
markId
=
mark
.
portId
;
const
arr
=
mark
.
panel
.
itemArray
;
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
if
(
arr
[
i
].
markId
===
markId
)
{
myDiagram
.
model
.
removeArrayItem
(
arr
,
i
);
break
;
}
}
myDiagram
.
commitTransaction
(
'removeMark'
);
}
onMounted
(()
=>
{
initDiagram
()
});
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment