html定义不同的类,定义不同的节点类型.html

定义不同的节点类型

* {

margin: 0;

padding: 0;

}

.container {

display: flex;

height: 100vh;

}

.left-nav {

width: 275px;

background-color: rgba(154, 205, 50, 0.3);

}

.right-container {

flex: 1;

background-color: rgba(0, 0, 255, 0.2);

}

if (window.goSamples) goSamples()

var $ = go.GraphObject.make;

var dragContent = $(go.Diagram, "dragContent", {

initialContentAlignment: go.Spot.Center,

"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,//缩放

"clickCreatingTool.archetypeNodeData": {text: "new node"},//通过点击创建一个节点

allowDrop: true, // must be true to accept drops from the Palette

"animationManager.duration": 800, // slightly longer than default (600ms) animation

"undoManager.isEnabled": true, // enable undo & redo

"grid.visible": true//绘制网格

})

//position 面板(Panels)

dragContent.add(

$(go.Node, "Position", {background: "lightgray"},

$(go.TextBlock, "100,100", {position: new go.Point(100, 100), background: "red"}),

$(go.TextBlock, "500,200", {position: new go.Point(500, 200)})

)

)

//Vertical 垂直 面板(Panels)isOpposite：true 限定从上往下还是从下往上

dragContent.add(

$(go.Node, "Vertical", {background: "lightgray", isOpposite: true},

$(go.Shape, "Rectangle", {

width: "50", height: "50", alignment: go.Spot.Top, stroke: "red"

}),

$(go.Shape, "Rectangle", {

width: "50", height: "50", alignment: go.Spot.Top, stroke: "blue "

}),

$(go.TextBlock, "测试", {})

)

)

//Horizontal 水平 面板(Panels) isOpposite：true 限定从左往右还是从右往左

dragContent.add(

$(go.Node, "Horizontal", {background: "lightgray", isOpposite: true},

$(go.Shape, "Rectangle", {

width: "50", height: "50"

}),

$(go.TextBlock, "测试", {})

)

)

//Spot 水平 面板(Panels) isClipping: true 截取图形

dragContent.add(

$(go.Part, "Spot", {scale: 1, isClipping: true},

$(go.Shape, "Circle", {

width: 55, height: 55

}),

$(go.Picture, "cat1.jpg", {width: 50, height: 50})

)

)

dragContent.add(

// all Parts are Panels

$(go.Part, "Table", // or "Table"

$(go.TextBlock, "row 0\ncol 0",

{row: 0, column: 0, margin: 2, background: "lightgray"}),

$(go.TextBlock, "row 0\ncol 1",

{row: 0, column: 1, margin: 2, background: "lightgray"}),

$(go.TextBlock, "row 1\ncol 0",

{row: 1, column: 0, margin: 2, background: "lightgray"}),

$(go.TextBlock, "row 1\ncol 2",

{row: 1, column: 2, margin: 2, background: "lightgray"})

));

dragContent.add(

// all Parts are Panels

$(go.Part, "Table", // or "Table"

$(go.Shape, "Rectangle", {

fill: "red",

row: 0, column: 1

}),

$(go.Shape, "Rectangle", {

fill: "red",

row: 1, column: 2

}),

$(go.Shape, "Rectangle", {

fill: "red",

row: 2, column: 3

}),

$(go.Shape, "Rectangle", {

fill: "red",

row: 3, column: 4

}),

$(go.Shape, "Rectangle", {

fill: "red",

row: 4, column: 5

})

));

dragContent.addDiagramListener("ViewportBoundsChanged", function (e) {//图形中有变动执行此事件

console.log(dragContent.scale)

// dragContent.add(

// $(go.Node, "Position",

// $(go.TextBlock, dragContent.scale, {color: "red", position: new go.Point(100, 100)})

// )

// )

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史