@operato/layout 0.2.46

package/src/ox-layout.ts

@@ -0,0 +1,191 @@
+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

@@ -0,0 +1,227 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css } from 'lit-element'
+
+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: url('/assets/images/icon-htoolbar.png') 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;
+  }
+
+  /* bigger buttons */
+  #fullscreen {
+    background: url('/assets/images/icon-fullscreen.png') 50% 10px no-repeat;
+    width: var(--edit-toolbar-bigger-icon-size);
+    height: var(--edit-toolbar-bigger-icon-size);
+    border-left: var(--edit-toolbar-bigger-icon-line);
+  }
+
+  #toggle-property {
+    background: url('/assets/images/icon-collapse.png') 80% 10px no-repeat;
+    width: var(--edit-toolbar-bigger-icon-size);
+    height: var(--edit-toolbar-bigger-icon-size);
+    border-left: var(--edit-toolbar-bigger-icon-line);
+  }
+
+  #toggle-property[active] {
+    background: url(/assets/images/icon-collapse-active.png) 80% 10px no-repeat;
+  }
+`

package/src/ox-toolbar.ts

@@ -0,0 +1,135 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+const _isMacOS = navigator.userAgent.indexOf('Mac') != -1
+
+@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: url('/assets/images/icon-htoolbar.png') 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 = _isMacOS ? '⌘' : 'Ctrl'
+        break
+      case 'shift':
+        symbol = _isMacOS ? '⇧' : 'Shift'
+        break
+      case 'alt':
+      case 'option':
+        symbol = _isMacOS ? '⌥' : 'Alt'
+        break
+      case 'backspace':
+        symbol = _isMacOS ? '⌫' : 'BackSpace'
+        break
+      case 'delete':
+        symbol = _isMacOS ? '⌦' : '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(_isMacOS ? '' : '+')
+  }
+
+  onShortcut(e: KeyboardEvent) {
+    var ctrlKey = _isMacOS ? 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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,35 @@
+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()
+  })
+})

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node", "mocha"]
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});