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
f93688f4
Commit
f93688f4
authored
Jun 06, 2024
by
jlc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update:实例学习
parent
6c774b07
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
118 additions
and
2 deletions
+118
-2
App.vue
src/App.vue
+4
-2
port.vue
src/components/port.vue
+114
-0
No files found.
src/App.vue
View file @
f93688f4
...
@@ -10,7 +10,8 @@
...
@@ -10,7 +10,8 @@
<!--
<DateChange></DateChange>
-->
<!--
<DateChange></DateChange>
-->
<!--
<panel></panel>
-->
<!--
<panel></panel>
-->
<!--
<contextMenu></contextMenu>
-->
<!--
<contextMenu></contextMenu>
-->
<firstProject></firstProject>
<!--
<firstProject></firstProject>
-->
<port></port>
</
template
>
</
template
>
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
...
@@ -25,7 +26,8 @@
...
@@ -25,7 +26,8 @@
// import DateChange from './components/DateChange.vue';
// import DateChange from './components/DateChange.vue';
// import panel from './components/panel.vue';
// import panel from './components/panel.vue';
// import contextMenu from './components/contextMenu.vue';
// import contextMenu from './components/contextMenu.vue';
import
firstProject
from
'./stageAchievements/firstProject.vue'
;
// import firstProject from './stageAchievements/firstProject.vue';
import
port
from
'./components/port.vue'
;
</
script
>
</
script
>
<
style
scoped
>
<
style
scoped
>
...
...
src/components/port.vue
0 → 100644
View file @
f93688f4
<
template
>
<div
id=
"diagramDiv"
style=
"width: 100%; height: 900px; background-color: #DAE4E4;"
></div>
</
template
>
<
script
setup
lang=
"ts"
>
import
{
onMounted
}
from
'vue'
;
import
go
from
'gojs'
;
const
$
=
go
.
GraphObject
.
make
;
var
myDiagram
:
any
;
function
initDiagram
()
{
myDiagram
=
$
(
go
.
Diagram
,
"diagramDiv"
,
{
'undoManager.isEnabled'
:
true
,
// 启用撤销重做功能
contentAlignment
:
go
.
Spot
.
Center
,
// 元素位置移动后始终处于在画布正中间
});
myDiagram
.
nodeTemplate
=
$
(
go
.
Node
,
"Auto"
,
$
(
go
.
Shape
,
"Rectangle"
,
{
fill
:
"lightgray"
}),
$
(
go
.
Panel
,
"Table"
,
$
(
go
.
RowColumnDefinition
,
{
column
:
0
,
alignment
:
go
.
Spot
.
Left
}),
$
(
go
.
RowColumnDefinition
,
{
column
:
2
,
alignment
:
go
.
Spot
.
Right
}),
$
(
go
.
TextBlock
,
// the node title
{
column
:
0
,
row
:
0
,
columnSpan
:
3
,
alignment
:
go
.
Spot
.
Center
,
font
:
"bold 10pt sans-serif"
,
margin
:
new
go
.
Margin
(
4
,
2
)
},
new
go
.
Binding
(
"text"
,
"key"
)),
$
(
go
.
Panel
,
"Horizontal"
,
{
column
:
0
,
row
:
1
},
$
(
go
.
Shape
,
// A端口
{
width
:
6
,
height
:
6
,
portId
:
"A"
,
toSpot
:
go
.
Spot
.
Left
,
toLinkable
:
true
,
// 设置可连接
toMaxLinks
:
1
// 最多只能连接一个
}
),
$
(
go
.
TextBlock
,
"A"
)
),
$
(
go
.
Panel
,
"Horizontal"
,
{
column
:
0
,
row
:
2
},
$
(
go
.
Shape
,
// B端口
{
width
:
6
,
height
:
6
,
portId
:
"B"
,
toSpot
:
go
.
Spot
.
Left
,
toLinkable
:
true
,
// 设置可连接
toMaxLinks
:
1
// 最多只能连接一个
}
),
$
(
go
.
TextBlock
,
"B"
)
),
$
(
go
.
Panel
,
"Horizontal"
,
{
column
:
2
,
row
:
1
,
rowSpan
:
2
},
$
(
go
.
TextBlock
,
"Out"
),
// out端口名称在布局的左边
$
(
go
.
Shape
,
// Out端口样式在布局的右边
{
width
:
6
,
height
:
6
,
portId
:
"Out"
,
fromSpot
:
go
.
Spot
.
Right
,
fromLinkable
:
true
}
)
)
)
);
myDiagram
.
linkTemplate
=
$
(
go
.
Link
,
{
routing
:
go
.
Routing
.
Orthogonal
,
corner
:
3
},
$
(
go
.
Shape
),
$
(
go
.
Shape
,
{
toArrow
:
"Standard"
})
);
myDiagram
.
layout
=
$
(
go
.
LayeredDigraphLayout
,
{
columnSpacing
:
10
});
var
nodeDataArray
=
[
{
key
:
"Add1"
},
{
key
:
"Add2"
},
{
key
:
"Subtract1"
}
];
var
linkDataArray
=
[
{
from
:
"Add1"
,
fromPort
:
"Out"
,
to
:
"Subtract1"
,
toPort
:
"A"
},
{
from
:
"Add2"
,
fromPort
:
"Out"
,
to
:
"Subtract1"
,
toPort
:
"B"
}
];
myDiagram
.
model
=
$
(
go
.
GraphLinksModel
,
{
linkFromPortIdProperty
:
"fromPort"
,
linkToPortIdProperty
:
"toPort"
,
nodeDataArray
:
nodeDataArray
,
linkDataArray
:
linkDataArray
}
);
}
onMounted
(()
=>
{
initDiagram
()
});
</
script
>
\ No newline at end of file
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