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
c26a011f
Commit
c26a011f
authored
Jun 26, 2024
by
jlc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update:端口隐藏问题
parent
27ce9a22
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
39 additions
and
2 deletions
+39
-2
imageNode.vue
src/stageAchievements/imageNode.vue
+39
-2
No files found.
src/stageAchievements/imageNode.vue
View file @
c26a011f
...
@@ -13,6 +13,7 @@
...
@@ -13,6 +13,7 @@
</div>
</div>
<div>
<div>
<button
@
click=
"exportData"
>
导出数据
</button>
<button
@
click=
"exportData"
>
导出数据
</button>
<button
@
click=
"toggleEditMode"
>
切换编辑/预览模式
</button>
</div>
</div>
<el-dialog
v-model=
"dialogVisible"
title=
"给当前节点添加端口/标定点"
>
<el-dialog
v-model=
"dialogVisible"
title=
"给当前节点添加端口/标定点"
>
...
@@ -42,6 +43,7 @@ import { LinkLabelDraggingTool } from './extensions/LinkLabelDraggingTools';
...
@@ -42,6 +43,7 @@ import { LinkLabelDraggingTool } from './extensions/LinkLabelDraggingTools';
import
{
NodeLabelDraggingTool
}
from
'./extensions/NodeLabelDraggingTool'
;
import
{
NodeLabelDraggingTool
}
from
'./extensions/NodeLabelDraggingTool'
;
import
{
GuidedDraggingTool
}
from
'./extensions/GuidedDraggingTool'
;
import
{
GuidedDraggingTool
}
from
'./extensions/GuidedDraggingTool'
;
import
{
RotateMultipleTool
}
from
'./extensions/RotateMultipleTool'
;
import
{
RotateMultipleTool
}
from
'./extensions/RotateMultipleTool'
;
import
{
ElMessage
}
from
'element-plus'
;
const
$
=
go
.
GraphObject
.
make
;
const
$
=
go
.
GraphObject
.
make
;
var
myDiagram
:
any
;
var
myDiagram
:
any
;
...
@@ -71,6 +73,7 @@ function initDiagram() {
...
@@ -71,6 +73,7 @@ function initDiagram() {
"draggingTool.guidelineWidth"
:
1
,
// 设置辅助对齐的线条的粗细
"draggingTool.guidelineWidth"
:
1
,
// 设置辅助对齐的线条的粗细
// 旋转节点
// 旋转节点
rotatingTool
:
new
RotateMultipleTool
(),
rotatingTool
:
new
RotateMultipleTool
(),
"relinkingTool.isUnconnectedLinkValid"
:
false
,
});
});
myDiagram
.
toolManager
.
mouseMoveTools
.
insertAt
(
0
,
new
PortShiftingTool
());
// 设置端口移动
myDiagram
.
toolManager
.
mouseMoveTools
.
insertAt
(
0
,
new
PortShiftingTool
());
// 设置端口移动
...
@@ -96,6 +99,7 @@ function initDiagram() {
...
@@ -96,6 +99,7 @@ function initDiagram() {
toLinkable
:
true
,
toLinkable
:
true
,
cursor
:
'pointer'
,
cursor
:
'pointer'
,
alignment
:
go
.
Spot
.
Top
,
alignment
:
go
.
Spot
.
Top
,
visible
:
true
,
contextMenu
:
contextMenu
:
$
(
"ContextMenu"
,
$
(
"ContextMenu"
,
$
(
"ContextMenuButton"
,
$
(
"ContextMenuButton"
,
...
@@ -109,6 +113,7 @@ function initDiagram() {
...
@@ -109,6 +113,7 @@ function initDiagram() {
),
),
},
},
new
go
.
Binding
(
'portId'
,
'portId'
),
new
go
.
Binding
(
'portId'
,
'portId'
),
new
go
.
Binding
(
'visible'
,
'visible'
),
new
go
.
Binding
(
'alignment'
,
'portKey'
,
(
portKey
:
string
)
=>
{
new
go
.
Binding
(
'alignment'
,
'portKey'
,
(
portKey
:
string
)
=>
{
switch
(
portKey
)
{
switch
(
portKey
)
{
case
"top"
:
return
go
.
Spot
.
Top
;
case
"top"
:
return
go
.
Spot
.
Top
;
...
@@ -251,6 +256,7 @@ function initDiagram() {
...
@@ -251,6 +256,7 @@ function initDiagram() {
toLinkable
:
true
,
toLinkable
:
true
,
cursor
:
'pointer'
,
cursor
:
'pointer'
,
alignment
:
go
.
Spot
.
Top
,
alignment
:
go
.
Spot
.
Top
,
visible
:
true
,
contextMenu
:
contextMenu
:
$
(
"ContextMenu"
,
$
(
"ContextMenu"
,
$
(
"ContextMenuButton"
,
$
(
"ContextMenuButton"
,
...
@@ -264,6 +270,7 @@ function initDiagram() {
...
@@ -264,6 +270,7 @@ function initDiagram() {
),
),
},
},
new
go
.
Binding
(
'portId'
,
'portId'
),
new
go
.
Binding
(
'portId'
,
'portId'
),
new
go
.
Binding
(
'visible'
,
'visible'
),
new
go
.
Binding
(
'alignment'
,
'portKey'
,
(
portKey
:
string
)
=>
{
new
go
.
Binding
(
'alignment'
,
'portKey'
,
(
portKey
:
string
)
=>
{
switch
(
portKey
)
{
switch
(
portKey
)
{
case
"top"
:
return
go
.
Spot
.
Top
;
case
"top"
:
return
go
.
Spot
.
Top
;
...
@@ -393,8 +400,9 @@ function initDiagram() {
...
@@ -393,8 +400,9 @@ function initDiagram() {
curve
:
go
.
Curve
.
JumpGap
,
curve
:
go
.
Curve
.
JumpGap
,
corner
:
5
,
corner
:
5
,
adjusting
:
go
.
LinkAdjusting
.
Stretch
,
adjusting
:
go
.
LinkAdjusting
.
Stretch
,
reshapable
:
tru
e
// 设置连接线的形态是否可以被修改
reshapable
:
fals
e
// 设置连接线的形态是否可以被修改
},
},
new
go
.
Binding
(
"points"
).
makeTwoWay
(),
$
(
go
.
Shape
,
// 链接线的样式
$
(
go
.
Shape
,
// 链接线的样式
{
{
strokeWidth
:
1.5
strokeWidth
:
1.5
...
@@ -511,7 +519,7 @@ function initDiagram() {
...
@@ -511,7 +519,7 @@ function initDiagram() {
{
key
:
"add2"
,
color
:
"lightblue"
,
loc
:
new
go
.
Point
(
100
,
50
),
category
:
"zhaChi"
,
portArray
:
[{
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
=
[
const
linkDataArray
=
[
{
from
:
"add1"
,
fromPort
:
"top0"
,
to
:
"add2"
,
toPort
:
"bottom0"
,
text
:
"1->2"
},
{
from
:
"add1"
,
fromPort
:
"top0"
,
to
:
"add2"
,
toPort
:
"bottom0"
,
text
:
"1->2"
,
"points"
:[
-
96.5
,
200
,
-
96.5
,
190
,
-
96.5
,
166.4
,
191.45
,
166.4
,
191.45
,
142.8
,
191.45
,
132.8
]
},
];
];
myDiagram
.
model
=
myDiagram
.
model
=
...
@@ -660,6 +668,35 @@ function removeMark(mark: any) {
...
@@ -660,6 +668,35 @@ function removeMark(mark: any) {
myDiagram
.
commitTransaction
(
'removeMark'
);
myDiagram
.
commitTransaction
(
'removeMark'
);
}
}
// 设置一开始画布为编辑模式
const
isEditMode
=
ref
(
true
)
// 切换编辑和预览模式
function
toggleEditMode
()
{
myDiagram
.
startTransaction
(
"changeModel"
);
isEditMode
.
value
=
!
isEditMode
.
value
;
if
(
isEditMode
.
value
){
ElMessage
(
'编辑模式'
)
}
else
{
ElMessage
({
message
:
'预览模式'
,
type
:
'success'
,
})
}
if
(
myDiagram
)
{
myDiagram
.
isReadOnly
=
!
isEditMode
.
value
;
myDiagram
.
allowEdit
=
isEditMode
.
value
;
// 隐藏所有的节点端口
myDiagram
.
nodes
.
each
((
node
:
any
)
=>
{
node
.
ports
.
each
((
port
:
any
)
=>
{
myDiagram
.
model
.
setDataProperty
(
port
.
data
,
'visible'
,
isEditMode
.
value
);
});
});
}
myDiagram
.
commitTransaction
(
"changeModel"
);
}
onMounted
(()
=>
{
onMounted
(()
=>
{
initDiagram
()
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