@things-factory/scene-form 5.0.0-alpha.9 → 5.0.0-zeta.1

package/src/input.js

@@ -1,204 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'name',
-      name: 'name'
-    },
-    {
-      type: 'string',
-      label: 'value',
-      name: 'text'
-    },
-    {
-      type: 'string',
-      label: 'placeholder',
-      name: 'placeholder'
-    },
-    {
-      type: 'checkbox',
-      label: 'readonly',
-      name: 'readonly'
-    },
-    {
-      type: 'checkbox',
-      label: 'disabled',
-      name: 'disabled'
-    },
-    {
-      type: 'number',
-      label: 'max-length',
-      name: 'maxlength'
-    },
-    {
-      type: 'checkbox',
-      label: 'submit-on-change',
-      name: 'submitOnChange'
-    },
-    {
-      type: 'checkbox',
-      label: 'spread-on-init',
-      name: 'spreadOnInit'
-    },
-    {
-      type: 'string',
-      label: 'next-input',
-      name: 'nextInput'
-    },
-    {
-      type: 'checkbox',
-      label: 'autofocus',
-      name: 'autofocus'
-    },
-    {
-      type: 'checkbox',
-      label: 'alltime-focus',
-      name: 'alltimeFocus'
-    },
-    {
-      type: 'number',
-      label: 'alltime-focus-pending',
-      name: 'alltimeFocusPending',
-      placeholder: 'milli-seconds'
-    },
-    {
-      type: 'checkbox',
-      label: 'hide-keyboard',
-      name: 'hideKeyboard'
-    }
-  ],
-  'value-property': 'text',
-  help: 'scene/component/input'
-}
-
-import { Component, HTMLOverlayElement, error } from '@hatiolab/things-scene'
-
-export default class Input extends HTMLOverlayElement {
-  get nature() {
-    return NATURE
-  }
-
-  get tagName() {
-    return 'input'
-  }
-
-  get inputType() {
-    return this.get('type').substr(6)
-  }
-
-  select() {
-    this.element.select()
-  }
-
-  createElement() {
-    super.createElement()
-
-    /* element.property => component.property */
-    this.element.onchange = e => {
-      this.value = this.element.value
-      // this.data = this.value
-    }
-
-    var alltimeFocus = this.get('alltimeFocus')
-    var alltimeFocusPending = this.get('alltimeFocusPending')
-    var hideKeyboard = this.get('hideKeyboard')
-    if (this.app.isViewMode) {
-      this.element.addEventListener('focusout', e => {
-        if (alltimeFocus) {
-          setTimeout(
-            () => {
-              this.element.select()
-            },
-            !alltimeFocusPending || alltimeFocusPending == 0 ? 1000 : alltimeFocusPending
-          )
-        }
-      })
-
-      this.element.addEventListener('focusin', e => {  
-        if(hideKeyboard){
-          this.element.setAttribute('readonly',true)
-          this.element.select()
-          setTimeout(()=>{
-            this.element.removeAttribute('readonly')
-          },50)
-        } 
-      })
-    }
-
-
-    var nextInput = this.get('nextInput')
-    if (nextInput) {
-      this.element.addEventListener('keypress', e => {
-        if (e.keyCode == 13) {
-          var n = this.root.findById(nextInput)
-          n && n.select && n.select()
-        }
-      })
-    }
-
-    setTimeout(() => {
-      this.get('autofocus') && this.element.select()
-    }, 300)
-  }
-
-  /* component.property => element.property */
-  setElementProperties(element) {
-    var { name = '', placeholder = '', disabled, readonly, maxlength, spreadOnInit, nextInput, autofocus} = this.state
-
-    try {
-      element.type = this.inputType
-      element.name = name
-      element.placeholder = placeholder
-      element.disabled = disabled
-      element.readonly = readonly
-      element.maxlength = maxlength
-      element.value = this.value
-      autofocus && element.setAttribute('autofocus', '')
-    } catch (e) {
-      error(e)
-    }
-
-    // if (spreadOnInit) {
-    //   this.data = this.value
-    // }
-  }
-
-  onchange(after, before) {
-    super.onchange(after, before)
-    var { spreadOnInit, submitOnChange } = this.state
-
-    var valueProperty = this.nature['value-property']
-    if (valueProperty && valueProperty in after && this.element) {
-      this.element.value = after.text
-      if (!spreadOnInit) {
-        this.data = this.value
-      }
-
-      if (submitOnChange && this.element.form)
-        this.element.form.dispatchEvent(
-          new Event('submit', {
-            cancelable: true
-          })
-        )
-    }
-  }
-}
-
-;[
-  'input',
-  'input-text',
-  'input-password',
-  'input-email',
-  'input-search',
-  'input-time',
-  'input-datetime-local',
-  'input-month',
-  'input-week'
-].forEach(input => Component.register(input, Input))

