Skip to content

G
gojs-project
Commit 18c4e3c4 by jlc
Options

update：标定点的增加和删除

parent bf84a30b
Showing with 223 additions and 115 deletions
src/stageAchievements/imageNode.vue
...@@ -15,12 +15,20 @@ ...@@ -15,12 +15,20 @@
<button @click="exportData">导出数据</button> <button @click="exportData">导出数据</button>
</div> </div>
<el-dialog v-model="dialogVisible" title="给节点添加端口"> <el-dialog v-model="dialogVisible" title="给当前节点添加端口/标定点">
<div> <div>
<button @click="addPort('top')">添加上端口</button> <el-switch v-model="changeModel" @change="toggleDivs">
<button @click="addPort('bottom')">添加下端口</button> </el-switch>
<button @click="addPort('left')">添加左端口</button> <br>
<button @click="addPort('right')">添加右端口</button> <div v-if="changeModel">
<button @click="addPort('top')">添加上端口</button>
<button @click="addPort('bottom')">添加下端口</button>
<button @click="addPort('left')">添加左端口</button>
<button @click="addPort('right')">添加右端口</button>
</div>
<div v-else>
<button @click="addMark()">添加标定点</button>
</div>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
...@@ -37,7 +45,13 @@ import { RotateMultipleTool } from './extensions/RotateMultipleTool'; ...@@ -37,7 +45,13 @@ import { RotateMultipleTool } from './extensions/RotateMultipleTool';
const $ = go.GraphObject.make; const $ = go.GraphObject.make;
var myDiagram: any; var myDiagram: any;
const dialogVisible = ref(false) const dialogVisible = ref(false)
const changeModel = ref(true)
// 切换添加端口/标定点的形式
function toggleDivs(value: boolean) {
changeModel.value = value;
}
function initDiagram() { function initDiagram() {
myDiagram = $(go.Diagram, "diagramDiv", { myDiagram = $(go.Diagram, "diagramDiv", {
...@@ -127,12 +141,42 @@ function initDiagram() { ...@@ -127,12 +141,42 @@ function initDiagram() {
), ),
}, },
$(go.Panel, 'Spot', $(go.Panel, 'Spot',
$(go.Shape, "RoundedRectangle", // 标定点模板
{ new go.Binding('itemArray', 'markArray'), {
fill: "white", itemTemplate: $(go.Panel,
strokeWidth: 0 {
portId: "mark",
cursor: 'pointer',
alignment: new go.Spot(0.5, 0.2),
contextMenu:
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Remove Mark", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e: any, obj: any) => removeMark(obj.part.adornedObject),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
}
)
),
},
new go.Binding('portId', 'markId'),
$(go.Shape, 'Rectangle',
{
strokeWidth: 1,
desiredSize: new go.Size(6, 6),
fill: "red"
}, },
new go.Binding("fill", "color"), )
)
},
$(go.Panel, 'Spot',
$(go.Shape, "RoundedRectangle",
{
fill: "white",
strokeWidth: 0
},
new go.Binding("fill", "color"),
), ),
$(go.TextBlock, $(go.TextBlock,
{ {
...@@ -179,6 +223,7 @@ function initDiagram() { ...@@ -179,6 +223,7 @@ function initDiagram() {
dialogVisible.value = true; dialogVisible.value = true;
} }
}, },
)
), ),
), ),
...@@ -193,118 +238,147 @@ function initDiagram() { ...@@ -193,118 +238,147 @@ 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', 'portArray'), { new go.Binding('itemArray', 'portArray'), {
itemTemplate: $(go.Panel, itemTemplate: $(go.Panel,
{ {
portId: "Top", portId: "Top",
fromSpot: go.Spot.Top, fromSpot: go.Spot.Top,
toSpot: go.Spot.Top, toSpot: go.Spot.Top,
fromLinkable: true, fromLinkable: true,
toLinkable: true, toLinkable: true,
cursor: 'pointer', cursor: 'pointer',
alignment: go.Spot.Top, alignment: go.Spot.Top,
contextMenu: contextMenu:
$("ContextMenu", $("ContextMenu",
$("ContextMenuButton", $("ContextMenuButton",
$(go.TextBlock, "Remove Port", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }), $(go.TextBlock, "Remove Port", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{ {
click: (e: any, obj: any) => removePort(obj.part.adornedObject), click: (e: any, obj: any) => removePort(obj.part.adornedObject),
"ButtonBorder.fill": "white", "ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue" "_buttonFillOver": "skyblue"
} }
) )
),
},
new go.Binding('portId', 'portId'),
new go.Binding('alignment', 'portKey', (portKey: string) => {
switch(portKey) {
case "top": return go.Spot.Top;
case "bottom": return go.Spot.Bottom;
case "left": return go.Spot.Left;
case "right": return go.Spot.Right;
default: return go.Spot.Top;
}
}),
new go.Binding('fromSpot', 'portKey', (portKey: string) => {
switch(portKey) {
case "top": return go.Spot.Top;
case "bottom": return go.Spot.Bottom;
case "left": return go.Spot.Left;
case "right": return go.Spot.Right;
default: return go.Spot.Top;
}
}),
new go.Binding('toSpot', 'portKey', (portKey: string) => {
switch(portKey) {
case "top": return go.Spot.Top;
case "bottom": return go.Spot.Bottom;
case "left": return go.Spot.Left;
case "right": return go.Spot.Right;
default: return go.Spot.Top;
}
}),
$(go.Shape, 'Rectangle',
{
strokeWidth: 1,
desiredSize: new go.Size(6, 6),
},
)
), ),
}, },
$(go.Panel, 'Spot', new go.Binding('portId', 'portId'),
$(go.Shape, "RoundedRectangle", new go.Binding('alignment', 'portKey', (portKey: string) => {
{ switch(portKey) {
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"), case "top": return go.Spot.Top;
stroke: "black", case "bottom": return go.Spot.Bottom;
fill: "white", case "left": return go.Spot.Left;
strokeWidth: 1.5 case "right": return go.Spot.Right;
}, default: return go.Spot.Top;
), }
$(go.TextBlock, }),
{ new go.Binding('fromSpot', 'portKey', (portKey: string) => {
margin: 10, switch(portKey) {
textAlign: 'center', case "top": return go.Spot.Top;
font: 'bold 14px Segoe UI,sans-serif', case "bottom": return go.Spot.Bottom;
stroke: '#484848', case "left": return go.Spot.Left;
editable: true, case "right": return go.Spot.Right;
_isNodeLabel: true, default: return go.Spot.Top;
cursor: "move" }
}),
new go.Binding('toSpot', 'portKey', (portKey: string) => {
switch(portKey) {
case "top": return go.Spot.Top;
case "bottom": return go.Spot.Bottom;
case "left": return go.Spot.Left;
case "right": return go.Spot.Right;
default: return go.Spot.Top;
}
}),
$(go.Shape, 'Rectangle',
{
strokeWidth: 1,
desiredSize: new go.Size(6, 6),
}, },
new go.Binding('text', 'key').makeTwoWay(), )
), ),
},
$(go.Panel, 'Spot',
// 标定点模板
new go.Binding('itemArray', 'markArray'), {
itemTemplate: $(go.Panel,
{ {
toolTip: // 定义节点工具提示 portId: "mark",
$("ToolTip", cursor: 'pointer',
$(go.TextBlock, { margin: 4 }, alignment: new go.Spot(0.9, 0.2),
new go.Binding("text", "key")) // 绑定节点的颜色信息 contextMenu:
) $("ContextMenu",
},
{
contextMenu: // 为每个节点定义上下文菜单
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Cut", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e) => e.diagram.commandHandler.cutSelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
),
$("ContextMenuButton", $("ContextMenuButton",
$(go.TextBlock, "Copy", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }), $(go.TextBlock, "Remove Mark", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{ {
click: (e) => e.diagram.commandHandler.copySelection(), click: (e: any, obj: any) => removeMark(obj.part.adornedObject),
"ButtonBorder.fill": "white", "ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue", "_buttonFillOver": "skyblue"
} }
) )
) ),
},
new go.Binding('portId', 'markId'),
$(go.Shape, 'Rectangle',
{
strokeWidth: 1,
desiredSize: new go.Size(6, 6),
fill: "red"
},
))
},
$(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"),
stroke: "black",
fill: "white",
strokeWidth: 1.5
}, },
{
doubleClick : function(){ // 在节点中鼠标左键双击打开添加节点端口弹出框
dialogVisible.value = true;
}
}
), ),
$(go.TextBlock,
{
margin: 10,
textAlign: 'center',
font: 'bold 14px Segoe UI,sans-serif',
stroke: '#484848',
editable: true,
_isNodeLabel: true,
cursor: "move"
},
new go.Binding('text', 'key').makeTwoWay(),
),
{
toolTip: // 定义节点工具提示
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "key")) // 绑定节点的颜色信息
)
},
{
contextMenu: // 为每个节点定义上下文菜单
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Cut", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e) => e.diagram.commandHandler.cutSelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
),
$("ContextMenuButton",
$(go.TextBlock, "Copy", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e) => e.diagram.commandHandler.copySelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
)
)
},
{
doubleClick : function(){ // 在节点中鼠标左键双击打开添加节点端口弹出框
dialogVisible.value = true;
}
}
)),
) )
); );
...@@ -417,8 +491,8 @@ function initDiagram() { ...@@ -417,8 +491,8 @@ function initDiagram() {
const nodeDataArray = [ 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"}] }, { 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: [{markId: "mark0"}] },
{ key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}] }, { 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" },
...@@ -494,7 +568,8 @@ function drop(event: any) { ...@@ -494,7 +568,8 @@ function drop(event: any) {
key: key, key: key,
color: 'aqua', color: 'aqua',
loc: new go.Point(point.x, point.y), loc: new go.Point(point.x, point.y),
portArray: [{portId: "bottom0", portKey: "bottom"}], portArray: [],
markArray: [],
category: category category: category
}; };
myDiagram.model.addNodeData(newData); myDiagram.model.addNodeData(newData);
...@@ -543,6 +618,39 @@ function removePort(port: any) { ...@@ -543,6 +618,39 @@ function removePort(port: any) {
myDiagram.commitTransaction('removePort'); myDiagram.commitTransaction('removePort');
} }
// 添加标定点
function addMark() {
myDiagram.startTransaction('addMark');
myDiagram.selection.each((node: any) => {
if (!(node instanceof go.Node)) return;
let i = 0;
while (node.findPort("mark" + i.toString()) !== node) i++;
const name = "mark" + i.toString();
const newMarkData = {
markId: name
};
const arr = node.data.markArray;
if (arr) {
myDiagram.model.insertArrayItem(arr, -1, newMarkData);
}
});
myDiagram.commitTransaction('addMark');
}
// 删除标定点
function removeMark(mark: any) {
myDiagram.startTransaction('removeMark');
const markId = mark.portId;
const arr = mark.panel.itemArray;
for (let i = 0; i < arr.length; i++) {
if (arr[i].markId === markId) {
myDiagram.model.removeArrayItem(arr, i);
break;
}
}
myDiagram.commitTransaction('removeMark');
}
onMounted(() => { onMounted(() => {
initDiagram() initDiagram()
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment