@operato/scene-table 8.0.0-beta.1 → 8.0.0

package/src/helper-functions.ts

@@ -1,189 +0,0 @@
-import { ApplicationContext, Component, Model, POINT, Style } from '@hatiolab/things-scene'
-import merge from 'lodash-es/merge'
-import Table from './table'
-import TableCell from './table-cell'
-import DataList from './data-list/data-list'
-
-export type WHERE = 'all' | 'in' | 'out' | 'left' | 'right' | 'center' | 'middle' | 'top' | 'bottom' | 'clear'
-
-export const SIDES: { [key: string]: string[] } = {
-  all: ['top', 'left', 'bottom', 'right'],
-  out: ['top', 'left', 'bottom', 'right'],
-  left: ['left'],
-  right: ['right'],
-  top: ['top'],
-  bottom: ['bottom'],
-  leftright: ['left', 'right'],
-  topbottom: ['top', 'bottom']
-}
-
-export const CLEAR_STYLE = {
-  strokeStyle: '',
-  lineDash: 'solid',
-  lineWidth: 0
-}
-
-export const DEFAULT_STYLE = {
-  strokeStyle: '#999',
-  lineDash: 'solid',
-  lineWidth: 1
-}
-
-export function buildNewCell(type: string, app: ApplicationContext): TableCell {
-  return Model.compile(
-    {
-      type,
-      left: 0,
-      top: 0,
-      width: 1,
-      height: 1,
-      textWrap: true,
-      border: buildBorderStyle(DEFAULT_STYLE, 'all')
-    },
-    app
-  ) as TableCell
-}
-
-export function buildCopiedCell(copy: Model, app: ApplicationContext): TableCell {
-  var obj = JSON.parse(JSON.stringify(copy))
-  delete obj.text
-  delete obj.refid
-
-  return Model.compile(obj, app) as TableCell
-}
-
-export function buildBorderStyle(style: Style, where: string) {
-  return (SIDES[where] || []).reduce((border: { [key: string]: any }, side: string) => {
-    border[side] = style
-    return border
-  }, {} as { [key: string]: any })
-}
-
-export function setCellBorder(cell: any, style: Style, where: string) {
-  if (!cell) return
-  cell.set('border', merge({}, cell.getState('border') || {}, buildBorderStyle(style, where)))
-}
-
-export function isLeftMost(total: number, columns: number, indices: number[], i: number) {
-  return i == 0 || !(i % columns) || indices.indexOf(i - 1) == -1
-}
-
-export function isRightMost(total: number, columns: number, indices: number[], i: number) {
-  return i == total - 1 || i % columns == columns - 1 || indices.indexOf(i + 1) == -1
-}
-
-export function isTopMost(total: number, columns: number, indices: number[], i: number) {
-  return i < columns || indices.indexOf(i - columns) == -1
-}
-
-export function isBottomMost(total: number, columns: number, indices: number[], i: number) {
-  return i > total - columns - 1 || indices.indexOf(i + columns) == -1
-}
-
-export function above(columns: number, i: number) {
-  return i - columns
-}
-
-export function below(columns: number, i: number) {
-  return i + columns
-}
-
-export function before(columns: number, i: number) {
-  return !(i % columns) ? -1 : i - 1
-}
-
-export function after(columns: number, i: number) {
-  return !((i + 1) % columns) ? -1 : i + 1
-}
-
-export function array(value: any, size: number) {
-  var arr = []
-  for (let i = 0; i < size; i++) arr.push(1)
-  return arr
-}
-
-export function adjustCellWidth(component: Table | DataList, index: number, diff: number) {
-  var { width } = component.textBounds
-  var widths_sum = component.widths_sum
-
-  var widths = component.widths.slice()
-
-  var diff_unit = (diff / width) * widths_sum
-
-  var min_width_unit = (widths_sum / width) * 10 // 10픽셀정도를 최소로
-
-  if (diff_unit < 0) diff_unit = -Math.min(widths[index] - min_width_unit, -diff_unit)
-  else diff_unit = Math.min(widths[index + 1] - min_width_unit, diff_unit)
-
-  widths[index] = Math.round((widths[index] + diff_unit) * 100) / 100
-  widths[index + 1] = Math.round((widths[index + 1] - diff_unit) * 100) / 100
-
-  component.set('widths', widths)
-}
-
-export function adjustCellHeight(component: Table | DataList, index: number, diff: number) {
-  var { height } = component.textBounds
-  var heights_sum = component.heights_sum
-
-  var heights = component.heights.slice()
-
-  var diff_unit = (diff / height) * heights_sum
-
-  var min_height_unit = (heights_sum / height) * 10 // 10픽셀정도를 최소로
-
-  if (diff_unit < 0) diff_unit = -Math.min(heights[index] - min_height_unit, -diff_unit)
-  else diff_unit = Math.min(heights[index + 1] - min_height_unit, diff_unit)
-
-  heights[index] = Math.round((heights[index] + diff_unit) * 100) / 100
-  heights[index + 1] = Math.round((heights[index + 1] - diff_unit) * 100) / 100
-
-  component.set('heights', heights)
-}
-
-export var columnControlHandler = {
-  ondragmove: function (point: POINT, index: number, component: Table) {
-    var { left, width } = component.textBounds
-    var widths_sum = component.widths_sum
-
-    var widths = component.widths.slice()
-
-    /* 컨트롤의 원래 위치를 구한다. */
-    var origin_pos_unit = widths.slice(0, index + 1).reduce((sum: number, width: number) => sum + width, 0)
-    var origin_offset = left + (origin_pos_unit / widths_sum) * width
-
-    /*
-     * point의 좌표는 부모 레이어 기준의 x, y 값이다.
-     * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.
-     * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,
-     * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).
-     */
-    var transcoorded = component.transcoordP2S(point.x, point.y)
-
-    adjustCellWidth(component, index, transcoorded.x - origin_offset)
-  }
-}
-
-export var rowControlHandler = {
-  ondragmove: function (point: POINT, index: number, component: Table) {
-    var { top, height } = component.textBounds
-    var heights_sum = component.heights_sum
-
-    var heights = component.heights.slice()
-
-    /* 컨트롤의 원래 위치를 구한다. */
-    index -= component.columns - 1
-    var origin_pos_unit = heights.slice(0, index + 1).reduce((sum: number, height: number) => sum + height, 0)
-    var origin_offset = top + (origin_pos_unit / heights_sum) * height
-
-    /*
-     * point의 좌표는 부모 레이어 기준의 x, y 값이다.
-     * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.
-     * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,
-     * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).
-     */
-    var transcoorded = component.transcoordP2S(point.x, point.y)
-    var diff = transcoorded.y - origin_offset
-
-    adjustCellHeight(component, index, diff)
-  }
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-export { default as Table } from './table'
-export { default as TableCell } from './table-cell'
-export { default as DataList } from './data-list/data-list'

package/src/table-cell.ts

@@ -1,138 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, ComponentNature, RectPath } from '@hatiolab/things-scene'
-
-import Table from './table'
-
-type Style = { [style: string]: any }
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'editor-table',
-      label: '',
-      name: '',
-      property: {
-        merge: true,
-        split: true
-      }
-    },
-    {
-      type: 'string',
-      label: 'data-key',
-      name: 'dataKey',
-      property: 'dataKey'
-    },
-    {
-      type: 'number',
-      label: 'data-index',
-      name: 'dataIndex',
-      property: 'dataIndex'
-    }
-  ],
-  help: 'scene/component/table-cell'
-}
-
-const EMPTY_BORDER = {}
-
-function isBottomMost(idx: number, rows: number, columns: number, components: Component[]) {
-  return idx >= (rows - 1) * columns || (components[idx + columns] && components[idx + columns].hidden)
-}
-
-function isRightMost(idx: number, rows: number, columns: number, components: Component[]) {
-  return (idx + 1) % columns == 0 || (components[idx + 1] && components[idx + 1].hidden)
-}
-
-/**
- * 1. 스타일을 상속 받아야 함. (cascade-style)
- * 2. 스타일을 동적처리할 수 있음. (로직처리)
- * 3. 데이타를 받을 수 있음.
- */
-export default class TableCell extends RectPath(Component) {
-  // export default class TableCell extends Container {
-
-  // get layout() {
-  //   return Layout.getState(this.getState('layout') || 'card')
-  // }
-
-  get nature() {
-    return NATURE
-  }
-
-  set merged(merged) {
-    this.set('merged', !!merged)
-    if (merged) this.set('text', '')
-  }
-
-  get merged() {
-    return this.getState('merged')
-  }
-
-  set rowspan(rowspan) {
-    this.set('rowspan', rowspan)
-  }
-
-  get rowspan() {
-    return this.getState('rowspan')
-  }
-
-  set colspan(colspan) {
-    this.set('colspan', colspan)
-  }
-
-  get colspan() {
-    return this.getState('colspan')
-  }
-
-  set strokeStyle(strokeStyle: string) {
-    const { lineWidth, lineDash } = this.state
-    var style = { strokeStyle } as any
-
-    lineWidth && (style.lineWidth = lineWidth)
-    lineDash && (style.lineDash = lineDash)
-
-    const table = this.parent as Table
-    table?.setCellsStyle([this], style, 'out', false /* not clear before */)
-  }
-
-  _drawBorder(context: CanvasRenderingContext2D, x: number, y: number, to_x: number, to_y: number, style: Style) {
-    if (style && style.strokeStyle && style.lineWidth && style.lineDash) {
-      context.beginPath()
-      context.moveTo(x, y)
-      context.lineTo(to_x, to_y)
-      Component.drawStroke(context, style)
-    }
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { left, top, width, height } = this.state
-
-    var { border } = this.state
-    border ||= {}
-
-    // Cell 채우기.
-    context.beginPath()
-    context.lineWidth = 0
-    context.rect(left, top, width, height)
-    this.drawFill(context)
-
-    // Border 그리기
-    var parent = this.parent as Table
-    var idx = parent.components.indexOf(this)
-    var columns = parent.columns || 1
-    var rows = parent.rows || 1
-
-    this._drawBorder(context, left, top, left + width, top, border.top)
-    this._drawBorder(context, left, top + height, left, top, border.left)
-    if (isRightMost(idx, rows, columns, parent.components))
-      this._drawBorder(context, left + width, top, left + width, top + height, border.right)
-    if (isBottomMost(idx, rows, columns, parent.components))
-      this._drawBorder(context, left + width, top + height, left, top + height, border.bottom)
-  }
-}
-
-Component.register('table-cell', TableCell)