Decorator Toggle button

[Zubair-KPM]

Hi, Guys
I Had wrote one code related to toggling decorator which is the device ID

Here is the class for the decorator visibility:

 private async addMarkers() {
        const values = await kPM_SmartDeviceDecorator.getSmartDeviceData();
        const cloudData = await SmartDeviceAPI.getData();

        values.forEach(value => {
            const smartDeviceMarker = new kPM_SmartDeviceMarker(
                { x: value.origin.x, y: value.origin.y, z: value.origin.z },
                { x: 40, y: 40 },
                value.kPM_SmartDevice_ID,
                value.kPM_SmartDevice_Type,
                cloudData[value.kPM_SmartDevice_ID, value.kPM_SmartDevice_Type],
                value.id
            );

            const htmlElement = document.createElement("div");
            htmlElement.innerHTML = `<h3 style="visibility: visible; color: white;">${value.kPM_SmartDevice_ID }</h3>`;
            
            smartDeviceMarker.htmlElement = htmlElement;

            this._markerSet.push(smartDeviceMarker);
        });
    }

    // Decorate method to add markers to the context
    public decorate(context: DecorateContext): void {
        this._markerSet.forEach(marker => {
            marker.addDecoration(context);
        });
    }
}

Here is the button Code:

import React from "react";
import { CommandItemDef, StageUsage, ToolbarHelper, ToolbarItem, ToolbarOrientation, ToolbarUsage, UiItemsProvider } from "@itwin/appui-react";
import { MdOutlineMessage } from "react-icons/md";
import { kPM_SmartDeviceDecorator } from "../../components/decorators/KPM_SmartDeviceDecorator";


export class DecoratorToggleButton implements UiItemsProvider {
  public readonly id = "DecoratorToggleButton";

  handleDecoratorButtonClick = () => {
    // Call toggleVisibility method from the decorator
    kPM_SmartDeviceDecorator.decoratorToggleVisibility();
  
  }
 

  public provideToolbarItems(_stageId: string, stageUsage: string, toolbarUsage: ToolbarUsage, toolbarOrientation: ToolbarOrientation): readonly ToolbarItem[] {
    if (stageUsage === StageUsage.General && toolbarUsage === ToolbarUsage.ViewNavigation && toolbarOrientation === ToolbarOrientation.Vertical) {
      const toolbarItem = ToolbarHelper.createToolbarItemFromItemDef(1000,
        new CommandItemDef({ commandId: "ToggleMarkerIcon", iconSpec: <MdOutlineMessage />, label: "Toggle Decorator", execute: this.handleDecoratorButtonClick })
      );
      return [toolbarItem];
    }
    return [];
  }
}

Please anyone who has Idea of how to solve this issue will help me.

[pmconne]

how to solve this issue

You need to explain what the issue is. We can't guess just by looking at your code snippets.