My project involves a palette and a canvas. I drag a node from the palette to canvas (GoJS diagram).
Everything works well. For the same category of node, I have two layout templates - one for the palette, and another for the canvas. Now, the shapes differ slightly. Let’s say that in the palette, it’s a square, and in the canvas, it’s a rectangle.
When I drag my model from the palette to the canvas, I’d like to animate a square transforming into a rectangle. The complete animation must occur within the canvas. So when I drop it from the palette to the canvas, it should behave as if it “expanded” from a square to a rectangle.
How do I go about achieving this? I’ve not found any examples that do this.
Right now you need to implement your own animation to change the width (or height) of the rectangle so that it starts off as a square and then keeps changing width (or height) so that it ends up at the final desired size.
If you search for uses of setTimeout or requestAnimationFrame you can find some examples of defining your own animations. Presumably you would start the animation in the “ExternalObjectsDropped” DiagramEvent listener.
At each step/tick of the way you’ll want to temporarily set Diagram.skipsUndoManager to true, make the changes, and then set it back to false. Similarly, if you have a Diagram.layout, you might want to temporarily set Layout.isOngoing to false.
You cannot have anything drawn “blurred”. However you could change the stroke and background colors to decrease the contrast, or you could draw translucent “noise” in front of it or behind it (depending on how you do it). I’m just saying that although you cannot blur anything, you could implement other effects to achieve similar results.