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``, // 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+

[zbynekstara]

Fixed as part of JointJS+ v4.0.1