type(ui.Toolbar): wrong `widgetNamespace` type

[kumilingus]

Descriptioin

The widgetNamespace is a map of classes, not instances. The types have to be updated as shown below:

widgetNamespace?: { [name: string]: typeof Widget }

Discussed in https://github.com/clientIO/joint/discussions/2523

^{Originally posted by ROYopedia February 5, 2024}

Introduction

I am using minimap feature and taking reference to you demo minimap. But encountering error while giving widgetNamespace property value of toolbar.

 const IconButton: any = ui.widgets.button.extend({
      render: function () {
        const size = this.options.size || 24;
        const imageEl = document.createElement("img");
        imageEl.style.width = `${size}px`;
        imageEl.style.height = `${size}px`;
        this.el.appendChild(imageEl);
        this.setIcon(this.options.icon);
        this.setTooltip(this.options.tooltip);
        return this;
      },
      setIcon: function (icon = "") {
       // this.el.querySelector("img").src = icon;
      },
      setTooltip: function (tooltip = "") {
       // this.el.dataset.tooltip = tooltip;
      },
    });

    // Simplified navigator element view

    const UpdateFlags = {
      Render: "@render",
      Update: "@update",
      Transform: "@transform",
    };

    const NavigatorElementView = dia.ElementView.extend({
      body: null,
      markup: util.svg`<path @selector="body" fill="${colors.blue}" opacity="0.4" />`,
      // updates run on view initialization
      initFlag: [UpdateFlags.Render, UpdateFlags.Update, UpdateFlags.Transform],
      // updates run when the model attribute changes
      presentationAttributes: {
        position: [UpdateFlags.Transform],
        angle: [UpdateFlags.Transform],
        size: [UpdateFlags.Update], // shape
        navigatorType: [UpdateFlags.Update], // shape
      },
      // calls in an animation frame after a multiple changes
      // has been made to the model
      confirmUpdate: function (flags: any) {
        if (this.hasFlag(flags, UpdateFlags.Render)) this.render();
        if (this.hasFlag(flags, UpdateFlags.Update)) this.update();
        // using the original `updateTransformation()` method
        if (this.hasFlag(flags, UpdateFlags.Transform))
          this.updateTransformation();
      },
      render: function () {
        const doc = util.parseDOMJSON(this.markup);
        this.body = doc.selectors.body;
        this.el.appendChild(doc.fragment);
      },
      update: function () {
        const { model, body } = this;
        // shape
        const { width, height } = model.size();
        const type = model.get("navigatorType");
        let d;
        switch (type) {
          case "parallelogram":
            d = `M 20 0 H ${width} L ${width - 20} ${height} H 0 Z`;
            break;
          case "diamond":
            d = `M 0 ${0.5 * height} ${0.5 * width} 0 ${width} ${
              0.5 * height
            } ${0.5 * width} ${height} Z`;
            break;
          case "ellipse":
            d = `M ${0.5 * width} 0 A ${0.5 * width} ${0.5 * height} 0 1 0 ${
              0.5 * width
            } ${height} A ${0.5 * width} ${0.5 * height} 0 1 0 ${
              0.5 * width
            } 0 Z`;
            break;
          case "rectangle":
          default:
            d = `M 0 0 H ${width} V ${height} H 0 Z`;
            break;
        }
        body.setAttribute("d", d);
      },
    });

    const NavigatorLinkView = dia.LinkView.extend({
      defaultTheme: null,
      initialize: function () {
        // mvc.View.prototype.initialize.apply(this, arguments);
      },
      onMount: function () {},
      render: function () {},
      update: function () {},
    });

    // Floating toolbar

    let navigator1: any;
    const MIN_ZOOM = 0.2;
    const MAX_ZOOM = 5;

    const toolbar1 = new ui.Toolbar({
      autoToggle: true,
      references: {
        paperScroller: paperScroller,
        commandManager: commandManager,
      },
      tools: [
        {
          type: "icon-button",
          name: "fullscreen",
          /* icon and tooltip are set in updateToolbarButtons() */
        },
        {
          type: "icon-button",
          name: "fit-to-screen",
          // icon: `${baseUrl}/fit-to-screen.svg`,
          tooltip: "Fit to screen",
        },
        { type: "separator" },
        {
          type: "zoom-slider",
          min: MIN_ZOOM * 100,
          max: MAX_ZOOM * 100,
          attrs: { input: { "data-tooltip": "Slide to zoom" } },
        },
        { type: "separator" },
        {
          type: "icon-button",
          name: "minimap",
          /* icon and tooltip are set in updateToolbarButtons() */
        },
      ],
      widgetNamespace: {
        iconButton: IconButton,
        ...ui.widgets,
      },
    });
    

I followed the same approach that is shown in example. Any idea of the error? error screenshot is in below

Steps to reproduce

NA

Restrictions & Constraints

NA

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+