Text font size

GoJS
#1

I’m seeing a general issue with font sizes in TextBlock"s. It appears that my font sizes are often ignored. Sometimes I see that the text size tries to fit the Part’s container at the expense of the font size. In my most recent example below, I’m seeing that a TextBlock, even by itself with a single TextBlock in Vertical, is rendering the text size small…somewhere around 9 or 10 pt even though I’m requesting 36. I’ve tried "36px"as well as “36pt”.

Chrome. Angular 5. GoJS over Leaflet.

Code snippet below where I’m creating a Part which is intended to be a transient message overlaid on top of the diagram/map.

Thanks.

Untitled.png1418×526 62.5 KB

#2

Are you sure that the font size really is small and it isn’t just that the whole Part is being drawn at a small scale?

One way to find out is to add a Shape with a fixed size.

#3

Hi Walter,

Even if that is the case, shouldn’t the Part be drawn to fill the requested TextBlock which is, in turn, drawn to fill the requested font size?

Thanks,

K

#4

This is what I’ve done with the shape as requested:

let theMessage = $(go.Part, "Auto",
      {
        layerName: "Tool",
        location: new go.Point(midpointX, midpointY),
        locationSpot: go.Spot.Center
      },
      $(go.Shape, "RoundedRectangle",
        {
          fill: 'rgba(255, 255, 255, 0.75)',
          stroke: "white",
          width: 500,
          height: 70

        }),
      $(go.TextBlock, message, {
        font: "bold arial 72px sans-serif",
        stroke: "green",
      }));

And here’s the result. Notice the small text size, yet large shape size (requesting 72px).

Untitled.png1332×574 68.1 KB

#5

If you use go-debug.js, you will see the error:

Error: Not a valid font: "bold arial 72px sans-serif"

That’s in Firefox. In Edge I get:

SCRIPT5022: Not a valid font: "bold arial 72px sans-serif"
#6

Aha! That is very helpful. I’ll switch my Angular dev package used to the -debug version.

Thanks again,

K

#7

can you let me know the gojs debug package name in npm? Searching finds nothing. I’m using angular so I’d rather be able to add to my dev dependencies in package.json. If that’s not possible, could you recommend another way to use the debug version while in non-prod?

#8

It’s in the same directory as the go.js file. It is not a separate npm package.

#9

so is the general workflow then to import from the debug path while in dev, then manually change the import path before pushing to prod? Or is there a more elegant solution?

Thanks.

#10

I don’t know enough about the environment you are in, but yes generally you should reference/include go-debug.js when in development and go.js when in (or when building for) production.

There may be other ways to accomplish this beyond just changing the import path, especially if you are not packing go.js into your built JavaScript, but just referencing it.

#11

Hmmm, ok thanks simon. I’ll think about how this could work. I’m using Angular 5/CLI and so far I’ve just been used to including packages in package.json and having webpack pick the right framework for the environment.

Thanks for you help!

Kris