@operato/board 0.2.15

package/src/player/board-player-carousel.ts

@@ -0,0 +1,197 @@
+import './board-player-grid'
+
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+@customElement('ox-board-player-carousel')
+class BoardPlayerCarousel extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        margin: 0 auto 0px;
+        -webkit-perspective: 1200px;
+        -moz-perspective: 1200px;
+        -o-perspective: 1200px;
+        perspective: 1200px;
+      }
+
+      #carousel {
+        width: 100%;
+        height: 100%;
+        margin: 0px auto 0px;
+
+        position: absolute;
+        -webkit-transform-style: preserve-3d;
+        -moz-transform-style: preserve-3d;
+        -o-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+        -webkit-transition: -webkit-transform 1.5s;
+        -moz-transition: -moz-transform 1.5s;
+        -o-transition: -o-transform 1.5s;
+        transition: transform 1.5s;
+      }
+
+      #carousel > * {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        font-weight: bold;
+        -webkit-transition: opacity 1.5s, -webkit-transform 1.5s;
+        -moz-transition: opacity 1.5s, -moz-transform 1.5s;
+        -o-transition: opacity 1.5s, -o-transform 1.5s;
+        transition: opacity 1.5s, transform 1.5s;
+
+        -webkit-backface-visibility: hidden;
+        -moz-backface-visibility: hidden;
+        -o-backface-visibility: hidden;
+        backface-visibility: hidden;
+      }
+    `
+  ]
+
+  @property({ type: String }) axis: string = 'y'
+  @property({ type: Number }) rows: number = 1
+  @property({ type: Number }) columns: number = 1
+
+  @state() _slotObserver?: MutationObserver
+  @state() _boundResize?: () => void
+  @state() _rotation: number = 0
+  @state() _theta: number = 0
+  @state() _radius: number = 0
+  @state() _rotateFn?: string
+
+  @state() _panelCount: number = 0
+  @state() _panelSize: number = 0
+  @state() _isHorizontal: boolean = true
+
+  @query('#slot') _slot!: HTMLSlotElement
+  @query('#carousel') _carousel!: HTMLElement
+
+  render() {
+    return html`
+      <slot id="slot" select="[page]"></slot>
+
+      <div id="carousel"></div>
+    `
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback()
+
+    this._boundResize = this.build.bind(this)
+    window.addEventListener('resize', this._boundResize)
+
+    this._slotObserver = new MutationObserver(mutations => {
+      this.build()
+    })
+
+    await this.updateComplete
+
+    this._slotObserver?.observe(this._slot, { childList: true })
+    this.build()
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this._slotObserver?.disconnect()
+    delete this._slotObserver
+
+    if (this._boundResize) {
+      window.removeEventListener('resize', this._boundResize)
+      delete this._boundResize
+    }
+  }
+
+  firstUpdated() {
+    this._rotation = 0
+  }
+
+  updated(changes: PropertyValues<this>) {
+    changes.has('axis') && this._onAxisChanged()
+  }
+
+  build() {
+    var pages = Array.from(this.querySelectorAll('[page]'))
+    var panel = Array.from(this._carousel.querySelectorAll('ox-board-player-grid')).pop()
+
+    var rows = this.rows || 1
+    var columns = this.columns || 1
+
+    var i = panel ? panel.querySelectorAll('[page]').length : 0
+    var page = pages.shift()
+
+    while (page) {
+      if (!(i++ % (rows * columns))) {
+        panel = document.createElement('ox-board-player-grid')
+        ;(panel as any).rows = rows
+        ;(panel as any).columns = columns
+
+        this._carousel.appendChild(panel)
+      }
+      panel?.appendChild(page)
+
+      page = pages.shift()
+    }
+
+    this.start()
+  }
+
+  start() {
+    var panels = this._carousel.querySelectorAll('ox-board-player-grid')
+
+    this._isHorizontal = this.axis === 'y'
+
+    this._panelCount = panels.length
+
+    this._panelSize = this._carousel[this._isHorizontal ? 'offsetWidth' : 'offsetHeight'] || 640
+    this._rotateFn = this._isHorizontal ? 'rotateY' : 'rotateX'
+    this._theta = 360 / (this._panelCount || 1)
+
+    // do some trig to figure out how big the carousel is in 3D space
+    this._radius = Math.round(this._panelSize / 2 / Math.tan(Math.PI / (this._panelCount < 2 ? 2 : this._panelCount)))
+
+    for (let i = 0; i < this._panelCount; i++) {
+      let panel = panels[i] as HTMLElement
+      let angle = this._theta * i
+      panel.style.opacity = '1'
+
+      panel.style.backgroundColor = 'white'
+
+      panel.style.transform = this._rotateFn + '(' + angle + 'deg) translateZ(' + this._radius + 'px)'
+    }
+
+    // adjust rotation so panels are always flat
+    this._rotation = Math.round(this._rotation / this._theta) * this._theta
+    this._transform()
+  }
+
+  stop() {
+    this._carousel.innerHTML = ''
+  }
+
+  _onAxisChanged() {
+    this.start()
+  }
+
+  _transform() {
+    // push the carousel back in 3D space, and rotate it
+    this._carousel.style.transform =
+      'translateZ(-' + this._radius + 'px) ' + this._rotateFn + '(' + this._rotation + 'deg)'
+    this.dispatchEvent(new CustomEvent('transform', { bubbles: true, composed: true }))
+  }
+
+  previous() {
+    this._rotation += this._theta
+    this._transform()
+  }
+
+  next() {
+    this._rotation -= this._theta
+    this._transform()
+  }
+}

package/src/player/board-player-grid.ts

@@ -0,0 +1,78 @@
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+/**
+ * 자식 컴포넌트들을 그리드형태로 화면에 배치하여 한꺼번에 디스플레이해주는 컴포넌트.
+ * Example:
+    <ox-board-player-grid rows="3" columns="3" tabindex="0" focus>
+      <div page>A</div>
+      <div page>B</div>
+      <div page>C</div>
+      <div page>D</div>
+    </ox-board-player-grid>
+ */
+
+@customElement('ox-board-player-grid')
+class BoardPlayerGrid extends LitElement {
+  static styles = [
+    css`
+      :host {
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        display: grid;
+        grid-gap: 0px;
+        grid-auto-flow: dense;
+      }
+    `
+  ]
+
+  @property({ type: Number }) rows: number = 1
+  @property({ type: Number }) columns: number = 1
+
+  @state() _slotObserver?: MutationObserver
+
+  @query('#slot') _slot!: HTMLSlotElement
+
+  render() {
+    return html` <slot id="slot" select="[page]"></slot> `
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback()
+
+    this._slotObserver = new MutationObserver(mutations => {
+      var columns = this.columns || 1
+      var rows = this.rows || 1
+
+      ;(this.style as any)['grid-template-columns'] = `repeat(${columns}, 1fr)`
+      ;(this.style as any)['grid-template-rows'] = `repeat(${rows}, 1fr)`
+    })
+
+    await this.updateComplete
+
+    var columns = this.columns || 1
+    var rows = this.rows || 1
+
+    ;(this.style as any)['grid-template-columns'] = `repeat(${columns}, 1fr)`
+    ;(this.style as any)['grid-template-rows'] = `repeat(${rows}, 1fr)`
+
+    this._slotObserver?.observe(this._slot, { childList: true })
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this._slotObserver?.disconnect()
+    delete this._slotObserver
+  }
+
+  start() {}
+
+  stop() {}
+
+  next() {}
+
+  previous() {}
+}

package/src/utils/fullscreen.ts

@@ -0,0 +1,82 @@
+/**
+ * 풀스크린 전환 이후와 풀스크린 해제 이후에 호출되는 콜백함수
+ * @callback FullscreenCallback
+ */
+export type FullscreenCallback = () => void
+
+/**
+ * 엘리먼트를 풀스크린으로 표시되도록 한다.
+ * @param {HTMLElement} element 대상 엘리먼트
+ * @param {FullscreenCallback} afterfull 풀스크린이 된 이후에 호출되는 콜백함수
+ * @param {FullscreenCallback} afterfinish 풀스크린이 해제된 이후에 호출되는 콜백함수
+ */
+export function fullscreen(element: HTMLElement, afterfull?: FullscreenCallback, afterfinish?: FullscreenCallback) {
+  var org_width = element.style.width
+  var org_height = element.style.height
+
+  function _fullscreen_callback(e: Event) {
+    if (
+      !document.fullscreenElement &&
+      //@ts-ignore
+      !document.mozFullScreen &&
+      //@ts-ignore
+      !document.webkitIsFullScreen &&
+      //@ts-ignore
+      !document.msFullscreenElement
+    ) {
+      ;['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'].forEach(event =>
+        document.removeEventListener(event, _fullscreen_callback)
+      )
+
+      element.style.width = org_width
+      element.style.height = org_height
+
+      afterfinish && afterfinish()
+    } else {
+      element.style.width = '100%'
+      element.style.height = '100%'
+
+      afterfull && afterfull()
+    }
+  }
+
+  ;['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'].forEach(event =>
+    document.addEventListener(event, _fullscreen_callback)
+  )
+
+  if (element.requestFullscreen) element.requestFullscreen()
+  //@ts-ignore
+  else if (element.webkitRequestFullScreen) element.webkitRequestFullScreen()
+  //@ts-ignore
+  else if (element.mozRequestFullScreen) element.mozRequestFullScreen()
+  //@ts-ignore
+  else if (element.msRequestFullscreen) element.msRequestFullscreen()
+}
+
+export function exitfullscreen() {
+  if (document.exitFullscreen) document.exitFullscreen()
+  //@ts-ignore
+  else if (document.mozCancelFullScreen) document.mozCancelFullScreen()
+  //@ts-ignore
+  else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen()
+  //@ts-ignore
+  else if (document.msExitFullscreen) document.msExitFullscreen()
+}
+
+export function togglefullscreen(
+  element: HTMLElement,
+  afterfull?: FullscreenCallback,
+  afterfinish?: FullscreenCallback
+) {
+  if (
+    !document.fullscreenElement &&
+    //@ts-ignore
+    !document.mozFullScreen &&
+    //@ts-ignore
+    !document.webkitIsFullScreen &&
+    //@ts-ignore
+    !document.msFullscreenElement
+  )
+    fullscreen(element, afterfull, afterfinish)
+  else exitfullscreen()
+}

package/src/utils/os.ts

@@ -0,0 +1,41 @@
+var os = 'Unknown OS'
+
+if (navigator.userAgent.indexOf('Win') != -1) os = 'Windows'
+else if (navigator.userAgent.indexOf('Mac') != -1) os = 'Mac'
+else if (navigator.userAgent.indexOf('Linux') != -1) os = 'Linux'
+else if (navigator.userAgent.indexOf('Android') != -1) os = 'Android'
+else if (navigator.userAgent.indexOf('like Mac') != -1) os = 'iOS'
+
+var mobile = os === 'iOS' || os === 'Android'
+
+/**
+ * method to get operating system of running browser
+ * @returns {string} name of OS : 'Windows | 'Mac' | 'Android' | 'iOS'
+ */
+export function getOS() {
+  return os
+}
+
+/**
+ * method to tell if platform of running browser is kind of mobile device
+ * @returns {boolean}
+ */
+export function isMobileDevice() {
+  return mobile
+}
+
+/**
+ * method to tell if operating system of running browser is iOS
+ * @returns {boolean}
+ */
+export function isIOS() {
+  return os === 'iOS'
+}
+
+/**
+ * method to tell if operating system of running browser is MacOS
+ * @returns {boolean}
+ */
+export function isMacOS() {
+  return os === 'Mac'
+}

package/src/utils/swipe-listener.ts

@@ -0,0 +1,290 @@
+/**
+ * Starts monitoring swipes on the given element and
+ * emits `swipe` event when a swipe gesture is performed.
+ * @param {DOMElement} element Element on which to listen for swipe gestures.
+ * @param {Object} options Optional: Options.
+ * @return {Object}
+ */
+export function SwipeListener(element: HTMLElement, options?: any) {
+  if (!element) return
+
+  // CustomEvent polyfill
+  if (typeof window !== 'undefined') {
+    ;(function () {
+      if (typeof window.CustomEvent === 'function') return false
+      function CustomEvent(event: string, params: any) {
+        params = params || { bubbles: false, cancelable: false, detail: undefined }
+        var evt = document.createEvent('CustomEvent')
+        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
+        return evt
+      }
+      CustomEvent.prototype = window.Event.prototype
+      ;(window as any).CustomEvent = CustomEvent
+    })()
+  }
+
+  let defaultOpts = {
+    minHorizontal: 10, // Minimum number of pixels traveled to count as a horizontal swipe.
+    minVertical: 10, // Minimum number of pixels traveled to count as a vertical swipe.
+    deltaHorizontal: 3, // Delta for horizontal swipe
+    deltaVertical: 5, // Delta for vertical swipe
+    preventScroll: false, // Prevents scrolling when swiping.
+    lockAxis: true, // Select only one axis to be true instead of multiple.
+    touch: true, // Listen for touch events
+    mouse: true // Listen for mouse events
+  }
+
+  // Set options
+  if (!options) {
+    options = {}
+  }
+  options = {
+    ...defaultOpts,
+    ...options
+  }
+
+  // Store the touches
+  let touches: Array<{ x: number; y: number }> = []
+
+  // Not dragging by default.
+  let dragging = false
+
+  // When mouse-click is started, make dragging true.
+  const _mousedown = function (e: MouseEvent) {
+    dragging = true
+  }
+
+  // When mouse-click is released, make dragging false and signify end by imitating `touchend`.
+  const _mouseup = function (e: MouseEvent) {
+    dragging = false
+    _touchend(e as any)
+  }
+
+  // When mouse is moved while being clicked, imitate a `touchmove`.
+  const _mousemove = function (e: MouseEvent) {
+    if (dragging) {
+      ;(e as any).changedTouches = [
+        {
+          clientX: e.clientX,
+          clientY: e.clientY
+        }
+      ]
+      _touchmove(e as any)
+    }
+  }
+
+  if (options.mouse) {
+    element.addEventListener('mousedown', _mousedown)
+    element.addEventListener('mouseup', _mouseup)
+    element.addEventListener('mousemove', _mousemove)
+  }
+
+  // When the swipe is completed, calculate the direction.
+  const _touchend = function (e: TouchEvent) {
+    if (!touches.length) return
+
+    const touch = typeof TouchEvent === 'function' && e instanceof TouchEvent
+
+    let x = [],
+      y = []
+
+    let directions = {
+      top: false,
+      right: false,
+      bottom: false,
+      left: false
+    }
+
+    for (let i = 0; i < touches.length; i++) {
+      x.push(touches[i].x)
+      y.push(touches[i].y)
+    }
+
+    const xs = x[0],
+      xe = x[x.length - 1], // Start and end x-coords
+      ys = y[0],
+      ye = y[y.length - 1] // Start and end y-coords
+
+    const eventCoords = {
+      x: [xs, xe],
+      y: [ys, ye]
+    }
+
+    if (touches.length > 1) {
+      const swipeReleaseEventData = {
+        detail: {
+          touch,
+          target: e.target,
+          ...eventCoords
+        }
+      }
+
+      let swipeReleaseEvent = new CustomEvent('swiperelease', swipeReleaseEventData)
+      element.dispatchEvent(swipeReleaseEvent)
+    }
+
+    // Determine left or right
+    let diff = x[0] - x[x.length - 1]
+    let swipe = 'none'
+    if (diff > 0) {
+      swipe = 'left'
+    } else {
+      swipe = 'right'
+    }
+
+    let min = Math.min(...x),
+      max = Math.max(...x),
+      _diff
+
+    // If minimum horizontal distance was travelled
+    if (Math.abs(diff) >= options.minHorizontal) {
+      switch (swipe) {
+        case 'left':
+          _diff = Math.abs(min - x[x.length - 1])
+          if (_diff <= options.deltaHorizontal) {
+            directions.left = true
+          }
+          break
+        case 'right':
+          _diff = Math.abs(max - x[x.length - 1])
+          if (_diff <= options.deltaHorizontal) {
+            directions.right = true
+          }
+          break
+      }
+    }
+
+    // Determine top or bottom
+    diff = y[0] - y[y.length - 1]
+    swipe = 'none'
+    if (diff > 0) {
+      swipe = 'top'
+    } else {
+      swipe = 'bottom'
+    }
+
+    min = Math.min(...y)
+    max = Math.max(...y)
+
+    // If minimum vertical distance was travelled
+    if (Math.abs(diff) >= options.minVertical) {
+      switch (swipe) {
+        case 'top':
+          _diff = Math.abs(min - y[y.length - 1])
+          if (_diff <= options.deltaVertical) {
+            directions.top = true
+          }
+          break
+        case 'bottom':
+          _diff = Math.abs(max - y[y.length - 1])
+          if (_diff <= options.deltaVertical) {
+            directions.bottom = true
+          }
+          break
+      }
+    }
+
+    // Clear touches array.
+    touches = []
+
+    // If there is a swipe direction, emit an event.
+    if (directions.top || directions.right || directions.bottom || directions.left) {
+      /**
+       * If lockAxis is true, determine which axis to select.
+       * The axis with the most travel is selected.
+       * TODO: Factor in for the orientation of the device
+       * and use it as a weight to determine the travel along an axis.
+       */
+      if (options.lockAxis) {
+        if ((directions.left || directions.right) && Math.abs(xs - xe) > Math.abs(ys - ye)) {
+          directions.top = directions.bottom = false
+        } else if ((directions.top || directions.bottom) && Math.abs(xs - xe) < Math.abs(ys - ye)) {
+          directions.left = directions.right = false
+        }
+      }
+
+      const eventData = {
+        detail: {
+          directions,
+          touch,
+          target: e.target,
+          ...eventCoords
+        }
+      }
+
+      let event = new CustomEvent('swipe', eventData)
+      element.dispatchEvent(event)
+    } else {
+      let cancelEvent = new CustomEvent('swipecancel', {
+        detail: {
+          touch,
+          target: e.target,
+          ...eventCoords
+        }
+      })
+      element.dispatchEvent(cancelEvent)
+    }
+  }
+
+  // When a swipe is performed, store the coords.
+  const _touchmove = function (e: TouchEvent) {
+    let touch = e.changedTouches[0]
+    touches.push({
+      x: touch.clientX,
+      y: touch.clientY
+    })
+
+    // Emit a `swiping` event if there are more than one touch-points.
+    if (touches.length > 1) {
+      const xs = touches[0].x, // Start and end x-coords
+        xe = touches[touches.length - 1].x,
+        ys = touches[0].y, // Start and end y-coords
+        ye = touches[touches.length - 1].y,
+        eventData = {
+          detail: {
+            x: [xs, xe],
+            y: [ys, ye],
+            touch: typeof TouchEvent === 'function' && e instanceof TouchEvent,
+            target: e.target
+          }
+        }
+      let event = new CustomEvent('swiping', eventData)
+
+      const shouldPrevent =
+        options.preventScroll === true || (typeof options.preventScroll === 'function' && options.preventScroll(event))
+
+      if (shouldPrevent) {
+        e.preventDefault()
+      }
+
+      element.dispatchEvent(event)
+    }
+  }
+
+  // Test via a getter in the options object to see if the passive property is accessed
+  let passiveOptions: any = false
+  try {
+    const testOptions = Object.defineProperty({}, 'passive', {
+      get: function () {
+        passiveOptions = { passive: !options.preventScroll }
+      }
+    })
+    window.addEventListener('testPassive', null as any, testOptions)
+    window.removeEventListener('testPassive', null as any, testOptions)
+  } catch (e) {}
+
+  if (options.touch) {
+    element.addEventListener('touchmove', _touchmove, passiveOptions)
+    element.addEventListener('touchend', _touchend)
+  }
+
+  return {
+    off: function () {
+      element.removeEventListener('touchmove', _touchmove, passiveOptions)
+      element.removeEventListener('touchend', _touchend)
+      element.removeEventListener('mousedown', _mousedown)
+      element.removeEventListener('mouseup', _mouseup)
+      element.removeEventListener('mousemove', _mousemove)
+    }
+  }
+}

package/src/utils/things-scene.d.ts

@@ -0,0 +1 @@
+declare module '@hatiolab/things-scene'