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
6f4acbc2
Commit
6f4acbc2
authored
Jun 11, 2024
by
jlc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update:通过扩展移动端口和调节节点大小
parent
f93688f4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
367 additions
and
2 deletions
+367
-2
App.vue
src/App.vue
+4
-2
dynamicPort.vue
src/stageAchievements/dynamicPort.vue
+135
-0
PortShiftingTool.ts
src/stageAchievements/extensions/PortShiftingTool.ts
+158
-0
ResizeMultipleTool.ts
src/stageAchievements/extensions/ResizeMultipleTool.ts
+70
-0
No files found.
src/App.vue
View file @
6f4acbc2
...
@@ -11,7 +11,8 @@
...
@@ -11,7 +11,8 @@
<!--
<panel></panel>
-->
<!--
<panel></panel>
-->
<!--
<contextMenu></contextMenu>
-->
<!--
<contextMenu></contextMenu>
-->
<!--
<firstProject></firstProject>
-->
<!--
<firstProject></firstProject>
-->
<port></port>
<!--
<port></port>
-->
<dynamicPort></dynamicPort>
</
template
>
</
template
>
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
...
@@ -27,7 +28,8 @@
...
@@ -27,7 +28,8 @@
// 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'
;
// import port from './components/port.vue';
import
dynamicPort
from
'./stageAchievements/dynamicPort.vue'
;
</
script
>
</
script
>
<
style
scoped
>
<
style
scoped
>
...
...
src/stageAchievements/dynamicPort.vue
0 → 100644
View file @
6f4acbc2
<
template
>
<div
id=
"diagramDiv"
style=
"width: 100%; height: 900px; background-color: #DAE4E4;"
></div>
</
template
>
<
script
setup
lang=
"ts"
>
import
{
onMounted
}
from
'vue'
;
import
*
as
go
from
'gojs'
;
import
{
PortShiftingTool
}
from
'./extensions/PortShiftingTool'
;
import
{
ResizeMultipleTool
}
from
'./extensions/ResizeMultipleTool'
;
const
$
=
go
.
GraphObject
.
make
;
var
myDiagram
:
any
;
function
initDiagram
()
{
myDiagram
=
$
(
go
.
Diagram
,
"diagramDiv"
,
{
"undoManager.isEnabled"
:
true
,
"toolManager.mouseWheelBehavior"
:
go
.
WheelMode
.
Zoom
,
resizingTool
:
new
ResizeMultipleTool
(),
// 自定义ResizeMultipleTool()方法来设置元素大小的缩放
});
myDiagram
.
toolManager
.
mouseMoveTools
.
insertAt
(
0
,
new
PortShiftingTool
());
// 设置端口移动
myDiagram
.
nodeTemplate
=
$
(
go
.
Node
,
"Spot"
,
{
resizable
:
true
},
new
go
.
Binding
(
"location"
,
"loc"
),
new
go
.
Binding
(
"desiredSize"
,
"size"
,
go
.
Size
.
parse
).
makeTwoWay
(
go
.
Size
.
stringify
),
// 进行元素位置信息的绑定
$
(
go
.
Shape
,
"RoundedRectangle"
,
{
// width: 65,
// height: 65,
fill
:
"white"
,
strokeWidth
:
0
},
new
go
.
Binding
(
"fill"
,
"color"
)
),
$
(
go
.
TextBlock
,
{
margin
:
10
,
textAlign
:
'center'
,
font
:
'bold 14px Segoe UI,sans-serif'
,
stroke
:
'#484848'
,
editable
:
true
},
new
go
.
Binding
(
'text'
,
'key'
).
makeTwoWay
()
),
$
(
go
.
Shape
,
"Rectangle"
,
{
width
:
6
,
height
:
6
,
portId
:
"Top"
,
fromSpot
:
go
.
Spot
.
Top
,
// 从端口顶部发出连接
toSpot
:
go
.
Spot
.
Top
,
// 从端口顶部接收连接
fromLinkable
:
true
,
toLinkable
:
true
,
cursor
:
'pointer'
,
alignment
:
new
go
.
Spot
(
0.5
,
0
)
}
),
$
(
go
.
Shape
,
"Rectangle"
,
{
width
:
6
,
height
:
6
,
portId
:
"Left"
,
fromSpot
:
go
.
Spot
.
Left
,
toSpot
:
go
.
Spot
.
Left
,
fromLinkable
:
true
,
toLinkable
:
true
,
cursor
:
'pointer'
,
alignment
:
new
go
.
Spot
(
0
,
0.5
)
}
),
$
(
go
.
Shape
,
"Rectangle"
,
{
width
:
6
,
height
:
6
,
portId
:
"Bottom"
,
fromSpot
:
go
.
Spot
.
Bottom
,
toSpot
:
go
.
Spot
.
Bottom
,
fromLinkable
:
true
,
toLinkable
:
true
,
cursor
:
'pointer'
,
alignment
:
new
go
.
Spot
(
0.5
,
1
)
}
)
);
myDiagram
.
linkTemplate
=
$
(
go
.
Link
,
{
routing
:
go
.
Routing
.
AvoidsNodes
,
curve
:
go
.
Curve
.
JumpGap
,
corner
:
3
,
fromPortId
:
"from"
,
toPortId
:
"to"
,
relinkableTo
:
true
,
// 允许连接线尾部重新连接
relinkableFrom
:
true
,
// 允许连接线头部重新链接
},
$
(
go
.
Shape
),
$
(
go
.
Shape
,
{
toArrow
:
"Standard"
})
);
// myDiagram.layout = $(go.LayeredDigraphLayout, { columnSpacing: 10 });
const
nodeDataArray
=
[
{
key
:
"Add1"
,
loc
:
new
go
.
Point
(
0
,
0
),
color
:
"lightgray"
},
{
key
:
"Add2"
,
loc
:
new
go
.
Point
(
-
180
,
180
),
color
:
"lightblue"
},
{
key
:
"Subtract1"
,
loc
:
new
go
.
Point
(
100
,
250
),
color
:
"lightgreen"
}
];
const
linkDataArray
=
[
{
from
:
"Add1"
,
fromPort
:
"Bottom"
,
to
:
"Subtract1"
,
toPort
:
"Top"
},
{
from
:
"Add2"
,
fromPort
:
"Bottom"
,
to
:
"Subtract1"
,
toPort
:
"Left"
}
];
myDiagram
.
model
=
$
(
go
.
GraphLinksModel
,
{
linkFromPortIdProperty
:
"fromPort"
,
linkToPortIdProperty
:
"toPort"
,
nodeDataArray
:
nodeDataArray
,
linkDataArray
:
linkDataArray
}
);
}
onMounted
(()
=>
{
initDiagram
()
});
</
script
>
\ No newline at end of file
src/stageAchievements/extensions/PortShiftingTool.ts
0 → 100644
View file @
6f4acbc2
/*
* Copyright (C) 1998-2024 by Northwoods Software Corporation. All Rights Reserved.
*/
/*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* If you intend to use an extension in production, you should copy the code to your own source directory.
* Extensions can be found in the GoJS kit under the extensions or extensionsJSM folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/
import
*
as
go
from
'gojs'
;
/**
* The PortShiftingTool class lets a user move a port on a {@link go.Node}.
*
* This tool only works when the Node has a port (any GraphObject) marked with
* a non-null and non-empty portId that is positioned in a Spot Panel,
* and the user holds down the Shift key.
* It works by modifying that port's {@link go.GraphObject.alignment} property.
*
* If you want to experiment with this extension, try the <a href="../../samples/PortShifting.html">Port Shifting</a> sample.
* @category Tool Extension
*/
export
class
PortShiftingTool
extends
go
.
Tool
{
/**
* The port being shifted.
*/
port
:
go
.
GraphObject
|
null
;
private
_originalAlignment
:
go
.
Spot
;
/**
* Constructs a PortShiftingTool and sets the name for the tool.
*/
constructor
(
init
?:
Partial
<
PortShiftingTool
>
)
{
super
();
this
.
name
=
'PortShifting'
;
this
.
port
=
null
;
this
.
_originalAlignment
=
go
.
Spot
.
Default
;
if
(
init
)
Object
.
assign
(
this
,
init
);
}
/**
* This tool can only start if the mouse has moved enough so that it is not a click,
* and if the mouse down point is on a GraphObject "port" in a Spot Panel,
* as determined by {@link findPort}.
*/
override
canStart
():
boolean
{
const
diagram
=
this
.
diagram
;
if
(
!
super
.
canStart
())
return
false
;
// require left button & that it has moved far enough away from the mouse down point, so it isn't a click
const
e
=
diagram
.
lastInput
;
if
(
!
e
.
left
||
!
e
.
shift
)
return
false
;
if
(
!
this
.
isBeyondDragSize
())
return
false
;
return
this
.
findPort
()
!==
null
;
}
/**
* From the {@link go.GraphObject} at the mouse point, search up the visual tree until we get to
* an object that has the {@link go.GraphObject.portId} property set to a non-empty string, that is in a Spot Panel,
* and that is not the main element of the panel (typically the first element).
* @returns This returns null if no such port is at the mouse down point.
*/
findPort
():
go
.
GraphObject
|
null
{
const
diagram
=
this
.
diagram
;
const
e
=
diagram
.
firstInput
;
let
elt
=
diagram
.
findObjectAt
(
e
.
documentPoint
,
null
,
null
);
if
(
elt
===
null
||
!
(
elt
.
part
instanceof
go
.
Node
))
return
null
;
while
(
elt
!==
null
&&
elt
.
panel
!==
null
)
{
if
(
elt
.
panel
.
type
===
go
.
Panel
.
Spot
&&
elt
.
panel
.
findMainElement
()
!==
elt
&&
elt
.
portId
!==
null
&&
elt
.
portId
!==
''
)
return
elt
;
elt
=
elt
.
panel
;
}
return
null
;
}
/**
* Start a transaction, call {@link findPort} and remember it as the "port" property,
* and remember the original value for the port's {@link go.GraphObject.alignment} property.
*/
override
doActivate
():
void
{
this
.
startTransaction
(
'Shifted Label'
);
this
.
port
=
this
.
findPort
();
if
(
this
.
port
!==
null
)
{
this
.
_originalAlignment
=
this
.
port
.
alignment
.
copy
();
}
super
.
doActivate
();
}
/**
* Stop any ongoing transaction.
*/
override
doDeactivate
():
void
{
super
.
doDeactivate
();
this
.
stopTransaction
();
}
/**
* Clear any reference to a port element.
*/
override
doStop
():
void
{
this
.
port
=
null
;
super
.
doStop
();
}
/**
* Restore the port's original value for GraphObject.alignment.
*/
override
doCancel
():
void
{
if
(
this
.
port
!==
null
)
{
this
.
port
.
alignment
=
this
.
_originalAlignment
;
}
super
.
doCancel
();
}
/**
* During the drag, call {@link updateAlignment} in order to set the {@link go.GraphObject.alignment} of the port.
*/
override
doMouseMove
():
void
{
if
(
!
this
.
isActive
)
return
;
this
.
updateAlignment
();
}
/**
* At the end of the drag, update the alignment of the port and finish the tool,
* completing a transaction.
*/
override
doMouseUp
():
void
{
if
(
!
this
.
isActive
)
return
;
this
.
updateAlignment
();
this
.
transactionResult
=
'Shifted Label'
;
this
.
stopTool
();
}
/**
* Save the port's {@link go.GraphObject.alignment} as a fractional Spot in the Spot Panel
* that the port is in. Thus if the main element changes size, the relative positions
* of the ports will be maintained. But that does assume that the port must remain
* inside the main element -- it cannot wander away from the node.
* This does not modify the port's {@link go.GraphObject.alignmentFocus} property.
*/
updateAlignment
():
void
{
if
(
this
.
port
===
null
||
this
.
port
.
panel
===
null
)
return
;
const
last
=
this
.
diagram
.
lastInput
.
documentPoint
;
const
main
=
this
.
port
.
panel
.
findMainElement
();
if
(
main
===
null
)
return
;
const
tl
=
main
.
getDocumentPoint
(
go
.
Spot
.
TopLeft
);
const
br
=
main
.
getDocumentPoint
(
go
.
Spot
.
BottomRight
);
const
x
=
Math
.
max
(
0
,
Math
.
min
((
last
.
x
-
tl
.
x
)
/
(
br
.
x
-
tl
.
x
),
1
));
const
y
=
Math
.
max
(
0
,
Math
.
min
((
last
.
y
-
tl
.
y
)
/
(
br
.
y
-
tl
.
y
),
1
));
this
.
port
.
alignment
=
new
go
.
Spot
(
x
,
y
);
}
}
src/stageAchievements/extensions/ResizeMultipleTool.ts
0 → 100644
View file @
6f4acbc2
/*
* Copyright (C) 1998-2024 by Northwoods Software Corporation. All Rights Reserved.
*/
/*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* If you intend to use an extension in production, you should copy the code to your own source directory.
* Extensions can be found in the GoJS kit under the extensions or extensionsJSM folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/
import
*
as
go
from
'gojs'
;
/**
* The ResizeMultipleTool class lets the user resize multiple objects at once.
*
* If you want to experiment with this extension, try the <a href="../../samples/ResizeMultiple.html">Resize Multiple</a> sample.
* @category Tool Extension
*/
export
class
ResizeMultipleTool
extends
go
.
ResizingTool
{
/**
* Constructs a ResizeMultipleTool and sets the name for the tool.
*/
constructor
(
init
?:
Partial
<
ResizeMultipleTool
>
)
{
super
();
this
.
name
=
'ResizeMultiple'
;
if
(
init
)
Object
.
assign
(
this
,
init
);
}
/**
* Overrides {@link go.ResizingTool.resize} to resize all selected objects to the same size.
* @param newr - the intended new rectangular bounds for each Part's {@link go.Part.resizeObject}.
*/
override
resize
(
newr
:
go
.
Rect
):
void
{
const
diagram
=
this
.
diagram
;
diagram
.
selection
.
each
((
part
)
=>
{
if
(
part
instanceof
go
.
Link
)
return
;
// only Nodes and simple Parts
const
obj
=
part
.
resizeObject
;
// calculate new location
const
pos
=
part
.
position
.
copy
();
const
angle
=
obj
.
getDocumentAngle
();
const
sc
=
obj
.
getDocumentScale
();
const
radAngle
=
(
Math
.
PI
*
angle
)
/
180
;
const
angleCos
=
Math
.
cos
(
radAngle
);
const
angleSin
=
Math
.
sin
(
radAngle
);
const
deltaWidth
=
newr
.
width
-
obj
.
naturalBounds
.
width
;
const
deltaHeight
=
newr
.
height
-
obj
.
naturalBounds
.
height
;
const
angleBottom
=
angle
>
0
&&
angle
<
180
?
1
:
0
;
const
angleLeft
=
angle
>
90
&&
angle
<
270
?
1
:
0
;
const
angleTop
=
angle
>
180
&&
angle
<
360
?
1
:
0
;
pos
.
x
+=
sc
*
((
newr
.
x
+
deltaWidth
*
angleLeft
)
*
angleCos
-
(
newr
.
y
+
deltaHeight
*
angleBottom
)
*
angleSin
);
pos
.
y
+=
sc
*
((
newr
.
x
+
deltaWidth
*
angleTop
)
*
angleSin
+
(
newr
.
y
+
deltaHeight
*
angleLeft
)
*
angleCos
);
obj
.
desiredSize
=
newr
.
size
;
part
.
move
(
pos
);
});
}
}
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