Method constructor

packages/markmap-toolbar/src/toolbar.tsx:87–133

()

  }

  constructor() {
    this.register({
      id: 'zoomIn',
      title: 'Zoom in',
      content: Toolbar.icon('M9 5v4h-4v2h4v4h2v-4h4v-2h-4v-4z'),
      onClick: this.getHandler((mm) => mm.rescale(1.25)),
    });
    this.register({
      id: 'zoomOut',
      title: 'Zoom out',
      content: Toolbar.icon('M5 9h10v2h-10z'),
      onClick: this.getHandler((mm) => mm.rescale(0.8)),
    });
    this.register({
      id: 'fit',
      title: 'Fit window size',
      content: Toolbar.icon(
        'M4 7h2v-2h2v4h-4zM4 13h2v2h2v-4h-4zM16 7h-2v-2h-2v4h4zM16 13h-2v2h-2v-4h4z',
      ),
      onClick: this.getHandler((mm) => mm.fit()),
    });
    this.register({
      id: 'recurse',
      title: 'Toggle recursively',
      content: Toolbar.icon('M16 4h-12v12h12v-8h-8v4h2v-2h4v4h-8v-8h10z'),
      onClick: (e) => {
        const button = (e.target as HTMLDivElement).closest<HTMLDivElement>(
          `.${clsToolbarItem}`,
        );
        const active = button?.classList.toggle(clsActive);
        this.markmap?.setOptions({
          toggleRecursively: active,
        });
      },
    });
    this.register({
      id: 'dark',
      title: 'Toggle dark theme',
      content: Toolbar.icon(
        'M10 4a6 6 0 0 0 0 12a6 6 0 0 0 0 -12v2a4 4 0 0 1 0 8z',
      ),
      onClick: () => {
        document.documentElement.classList.toggle('markmap-dark');
      },
    });
    this.render();
  }

  /** @deprecated Set `showBrand` instead. */
  setBrand(show: boolean) {