Hello,
I’m using GoJS v1.7.1 on Linux in Firefox.
My problem is: I defined a custom shape geometry for a rectangle with two pointy (triangular) endings, and I want to use that shape around text blocks of varying size. The tricky part for me is defining which zone of the shape can be filled with text. I’m using geometry.spot1 and spot2 for that, but the results I get are strange, see the pictures below with comments.
Question: what am I doing wrong? Thanks in advance.
First defineFigureGenerator results:
Code:
go.Shape.defineFigureGenerator('Condition', function (shape, w, h) {
var hh = h / 2; // Half-height
var pw = h / 4; // Width of the pointy bit
var path = new go.PathFigure(w - pw, 0);
path.add(new go.PathSegment(go.PathSegment.Line, w, hh));
path.add(new go.PathSegment(go.PathSegment.Line, w - pw, h));
path.add(new go.PathSegment(go.PathSegment.Line, pw, h));
path.add(new go.PathSegment(go.PathSegment.Line, 0, hh));
path.add(new go.PathSegment(go.PathSegment.Line, pw, 0).close());
var geo = new go.Geometry();
geo.add(path);
geo.spot1 = new go.Spot(0, 0, pw - 5, 0);
geo.spot2 = new go.Spot(1, 1, - pw + 5, 0);
return geo;
});
In the first version, I generate a shape that has outer dimensions matching the w
and h
provided by GoJS, but a smaller space inside, so I expect the shape to be stretched or recomputed somehow until it fits around the TextBlock.
Since it does not work, I thought maybe the w
and h
indicate the expected size of the inner space, so in the second version I build a shape that provides the required space inside but is larger than w
and h
, but it does not work correctly either:
Code:
go.Shape.defineFigureGenerator('Condition2', function (shape, w, h) {
var hh = h / 2; // Half-height
var pw = h / 4; // Width of the pointy bit
var path = new go.PathFigure(pw + w, 0);
path.add(new go.PathSegment(go.PathSegment.Line, pw + w + pw, hh));
path.add(new go.PathSegment(go.PathSegment.Line, pw + w, h));
path.add(new go.PathSegment(go.PathSegment.Line, pw, h));
path.add(new go.PathSegment(go.PathSegment.Line, 0, hh));
path.add(new go.PathSegment(go.PathSegment.Line, pw, 0).close());
var geo = new go.Geometry();
geo.add(path);
geo.spot1 = new go.Spot(0, 0, pw - 5, 0);
geo.spot2 = new go.Spot(1, 1, - pw + 5, 0);
return geo;
});
Test shapes + text:
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(300, 0), background: "lightgray" },
$(go.Shape, "Condition2", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { background: "yellow", opacity: 0.8 })
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(0, 60), background: "lightgray" },
$(go.Shape, "Condition2", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { width: 500, background: "yellow", opacity: 0.8 })
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(0, 90), background: "lightgray" },
$(go.Shape, "Condition2", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { width: 400, height: 100, background: "yellow", opacity: 0.8, textAlign: 'center' })
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(0, 200), background: "lightgray" },
$(go.Shape, "Condition2", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { width: 100, height: 200, background: "yellow", opacity: 0.8, textAlign: 'center' })
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(300, 200), background: "lightgray" },
$(go.Shape, "Condition2", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { width: 100, height: 400, background: "yellow", opacity: 0.8 })
));