* {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
overflow: hidden;
}
.left-nav {
width: 270px;
background-color: #fff;
}
.right-container {
flex: 1;
background-color: #fff
}
var $ = go.GraphObject.make;
var dragContent = $(go.Diagram, "dragContent", {
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,//缩放
"animationManager.duration": 800,
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
allowDrop: true,
"grid.visible": true,//绘制网格
initialContentAlignment: go.Spot.Center,//图形在居中的位置开始绘制
})
var ORIGINAL_HEIGHT = 400;
dragContent.nodeTemplateMap.add("wenduji", $(go.Node, "Spot",
{
resizable: true,
resizeObjectName: "BarSpace",
locationObjectName: "Bulb",
locationSpot: go.Spot.Center
},
$(go.Shape,
{name: "BarSpace", width: 25, height: ORIGINAL_HEIGHT, strokeWidth: 0, fill: "rgba(0,0,0,.05)"},
new go.Binding("height").makeTwoWay()
),
// Farenheit scale, on the left:
$(go.Panel, "Graduated",
{
background: "white",
graduatedMin: -40, graduatedMax: 80,
graduatedTickBase: 0, graduatedTickUnit: 1,
alignment: go.Spot.BottomLeft,
alignmentFocus: go.Spot.BottomLeft,
alignmentFocusName: "line"
},
new go.Binding("graduatedMax", "", function (data) {
if (data.type === "scaling") return 80;
return (data.height * 0.3) - 40;
}),
$(go.Shape, {name: "line", geometryString: "M0 0 V-" + ORIGINAL_HEIGHT, stroke: "gray"},
new go.Binding("height")),
$(go.Shape, {alignmentFocus: go.Spot.Bottom, interval: 2, strokeWidth: 1, geometryString: "M0 0 V15"}),
$(go.Shape, {alignmentFocus: go.Spot.Bottom, interval: 10, strokeWidth: 2, geometryString: "M0 0 V20"}),
$(go.TextBlock, {interval: 20, font: "22px Georgia", alignmentFocus: new go.Spot(1, 0.5, 20, 0)}),
// Mark 32 degrees on the farenheit scale:
$(go.TextBlock, {
interval: 32, graduatedFunction: function (n) {
return n === 32 ? "32—" : ""
},
font: "bold 12px Georgia", stroke: "red", alignmentFocus: new go.Spot(1, 0.5, 20, 0)
})
),
// Mercury bar, which represents the values of farenheit and celsius
$(go.Shape,
{
width: 25, strokeWidth: 0, fill: "red",
alignment: go.Spot.Bottom,
alignmentFocus: go.Spot.Bottom,
},
new go.Binding('fill', 'type', function (t) {
return t === "scaling" ? "lightcoral" : "red"
}),
// To determine the mercury level, look at both data.farenheit and data.celsius, but prefer celsius
new go.Binding("height", "", function (data) {
var thermometerHeight = ORIGINAL_HEIGHT;
if (data.type === "scaling") thermometerHeight = data.height;
if (data.celsius !== undefined) {
// (celsius + minimum value) / (total celsius range) * height
return Math.max(0, ((data.celsius + 40) / 67) * thermometerHeight);
} else if (data.farenheit !== undefined) {
// (farenheit + minimum value) / (total farenheit range) * height
return Math.max(0, ((data.farenheit + 40) / 120) * thermometerHeight);
} else {
return 0;
}
}
),
new go.Binding("maxSize", "height", function (h) {
return new go.Size(NaN, h)
})
),
// Celsius scale, on the right:
$(go.Panel, "Graduated",
{
background: "white",
// -40 to 27 because we picked -40 to 80 for farenheit, and want them to line up
graduatedMin: -40, graduatedMax: 27,
graduatedTickBase: 0, graduatedTickUnit: 1,
alignment: go.Spot.BottomRight,
alignmentFocus: go.Spot.BottomRight,
alignmentFocusName: "line2"
},
new go.Binding("graduatedMax", "", function (data) {
if (data.type === "scaling") return 80;
return (data.height * 0.1675) - 40;
}),
$(go.Shape, {name: "line2", geometryString: "M0 0 V-" + ORIGINAL_HEIGHT, stroke: "gray"},
new go.Binding("height")),
$(go.Shape, {interval: 2, strokeWidth: 1, geometryString: "M0 0 V15"}),
$(go.Shape, {interval: 10, strokeWidth: 2, geometryString: "M0 0 V20"}),
$(go.TextBlock, {
interval: 20, textAlign: "left", font: "22px Georgia",
alignmentFocus: go.Spot.Left, segmentOffset: new go.Point(0, 22)
})
),
// Cosmetic: The stem and bulb
$(go.Shape,
{
width: 25, height: 10, strokeWidth: 0, fill: "red",
alignment: go.Spot.Bottom
},
new go.Binding('fill', 'type', function (t) {
return t === "scaling" ? "lightcoral" : "red"
})
),
$(go.Shape, "Circle",
{
name: "Bulb",
width: 55, height: 55, strokeWidth: 0, fill: "red",
alignment: go.Spot.Bottom,
alignmentFocus: go.Spot.Top,
},
new go.Binding('fill', 'type', function (t) {
return t === "scaling" ? "lightcoral" : "red"
})
)
) // end node template
)
var dragPalette = $(go.Palette, "dragNav", {
"animationManager.duration": 800,
initialContentAlignment: go.Spot.Center,
nodeTemplateMap: dragContent.nodeTemplateMap,
initialScale:0.1
})
var model = $(go.GraphLinksModel)
model.nodeDataArray = [
{category: "wenduji", name: "as", height: 800, celsius: 40},
]
dragPalette.model = model;
function save() {
var json = dragContent.model.toJson();
console.log(json)
// dragContent.isModified = false;
}
// dragPalette.addBehavior('')
一键复制
编辑
Web IDE
原始数据
按行查看
历史