Using a canvas element inside a foreignobjectelement #1404

madamedefarge · 2024-09-09T12:27:52Z

madamedefarge
Sep 9, 2024

Is it possible to use a canvas element inside a node? I want to be able to recreate something like this but within a glsp node;-

<!DOCTYPE html>
<svg style="width: 600px; height: 600px; background: rgb(255, 255, 255)">
  <foreignObject id="canvasObject" style="width: 555px; height: 555px; background: rgb(255, 255, 255)">
      <body onLoad="grid()">
      <canvas id="canvas" width="555" height="555" onClick="clickedHere(event)" />
    </body>
  </foreignObject>
  <script>
    const red = "rgb(243, 4,7)";
    const gridColour = "rgb(2,7,159)";
    const numberColumns = 10;
    const numberRows = 10;
    const gridLinewidth = 2;
    const gridWidth = 36;
    const gridHeight = 36;
    
    function grid() {
    
      var totalWidth =
        (gridWidth + gridLinewidth) * numberColumns + gridLinewidth;
      var totalHeight =
        (gridHeight + gridLinewidth) * numberRows + gridLinewidth;
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        if (context){
          context.fillStyle = gridColour;
        for (var x = 0; x < totalWidth; x += gridWidth + gridLinewidth) {
          context.fillRect(x, 0, gridLinewidth, totalHeight);
        }
        for (var y = 0; y < totalHeight; y += gridWidth + gridLinewidth) {
          context.fillRect(0, y, totalWidth, gridLinewidth);
        }
        }
    }
    function clickedHere(event) {
      var mouseX = event.clientX - canvas.getBoundingClientRect().left;
      var mouseY = event.clientY - canvas.getBoundingClientRect().top;

      var colNo = getColNumberAt(mouseX);
      var rowNo = getRowNumberAt(mouseY);
      colourCell(colNo, rowNo, red);
    }
    function getColNumberAt(x){
      return Math.floor(x/(gridWidth+gridLinewidth));
    }
    function getRowNumberAt(y){
      return Math.floor(y/(gridHeight+gridLinewidth));
    }
    function colourCell(colNo, RowNo, colour){
      var x = colNo*(gridWidth+gridLinewidth) +gridLinewidth;
      var y = RowNo*(gridHeight+gridLinewidth) +gridLinewidth;
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      if (context){
        context.fillStyle = colour;
        context.fillRect(x, y, gridWidth, gridHeight);
      }
    }
    </script>
</svg>

This is my first attempt at it;-

@injectable()
export class CanvasShape implements IView {
    context: CanvasRenderingContext2D | null;
    render(node: Readonly<GModelElement>, _context: RenderingContext, _args?: IViewArgs): VNode | undefined {
        const body = document.createElement('body');
        const canvas = document.createElement('canvas');
        canvas.className = 'container';
        canvas.id = 'canvas';
        body.appendChild(canvas);
        this.context = canvas.getContext('2d');
        const foreignVNode = virtualizeString(body.outerHTML);
        // on(foreignVNode!, 'mousedown', (event: any) => console.log('mouse down on canvas'));
        // on(foreignVNode!, 'mousemove', (event: any) => console.log('mouse move on canvas'));
        // on(foreignVNode!, 'mouseup', (event: any) => console.log('mouse up on canvas'));

        on(foreignVNode!, 'click', (event: Event) => this.canvasClicked(event));
        on(foreignVNode!, 'load', (event: any) => console.log('load '));
        const vnode: VNode = (
            <g>
                <foreignObject requiredFeatures='http://www.w3.org/TR/SVG11/feature#Extensibility' 
                height={382} width={382} x={0} y={0}>
                    {foreignVNode}
                </foreignObject>
            </g>
        );
        return vnode;
    }
    canvasClicked(event: Event): void {
        const target = event.target;
        console.log('function canvasCLICKED on target: ' + target);
        if (this.context){
            this.context.fillStyle = 'rgb(234, 201, 13)';
            this.context.fillRect(0,0,100,100);
        }
    }
}

My problem is that I cannot work out where to do the canvas drawing calls. I can see that the render method is creating a fresh canvas every time that it's called. Is this even possible or should I use a UIExtension instead?

tortmayr · 2024-09-11T09:03:06Z

tortmayr
Sep 11, 2024
Maintainer

Hi @madamedefarge,

I think a UIExtension is better suited for your usecase.
As you already noticed Views are stateless and rerendered every time a model update is triggered.
Sprotty/GLSP then uses a virtual dom approach to only update affected elements in the real dom.
Therefore ForeignObjectElements should only be used in combination with simple. non complex html elements.
Currently the main usecase for this in GLSP is to support multiline labels/textfields.
More complex elements like your canvas example are expensive to virtualize so recreating them on every update can significantly impact performance.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Using a canvas element inside a foreignobjectelement #1404

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Using a canvas element inside a foreignobjectelement #1404

Uh oh!

madamedefarge Sep 9, 2024

Replies: 1 comment

Uh oh!

tortmayr Sep 11, 2024 Maintainer

madamedefarge
Sep 9, 2024

tortmayr
Sep 11, 2024
Maintainer