Centring and resizing elements (Graduated Panel)

GoJS
1

Hi,

#1 I want here to center the two circle white and yellow.
The Nodes with ticks and labels in the top will be a little bit bellow.
The white circle should hide the yellow circle regardless the number of ticks.
Any idea how to achive this ?

#2 Any hint to add the resizing to the whole node and its sub elements ? It’s not consistent (try to resize)

I created the example on Sandbox to be easier to see.
This is the link : GoJS Knob Widget Example - CodeSandbox

Thanks a lot.

2

The easy thing to do is to just set the scale of the node, and to create a binding for it:

  new go.Binding("scale"),

so that in your model, you can have a node data object:

    { ..., scale: 1.1 }

Or did you want your users to rescale them interactively?

3

For the resizing (#2) I don’t have a specific behavior. I just want it to be consistent.
Should I add scale binding to all the element (shape, panel …) and overwrite then theirs own scale when the user resize the object ?

4

Ah, so you do want the user to rescale the node. Use the RescalingTool that you can find at https://gojs.net/latest/extensions/RescalingTool.js and that is demonstrated in Rescaling GraphObjects using the RescalingTool.

5

Awesome thanks man.
I will read how this tool work and try to implement it.
Any tips about the first point (#1) ?

6

Here’s an example that should help: https://codepen.io/jhardy/pen/rNxQaby

Some notes:

  1. The black outer circle comes from the Auto panel.
  2. The spot panel’s main element is the white circle.
  3. The main graduated shape, named “ARC”, has a final “M” command in its geometry string to make the width/height the same. This allows it to scale and align better.
  4. The graduated panel is aligned to the white circle using alignmentFocusName: “ARC” so that the ticks/text don’t affect how it aligns relative to the Spot panel’s main element.
  5. The radii of the various circle/arc shapes depend on the innerRad and outerRad variables.

You can add rescaling and the slider actions to this.

7

Where can I find the source code of this example ?

8

It’s available right in the page if you open up your browser’s dev tools.

1 Like