Hello.
In our production code, we have a Go.js template that generates different configurations of signal types, as shown in the following image.
That worked great until we changed our vite configuration Go.js flag from ‘gojs’ to ‘gojs/release/go-debug.js’. After this change we get the following error in the browser console:
and the signals are not displayed at all.
The signal template code is:
import { BasicDirection } from '@/apps/types/common';
import {
Node,
Binding,
Point,
GraphObject,
Spot,
Panel,
Shape,
Geometry,
PathFigure,
PathSegment
} from 'gojs';
const ARROW_MARGIN = 2;
const ARROW_HEIGHT = 10;
const ARROW_WIDTH = 6;
const CIRCLE_RADIUS = 5;
const CIRCLE_MARGIN = 1;
const RADIUS = CIRCLE_RADIUS + 2 * CIRCLE_MARGIN;
const FOOT_HEIGHT = 5;
const FOOT_WIDTH = 2; // half the width
Shape.defineFigureGenerator('Signal', (_, width, height) => {
const signalGeometry = new Geometry();
const bodyPathFigure = new PathFigure(0, RADIUS, true);
bodyPathFigure.add(new PathSegment(PathSegment.Arc, 180, 90, RADIUS, RADIUS, RADIUS, RADIUS)); // Top left corner
bodyPathFigure.add(new PathSegment(PathSegment.Line, width - RADIUS, 0)); // Top line
bodyPathFigure.add(
new PathSegment(PathSegment.Arc, 270, 90, width - RADIUS, RADIUS, RADIUS, RADIUS)
); // Top right corner
bodyPathFigure.add(new PathSegment(PathSegment.Line, width, height - RADIUS)); // Right line
bodyPathFigure.add(
new PathSegment(PathSegment.Arc, 0, 90, width - RADIUS, height - RADIUS, RADIUS, RADIUS)
); // Bottom right corner
bodyPathFigure.add(new PathSegment(PathSegment.Line, RADIUS, height)); // Bottom line
bodyPathFigure.add(
new PathSegment(PathSegment.Arc, 90, 90, RADIUS, height - RADIUS, RADIUS, RADIUS)
); // Bottom left corner
bodyPathFigure.add(new PathSegment(PathSegment.Line, 0, RADIUS)); // Left line
signalGeometry.add(bodyPathFigure);
const footPathFigure = new PathFigure(width / 2, height, true);
footPathFigure.add(new PathSegment(PathSegment.Line, width / 2, height + FOOT_HEIGHT));
footPathFigure.add(
new PathSegment(PathSegment.Line, width / 2 + FOOT_WIDTH, height + FOOT_HEIGHT)
);
footPathFigure.add(
new PathSegment(PathSegment.Line, width / 2 - FOOT_WIDTH, height + FOOT_HEIGHT)
);
signalGeometry.add(footPathFigure);
return signalGeometry;
});
const mainSignalNodeTemplate = ($: typeof GraphObject.make): Node =>
$(
Node,
'Auto',
{
rotationSpot: Spot.Center,
locationSpot: Spot.Bottom,
fromLinkable: false,
toLinkable: false
},
new Binding('location', 'location', ({ x, y }) => new Point(x, y)),
new Binding('layerName', 'layerName'),
$(
Panel,
'Horizontal',
$(
Shape,
'TriangleLeft',
{ width: ARROW_WIDTH, height: ARROW_HEIGHT, margin: ARROW_MARGIN, stroke: null },
new Binding('fill', '', (modelData, shapeData: Shape) => {
return shapeData.part?.data?.states.direction === BasicDirection.Reverse
? modelData.borderColorDefault
: 'transparent';
}).ofModel()
),
$(
Panel,
'Auto',
$(
Shape,
'Signal',
{ strokeWidth: 2 },
new Binding('fill', 'svgIconBackgroundColor').ofModel(),
new Binding('stroke', 'borderColorDefault').ofModel()
),
$(Panel, 'Vertical', new Binding('itemArray', 'states', states => states.lampStates), {
itemTemplate: $(
Panel,
'Auto',
{ margin: CIRCLE_MARGIN },
$(Panel, 'Horizontal', new Binding('itemArray', ''), {
itemTemplate: $(
Panel,
'Auto',
{ margin: CIRCLE_MARGIN },
$(
Shape,
'Circle',
{ width: 2 * CIRCLE_RADIUS, height: 2 * CIRCLE_RADIUS, stroke: null },
new Binding('fill', '', (modelData, sd) => {
const key = sd.panel.data;
const value = modelData[key];
return value ?? 'transparent';
}).ofModel()
)
)
})
)
})
),
$(
Shape,
'TriangleRight',
{ width: ARROW_WIDTH, height: ARROW_HEIGHT, margin: ARROW_MARGIN, stroke: null },
new Binding('fill', '', (modelData, shapeData: Shape) => {
return shapeData.part?.data?.states.direction === BasicDirection.Nominal
? modelData.borderColorDefault
: 'transparent';
}).ofModel()
)
)
);
export default mainSignalNodeTemplate;
I tried to make the geometry dimensions smaller but I still get errors regarding the bounds. Our current Go.js license allows us only to see minified Go,js code while debugging so it is hard to debug this extensively.
I wonder if you could point me to the right direction? We want this to work even for signals having multiple lamps/states so I am not sure how this can be solved generically so that the bounds do not exceed the figure size.
Best regards,
Fotis
