The code below is a class for rendering a horizontal ruler with ticks each 12 inches and a feet label number every four feet. the problem is that the feet number label shows inches and not feet. hw can I fix it, it is so close to perfect?
//horizontalRuler.js
import * as go from 'gojs';
const $ = go.GraphObject.make
const horizontalRuler = {
hrulerTemplate: function (sizeMultiplier, width) {
return $(
go.Part,
'Graduated',
{
name: 'hruler',
graduatedMin: 0,
graduatedMax: width,
graduatedTickBase: 0,
graduatedTickUnit: 1,
//graduatedScale: 1 / 12, // Scale to convert inches to feet
background: 'transparent',
},
new go.Binding('location', '', function (data) {
var x = 0;
var y = data.Height * -1 + -20;
return new go.Point(x * sizeMultiplier, y * sizeMultiplier);
}),
$(go.Shape, {
geometryString: 'M0 0 H' + width * sizeMultiplier
}),
$(go.Shape, { geometryString: 'M0 0 v3' }),
// a longer tick mark every 12 ticks (12 inches)
$(go.Shape, { geometryString: 'M0 0 v8', interval: 12 }),
// text label every 48 ticks (4 feet), with a vertical offset
$(go.TextBlock, {
segmentOffset: new go.Point(NaN, 12),
interval: 48, // 4 feet interval
font: 'bold 6pt sans-serif',
alignmentFocus: go.Spot.Bottom
},
new go.Binding("text", "", function (part) {
let feet = Math.floor(part.graduatedValue / 12);
return feet.toString() + " ft";
}).ofObject()
)
);
}
};
export default horizontalRuler;