@infinite-canvas-tutorial/webcomponents/esm/spectrum/text-content.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;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { html, css, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { consume } from '@lit/context';
import { inferXYWidthHeight, } from '@infinite-canvas-tutorial/ecs';
import { apiContext, appStateContext } from '../context';
import { localized, msg, str } from '@lit/localize';
let TextContent = class TextContent extends LitElement {
    handleFontSizeChanged(e) {
        const fontSize = parseFloat(e.target.value);
        this.api.updateNode(this.node, {
            fontSize,
        });
        this.api.record();
    }
    handleFontStyleChanged(e) {
        const selected = e.target.selected;
        this.api.updateNode(this.node, {
            fontWeight: selected.includes('bold') ? 'bold' : 'normal',
            fontStyle: selected.includes('italic') ? 'italic' : 'normal',
            // TODO: implement text underline
        });
        this.api.record();
    }
    handleTextAlignChanged(e) {
        const selected = e.target.selected;
        const newAnchorX = this.node.anchorX + this.node.x;
        const newAnchorY = this.node.anchorY + this.node.y;
        const _a = this.node, { x, y, width, height } = _a, rest = __rest(_a, ["x", "y", "width", "height"]);
        const { x: newX, y: newY, width: newWidth, height: newHeight } = inferXYWidthHeight(Object.assign(Object.assign({}, rest), { anchorX: newAnchorX, anchorY: newAnchorY, textAlign: selected[0] }));
        this.api.updateNode(this.node, {
            textAlign: selected[0],
            anchorX: newAnchorX,
            anchorY: newAnchorY,
            x: newX, y: newY, width: newWidth, height: newHeight,
        });
        this.api.record();
    }
    render() {
        const { fontSize, fontWeight, fontFamily, fontVariant, fontStyle, textAlign = 'start', textBaseline,
        // textDecoration,
         } = this.node;
        const formattedTextAlign = textAlign === 'left' ? 'start' : textAlign === 'center' ? 'center' : textAlign === 'right' ? 'end' : textAlign;
        return html `<div class="line">
        <sp-field-label for="font-size" side-aligned="start"
          >${msg(str `Font size`)}</sp-field-label
        >
        <sp-number-field
          id="font-size"
          value=${fontSize}
          hide-stepper
          autocomplete="off"
          @change=${this.handleFontSizeChanged}
          format-options='{
          "style": "unit",
          "unit": "px"
        }'
        ></sp-number-field>
      </div>
      <div class="line">
        <sp-action-group
          quiet
          size="m"
          selects="multiple"
          .selected=${this.node &&
            [
                fontWeight === 'bold' ? 'bold' : undefined,
                fontStyle === 'italic' ? 'italic' : undefined,
            ].filter(Boolean)}
          @change=${this.handleFontStyleChanged}
        >
          <sp-action-button value="bold">
            <sp-tooltip self-managed placement="bottom"> ${msg(str `Bold`)} </sp-tooltip>
            <sp-icon-text-bold slot="icon"></sp-icon-text-bold>
          </sp-action-button>
          <sp-action-button value="italic">
            <sp-tooltip self-managed placement="bottom"> ${msg(str `Italic`)} </sp-tooltip>
            <sp-icon-text-italic slot="icon"></sp-icon-text-italic>
          </sp-action-button>
          <!-- <sp-action-button value="underline">
            <sp-tooltip self-managed placement="bottom"> ${msg(str `Underline`)} </sp-tooltip>
            <sp-icon-text-underline slot="icon"></sp-icon-text-underline>
          </sp-action-button> -->
        </sp-action-group>

        <sp-action-group
          quiet
          size="m"
          selects="single"
          .selected=${[formattedTextAlign]}
          @change=${this.handleTextAlignChanged}
        >
          <sp-action-button value="start">
            <sp-tooltip self-managed placement="bottom">
              ${msg(str `Left align`)}
            </sp-tooltip>
            <sp-icon-text-align-left slot="icon"></sp-icon-text-align-left>
          </sp-action-button>
          <sp-action-button value="center">
            <sp-tooltip self-managed placement="bottom">
              ${msg(str `Center align`)}
            </sp-tooltip>
            <sp-icon-text-align-center slot="icon"></sp-icon-text-align-center>
          </sp-action-button>
          <sp-action-button value="end">
            <sp-tooltip self-managed placement="bottom">
              ${msg(str `Right align`)}
            </sp-tooltip>
            <sp-icon-text-align-right slot="icon"></sp-icon-text-align-right>
          </sp-action-button>
        </sp-action-group>
      </div> `;
    }
};
TextContent.styles = css `
    :host {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .line {
      display: flex;
      align-items: center;
      justify-content: space-between;

      sp-field-label {
        width: 100px;
      }

      sp-number-field {
        width: 80px;
      }

      > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    sp-slider {
      flex: 1;
      margin-right: 8px;
    }

    .stroke-width-field {
      position: relative;
      top: 10px;
    }
  `;
__decorate([
    consume({ context: appStateContext, subscribe: true })
], TextContent.prototype, "appState", void 0);
__decorate([
    consume({ context: apiContext, subscribe: true })
], TextContent.prototype, "api", void 0);
__decorate([
    property()
], TextContent.prototype, "node", void 0);
TextContent = __decorate([
    customElement('ic-spectrum-text-content'),
    localized()
], TextContent);
export { TextContent };
//# sourceMappingURL=text-content.js.map