@infinite-canvas-tutorial/webcomponents/esm/spectrum/zoom-toolbar.js

WebComponents UI implementation

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { html, css, LitElement } from 'lit';
import { consume } from '@lit/context';
import { customElement } from 'lit/decorators.js';
import { apiContext, appStateContext } from '../context';
const ZOOM_STEPS = [
    0.02, 0.05, 0.1, 0.15, 0.2, 0.33, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4,
];
export const findZoomCeil = (zoom) => {
    return (ZOOM_STEPS.find((step) => step > zoom) || ZOOM_STEPS[ZOOM_STEPS.length - 1]);
};
export const findZoomFloor = (zoom) => {
    return [...ZOOM_STEPS].reverse().find((step) => step < zoom) || ZOOM_STEPS[0];
};
let ZoomToolbar = class ZoomToolbar extends LitElement {
    constructor() {
        super(...arguments);
        this.handleKeyDown = (e) => {
            // Canvas is focused
            // console.log(document.activeElement);
            if ((e.key === '+' || e.key === '=') && e.metaKey) {
                e.preventDefault();
                e.stopImmediatePropagation();
                this.zoomIn();
            }
            else if ((e.key === '-' || e.key === '_') && e.metaKey) {
                e.preventDefault();
                e.stopImmediatePropagation();
                this.zoomOut();
            }
            else if (e.key === '1' && e.metaKey) {
                e.preventDefault();
                e.stopImmediatePropagation();
                this.zoomTo100();
            }
            else if (e.key === '2' && e.metaKey) {
                e.preventDefault();
                e.stopImmediatePropagation();
                this.zoomTo200();
            }
            else if (e.key === '0' && e.metaKey) {
                e.preventDefault();
                e.stopImmediatePropagation();
                // this.zoomTo100();
                // TODO: fit to screen
            }
            else if (e.key === 'f') {
                // TODO: full screen mode
                e.preventDefault();
                e.stopImmediatePropagation();
                this.toggleFullScreen();
            }
        };
    }
    connectedCallback() {
        super.connectedCallback();
        document.addEventListener('keydown', this.handleKeyDown);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        document.removeEventListener('keydown', this.handleKeyDown);
    }
    toggleFullScreen() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
        }
        else if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
    zoomOut() {
        this.api.zoomTo(findZoomFloor(this.api.appState.cameraZoom));
    }
    zoomIn() {
        this.api.zoomTo(findZoomCeil(this.api.appState.cameraZoom));
    }
    zoomTo100() {
        this.api.zoomTo(1);
    }
    zoomTo200() {
        this.api.zoomTo(2);
    }
    render() {
        return html `
      <sp-action-menu size="m" label="Zoom level">
        <sp-tooltip slot="tooltip" self-managed placement="bottom">
          Zoom level
        </sp-tooltip>
        <span slot="label">
          <span>${Math.round(this.appState.cameraZoom * 100)}</span>%</span
        >
        <sp-icon-chevron-down slot="icon" size="l"></sp-icon-chevron-down>
        <sp-menu-item @click=${this.zoomIn}>
          Zoom in
          <kbd slot="value">⌘+</kbd>
        </sp-menu-item>
        <sp-menu-item @click=${this.zoomOut}>
          Zoom out
          <kbd slot="value">⌘-</kbd>
        </sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item @click=${this.zoomTo100}>
          100%
          <kbd slot="value">⌘1</kbd>
        </sp-menu-item>
        <sp-menu-item @click=${this.zoomTo200}>
          200%
          <kbd slot="value">⌘2</kbd>
        </sp-menu-item>
        <sp-menu-item>
          Fit to screen
          <kbd slot="value">⌘0</kbd>
        </sp-menu-item>
        <sp-menu-item> Fill screen </sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item @click=${this.toggleFullScreen}>
          Full screen mode
          <kbd slot="value">F</kbd>
        </sp-menu-item>
      </sp-action-menu>
    `;
    }
};
ZoomToolbar.styles = css `
    sp-menu-item {
      width: 200px;
    }

    kbd {
      font-family: var(--spectrum-alias-body-text-font-family);
      letter-spacing: 0.1em;
      white-space: nowrap;
      border: none;
      padding: none;
      padding: 0;
      line-height: normal;
    }

    sp-action-menu span[slot='label'] > span {
      display: inline-block;
      width: 28px;
      text-align: center;
    }
  `;
__decorate([
    consume({ context: apiContext, subscribe: true })
], ZoomToolbar.prototype, "api", void 0);
__decorate([
    consume({ context: appStateContext, subscribe: true })
], ZoomToolbar.prototype, "appState", void 0);
ZoomToolbar = __decorate([
    customElement('ic-spectrum-zoom-toolbar')
], ZoomToolbar);
export { ZoomToolbar };
//# sourceMappingURL=zoom-toolbar.js.map