@operato/property-editor 0.2.3 → 0.2.33

package/src/property-3dish.ts

@@ -1,150 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { PropertyAngle } from './property-angle'
-
-@customElement('property-3dish')
-export class Property3Dish extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: grid;
-        grid-template-columns: repeat(4, minmax(50px, 1fr));
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-      }
-
-      :host > * {
-        grid-column: span 1;
-      }
-
-      label {
-        text-align: right;
-      }
-
-      span {
-        text-align: center;
-      }
-    `
-  ]
-
-  @property({ type: Object }) dimension?: { width: number; height: number; depth: number }
-  /*
-   * translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.
-   */
-  @property({ type: Object }) translatex?: { x: number; y: number; z: number }
-  @property({ type: Object }) rotate?: { x: number; y: number; z: number }
-  @property({ type: Object }) scale?: { x: number; y: number; z: number }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  _onChange(e: Event) {
-    var element = e.target as HTMLElement
-    var id = element.id
-    var prop = id.substr(1)
-    var value = Number((element as HTMLInputElement).value)
-
-    switch (element.tagName) {
-      case 'PROPERTY-ANGLE':
-        value = Number((element as PropertyAngle).radian || 0)
-        break
-    }
-
-    switch (id) {
-      case 'tx':
-      case 'ty':
-      case 'tz':
-        this.dispatchEvent(
-          new CustomEvent('translate-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.translatex,
-                [prop]: value
-              }
-            }
-          })
-        )
-        break
-
-      case 'rx':
-      case 'ry':
-      case 'rz':
-        this.dispatchEvent(
-          new CustomEvent('rotate-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.rotate,
-                [prop]: value
-              }
-            }
-          })
-        )
-        break
-
-      case 'sx':
-      case 'sy':
-      case 'sz':
-        this.dispatchEvent(
-          new CustomEvent('scale-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.scale,
-                [prop]: value
-              }
-            }
-          })
-        )
-        break
-
-      default:
-        // dimension
-        this.dispatchEvent(
-          new CustomEvent('dimension-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.dimension,
-                [prop]: value
-              }
-            }
-          })
-        )
-    }
-  }
-
-  render() {
-    return html`
-      <span></span> <span><i18n-msg msgid="label.x-axes">x-axes</i18n-msg></span>
-      <span><i18n-msg msgid="label.y-axes">y-axes</i18n-msg></span>
-      <span><i18n-msg msgid="label.z-axes">z-axes</i18n-msg></span>
-
-      <label><i18n-msg msgid="label.dimension">dimension</i18n-msg></label>
-      <input type="number" id="dwidth" .value=${this.dimension?.width} />
-      <input type="number" id="dheight" .value=${this.dimension?.height} />
-      <input type="number" id="ddepth" .value=${this.dimension?.depth} />
-
-      <label><i18n-msg msgid="label.translate">translate</i18n-msg></label>
-      <input type="number" id="tx" .value=${this.translatex?.x} />
-      <input type="number" id="ty" .value=${this.translatex?.y} />
-      <input type="number" id="tz" .value=${this.translatex?.z} />
-
-      <label><i18n-msg msgid="label.rotate">rotate</i18n-msg></label>
-      <property-angle id="rx" .radian=${this.rotate?.x}></property-angle>
-      <property-angle id="ry" .radian=${this.rotate?.y}></property-angle>
-      <property-angle id="rz" .radian=${this.rotate?.z}></property-angle>
-    `
-  }
-}

package/src/property-angle.ts

@@ -1,56 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-@customElement('property-angle')
-export class PropertyAngle extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: inline-block;
-      }
-
-      input {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-    `
-  ]
-
-  @property({ type: Number }) radian?: string | number
-  @query('input') input!: HTMLInputElement
-
-  render() {
-    return html`
-      <input
-        type="number"
-        .value=${this._toDegree(this.radian)}
-        @change=${(e: Event) => this._onChangeValue(e)}
-        .placeholder=${this.placeholder}
-      />
-    `
-  }
-
-  get placeholder() {
-    return this.getAttribute('placeholder') || '0°'
-  }
-
-  _onChangeValue(e: Event) {
-    this.radian = this._toRadian(this.input.value)
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _toDegree(radian: string | number | undefined) {
-    return Math.round(((Number(radian) || 0) * 180) / Math.PI)
-  }
-
-  _toRadian(degree: string | number | undefined) {
-    return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)
-  }
-}

package/src/property-buttons-radio.ts

