The user modifies the font, color, and thickness of TextBlock

GoJS
1

Can a user modify the font, color, and thickness of the TextBlock from the context menu or create a font editing panel?

2

Yes, for example: Mind Map

3

Same as this example：

But I don’t know how to change the font(The font contains the font-style,font-variant,font-weight,font-size,font-family) and strokeWidth of TextBlock.I want users to modify some of the attributes of TextBlock.
How do I edit my inspector?
Code:
var inspector = new Inspector(‘myInspectorDiv’, myDiagram,
{
properties: {
“text”: {},
“font”:{???},
“stroke”: { show: Inspector.showIfPresent, type: ‘color’ },
“strokeWidth”:{???},
“key”: { readOnly: true, show: Inspector.showIfPresent },
}
});

4

Those are data properties, so you need Bindings on each GraphObject property, such as on the TextBlock.font and TextBlock.stroke properties.

But there is no strokeWidth property on TextBlock. That attribute is part of the font.

5

Part code：
myDiagram.nodeTemplate =
(go.Node, "Auto", { locationSpot: go.Spot.Center }, (go.Shape, “Rectangle”,
{
stroke: null,
strokeWidth: 0,
fill: null,
portId: “”,
cursor: “pointer”,
fromLinkable: true,
fromLinkableSelfNode: true,
fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
}),

    $(go.TextBlock,
      {
        //font: "bold 18px sans-serif",//Italic small-caps bold 32px Georgia, Serif
        stroke: '#111',
        margin: 8, 
        isMultiline: false,
        editable: true  
      },
      //new go.Binding("font", "font"),
      new go.Binding("font-style", "font-style"),
      new go.Binding("font-weight", "font-weight"),
      new go.Binding("font-size", "font-size"),
      new go.Binding("stroke", "color"),
      new go.Binding("text", "text").makeTwoWay())
  );

var inspector = new Inspector(‘myInspectorDiv’, myDiagram,
{
properties: {
“text”: {},
// “font”: {},
“font-style”: {},
“font-weight”: {},
“font-size”: {},
“key”: { readOnly: true, show: Inspector.showIfPresent },
“stroke”: { show: Inspector.showIfPresent, type: ‘color’ },
}
});

Like this?But the font-style,font-weight,font-size has not changed.

6

Those aren’t properties on TextBlock: TextBlock | GoJS API.

In fact, those aren’t even valid JavaScript dot syntax property names. You should be getting warning messages in the console output if you are using go-debug.js.

7

Yes, TextBlock just has the font property.So how do I get the user to modify the TextBlock’s thickness, size, font style?

8

As documented for TextBlock | GoJS API, a CSS font specifier is a string with the following syntax:
font-style font-variant font-weight font-size font-family

9

So I have to define it at once, right?
Can’t these（font-style font-variant font-weight font-size font-family） be changed separately?
After all, the user needs to select the font style and size rather than the input.

10

Sorry, but we haven’t implemented that yet.

You could implement your own HTML for editing the properties of a TextBlock, but that is non-trivial work.

11

It sure would be nice if each font property could be set independently, just like in CSS or in any other standard application that allows you to edit text.

Can you imagine if you used MS Word, Excel, or Powerpoint, and you could not change the font style, the font weight, the font family, or the font size as independent properties?