12.1 click handler for SVG not working

[pavo123]

Hi Isomorphic,

using 12.1d_2018-08-24, click handler for "*.svg" images is not working.

Here is my test case

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new MyWindow().show();
            }
        });
        addMember(recreateBtn);
        new MyWindow().show();
        draw();
    }

    private class MyWindow extends Window {
        public MyWindow() {
            setWidth(400);
            setHeight(300);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            SC.logWarn(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            VLayout vL = new VLayout();

            Img svgImg = new Img("http://127.0.0.1:8888/builtinds/tools/images/kiwi.svg", 100, 100);
            svgImg.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    SC.logWarn("SVG clicked");
                }
            });
            Img svgImg2 = new Img("http://127.0.0.1:8888/builtinds/tools/images/submenu.svg", 100, 100);
            svgImg2.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    SC.logWarn("SVG clicked");
                }
            });
            Img pngImg = new Img("http://127.0.0.1:8888/builtinds/tools/images/database_gear.png", 100, 100);
            pngImg.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    SC.logWarn("PNG clicked");
                }
            });

            vL.addMembers(svgImg, svgImg2, pngImg);

            addItem(vL);
        }
    }
}

I'm also using css rule for first image, and it works good!

svg:hover > path {fill: yellow !important;}

Best regards
Pavo

[Isomorphic]

This should be fixed in today's builds, dated 2018-08-28.

[pavo123]

Hi Isomorphic,

You've fixed the problem I showed in the test case, thank you!
But now I have other test case and other(the same) problem.

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.FormItemIcon;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.form.fields.events.FormItemClickHandler;
import com.smartgwt.client.widgets.form.fields.events.FormItemIconClickEvent;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new MyWindow().show();
            }
        });
        addMember(recreateBtn);
        new MyWindow().show();
        draw();
    }

    private class MyWindow extends Window {
        public MyWindow() {
            setWidth(400);
            setHeight(300);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            SC.logWarn(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            FormItemIcon formItemIcon = new FormItemIcon();
            formItemIcon.setSrc("http://127.0.0.1:8888/builtinds/tools/images/kiwi.svg");
            formItemIcon.addFormItemClickHandler(new FormItemClickHandler() {
                @Override
                public void onFormItemClick(FormItemIconClickEvent event) {
                    SC.logWarn("Clicked!");

                }
            });

            SelectItem si = new SelectItem();
            si.setIcons(formItemIcon);

            DynamicForm df = new DynamicForm();
            df.setFields(si);

            addItem(df);
        }
    }
}

Best regards
Pavo

[Isomorphic]

Can you provide the SVG files that are referenced in your repro code? It may help in case it doesn't reproduce using certain SVG.

[Isomorphic]

We've made a change that should address the "failure to click" in your most recent sample code. It should be in the nightly builds dated 2018-08-30.

Note that if you're attempting to load SVG cross-domain, we can't forward events so you'll need to configure the containing canvas to avoid it, such as by setting Canvas.useImageForSVG to true. Of course, that imposes limitations on the SVG, as we document.

[pavo123]

Now it's working, thank you!

Most SVG icons I use are font awesome icons https://fontawesome.com/icons?d=gallery

[pavo123]

Hi Isomorphic,

click handler on SVG not working for MenuItem. (12.1d/SNAPSHOT_v12.1d_2018-08-30)
MenuItem doesn't have autoChild for icon so I guess I can not use "useImageForSVG" as you mentioned.

Here is my test case

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.menu.IMenuButton;
import com.smartgwt.client.widgets.menu.Menu;
import com.smartgwt.client.widgets.menu.MenuItem;
import com.smartgwt.client.widgets.menu.events.MenuItemClickEvent;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new MyWindow().show();
            }
        });
        addMember(recreateBtn);
        new MyWindow().show();
        draw();
    }

    private class MyWindow extends Window {
        public MyWindow() {
            setWidth(400);
            setHeight(600);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            SC.logWarn(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            VLayout vL = new VLayout();
            Menu menu = new Menu();
            MenuItem menuItem = new MenuItem();
            menuItem.setAttribute("TEST", "TEST");
            menuItem.setIcon("http://127.0.0.1:8888/builtinds/tools/images/kiwi.svg");
            menuItem.addClickHandler(new com.smartgwt.client.widgets.menu.events.ClickHandler() {
                @Override
                public void onClick(MenuItemClickEvent event) {
                    SC.logWarn("Clicked!");
                }
            });
            menu.addItem(menuItem);
            IMenuButton menuButton = new IMenuButton("test", menu);

            vL.addMembers(menuButton);
            addItem(vL);
        }
    }
}

Best regards
Pavo

[Isomorphic]

We're looking into the issue. We'll update this thread when a fix has been committed.

Note that since you're using 12.1d, you can refer to Canvas.useImageForSVG, which points out another way to disable an object tag being emitted, if that's what you were looking for. As the documentation indicates, for an image which isn't associated with a specific canvas instance because many images are potentially present in that single canvas, you can either set a query param on the SVG URL (e.g. "?tag=image") or you can change the prototype default for useImageForSVG using Canvas.setDefaultProperties().

Another option would be to disable event forwarding with Canvas.forwardSVGeventsToObject.

[Isomorphic]

This should be resolved in today's nightly builds, dated 2018-09-05

[pavo123]

Thank you very much for the tips and thank you for solving this problem, it's working now!