Transparency on tool layer

GoJS
1

Hi,

When im dragging a node from the palette onto the diagram I want it to have an opacity of 0.5 until I drop it. I achieved that by using diagram.findLayer(‘Tool’).opacity = 0.5. It currently looks like this:

diagram_opacity

The problem is that I have a context menu defined on the hamburger menu in each node. But this opacity is affecting that menu as well. Even my context menu has an opacity of 0.5 due to this, as seen below:

context_menu

How can I prevent this?

2

There are several possibilities, depending on the exact behaviors that you want.

One way would be to set the Layer.opacity only when the Palette’s DraggingTool is active. You can do that by overriding the DraggingTool.doActivate and doDeactivate methods:

        $(go.Palette, "myPaletteDiv",
          {
            nodeTemplateMap: myDiagram.nodeTemplateMap,
            "draggingTool.doActivate": function() {
              go.DraggingTool.prototype.doActivate.call(this);
              myDiagram.findLayer("Tool").opacity = 0.5;
            },
            "draggingTool.doDeactivate": function() {
              go.DraggingTool.prototype.doDeactivate.call(this);
              myDiagram.findLayer("Tool").opacity = 1.0;
            }
          });
3

I am using this in an angular application and i gave the doActivate and doDeactivate functions for the paletter tool manager in the ngOnInit function.

I have a different nodeTemplateMap for the palette and diagram. Which are also defined in the same function.

But im now unable to pick up any elements from the palette. Im getting the following error:

No Node template found for category “component”
go.js:17 Using default node template
core-error-handler.service.ts:18 Unhandled exception caught by iiot-core!
Cannot read property ‘canMove’ of undefined

What is the issue here?

4

Here are the 2 functions:

this.palette.toolManager.draggingTool.doActivate = () => {
        go.DraggingTool.prototype.doActivate.call(this);
          this.diagram.findLayer("Tool").opacity = 0.5;
    }
    this.palette.toolManager.draggingTool.doDeactivate = () => {
        go.DraggingTool.prototype.doDeactivate.call(this);
          this.diagram.findLayer("Tool").opacity = 1.0;
    }
5

Update: changed the snippet according to Extending GoJS -- Northwoods Software with regard to overriding functions. Working as expected now!