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

WebComponents UI implementation

"use strict";
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZoomToolbar = exports.findZoomFloor = exports.findZoomCeil = void 0;
const lit_1 = require("lit");
const context_1 = require("@lit/context");
const decorators_js_1 = require("lit/decorators.js");
const context_2 = require("../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,
];
const findZoomCeil = (zoom) => {
    return (ZOOM_STEPS.find((step) => step > zoom) || ZOOM_STEPS[ZOOM_STEPS.length - 1]);
};
exports.findZoomCeil = findZoomCeil;
const findZoomFloor = (zoom) => {
    return [...ZOOM_STEPS].reverse().find((step) => step < zoom) || ZOOM_STEPS[0];
};
exports.findZoomFloor = findZoomFloor;
let ZoomToolbar = class ZoomToolbar extends lit_1.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((0, exports.findZoomFloor)(this.api.appState.cameraZoom));
    }
    zoomIn() {
        this.api.zoomTo((0, exports.findZoomCeil)(this.api.appState.cameraZoom));
    }
    zoomTo100() {
        this.api.zoomTo(1);
    }
    zoomTo200() {
        this.api.zoomTo(2);
    }
    render() {
        return (0, lit_1.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>
    `;
    }
};
exports.ZoomToolbar = ZoomToolbar;
ZoomToolbar.styles = (0, lit_1.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([
    (0, context_1.consume)({ context: context_2.apiContext, subscribe: true })
], ZoomToolbar.prototype, "api", void 0);
__decorate([
    (0, context_1.consume)({ context: context_2.appStateContext, subscribe: true })
], ZoomToolbar.prototype, "appState", void 0);
exports.ZoomToolbar = ZoomToolbar = __decorate([
    (0, decorators_js_1.customElement)('ic-spectrum-zoom-toolbar')
], ZoomToolbar);
//# sourceMappingURL=zoom-toolbar.js.map