package/src/layout/grid-layout.js

@@ -1,116 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Layout } from '@hatiolab/things-scene'
-
-var GridLayout = {
-  reflow: function(container) {
-    var layoutConfig = container.get('layoutConfig')
-
-    var columns = (layoutConfig && layoutConfig.columns) || container.get('columns')
-    var rows = (layoutConfig && layoutConfig.rows) || container.get('rows')
-    var widths = (layoutConfig && layoutConfig.widths) || container.get('widths')
-    var heights = (layoutConfig && layoutConfig.heights) || container.get('heights')
-
-    var widths_sum = widths ? widths.filter((width, i) => i < columns).reduce((sum, width) => sum + width, 0) : columns
-    var heights_sum = heights ? heights.filter((height, i) => i < rows).reduce((sum, height) => sum + height, 0) : rows
-
-    var inside = container.textBounds
-    var paddingLeft = container.get('paddingLeft') || 0
-    var paddingTop = container.get('paddingTop') || 0
-
-    var width_unit = inside.width / widths_sum
-    var height_unit = inside.height / heights_sum
-
-    var x = 0
-    var y = 0
-    var components = container.components
-
-    components.forEach((component, idx) => {
-      let w = widths ? widths[idx % columns] : 1
-      let h = heights ? heights[Math.floor(idx / columns)] : 1
-
-      let colspan = component.colspan || 1
-      let wspan = 0
-      while (--colspan > 0) wspan += widths ? widths[(idx + colspan) % columns] : 1
-
-      let rowspan = component.rowspan || 1
-      let hspan = 0
-      while (--rowspan > 0) hspan += heights ? heights[Math.floor(idx / columns) + rowspan] : 1
-
-      component.bounds = {
-        left: paddingLeft + x,
-        top: paddingTop + y,
-        width: width_unit * (w + wspan),
-        height: height_unit * (h + hspan)
-      }
-      component.set('rotation', 0)
-
-      if (idx % columns == columns - 1) {
-        x = 0
-        y += h * height_unit
-      } else {
-        x += w * width_unit
-      }
-    })
-  },
-
-  capturables: function(container) {
-    return container.components.filter(cell => {
-      return !cell.merged
-    })
-  },
-
-  drawables: function(container) {
-    return container.components.filter(cell => {
-      return !cell.merged
-    })
-  },
-
-  isStuck: function(component) {
-    return true
-  },
-
-  /*
-   * 레이아웃별로, 키보드 방향키 등을 사용해서 네비게이션 할 수 있는 기능을 제공할 수 있다.
-   * 하나의 컴포넌트만 선택되어있고, 키보드 이벤트가 발생했을 때 호출되게 된다.
-   * keyNavigate 메쏘드가 정의되어 있지 않으면, 'Tab' 키에 대한 네비게이션만 작동한다.
-   * 'Tab'키에 의한 네비게이션은 모든 레이아웃에 공통으로 적용된다.
-   */
-  keyNavigate: function(container, component, e) {
-    var layoutConfig = container.get('layoutConfig')
-
-    var columns = (layoutConfig && layoutConfig.columns) || container.get('columns')
-    var rows = (layoutConfig && layoutConfig.rows) || container.get('rows')
-
-    var { row, column } = container.getRowColumn(component)
-
-    switch (e.code) {
-      case 'ArrowUp':
-        if (row > 0) return container.getAt((row - 1) * columns + column)
-        break
-      case 'ArrowDown':
-        if (row < rows - 1) return container.getAt((row + 1) * columns + column)
-        break
-      case 'ArrowRight':
-        if (column < columns - 1) return container.getAt(row * columns + column + 1)
-        break
-      case 'ArrowLeft':
-        if (column > 0) return container.getAt(row * columns + column - 1)
-        break
-      default:
-        return component
-    }
-  },
-
-  /*
-   * 하위 컴포넌트를 영역으로 선택하는 경우에, 바운드에 join만 되어도 선택된 것으로 판단하도록 한다.
-   * joinType이 false이거나, 정의되어있지 않으면, 바운드에 포함되어야 선택된 것으로 판단한다.
-   */
-  joinType: true
-}
-
-Layout.register('grid', GridLayout)
-
-export default GridLayout

package/src/link.js