@@ -1,87 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-/**
-여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
-
-Example:
-
-  <property-buttons-radio @change=${e => this._onChange(e)} value=${value}>
-    <div data-value="top"></div>
-    <div data-value="middle"></div>
-    <div data-value="bottom"></div>
-  </property-buttons-radio>
-*/
-@customElement('property-buttons-radio')
-export class PropertyButtonsRadio extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: inline-block;
-      }
-    `
-  ]
-
-  /**
-   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
-   */
-  @property({ type: Object }) value: Object | null = null
-  @property({ type: Boolean }) mandatory!: boolean
-
-  render() {
-    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    changes.has('value') && this._onValueChanged(this.value)
-  }
-
-  get buttons() {
-    return Array.from(this.querySelectorAll('*'))
-  }
-
-  _onValueChanged(value: Object | null) {
-    this.buttons.forEach(button => {
-      if (value === button.getAttribute('data-value')) {
-        button.setAttribute('active', '')
-      } else {
-        button.removeAttribute('active')
-      }
-    })
-  }
-
-  _onTapButton(e: Event) {
-    var target = e.target as HTMLElement
-
-    while (!target.hasAttribute('data-value') && target !== this) {
-      target = target.parentElement!
-    }
-
-    if (target === this) {
-      return
-    }
-
-    var old = this.value
-
-    if (!this.mandatory) {
-      if (!target.getAttribute('active')) {
-        this.value = target.getAttribute('data-value')
-        target.setAttribute('active', '')
-      } else {
-        this.value = null
-        target.removeAttribute('active')
-      }
-    } else {
-      this.value = target.getAttribute('data-value')
-      target.setAttribute('active', '')
-    }
-
-    if (old !== this.value) {
-      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-    }
-  }
-}

package/src/property-stack.ts

@@ -1,109 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('property-stack')
-export default class PropertyStack extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-
-      #add-floor {
-        width: 100%;
-        height: 20px;
-        background-color: blue;
-        color: white;
-      }
-
-      div {
-        background-color: blue;
-        width: calc(100% - 40px);
-        width: -webkit-calc(100% - 40px);
-        min-height: 20px;
-      }
-
-      div[active] {
-        background-color: red;
-      }
-
-      div button {
-        position: absolute;
-        right: 10px;
-        width: 30px;
-        min-height: 20px;
-      }
-    `
-  ]
-
-  /**
-   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
-   */
-  @property({ type: Array }) stack: { name: string }[] = []
-
-  /**
-   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
-   */
-  @property({ type: Number }) activeIndex: number = 0
-
-  render() {
-    const stack = [...this.stack].reverse()
-    const length = stack.length
-
-    return html`
-      <button id="add-floor" @click=${(e: Event) => this._onClickAddFloor(e)}>+</button>
-
-      ${stack.map(
-        (item, index) => html`
-          <div
-            ?active=${length - index - 1 == this.activeIndex}
-            @click=${(e: Event) => this._onClickToActive(e)}
-            idx=${length - index - 1}
-          >
-            ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>
-          </div>
-        `
-      )}
-    `
-  }
-
-  _onClickAddFloor(e: Event) {
-    this.stack.push({ name: String(this.stack.length + 1) })
-    this.requestUpdate()
-  }
-
-  _onClickToActive(e: Event) {
-    const div = e.target as HTMLElement
-    if (div.tagName != 'DIV') {
-      return
-    }
-
-    this.activeIndex = Number(div.getAttribute('idx'))
-  }
-
-  _onClickRemoveFloor(e: Event) {
-    const div = (e.target as HTMLElement).parentElement
-
-    if (div?.tagName != 'DIV') {
-      return
-    }
-
-    const idx = Number(div.getAttribute('idx'))
-
-    this.stack.splice(idx, 1)
-
-    if (this.activeIndex == idx) {
-      this.activeIndex = 0
-    } else if (this.activeIndex >= idx) {
-      this.activeIndex--
-    } else if (this.activeIndex >= this.stack.length) {
-      this.activeIndex = 0
-    }
-
-    this.requestUpdate()
-  }
-}

package/test/property-angle.test.ts

@@ -1,32 +0,0 @@
-import { expect, fixture } from '@open-wc/testing'
-
-import { PropertyAngle } from '../src/property-angle'
-import { html } from 'lit'
-
-describe('PropertyAngle', () => {
-  it('has a default title "Hey there" and angle 5', async () => {
-    const el = await fixture<PropertyAngle>(html`<property-angle></property-angle>`)
-
-    expect(el.title).to.equal('Hey there')
-    expect(el.radian).to.equal(5)
-  })
-
-  it('increases the angle on button click', async () => {
-    const el = await fixture<PropertyAngle>(html`<property-angle></property-angle>`)
-    el.shadowRoot!.querySelector('button')!.click()
-
-    expect(el.radian).to.equal(6)
-  })
-
-  it('can override the title via attribute', async () => {
-    const el = await fixture<PropertyAngle>(html`<property-angle title="attribute title"></property-angle>`)
-
-    expect(el.title).to.equal('attribute title')
-  })
-
-  it('passes the a11y audit', async () => {
-    const el = await fixture<PropertyAngle>(html`<property-angle></property-angle>`)
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-})