Directly trigger button event inside IView #1035

wss29 · 2023-06-16T09:38:07Z

wss29
Jun 16, 2023

Hi,
I want to click a button and trigger a click event on that button. the button is inside a custom snabbdom view, code as follow

my problem is that, if I direct click the button, click event will not be triggered, I should select the view first then click the button can trigger the event.

Could the click event be triggered when clicking the button?

martin-fleck-at · 2023-06-20T08:41:51Z

martin-fleck-at
Jun 20, 2023
Maintainer

@wss29 That is a good question! I've never tried it but it seems that other people had similar issues with svg+foreignObject and resolved them through, e.g., "svg-native" click zones (e.g., software-mansion/react-native-svg#1389). In theory foreignObject should support onClick without issues but maybe it does not properly propagate the event. Can you see whether the click event is fired on the foreignObject if you add a listener there?

On a "regular" web page it definitely works so there might be some forwarding issue:

<!DOCTYPE html>
<svg style="width: 100px; height: 100px; background: yellow">
  <foreignObject style="transform: translateY(20px); width: 100px; height: 100px; background: lime">
    <button onClick="alert('test')">Test</button>
  </foreignObject>
</svg>

0 replies

martin-fleck-at · 2023-06-20T08:58:03Z

martin-fleck-at
Jun 20, 2023
Maintainer

FYI, I just did a test with this IView as part of the workflow example:

import { IView, IViewArgs, on, RenderingContext, SShapeElement, svg } from '@eclipse-glsp/client';
import { injectable } from 'inversify';
import { VNode } from 'snabbdom';
import virtualizeString from 'sprotty/lib/lib/virtualize';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const JSX = { createElement: svg };

@injectable()
export class CustomShape implements IView {
    render(node: Readonly<SShapeElement>, _context: RenderingContext, _args?: IViewArgs): VNode | undefined {
        const div = document.createElement('div');
        div.className = 'container';
        div.style.padding = '20px';
        div.style.backgroundColor = 'green';

        const button = document.createElement('button');
        button.name = node.id;
        button.id = node.id;
        button.textContent = 'Click';

        div.appendChild(button);

        const foreignVNode = virtualizeString(div.outerHTML);
        on(foreignVNode!, 'click', (event: any) => console.log('CLICKED'));
        const vnode: VNode = (
            <g>
                <foreignObject requiredFeatures='http://www.w3.org/TR/SVG11/feature#Extensibility' height={50} width={70} x={0} y={0}>
                    {foreignVNode}
                </foreignObject>
            </g>
        );
        return vnode;
    }
}

And for me the click is properly triggered and logged to the console.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Directly trigger button event inside IView #1035

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Directly trigger button event inside IView #1035

wss29 Jun 16, 2023

Replies: 2 comments

martin-fleck-at Jun 20, 2023 Maintainer

martin-fleck-at Jun 20, 2023 Maintainer

wss29
Jun 16, 2023

martin-fleck-at
Jun 20, 2023
Maintainer

martin-fleck-at
Jun 20, 2023
Maintainer