@@ -1,75 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'href',
-      name: 'href',
-      property: 'href'
-    },
-    {
-      type: 'select',
-      label: 'target',
-      name: 'target',
-      property: {
-        options: [
-          {
-            display: 'self',
-            value: '_self'
-          },
-          {
-            display: 'blank',
-            value: '_blank'
-          },
-          {
-            display: 'parent',
-            value: '_parent'
-          },
-          {
-            display: 'top',
-            value: '_top'
-          }
-        ]
-      }
-    }
-  ],
-  'value-property': 'href'
-}
-
-import { Component, HTMLOverlayContainer } from '@hatiolab/things-scene'
-
-export default class Link extends HTMLOverlayContainer {
-  get tagName() {
-    return 'a'
-  }
-
-  get href() {
-    return this.get('href')
-  }
-
-  set href(href) {
-    this.set('href', href)
-  }
-
-  setElementProperties(link) {
-    var { href = '', target } = this.state
-
-    if (link.href != href) link.href = href
-
-    link.target = target
-
-    if (this.components.length == 0) this.element.textContent = this.text || href
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('link', Link)

package/src/radio-group.js

@@ -1,70 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'checkbox',
-      label: 'submit-on-change',
-      name: 'submitOnChange'
-    },
-    {
-      type: 'checkbox',
-      label: 'copy-value-to-data',
-      name: 'copyValueToData'
-    }
-  ],
-  'value-property': 'value'
-}
-
-import { Component, HTMLOverlayContainer, warn } from '@hatiolab/things-scene'
-export default class RadioGroup extends HTMLOverlayContainer {
-  get nature() {
-    return NATURE
-  }
-
-  containable(component) {
-    return component.model.type == 'input-radio'
-  }
-
-  setElementProperties(element) {
-    element.onchange = () => {
-      this.changeChecked()
-    }
-  }
-
-  onchange(after, before) {
-    super.onchange(after, before)
-    if ('value' in after && this.element) {
-      this.element.value = after.value
-      if (this.get('copyValueToData')) {
-        try {
-          this.data = JSON.parse(after.value)
-        } catch (e) {
-          this.data = after.value
-        }
-      }
-      if (this.get('submitOnChange') && this.element.parentElement.tagName == 'FORM')
-        this.element.parentElement.dispatchEvent(
-          new Event('submit', {
-            cancelable: true
-          })
-        )
-    }
-  }
-
-  changeChecked() {
-    var allRadioList = this.element.querySelectorAll('input')
-    var specificList = Array.prototype.slice.call(allRadioList).filter(e => e.name == this.element.id)
-    if (specificList.length) {
-      var checkedValue = specificList.filter(e => e.checked == true)
-      this.set('value', checkedValue[0].value)
-    }
-  }
-}
-
-Component.register('radio-group', RadioGroup)

package/src/radio.js

@@ -1,102 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'value',
-      name: 'value'
-    },
-    {
-      type: 'number',
-      label: 'size',
-      name: 'size'
-    },
-    {
-      type: 'string',
-      label: 'name',
-      name: 'name'
-    },
-    {
-      type: 'checkbox',
-      label: 'checked',
-      name: 'checked'
-    }
-  ],
-  'value-property': 'value'
-}
-
-import Input from './input'
-
-import { Component } from '@hatiolab/things-scene'
-
-export default class Radio extends Input {
-  get nature() {
-    return NATURE
-  }
-
-  get tagName() {
-    return 'input'
-  }
-
-  get inputType() {
-    return 'radio'
-  }
-
-  createElement() {
-    this.element = document.createElement('label')
-    if (!this.element) return
-
-    var input = document.createElement('input')
-    this.element.appendChild(input)
-
-    var text = document.createElement('p')
-    text.style.display = 'inline'
-    text.innerHTML = this.get('text')
-    this.element.appendChild(text)
-
-    this.setElementProperties(this.element)
-
-    if (this.parent.isHTMLElement && this.parent.isHTMLElement()) this.parent.element.appendChild(this.element)
-    else this.root.model_layer.overlay.appendChild(this.element)
-
-    Component.reposition(this)
-    this.oncreate_element && this.oncreate_element(this.element)
-  }
-
-  setElementProperties(element) {
-    var eText = this.element.querySelector('text')
-    var eInput = this.element.querySelector('input')
-
-    var { text, checked, value } = this.state
-
-    if (eText) {
-      eText.textContent = text
-    }
-
-    if (eInput) {
-      eInput.checked = checked
-      eInput.value = value
-    }
-
-    super.setElementProperties(eInput)
-  }
-  postrender(context) {
-    /* postrender() 함수는 거의 상속하지 않는다.
-     * 텍스트, 효과, 애니메이션 등 컴포넌트 공통 기능에 대한 표현을 담당한다.
-     */
-    this.changeText(context)
-  }
-  changeText(context) {
-    if (this.text && this.hasTextProperty && this.element.querySelector('p')) {
-      this.element.querySelector('p').innerText = this.text
-    }
-  }
-}
-
-Component.register('input-radio', Radio)