0
153
ViewsPaint node panels on gojs
Hi I want to paint my node like the right node, there is any idea how can I do it with GOjs
on the left node this is what I get when I try to paint it. the right node is what I really want to paint.
its looks like he miss some parts.
I've try to build 2 panels on the node but because the shape is rounded I Cant paint all the panel.
var simpleNode = $(
go.Node,
"Auto",
new go.Binding("layerName", "category"),
$(
go.Panel,
"Auto",
$(
go.Shape,
"RoundedRectangle",
{
portId: "", // this Shape is the Node's port, not the whole Node
fromLinkable: true,
fromLinkableDuplicates: false,
toLinkableDuplicates: false,
toLinkable: true,
cursor: "pointer",
},
new go.Binding("fill", "color"),
),
$(
go.Panel,
"Horizontal",
{
alignment: go.Spot.Left,
minSize: new go.Size(160, 0),
},
$(
go.Panel,
"Horizontal",
{
background: "#800080",
stretch: go.GraphObject.Fill,
margin: new go.Margin(0, 0, 0, 0),
},
$(
go.Shape,
{
margin: new go.Margin(0, 15, 2, 15),
fill: "white",
strokeWidth: 0,
background: "transparent",
maxSize: new go.Size(20, 20),
cursor: "pointer",
},
new go.Binding("geometry", geoFunc)
)
),
$(
go.Panel,
"Vertical",
{
background: "transparent",
},
$(
go.TextBlock,
{
margin: new go.Margin(15, 15, 0, 15),
editable: false, // editing the text automatically updates the model data
stroke: "white",
font: "14px Segoe UI",
},
),
$(
go.TextBlock,
{
margin: new go.Margin(0, 15, 15, 15),
editable: false, // editing the text automatically updates the model data
stroke: "white",
font: "12px Segoe UI",
alignment: go.Spot.Left,
},
new go.Binding("text", "id")
)
)
)
)
);
·
Juan Pablo Isaza
1 answers
Answer question0
If you define two shapes that are the left and right sides of a rounded rectangle, then you can do this easily:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
new go.Binding("fill", "color")),
$(go.Panel, "Horizontal", { margin: 3 }, // Margin will control how big the border is
$(go.Shape, "RoundedLeftRectangle", { strokeWidth: 0, fill: 'red', width: 30, height: 60 }),
$(go.Shape, "RoundedRightRectangle", { strokeWidth: 0, fill: 'purple', width: 100, height: 60 })
)
);
The definitions for those shapes:
go.Shape.defineFigureGenerator("RoundedLeftRectangle", function (shape, w, h) {
// this figure takes one parameter, the size of the corner
var p1 = 5; // default corner size
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
}
p1 = Math.min(p1, w); // limit by width & height
p1 = Math.min(p1, h/3);
var geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(new go.PathFigure(w, 0)
.add(new go.PathSegment(go.PathSegment.Line, w, h))
.add(new go.PathSegment(go.PathSegment.Line, p1, h))
.add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, 0, p1))
.add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1).close()));
// don't intersect with two top corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
return geo;
});
go.Shape.defineFigureGenerator("RoundedRightRectangle", function (shape, w, h) {
// this figure takes one parameter, the size of the corner
var p1 = 5; // default corner size
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
}
p1 = Math.min(p1, w); // limit by width & height
p1 = Math.min(p1, h/3);
var geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(new go.PathFigure(0, 0)
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, 0, h).close()));
// don't intersect with two bottom corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1);
return geo;
});
Live example: https://codepen.io/simonsarris/pen/RwLZxwp
·
Juan Pablo Isaza
Report
Answer question