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
467c2351
Commit
467c2351
authored
Jul 04, 2024
by
jlc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update:svg节点的水平翻转和垂直翻转
parent
42c6c754
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
80 additions
and
14 deletions
+80
-14
imageNode.vue
src/stageAchievements/imageNode.vue
+80
-14
No files found.
src/stageAchievements/imageNode.vue
View file @
467c2351
...
...
@@ -22,8 +22,11 @@
</div>
</div>
<div>
<button
@
click=
"exportData"
>
导出数据
</button>
<button
@
click=
"toggleEditMode"
>
切换编辑/预览模式
</button>
<button
@
click=
"exportData"
style=
"margin: 8px;"
>
导出数据
</button>
<button
@
click=
"toggleEditMode"
style=
"margin: 8px;"
>
切换编辑/预览模式
</button>
<button
@
click=
"APItest"
style=
"margin: 8px;"
>
测试API按钮
</button>
<button
@
click=
"horizontalFlip"
style=
"margin: 8px;"
>
水平翻转选中节点
</button>
<button
@
click=
"verticalFlip"
style=
"margin: 8px;"
>
垂直翻转选中节点
</button>
</div>
<el-dialog
v-model=
"dialogVisible"
title=
"给当前节点添加端口/标定点"
>
...
...
@@ -32,10 +35,10 @@
</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>
<button
@
click=
"addPort('top')"
style=
"margin-right: 8px;"
>
添加上端口
</button>
<button
@
click=
"addPort('bottom')"
style=
"margin-right: 8px;"
>
添加下端口
</button>
<button
@
click=
"addPort('left')"
style=
"margin-right: 8px;"
>
添加左端口
</button>
<button
@
click=
"addPort('right')"
style=
"margin-right: 8px;"
>
添加右端口
</button>
<button
style=
"margin-left: 280px"
@
click=
"addDataPanel"
>
创建数据面板
</button>
</div>
<div
v-else
>
...
...
@@ -51,7 +54,7 @@
<
script
setup
lang=
"ts"
>
import
{
onMounted
,
ref
}
from
'vue'
;
import
go
from
'gojs'
;
import
go
,
{
Geometry
}
from
'gojs'
;
import
{
PortShiftingTool
}
from
'./extensions/PortShiftingTool'
;
import
{
ResizeMultipleTool
}
from
'./extensions/ResizeMultipleTool'
;
// import { LinkLabelDraggingTool } from './extensions/LinkLabelDraggingTools';
...
...
@@ -165,6 +168,8 @@ const markPanel = $(go.Panel,
)
)
var
zhaChiGeometry
=
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"
);
// 切换添加端口/标定点的形式
function
toggleDivs
(
value
:
boolean
)
{
changeModel
.
value
=
value
;
...
...
@@ -197,7 +202,7 @@ function initDiagram() {
$
(
go
.
Node
,
"Spot"
,
{
resizable
:
true
,
rotatable
:
true
rotatable
:
true
,
},
new
go
.
Binding
(
"location"
,
"loc"
),
new
go
.
Binding
(
"desiredSize"
,
"size"
,
go
.
Size
.
parse
).
makeTwoWay
(
go
.
Size
.
stringify
),
// 进行元素位置信息的绑定
...
...
@@ -287,11 +292,12 @@ function initDiagram() {
$
(
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"
)
,
geometry
:
zhaChiGeometry
,
stroke
:
"black"
,
fill
:
"white"
,
strokeWidth
:
1.5
},
new
go
.
Binding
(
'geometry'
,
'geometry'
)
),
$
(
go
.
TextBlock
,
{
...
...
@@ -301,7 +307,7 @@ function initDiagram() {
stroke
:
'#484848'
,
editable
:
true
,
_isNodeLabel
:
true
,
cursor
:
"move"
cursor
:
"move"
,
},
new
go
.
Binding
(
'text'
,
'key'
).
makeTwoWay
(),
),
...
...
@@ -709,11 +715,9 @@ function initDiagram() {
}
});
// myDiagram.commit((d: any) => d.remove("add1"), "Remove Part");
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"
}],
markArray
:
[]
},
{
key
:
"add2"
,
color
:
"lightblue"
,
loc
:
new
go
.
Point
(
100
,
50
),
category
:
"zhaChi"
,
portArray
:
[{
portId
:
"bottom0"
,
portKey
:
"bottom"
}],
markArray
:
[]
},
{
key
:
"add2"
,
color
:
"lightblue"
,
loc
:
new
go
.
Point
(
100
,
50
),
category
:
"zhaChi"
,
portArray
:
[{
portId
:
"bottom0"
,
portKey
:
"bottom"
}],
markArray
:
[]
,
geometry
:
zhaChiGeometry
,
isHorizontalFlipped
:
false
,
isVerticalFlipped
:
false
},
{
key
:
"add3"
,
color
:
"lightblue"
,
loc
:
new
go
.
Point
(
300
,
150
),
category
:
"zhaChi"
,
portArray
:
[{
portId
:
"bottom0"
,
portKey
:
"bottom"
}],
markArray
:
[]
},
{
key
:
"pipe1"
,
color
:
"gray"
,
loc
:
new
go
.
Point
(
0
,
100
),
category
:
"pipe"
,
portArray
:
[{
portId
:
"top0"
,
portKey
:
"top"
}],
markArray
:
[{
portId
:
"mark0"
}]},
{
key
:
"pipe1信息面板"
,
color
:
"red"
,
loc
:
new
go
.
Point
(
-
80
,
-
120
),
portArray
:
[{
portId
:
"top0"
,
portKey
:
"top"
},
{
portId
:
"left0"
,
portKey
:
"left"
},
{
portId
:
"right0"
,
portKey
:
"right"
},
{
portId
:
"bottom0"
,
portKey
:
"bottom"
}],
DCSArray
:
[{
name
:
"流速"
,
value
:
"20"
,
unit
:
"m/s"
},
{
name
:
"温度"
,
value
:
"30"
,
unit
:
"℃"
}],
damageArray
:
[{
damageName
:
"盐酸腐蚀"
,
damageValue
:
"100%"
}],
alarmArray
:
[{
alarmName
:
"警报"
}],
riskData
:
"高风险"
,
category
:
"infoPanel"
}
...
...
@@ -731,7 +735,7 @@ function initDiagram() {
linkToPortIdProperty
:
"toPort"
,
linkLabelKeysProperty
:
"labelKeys"
,
nodeDataArray
:
nodeDataArray
,
linkDataArray
:
linkDataArray
linkDataArray
:
linkDataArray
}
);
}
...
...
@@ -1005,6 +1009,68 @@ function addDataPanel(){
myDiagram
.
commitTransaction
(
"addDataPanel"
);
}
function
APItest
(){
var
node
=
myDiagram
.
findNodeForKey
(
"add1"
);
if
(
node
)
{
myDiagram
.
model
.
setDataProperty
(
node
.
data
,
"color"
,
"red"
);
}
}
// svg节点进行水平翻转
function
horizontalFlip
()
{
myDiagram
.
startTransaction
(
'horizontalFlip'
);
myDiagram
.
selection
.
each
((
node
:
any
)
=>
{
if
(
!
(
node
instanceof
go
.
Node
))
return
;
// 获取节点翻转标志
var
isHorizontalFlipped
=
node
.
data
.
isHorizontalFlipped
||
false
;
var
isVerticalFlipped
=
node
.
data
.
isVerticalFlipped
||
false
;
var
zhaChiGeometrySample
=
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"
);
// 根据翻转标志计算当前翻转状态
var
currentGeometry
=
zhaChiGeometrySample
;
if
(
isHorizontalFlipped
)
{
currentGeometry
=
currentGeometry
.
scale
(
-
1
,
1
);
}
if
(
isVerticalFlipped
)
{
currentGeometry
=
currentGeometry
.
scale
(
1
,
-
1
);
}
// 翻转几何图形
var
flippedGeometry
=
currentGeometry
.
scale
(
-
1
,
1
);
myDiagram
.
model
.
setDataProperty
(
node
.
data
,
"geometry"
,
flippedGeometry
);
myDiagram
.
model
.
setDataProperty
(
node
.
data
,
"isHorizontalFlipped"
,
!
isHorizontalFlipped
);
});
myDiagram
.
commitTransaction
(
'horizontalFlip'
);
}
// svg节点进行垂直翻转
function
verticalFlip
()
{
myDiagram
.
startTransaction
(
'verticalFlip'
);
myDiagram
.
selection
.
each
((
node
:
any
)
=>
{
if
(
!
(
node
instanceof
go
.
Node
))
return
;
// 获取节点翻转标志
var
isHorizontalFlipped
=
node
.
data
.
isHorizontalFlipped
||
false
;
var
isVerticalFlipped
=
node
.
data
.
isVerticalFlipped
||
false
;
var
zhaChiGeometrySample
=
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"
);
// 根据翻转标志计算当前翻转状态
var
currentGeometry
=
zhaChiGeometrySample
;
if
(
isHorizontalFlipped
)
{
currentGeometry
=
currentGeometry
.
scale
(
-
1
,
1
);
}
if
(
isVerticalFlipped
)
{
currentGeometry
=
currentGeometry
.
scale
(
1
,
-
1
);
}
// 翻转几何图形
var
flippedGeometry
=
currentGeometry
.
scale
(
1
,
-
1
);
myDiagram
.
model
.
setDataProperty
(
node
.
data
,
"geometry"
,
flippedGeometry
);
myDiagram
.
model
.
setDataProperty
(
node
.
data
,
"isVerticalFlipped"
,
!
isVerticalFlipped
);
});
myDiagram
.
commitTransaction
(
'verticalFlip'
);
}
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