@operato/layout 0.3.19 → 0.3.24

package/src/ox-layout.ts

@@ -1,191 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { render } from 'lit-html';
-import { customElement, state } from 'lit/decorators.js';
-
-import { ScrollbarStyles } from '@operato/styles';
-
-@customElement('ox-layout')
-export class OxLayout extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        position: absolute;
-        display: none;
-        background-color: white;
-        z-index: 100;
-        box-sizing: border-box;
-        min-width: fit-content;
-      }
-
-      :host([active]) {
-        display: block;
-      }
-
-      :host(*:focus) {
-        outline: none;
-      }
-    `
-  ]
-
-  @state() _parent?: Element
-
-  render() {
-    return html` <slot> </slot> `
-  }
-
-  protected _onfocusout: (e: FocusEvent) => void = function (this: OxLayout, e: FocusEvent) {
-    const to = e.relatedTarget as HTMLElement
-
-    if (!this.contains(to)) {
-      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */
-      // @ts-ignore for debug
-      !window.POPUP_DEBUG && this.close()
-    }
-  }.bind(this)
-
-  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxLayout, e: KeyboardEvent) {
-    e.stopPropagation()
-
-    switch (e.key) {
-      case 'Esc': // for IE/Edge
-      case 'Escape':
-        this.close()
-        break
-    }
-  }.bind(this)
-
-  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxLayout, e: KeyboardEvent) {
-    e.stopPropagation()
-  }.bind(this)
-
-  protected _onclick: (e: MouseEvent) => void = function (this: OxLayout, e: MouseEvent) {
-    e.stopPropagation()
-  }.bind(this)
-
-  protected _onclose: (e: Event) => void = function (this: OxLayout, e: Event) {
-    this.close()
-  }.bind(this)
-
-  protected _oncollapse: (e: Event) => void = function (this: OxLayout, e: Event) {
-    e.stopPropagation()
-    this.close()
-  }.bind(this)
-
-  protected _onwindowblur: (e: Event) => void = function (this: OxLayout, e: Event) {
-    // @ts-ignore for debug
-    !window.POPUP_DEBUG && this.close()
-  }.bind(this)
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.addEventListener('focusout', this._onfocusout)
-    this.addEventListener('keydown', this._onkeydown)
-    this.addEventListener('keyup', this._onkeyup)
-    this.addEventListener('click', this._onclick)
-    this.addEventListener('ox-close', this._onclose)
-    this.addEventListener('ox-collapse', this._oncollapse)
-
-    this.setAttribute('tabindex', '0') // make this element focusable
-    this.guaranteeFocus()
-  }
-
-  /**
-   * Configuration for opening ox-layout
-   *
-   * @typedef {Object} PopupOpenOptions
-   * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the layout
-   * @property {Number} top The position-top where the pop-up will be displayed
-   * @property {Number} left The position-left where the pop-up will be displayed
-   * @property {HTMLElement} parent Popup's parent element
-   */
-
-  /**
-   * Open Popup
-   *
-   * @param {PopupOpenOptions}
-   */
-  static open({
-    template,
-    top,
-    left,
-    right,
-    bottom,
-    parent
-  }: {
-    template: unknown
-    top?: number
-    left?: number
-    right?: number
-    bottom?: number
-    parent?: Element | null
-  }) {
-    const owner = parent || document.body
-    const target = document.createElement('ox-layout') as OxLayout
-
-    render(template, target)
-
-    target._parent = owner
-    owner.appendChild(target)
-
-    target.open({ top, left, right, bottom })
-  }
-
-  open({
-    left,
-    top,
-    right,
-    bottom,
-    silent = false
-  }: {
-    left?: number
-    top?: number
-    right?: number
-    bottom?: number
-    silent?: boolean
-  }) {
-    if (left !== undefined) this.style.left = `${left}px`
-    if (top !== undefined) this.style.top = `${top}px`
-    if (right !== undefined) this.style.right = `${right}px`
-    if (bottom !== undefined) this.style.bottom = `${bottom}px`
-
-    this.setAttribute('active', '')
-
-    !silent && this.guaranteeFocus()
-
-    /* When the window is out of focus, all pop-ups should disappear. */
-    window.addEventListener('blur', this._onwindowblur)
-  }
-
-  guaranteeFocus() {
-    const focusible = this.querySelector(
-      ':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex="-1"])'
-    )
-
-    if (focusible) {
-      ;(focusible as HTMLElement).focus()
-    } else {
-      this.focus()
-    }
-  }
-
-  close() {
-    this.removeAttribute('active')
-
-    window.removeEventListener('blur', this._onwindowblur)
-
-    if (this._parent) {
-      /* this case is when the layout is opened by OxLayout.open(...) */
-      this.removeEventListener('focusout', this._onfocusout)
-      this.removeEventListener('keydown', this._onkeydown)
-      this.removeEventListener('keyup', this._onkeyup)
-      this.removeEventListener('click', this._onclick)
-      this.removeEventListener('ox-close', this._onclose)
-      this.removeEventListener('ox-collapse', this._oncollapse)
-
-      this._parent.removeChild(this)
-      delete this._parent
-    }
-  }
-}

package/src/ox-toolbar-style.ts

@@ -1,208 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css } from 'lit'
-
-export const style = css`
-  :host {
-    background-color: var(--edit-toolbar-background-color, #394e64);
-    overflow: hidden;
-  }
-
-  [tools] {
-    display: flex;
-    align-items: center;
-    overflow: none;
-    padding: 0px 10px;
-  }
-
-  [tools] > * {
-    padding: 0px;
-  }
-
-  [tools] > span[button] {
-    min-width: 30px;
-  }
-
-  [tools] > span[padding] {
-    flex: 1;
-  }
-
-  [tools] > .vline {
-    display: block;
-    flex: none;
-    border-left: 1px solid rgba(255, 255, 255, 0.2);
-    border-right: 1px solid rgba(0, 0, 0, 0.15);
-    width: 0px;
-    height: 18px;
-    margin: 0 3px;
-  }
-
-  span[button] {
-    min-height: 35px;
-
-    background: var(--url-icon-toolbar) no-repeat;
-    background-position-x: 50%;
-    opacity: 0.8;
-  }
-  span[button]:hover {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-  }
-
-  #fullscreen,
-  #toggle-property {
-    flex: none;
-  }
-
-  #align-left {
-    background-position-y: 8px;
-  }
-
-  #align-center {
-    background-position-y: -42px;
-  }
-
-  #align-right {
-    background-position-y: -92px;
-  }
-
-  #align-top {
-    background-position-y: -142px;
-  }
-
-  #align-middle {
-    background-position-y: -192px;
-  }
-
-  #align-bottom {
-    background-position-y: -242px;
-  }
-
-  #undo {
-    background-position-y: -592px;
-  }
-
-  #redo {
-    background-position-y: -642px;
-  }
-
-  #front {
-    background-position-y: -292px;
-  }
-
-  #back {
-    background-position-y: -342px;
-  }
-
-  #forward {
-    background-position-y: -392px;
-  }
-
-  #backward {
-    background-position-y: -442px;
-  }
-
-  #symmetry-x {
-    background-position-y: -492px;
-  }
-
-  #symmetry-y {
-    background-position-y: -542px;
-  }
-
-  #group {
-    background-position-y: -492px;
-  }
-
-  #ungroup {
-    background-position-y: -542px;
-  }
-
-  #fullscreen {
-    background-position-y: -692px;
-  }
-
-  #toggle-property {
-    background-position-y: -692px;
-    float: right;
-  }
-
-  #zoomin {
-    background-position-y: -742px;
-  }
-
-  #zoomout {
-    background-position-y: -792px;
-  }
-
-  #fit-scene {
-    background-position-y: -1492px;
-  }
-
-  #cut {
-    background-position-y: -842px;
-  }
-
-  #copy {
-    background-position-y: -892px;
-  }
-
-  #paste {
-    background-position-y: -942px;
-  }
-
-  #delete {
-    background-position-y: -992px;
-  }
-
-  #font-increase {
-    background-position-y: -1042px;
-  }
-
-  #font-decrease {
-    background-position-y: -1092px;
-  }
-
-  #style-copy {
-    background-position-y: -1142px;
-  }
-
-  #context-menu {
-    background-position-y: -692px;
-  }
-
-  #symmetry-x {
-    background-position-y: -1192px;
-  }
-
-  #symmetry-y {
-    background-position-y: -1242px;
-  }
-
-  #rotate-cw {
-    background-position-y: -1292px;
-  }
-
-  #rotate-ccw {
-    background-position-y: -1342px;
-  }
-
-  #distribute-horizontal {
-    background-position-y: -1542px;
-  }
-
-  #distribute-vertical {
-    background-position-y: -1593px;
-  }
-
-  #toggle-property {
-    background-position-y: -1392px;
-  }
-
-  #preview {
-    background-position-y: -1640px;
-  }
-`

package/src/ox-toolbar.ts

@@ -1,135 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { isMacOS } from '@operato/utils'
-
-const MACOS = isMacOS()
-
-@customElement('ox-toolbar')
-class OxToolbar extends LitElement {
-  static styles = [
-    css`
-      :host {
-        background-color: var(--edit-toolbar-background-color, #394e64);
-        overflow: hidden;
-      }
-
-      [tools] {
-        display: flex;
-        align-items: center;
-        overflow: none;
-        padding: 0px 10px;
-      }
-
-      [tools] > * {
-        padding: 0px;
-      }
-
-      [tools] > span[button] {
-        min-width: 30px;
-      }
-
-      [tools] > span[padding] {
-        flex: 1;
-      }
-
-      [tools] > .vline {
-        display: block;
-        flex: none;
-        border-left: 1px solid rgba(255, 255, 255, 0.2);
-        border-right: 1px solid rgba(0, 0, 0, 0.15);
-        width: 0px;
-        height: 18px;
-        margin: 0 3px;
-      }
-
-      span[button] {
-        min-height: 35px;
-
-        background: var(--url-icon-toolbar) no-repeat;
-        background-position-x: 50%;
-        opacity: 0.8;
-      }
-
-      span[button]:hover {
-        opacity: 1;
-        background-color: rgba(0, 0, 0, 0.1);
-        cursor: pointer;
-      }
-    `
-  ]
-
-  render() {
-    return html` <slot></slot> `
-  }
-
-  firstUpdated() {
-    this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
-  }
-
-  onWheelEvent(e: Event) {
-    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
-    this.scrollLeft -= delta * 40
-
-    e.preventDefault()
-  }
-
-  getSymbol(key: string) {
-    var symbol
-    switch (key) {
-      case 'cmd':
-      case 'ctrl':
-        symbol = MACOS ? '⌘' : 'Ctrl'
-        break
-      case 'shift':
-        symbol = MACOS ? '⇧' : 'Shift'
-        break
-      case 'alt':
-      case 'option':
-        symbol = MACOS ? '⌥' : 'Alt'
-        break
-      case 'backspace':
-        symbol = MACOS ? '⌫' : 'BackSpace'
-        break
-      case 'delete':
-        symbol = MACOS ? '⌦' : 'Del'
-        break
-      default:
-        symbol = key.toUpperCase()
-        break
-    }
-
-    return symbol
-  }
-
-  getShortcutString() {
-    var symbols = []
-    for (var i = 0; i < arguments.length; i++) {
-      symbols.push(this.getSymbol(arguments[i]))
-    }
-
-    return symbols.join(MACOS ? '' : '+')
-  }
-
-  onShortcut(e: KeyboardEvent) {
-    var ctrlKey = MACOS ? e.metaKey : e.ctrlKey
-    var altKey = e.altKey
-    var shiftKey = e.shiftKey
-
-    var defaultPrevent = ctrlKey || altKey
-
-    switch (e.code) {
-      default:
-        return false
-    }
-
-    if (defaultPrevent) e.preventDefault()
-    return true
-  }
-}
-
-customElements.define('process-edit-toolbar', OxToolbar)

package/stories/index.stories.ts

@@ -1,52 +0,0 @@
-import '../src/ox-layout';
-
-import { html, TemplateResult } from 'lit';
-
-export default {
-  title: 'ContextMenu',
-  component: 'ox-layout',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  title?: string
-  counter?: number
-  textColor?: string
-  slot?: TemplateResult
-}
-
-const Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`
-  <ox-layout style="--ox-layout-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
-    ${slot}
-  </ox-layout>
-`
-
-export const Regular = Template.bind({})
-
-export const CustomTitle = Template.bind({})
-CustomTitle.args = {
-  title: 'My title'
-}
-
-export const CustomCounter = Template.bind({})
-CustomCounter.args = {
-  counter: 123456
-}
-
-export const SlottedContent = Template.bind({})
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`
-}
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } }
-}

package/test/ox-layout.test.ts

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