@infinite-canvas-tutorial/webcomponents/lib/spectrum/penbar.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;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Penbar = void 0;
const lit_1 = require("lit");
const decorators_js_1 = require("lit/decorators.js");
const context_1 = require("@lit/context");
const localize_1 = require("@lit/localize");
const when_js_1 = require("lit/directives/when.js");
const ecs_1 = require("@infinite-canvas-tutorial/ecs");
const context_2 = require("../context");
const utils_1 = require("../utils");
let Penbar = class Penbar extends lit_1.LitElement {
    constructor() {
        super(...arguments);
        this.binded = false;
        // keyboard shortcuts R L O
        this.handleKeyDown = (event) => {
            if (document.activeElement !== this.api.element) {
                return;
            }
            this.setPenWithKeyboard(event, ecs_1.Pen.DRAW_RECT, 'R');
            this.setPenWithKeyboard(event, ecs_1.Pen.DRAW_LINE, 'L');
            this.setPenWithKeyboard(event, ecs_1.Pen.DRAW_ELLIPSE, 'O');
            this.setPenWithKeyboard(event, ecs_1.Pen.DRAW_ARROW, 'L', true);
        };
    }
    shouldUpdate(changedProperties) {
        const newPen = this.appState.penbarSelected;
        if (newPen !== this.previousPen) {
            this.previousPen = newPen;
            return true;
        }
        const newPenbarVisible = this.appState.penbarVisible;
        if (newPenbarVisible !== this.previousPenbarVisible) {
            this.previousPenbarVisible = newPenbarVisible;
            return true;
        }
        return super.shouldUpdate(changedProperties);
    }
    handlePenChanged(e) {
        return __awaiter(this, void 0, void 0, function* () {
            const pen = e.target.selected[0];
            if (!this.api.getAppState().penbarAll.includes(pen)) {
                return;
            }
            this.api.setAppState({
                penbarSelected: pen,
            });
            if (pen === ecs_1.Pen.DRAW_RECT ||
                pen === ecs_1.Pen.DRAW_ELLIPSE ||
                pen === ecs_1.Pen.DRAW_LINE ||
                pen === ecs_1.Pen.DRAW_ARROW ||
                pen === ecs_1.Pen.DRAW_ROUGH_RECT ||
                pen === ecs_1.Pen.DRAW_ROUGH_ELLIPSE ||
                pen === ecs_1.Pen.DRAW_ROUGH_LINE) {
                this.lastDrawPen = pen;
            }
            else if (pen === ecs_1.Pen.IMAGE) {
                try {
                    const file = yield (0, utils_1.fileOpen)({
                        extensions: ['jpg', 'png', 'svg', 'webp'],
                        description: 'Image to upload',
                    });
                    if (file) {
                        const center = this.api.viewport2Canvas({
                            x: this.api.element.clientWidth / 2,
                            y: this.api.element.clientHeight / 2,
                        });
                        yield this.api.createImageFromFile(file, { position: center });
                        this.api.setAppState({
                            penbarSelected: ecs_1.Pen.SELECT,
                        });
                        this.api.record();
                    }
                }
                catch (e) {
                    this.api.setAppState({
                        penbarSelected: ecs_1.Pen.SELECT,
                    });
                }
            }
        });
    }
    setPenWithKeyboard(event, pen, targetKey, shiftKey = false) {
        if (event.key.toUpperCase() === targetKey.toUpperCase() &&
            !event.ctrlKey &&
            !event.metaKey &&
            !event.altKey &&
            (!shiftKey || (shiftKey && event.shiftKey))) {
            event.preventDefault();
            event.stopPropagation();
            this.api.setAppState({
                penbarSelected: pen,
            });
            this.lastDrawPen = pen;
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        // this.api
        //   .getCanvasElement()
        //   .removeEventListener('keydown', this.handleKeyDown);
    }
    render() {
        if (!this.api) {
            return;
        }
        // FIXME: wait for the element to be ready.
        if (this.api.element && !this.binded) {
            this.api
                .getCanvasElement()
                .addEventListener('keydown', this.handleKeyDown);
            this.binded = true;
            const pen = this.api.getAppState().penbarSelected;
            this.lastDrawPen =
                pen === ecs_1.Pen.DRAW_RECT ||
                    pen === ecs_1.Pen.DRAW_ELLIPSE ||
                    pen === ecs_1.Pen.DRAW_LINE ||
                    pen === ecs_1.Pen.DRAW_ARROW ||
                    pen === ecs_1.Pen.DRAW_ROUGH_RECT ||
                    pen === ecs_1.Pen.DRAW_ROUGH_ELLIPSE ||
                    pen === ecs_1.Pen.DRAW_ROUGH_LINE
                    ? pen
                    : ecs_1.Pen.DRAW_RECT;
        }
        const { penbarAll, penbarSelected, penbarVisible } = this.api.getAppState();
        return (0, when_js_1.when)(penbarVisible, () => (0, lit_1.html) `
        <sp-action-group
          class="penbar"
          vertical
          selects="single"
          .selected=${[penbarSelected]}
          @change=${this.handlePenChanged}
          emphasized
          quiet
        >
          ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.HAND), () => (0, lit_1.html) `
              <sp-action-button value="${ecs_1.Pen.HAND}">
                <sp-icon-hand slot="icon"></sp-icon-hand>
                <sp-tooltip self-managed placement="right">
                  ${(0, localize_1.msg)((0, localize_1.str) `Hand (Panning tool)`)}
                </sp-tooltip>
              </sp-action-button>
            `)}
          ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.SELECT), () => (0, lit_1.html) `
              <sp-action-button value="${ecs_1.Pen.SELECT}">
                <sp-icon-select slot="icon"></sp-icon-select>
                <sp-tooltip self-managed placement="right">
                  ${(0, localize_1.msg)((0, localize_1.str) `Select`)}
                </sp-tooltip>
              </sp-action-button>
            `)}
          ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.DRAW_RECT) ||
            penbarAll.includes(ecs_1.Pen.DRAW_ELLIPSE) ||
            penbarAll.includes(ecs_1.Pen.DRAW_LINE) ||
            penbarAll.includes(ecs_1.Pen.DRAW_ARROW) ||
            penbarAll.includes(ecs_1.Pen.DRAW_ROUGH_RECT) ||
            penbarAll.includes(ecs_1.Pen.DRAW_ROUGH_ELLIPSE) ||
            penbarAll.includes(ecs_1.Pen.DRAW_ROUGH_LINE), () => (0, lit_1.html) `
              <overlay-trigger placement="right">
                <sp-action-button
                  value=${this.lastDrawPen}
                  hold-affordance
                  slot="trigger"
                >
                  ${(0, when_js_1.when)(this.lastDrawPen === ecs_1.Pen.DRAW_RECT, () => (0, lit_1.html) `<sp-icon-rectangle slot="icon"></sp-icon-rectangle>`)}
                  ${(0, when_js_1.when)(this.lastDrawPen === ecs_1.Pen.DRAW_ELLIPSE, () => (0, lit_1.html) `<sp-icon-ellipse slot="icon"></sp-icon-ellipse>`)}
                  ${(0, when_js_1.when)(this.lastDrawPen === ecs_1.Pen.DRAW_LINE, () => (0, lit_1.html) `<sp-icon-line slot="icon"></sp-icon-line>`)}
                  ${(0, when_js_1.when)(this.lastDrawPen === ecs_1.Pen.DRAW_ARROW, () => (0, lit_1.html) `<sp-icon-arrow-up-right
                        slot="icon"
                      ></sp-icon-arrow-up-right>`)}
                  ${(0, when_js_1.when)(this.lastDrawPen === ecs_1.Pen.DRAW_ROUGH_RECT, () => (0, lit_1.html) `<sp-icon-rect-select
                        slot="icon"
                      ></sp-icon-rect-select>`)}
                  ${(0, when_js_1.when)(this.lastDrawPen === ecs_1.Pen.DRAW_ROUGH_ELLIPSE, () => (0, lit_1.html) `<sp-icon-ellipse slot="icon"></sp-icon-ellipse>`)}
                  ${(0, when_js_1.when)(this.lastDrawPen === ecs_1.Pen.DRAW_ROUGH_LINE, () => (0, lit_1.html) `<sp-icon-line slot="icon"></sp-icon-line>`)}
                </sp-action-button>
                <sp-popover slot="hover-content" style="padding: 8px;">
                  <ic-spectrum-penbar-draw-settings
                    .pen=${this.lastDrawPen}
                  ></ic-spectrum-penbar-draw-settings>
                </sp-popover>
                <sp-popover slot="click-content">
                  <sp-menu
                    @change=${this.handlePenChanged}
                    selects="single"
                    .selected=${[penbarSelected]}
                  >
                    ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.DRAW_RECT), () => (0, lit_1.html) ` <sp-menu-item value="${ecs_1.Pen.DRAW_RECT}">
                        <sp-icon-rectangle slot="icon"></sp-icon-rectangle>
                        ${(0, localize_1.msg)((0, localize_1.str) `Rectangle`)}
                        <kbd slot="value">R</kbd>
                      </sp-menu-item>`)}
                    ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.DRAW_ELLIPSE), () => (0, lit_1.html) ` <sp-menu-item value="${ecs_1.Pen.DRAW_ELLIPSE}">
                        <sp-icon-ellipse slot="icon"></sp-icon-ellipse>
                        ${(0, localize_1.msg)((0, localize_1.str) `Ellipse`)}
                        <kbd slot="value">O</kbd>
                      </sp-menu-item>`)}
                    ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.DRAW_LINE), () => (0, lit_1.html) ` <sp-menu-item value="${ecs_1.Pen.DRAW_LINE}">
                        <sp-icon-line slot="icon"></sp-icon-line>
                        ${(0, localize_1.msg)((0, localize_1.str) `Line`)}
                        <kbd slot="value">L</kbd>
                      </sp-menu-item>`)}
                    ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.DRAW_ARROW), () => (0, lit_1.html) ` <sp-menu-item value="${ecs_1.Pen.DRAW_ARROW}">
                        <sp-icon-arrow-up-right
                          slot="icon"
                        ></sp-icon-arrow-up-right>
                        ${(0, localize_1.msg)((0, localize_1.str) `Arrow`)}
                        <kbd slot="value">⇧L</kbd>
                      </sp-menu-item>`)}
                    ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.DRAW_ROUGH_RECT), () => (0, lit_1.html) ` <sp-menu-item value="${ecs_1.Pen.DRAW_ROUGH_RECT}">
                        <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
                        ${(0, localize_1.msg)((0, localize_1.str) `Rough Rectangle`)}
                      </sp-menu-item>`)}
                    ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.DRAW_ROUGH_ELLIPSE), () => (0, lit_1.html) ` <sp-menu-item
                        value="${ecs_1.Pen.DRAW_ROUGH_ELLIPSE}"
                      >
                        <sp-icon-ellipse slot="icon"></sp-icon-ellipse>
                        ${(0, localize_1.msg)((0, localize_1.str) `Rough Ellipse`)}
                      </sp-menu-item>`)}
                    ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.DRAW_ROUGH_LINE), () => (0, lit_1.html) ` <sp-menu-item value="${ecs_1.Pen.DRAW_ROUGH_LINE}">
                        <sp-icon-line slot="icon"></sp-icon-line>
                        ${(0, localize_1.msg)((0, localize_1.str) `Rough Line`)}
                      </sp-menu-item>`)}
                  </sp-menu>
                </sp-popover>
              </overlay-trigger>
            `)}
          ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.IMAGE), () => (0, lit_1.html) `
              <sp-action-button value="${ecs_1.Pen.IMAGE}">
                <sp-icon-image slot="icon"></sp-icon-image>
                <sp-tooltip self-managed placement="right">
                  ${(0, localize_1.msg)((0, localize_1.str) `Image`)}
                </sp-tooltip>
              </sp-action-button>
            `)}
          ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.TEXT), () => (0, lit_1.html) `
              <overlay-trigger placement="right">
                <sp-action-button value="${ecs_1.Pen.TEXT}" slot="trigger">
                  <sp-icon-text slot="icon"></sp-icon-text>
                  <sp-tooltip self-managed placement="right">
                    ${(0, localize_1.msg)((0, localize_1.str) `Text`)}
                  </sp-tooltip>
                </sp-action-button>
                <sp-popover slot="hover-content" style="padding: 8px;">
                  <ic-spectrum-penbar-text-settings></ic-spectrum-penbar-text-settings>
                </sp-popover>
              </overlay-trigger>
            `)}
          ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.PENCIL), () => (0, lit_1.html) `
              <overlay-trigger placement="right">
                <sp-action-button value="${ecs_1.Pen.PENCIL}" slot="trigger">
                  <sp-icon-annotate-pen slot="icon"></sp-icon-annotate-pen>
                  <sp-tooltip self-managed placement="right">
                    ${(0, localize_1.msg)((0, localize_1.str) `Pencil`)}
                  </sp-tooltip>
                </sp-action-button>
                <sp-popover slot="hover-content" style="padding: 8px;">
                  <ic-spectrum-penbar-pencil-settings></ic-spectrum-penbar-pencil-settings>
                </sp-popover>
              </overlay-trigger>
            `)}
          ${(0, when_js_1.when)(penbarAll.includes(ecs_1.Pen.BRUSH), () => (0, lit_1.html) `
              <overlay-trigger placement="right">
                <sp-action-button value="${ecs_1.Pen.BRUSH}" slot="trigger">
                  <sp-icon-brush slot="icon"></sp-icon-brush>
                  <sp-tooltip self-managed placement="right">
                    ${(0, localize_1.msg)((0, localize_1.str) `Brush`)}
                  </sp-tooltip>
                </sp-action-button>
                <sp-popover slot="hover-content" style="padding: 8px;">
                  <ic-spectrum-penbar-brush-settings></ic-spectrum-penbar-brush-settings>
                </sp-popover>
              </overlay-trigger>
            `)}
          <slot name="penbar-item"></slot>
        </sp-action-group>
      `);
    }
};
exports.Penbar = Penbar;
Penbar.styles = (0, lit_1.css) `
    .penbar {
      display: flex;
      justify-content: center;

      background: var(--spectrum-gray-100);
      border-radius: var(--spectrum-corner-radius-200);

      padding: var(--spectrum-global-dimension-size-100);
      margin: 4px;

      filter: drop-shadow(
        var(--spectrum-drop-shadow-color) 0px var(--spectrum-drop-shadow-y)
          var(--spectrum-drop-shadow-blur)
      );
    }

    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;
    }
  `;
__decorate([
    (0, context_1.consume)({ context: context_2.appStateContext, subscribe: true })
], Penbar.prototype, "appState", void 0);
__decorate([
    (0, context_1.consume)({ context: context_2.apiContext, subscribe: true })
], Penbar.prototype, "api", void 0);
__decorate([
    (0, decorators_js_1.state)()
], Penbar.prototype, "lastDrawPen", void 0);
exports.Penbar = Penbar = __decorate([
    (0, decorators_js_1.customElement)('ic-spectrum-penbar'),
    (0, localize_1.localized)()
], Penbar);
//# sourceMappingURL=penbar.js.map