Skip to content

G
gojs-project
Commit 907f6f04 by jlc
Options

update：实例学习

parent 25e882bb
Showing with 401 additions and 4 deletions
src/App.vue
......@@ -2,14 +2,28 @@
<!-- <HelloGojs></HelloGojs> -->
<!-- <ruMeng></ruMeng> -->
<!-- <TextBlocks></TextBlocks> -->
<Shape></Shape>
<!-- <Shape></Shape> -->
<!-- <DiagramEvent></DiagramEvent> -->
<!-- <Template></Template> -->
<!-- <TreeModel></TreeModel> -->
<!-- <location></location> -->
<!-- <DateChange></DateChange> -->
<!-- <panel></panel> -->
<contextMenu></contextMenu>
</template>
<script setup lang="ts">
// import HelloGojs from './components/HelloGojs.vue'
// import ruMeng from './components/ruMeng.vue';
// import TextBlocks from './components/TextBlocks.vue'
import Shape from './components/Shape.vue';
// import Shape from './components/Shape.vue';
// import DiagramEvent from './components/DiagramEvent.vue';
// import Template from './components/Template.vue';
// import TreeModel from './components/TreeModel.vue';
// import location from './components/location.vue';
// import DateChange from './components/DateChange.vue';
// import panel from './components/panel.vue';
import contextMenu from './components/contextMenu.vue';
</script>
<style scoped>
......
src/components/DateChange.vue 0 → 100644
<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';
function initDiagram() {
var diagram = new go.Diagram("diagramDiv");
var $ = go.GraphObject.make;
diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
$(go.Shape, "RoundedRectangle",
{ // default values if the data.highlight is undefined:
fill: "yellow", stroke: "orange", strokeWidth: 2 },
new go.Binding("fill", "highlight", function(v) { return v ? "pink" : "lightblue"; }),
new go.Binding("stroke", "highlight", function(v) { return v ? "red" : "blue"; }),
new go.Binding("strokeWidth", "highlight", function(v) { return v ? 3 : 1; })),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha", highlight: true },
{ key: "Beta", highlight: false } // just one node, and no links
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
]
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
function flash() {
// 所有模型更改都应该发生在以下的事务中
diagram.model.commit(function(m) {
var data = m.nodeDataArray[0]; // 获取第一个节点数据
m.set(data, "highlight", !data.highlight); // 更改highlight属性，布尔类型的属性值取反
}, "flash");
}
function loop() {
setTimeout(function() { flash(); loop(); }, 500); // 每0.5秒改变一次
}
loop();
}
onMounted(() => {
initDiagram()
});
</script>
\ No newline at end of file
src/components/DiagramEvent.vue 0 → 100644
<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';
function initDiagram() {
const $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "diagramDiv",
{
"InitialLayoutCompleted": loadDiagramProperties,
"toolManager.mouseWheelBehavior": go.WheelMode.Zoom,
"clickCreatingTool.archetypeNodeData": { text: "new node" }
});
function loadDiagramProperties() {
var violetbrush = $(go.Brush, "Linear", { 0.0: "Violet", 1.0: "Lavender" });
myDiagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: violetbrush }),
$(go.TextBlock, "Hello!",
{ margin: 5 })
));
myDiagram.add(
$(go.Node, "Auto",
$(go.Shape, "Ellipse",
{ fill: violetbrush }),
$(go.TextBlock, "Goodbye!",
{ margin: 5 })
));
}
}
onMounted(() => {
initDiagram()
});
</script>
\ No newline at end of file
src/components/Template.vue 0 → 100644
<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';
function initDiagram() {
var diagram = new go.Diagram("diagramDiv");
var $ = go.GraphObject.make;
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{
figure: "RoundedRectangle",
fill: "white" // 会被后续创建的元素设置的背景颜色覆盖
},
new go.Binding("fill", "color") // 后续创建的元素设置的背景颜色进行绑定
),
$(go.TextBlock,
{
text: "hello!", // 会被后续创建的元素设置的文本覆盖
margin: 5
},
new go.Binding("text", "key") // 后续创建的元素设置的文本进行绑定
)
);
var nodeDataArray = [
{ key: "Hello", color: "lightblue" },
{ key: "World!", color: "orange" },
];
var linkDataArray = [
{ from: "Hello", to: "World!" },
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
onMounted(() => {
initDiagram()
});
</script>
\ No newline at end of file
src/components/TextBlocks.vue
......@@ -28,10 +28,12 @@ function initDiagram(){
// stroke: '#492',
// background: '#492',
margin: 10,
width: 100,
// width: 100,
// height: 30,
width: 170, height: 60, background: "lightgreen",
textAlign: 'center',
// alignment: go.Spot.Center,
// alignment: go.Spot.Right,
verticalAlignment: go.Spot.Center,
editable: true,
},
new go.Binding("text", "key"))
......
src/components/TreeModel.vue 0 → 100644
<template>
<div id="diagramDiv" style="width: 100%; height: 900px; background-color: #DAE4E4;"></div>
</template>
<script setup lang="ts">
import go from 'gojs';
import { onMounted } from 'vue';
const initDiagram = () => {
var diagram = new go.Diagram("diagramDiv");
var $ = go.GraphObject.make;
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{
figure: "RoundedRectangle",
fill: "white" // 会被后续创建的元素设置的背景颜色覆盖
},
new go.Binding("fill", "color") // 后续创建的元素设置的背景颜色进行绑定
),
$(go.TextBlock,
{
text: "hello!", // 会被后续创建的元素设置的文本覆盖
margin: 5
},
new go.Binding("text", "key") // 后续创建的元素设置的文本进行绑定
)
);
var nodeDataArray = [
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", parent: "Alpha", color: "yellow" }, //指定父节点是哪个元素组件
{ key: "Gamma", parent: "Alpha", color: "orange" },
{ key: "Delta", parent: "Alpha", color: "lightgreen" }
];
diagram.model = new go.TreeModel(nodeDataArray);
// 查找并修改元素的颜色
var data = diagram.model.findNodeDataForKey("Delta");
if (data !== null) diagram.model.setDataProperty(data, "color", "red");
}
onMounted(() => {
initDiagram()
})
</script>
src/components/contextMenu.vue 0 → 100644
<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 initDiagram = () => {
const $ = go.GraphObject.make;
const diagram = $(go.Diagram, "diagramDiv",
{
"undoManager.isEnabled": true
});
function changeColor(e: any, obj: any) {
diagram.commit(function(d) {
// 获取包含单击的按钮的上下文菜单
var contextmenu = obj.part;
// 获取节点的绑定数据
var nodedata = contextmenu.data;
// 计算下一次的颜色
var newcolor = "lightblue";
switch (nodedata.color) {
case "lightblue": newcolor = "lightgreen"; break;
case "lightgreen": newcolor = "lightyellow"; break;
case "lightyellow": newcolor = "orange"; break;
case "orange": newcolor = "lightblue"; break;
}
// 修改当前节点的颜色
// 这将评估数据绑定并记录UndoManager中的更改
d.model.set(nodedata, "color", newcolor);
}, "changed color");
}
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 5 },
new go.Binding("text", "key")),
{
contextMenu: // 为每个节点定义上下文菜单
$("ContextMenu",
$("ContextMenuButton", // 上下文菜单按钮
$(go.TextBlock, "Change Color"), // 设置上下文按钮的文本内容
{
click: changeColor, // 按钮点击事件，调用相关的函数
"ButtonBorder.fill": "white", // 设置上下文按钮的颜色
"_buttonFillOver": "skyblue", // 设置鼠标悬停时的颜色
}),
// 在上下文菜单中添加新的上下文菜单按钮
$("ContextMenuButton",
$(go.TextBlock, "new button"),
{
click: function(e, obj) { console.log("new button clicked"); }, // 按钮点击事件
})
)
}
);
// 为画布背景定义上下文菜单按钮
diagram.contextMenu =
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Undo"),
{
click: function(e, obj) { e.diagram.commandHandler.undo(); }
},
new go.Binding("visible", "", function(o) { // 根据是否有可撤销的操作来决定是否可见
return o.diagram.commandHandler.canUndo(); // 可以撤销返回true，否则返回false
}).ofObject()),
$("ContextMenuButton",
$(go.TextBlock, "Redo"),
{
click: function(e, obj) { e.diagram.commandHandler.redo(); }
},
new go.Binding("visible", "", function(o) { // 根据是否有可重做的操作来决定是否可见
return o.diagram.commandHandler.canRedo(); // 可以重做返回true，否则返回false
}).ofObject()),
// 没有绑定，上下文按钮始终可见
$("ContextMenuButton",
$(go.TextBlock, "New Node"),
{
click: function(e, obj) {
e.diagram.commit(function(d) {
var data = {};
d.model.addNodeData(data);
var part = d.findPartForData(data);
// 在ContextMenuTool中设置保存mouseDownPoint的位置
part.location = d.toolManager.contextMenuTool.mouseDownPoint; // 节点创建的位置就是鼠标右键的位置
}, 'new node');
}
}
)
);
var nodeDataArray = [
{ key: "Alpha", color: "lightyellow" },
{ key: "Beta", color: "orange" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
onMounted(() => {
initDiagram()
});
</script>
\ No newline at end of file
src/components/location.vue 0 → 100644
<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';
function initDiagram() {
var diagram = new go.Diagram("diagramDiv");
var $ = go.GraphObject.make;
diagram.nodeTemplate =
$(go.Node, "Auto",
// new go.Binding("location", "loc"), // 进行元素位置信息的绑定
new go.Binding("location", "loc", go.Point.parse),
$(go.Shape, "RoundedRectangle",
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
// var nodeDataArray = [
// // 对于每一个节点，分别指定其位置信息
// { key: "Alpha", color: "lightblue", loc: new go.Point(0, 0) },
// { key: "Beta", color: "pink", loc: new go.Point(100, 50) }
// ];
var nodeDataArray = [
{ key: "Alpha", color: "lightblue", loc: "0 0" },
{ key: "Beta", color: "pink", loc: "100 50" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
onMounted(() => {
initDiagram()
});
</script>
\ No newline at end of file
src/components/panel.vue 0 → 100644
<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';
function initDiagram() {
var diagram = new go.Diagram("diagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Part, go.Panel.Position,
{ background: "lightgray" },
$(go.TextBlock, "default, at (0,0)", { background: "lightgreen" }),
$(go.TextBlock, "(100, 0)", { position: new go.Point(100, 0), background: "lightgreen" }),
$(go.TextBlock, "(0, 100)", { position: new go.Point(0, 100), background: "lightgreen" }),
$(go.TextBlock, "(55, 28)", { position: new go.Point(55, 28), background: "lightgreen" }),
$(go.TextBlock, "(33, 70)", { position: new go.Point(33, 70), background: "lightgreen" }),
$(go.TextBlock, "(100, 100)", { position: new go.Point(100, 100), background: "lightgreen" })
));
}
onMounted(() => {
initDiagram()
});
</script>
\ No newline at end of file
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