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
bf84a30b
Commit
bf84a30b
authored
Jun 25, 2024
by
jlc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update:html元素拖动匹配
parent
fcc87e33
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
27 additions
and
13 deletions
+27
-13
imageNode.vue
src/stageAchievements/imageNode.vue
+27
-13
No files found.
src/stageAchievements/imageNode.vue
View file @
bf84a30b
...
@@ -2,10 +2,10 @@
...
@@ -2,10 +2,10 @@
<div
class=
"common-layout"
>
<div
class=
"common-layout"
>
<div
class=
"layout-container"
>
<div
class=
"layout-container"
>
<div
id=
"PaletteDiv"
class=
"layout-aside"
>
<div
id=
"PaletteDiv"
class=
"layout-aside"
>
<div
class=
"svg_class"
draggable=
"true"
@
dragstart=
"dragstart"
>
<div
id=
"svg_zhaChi"
class=
"svg_class"
draggable=
"true"
@
dragstart=
"dragstart"
>
<img
src=
"./pid_node/渣池.svg"
>
<img
id=
"svg_zhaChi"
src=
"./pid_node/渣池.svg"
>
</div>
</div>
<div
style=
"background-color: aqua; width: 100px; height: 100px; margin-left: auto; margin-right: auto;"
draggable=
"true"
@
dragstart=
"dragstart"
>
html元素
</div>
<div
id=
"html"
style=
"background-color: aqua; width: 100px; height: 100px; margin-left: auto; margin-right: auto;"
draggable=
"true"
@
dragstart=
"dragstart"
>
html元素
</div>
</div>
</div>
<div
id=
"diagramDiv"
class=
"layout-main"
@
dragover=
"event => event.preventDefault()"
<div
id=
"diagramDiv"
class=
"layout-main"
@
dragover=
"event => event.preventDefault()"
@
dragenter=
"event => event.preventDefault()"
@
drop=
"drop"
></div>
@
dragenter=
"event => event.preventDefault()"
@
drop=
"drop"
></div>
...
@@ -68,7 +68,7 @@ function initDiagram() {
...
@@ -68,7 +68,7 @@ function initDiagram() {
new
go
.
Binding
(
"location"
,
"loc"
),
new
go
.
Binding
(
"location"
,
"loc"
),
new
go
.
Binding
(
"desiredSize"
,
"size"
,
go
.
Size
.
parse
).
makeTwoWay
(
go
.
Size
.
stringify
),
// 进行元素位置信息的绑定
new
go
.
Binding
(
"desiredSize"
,
"size"
,
go
.
Size
.
parse
).
makeTwoWay
(
go
.
Size
.
stringify
),
// 进行元素位置信息的绑定
// 端口模板
// 端口模板
new
go
.
Binding
(
'itemArray'
,
'
mark
Array'
),
{
new
go
.
Binding
(
'itemArray'
,
'
port
Array'
),
{
itemTemplate
:
$
(
go
.
Panel
,
itemTemplate
:
$
(
go
.
Panel
,
{
{
portId
:
"Top"
,
portId
:
"Top"
,
...
@@ -192,7 +192,7 @@ function initDiagram() {
...
@@ -192,7 +192,7 @@ function initDiagram() {
},
},
new
go
.
Binding
(
"location"
,
"loc"
),
new
go
.
Binding
(
"location"
,
"loc"
),
new
go
.
Binding
(
"desiredSize"
,
"size"
,
go
.
Size
.
parse
).
makeTwoWay
(
go
.
Size
.
stringify
),
// 进行元素位置信息的绑定
new
go
.
Binding
(
"desiredSize"
,
"size"
,
go
.
Size
.
parse
).
makeTwoWay
(
go
.
Size
.
stringify
),
// 进行元素位置信息的绑定
new
go
.
Binding
(
'itemArray'
,
'
mark
Array'
),
{
new
go
.
Binding
(
'itemArray'
,
'
port
Array'
),
{
itemTemplate
:
$
(
go
.
Panel
,
itemTemplate
:
$
(
go
.
Panel
,
{
{
portId
:
"Top"
,
portId
:
"Top"
,
...
@@ -417,8 +417,8 @@ function initDiagram() {
...
@@ -417,8 +417,8 @@ function initDiagram() {
const
nodeDataArray
=
[
const
nodeDataArray
=
[
{
key
:
"add1"
,
color
:
"lightyellow"
,
loc
:
new
go
.
Point
(
-
150
,
200
),
mark
Array
:
[{
portId
:
"top0"
,
portKey
:
"top"
},
{
portId
:
"left0"
,
portKey
:
"left"
},
{
portId
:
"right0"
,
portKey
:
"right"
},
{
portId
:
"bottom0"
,
portKey
:
"bottom"
}]
},
{
key
:
"add1"
,
color
:
"lightyellow"
,
loc
:
new
go
.
Point
(
-
150
,
200
),
port
Array
:
[{
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"
,
mark
Array
:
[{
portId
:
"bottom0"
,
portKey
:
"bottom"
}]
},
{
key
:
"add2"
,
color
:
"lightblue"
,
loc
:
new
go
.
Point
(
100
,
50
),
category
:
"zhaChi"
,
port
Array
:
[{
portId
:
"bottom0"
,
portKey
:
"bottom"
}]
},
];
];
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"
},
...
@@ -449,6 +449,13 @@ function dragstart(event: any){
...
@@ -449,6 +449,13 @@ function dragstart(event: any){
const
target
=
event
.
target
;
const
target
=
event
.
target
;
dragStartOffsetX
.
value
=
event
.
offsetX
-
target
.
clientWidth
/
2
;
dragStartOffsetX
.
value
=
event
.
offsetX
-
target
.
clientWidth
/
2
;
dragStartOffsetY
.
value
=
event
.
offsetY
-
target
.
clientHeight
/
2
;
dragStartOffsetY
.
value
=
event
.
offsetY
-
target
.
clientHeight
/
2
;
// 设置拖动数据
if
(
target
.
id
===
"svg_zhaChi"
)
{
event
.
dataTransfer
.
setData
(
"node-type"
,
"zhaChi"
);
}
else
if
(
target
.
id
===
"html"
)
{
event
.
dataTransfer
.
setData
(
"node-type"
,
"html"
);
}
}
}
// html元素拖动到画布中
// html元素拖动到画布中
...
@@ -475,13 +482,20 @@ function drop(event: any) {
...
@@ -475,13 +482,20 @@ function drop(event: any) {
// console.log(point)
// console.log(point)
// 开始一个新的事务
// 开始一个新的事务
myDiagram
.
startTransaction
(
'new node'
);
myDiagram
.
startTransaction
(
'new node'
);
// 获取拖动数据
let
nodeType
=
event
.
dataTransfer
.
getData
(
"node-type"
);
let
category
=
""
;
let
key
=
"html元素"
;
if
(
nodeType
===
"zhaChi"
)
{
category
=
"zhaChi"
;
key
=
"渣池"
;
}
const
newData
=
{
const
newData
=
{
key
:
'html元素'
,
key
:
key
,
color
:
'aqua'
,
color
:
'aqua'
,
loc
:
new
go
.
Point
(
point
.
x
,
point
.
y
),
loc
:
new
go
.
Point
(
point
.
x
,
point
.
y
),
bottomArray
:
[{
portId
:
"bottom0"
}],
portArray
:
[{
portId
:
"bottom0"
,
portKey
:
"bottom"
}],
// category: "" // 使用标准模板绘制节点
category
:
category
category
:
"zhaChi"
// 使用zhaChi的模板绘制节点
};
};
myDiagram
.
model
.
addNodeData
(
newData
);
myDiagram
.
model
.
addNodeData
(
newData
);
myDiagram
.
commitTransaction
(
'new node'
);
myDiagram
.
commitTransaction
(
'new node'
);
...
@@ -504,8 +518,8 @@ function addPort(side: string) {
...
@@ -504,8 +518,8 @@ function addPort(side: string) {
portId
:
name
,
portId
:
name
,
portKey
:
side
portKey
:
side
};
};
// 获取要修改的端口数据的数组,索引的属性为
mark
Array
// 获取要修改的端口数据的数组,索引的属性为
port
Array
const
arr
=
node
.
data
.
mark
Array
;
const
arr
=
node
.
data
.
port
Array
;
if
(
arr
)
{
if
(
arr
)
{
// 其添加到端口数据数组中
// 其添加到端口数据数组中
myDiagram
.
model
.
insertArrayItem
(
arr
,
-
1
,
newportdata
);
myDiagram
.
model
.
insertArrayItem
(
arr
,
-
1
,
newportdata
);
...
...
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