regl-web-components 0.0.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "regl-web-components",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "author": {
     "name": "rubén rodríguez",
     "url": "https://rubenrodriguez.me"
@@ -11,13 +11,21 @@
   },
   "exports": {
     ".": "./dist/all.js",
+    "./cjs": "./dist/all.cjs",
     "./define": "./dist/all-define.js",
+    "./define.cjs": "./dist/all-define.cjs",
     "./regl-element": "./dist/regl-element.js",
+    "./regl-element.cjs": "./dist/regl-element.cjs",
     "./regl-element/define": "./dist/regl-element-define.js",
+    "./regl-element/define.cjs": "./dist/regl-element-define.cjs",
     "./regl-multi-element": "./dist/regl-multi-element.js",
+    "./regl-multi-element.cjs": "./dist/regl-multi-element.cjs",
     "./regl-multi-element/define": "./dist/regl-multi-element-define.js",
+    "./regl-multi-element/define.cjs": "./dist/regl-multi-element-define.cjs",
     "./regl-multi-root": "./dist/regl-multi-root.js",
-    "./regl-multi-root/define": "./dist/regl-multi-root-define.js"
+    "./regl-multi-root.cjs": "./dist/regl-multi-root.cjs",
+    "./regl-multi-root/define": "./dist/regl-multi-root-define.js",
+    "./regl-multi-root/define.cjs": "./dist/regl-multi-root-define.cjs"
   },
   "devDependencies": {
     "@types/web": "^0.0.297",

package/src/all-define.ts

@@ -1,7 +0,0 @@
-import { define as reDefine } from '@/src/regl-element'
-import { define as rmeDefine } from '@/src/regl-multi-element'
-import { define as rmrDefine } from '@/src/regl-multi-root'
-
-reDefine()
-rmeDefine()
-rmrDefine()

package/src/all.ts

@@ -1,3 +0,0 @@
-export { ReglElement } from '@/src/regl-element'
-export { ReglMultiElement } from '@/src/regl-multi-element'
-export { ReglMultiRoot } from '@/src/regl-multi-root'

package/src/deferred-regl.ts

@@ -1,142 +0,0 @@
-// fork of https://www.npmjs.com/package/deferred-regl
-import type { Regl } from 'regl'
-
-export interface DeferredRegl extends Regl {
-  setRegl : (r : Regl) => void
-}
-
-export default deferredRegl
-export function deferredRegl () : DeferredRegl {
-  var regl = null
-  var queue = []
-  var def = dfn('()')
-  unset()
-  def.setRegl = function (r) {
-    regl = r
-    if (!r) return unset()
-    for (var i = 0; i < queue.length; i++) {
-      queue[i](regl)
-    }
-    queue = null
-    def.frame = r.frame
-    def.draw = r.draw
-    def.poll = r.poll
-    def.clear = r.clear
-    def.buffer = r.buffer
-    def.texture = r.texture
-    def.elements = r.elements
-    def.framebuffer = r.framebuffer
-    def.framebufferCube = r.framebufferCube
-    def.renderbuffer = r.renderbuffer
-    def.cube = r.cube
-    def.read = r.read
-    def.hasExtension = r.hasExtension
-    def.limits = r.limits
-    def.stats = r.limits
-    def.now = r.now
-    def.destroy = r.destroy
-    def.on = r.on
-  }
-  return def
-
-  function unset () {
-    if (!queue) queue = []
-    def.frame = function (cb) { queue.push(function (r) { r.frame(cb) }) }
-    def.draw = function (cb) { queue.push(function (r) { r.draw(cb) }) }
-    def.poll = function () { queue.push(function (r) { r.poll() }) }
-    def.clear = function (opts) { queue.push(function (r) { r.clear(opts) }) }
-    def.prop = function (key) {
-      return function (context, props) {
-        if (!falsy(props[key])) {
-          return props[key]
-        } else {
-          // missing key could be speical case unrolled uniform prop
-          // https://github.com/regl-project/regl/issues/258
-          // https://github.com/regl-project/regl/issues/373
-          var matches = key.match(/(?<prop>.+)\[(?<index>.+)\]/i)
-          if (matches) {
-            return props[matches.groups.prop][matches.groups.index]
-          }
-        }
-      }
-    }
-    def.props = def.prop
-    def.context = function (key) {
-      return function (context, props) { return context[key] }
-    }
-    def['this'] = function (key) {
-      return function (context, props) { return this[key] }
-    }
-    def.buffer = dfn('buffer')
-    def.texture = dfn('texture')
-    def.elements = dfn('elements')
-    def.framebuffer = dfnx('framebuffer',['resize','use'])
-    def.framebufferCube = dfn('framebufferCube')
-    def.renderbuffer = dfn('renderbuffer')
-    def.cube = dfn('cube')
-    def.read = function () {}
-    def.hasExtension = function () {}
-    def.limits = function () {}
-    def.stats = function () {}
-    def.now = function () { return 0 }
-    def.destroy = function () { queue.push(function (r) { r.destroy() }) }
-    def.on = function (name, f) { queue.push(function (r) { r.on(name,f) }) }
-  }
-  function dfn (key) {
-    return function (opts) {
-      if (key === '()' && regl) return regl(opts)
-      else if (regl) return regl[key](opts)
-
-      var f = null
-      if (key === '()') {
-        queue.push(function (r) { f = r(opts) })
-      } else {
-        queue.push(function (r) { f = r[key](opts) })
-      }
-      return function () {
-        var args = arguments
-        if (!falsy(f)) {
-          if (key === '()') f.apply(null,args)
-          else return f
-        } else {
-          queue.push(function (r) { f.apply(null,args) })
-        }
-      }
-    }
-  }
-  function dfnx (key, methods) {
-    return function (opts) {
-      if (key === '()' && regl) return regl(opts)
-      else if (regl) return regl[key](opts)
-
-      var f = null
-      if (key === '()') {
-        queue.push(function (r) { f = r(opts) })
-      } else {
-        queue.push(function (r) { f = r[key](opts) })
-      }
-      var r = function () {
-        var args = arguments
-        if (!falsy(f)) {
-          if (key === '()') f.apply(null,args)
-          else return f
-        } else {
-          queue.push(function (r) { f.apply(null,args) })
-        }
-      }
-      for (var i = 0; i < methods.length; i++) {
-        var m = methods[i]
-        r[m] = function () {
-          var args = arguments
-          if (!falsy(f)) return f[m].apply(f,args)
-          else queue.push(function () { f[m].apply(f,args) })
-        }
-      }
-      return r
-    }
-  }
-}
-
-function falsy (x) {
-  return x === null || x === undefined
-}

package/src/multi-regl.ts

@@ -1,283 +0,0 @@
-// fork of https://github.com/regl-project/multi-regl
-import { DefaultContext, InitializationOptions, Regl } from "regl"
-
-export type CreateSubContextInput = HTMLElement |
-  { element : HTMLElement } |
-  string |
-  undefined
-
-export interface SubREGL extends Regl {
-  container: HTMLElement,
-}
-
-export type SubContext = {
-  tick: number,
-  element: HTMLElement,
-  callbacks: ((c: DefaultContext) => void)[],
-  intersectionObserverEntry : null | IntersectionObserverEntry,
-}
-
-export type CreateSubContextFn = (i: CreateSubContextInput) => SubREGL
-export interface CreateSubContext {
-  CreateSubContextFn,
-  destroy: () => void,
-  regl: Regl,
-  subcontexts: SubContext[],
-}
-
-export type CreateMultiplexor = ((
-    createRegl : (o: InitializationOptions) => Regl,
-    canvas : HTMLElement,
-    options : InitializationOptions
-  ) => CreateSubContext)
-
-export default createMultiplexor
-
-export function createMultiplexor (createREGL, canvas, inputs) {
-  var reglInput : InitializationOptions = {}
-  if (inputs) {
-    Object.keys(inputs).forEach(function (input) {
-      reglInput[input] = inputs[input]
-    })
-  }
-
-  var pixelRatio = reglInput.pixelRatio || window.devicePixelRatio
-  reglInput.pixelRatio = pixelRatio
-
-  var canvasStyle = canvas.style
-  canvasStyle.position = 'var(--multi-regl-canvas-position, fixed)'
-  canvasStyle.left = 'var(--multi-regl-canvas-left, 0px)'
-  canvasStyle.top = 'var(--multi-regl-canvas-top, 0px)'
-  canvasStyle.width = 'var(--multi-regl-canvas-width, 100%)'
-  canvasStyle.height = 'var(--multi-regl-canvas-height, 100%)'
-  canvasStyle['pointer-events'] = 'var(--multi-regl-canvas-pointer-events, none)'
-  canvasStyle['touch-action'] = 'var(--multi-regl-canvas-touch-action, none)'
-  canvasStyle['z-index'] = 'var(--multi-regl-canvas-z-index, 1000)'
-
-  var subcontexts : SubContext[] = []
-
-  const intersectionObserver = new IntersectionObserver(processIntersectionObserverEntries)
-
-  function processIntersectionObserverEntries (entries) {
-    for (const entry of entries) {
-      const subcontext = subcontexts.find(sc => sc.element === entry.target)
-      if (!subcontext) continue
-      subcontext.intersectionObserverEntry = entry
-    }
-  }
-
-  function resize () {
-    canvas.width = pixelRatio * window.innerWidth
-    canvas.height = pixelRatio * window.innerHeight
-    if (!setRAF && regl) regl.draw(frame)
-  }
-
-  resize()
-
-  window.addEventListener('resize', resize, false)
-  window.addEventListener('scroll', function () {
-    if (!setRAF) regl.draw(frame)
-  }, false)
-
-  reglInput.canvas = canvas
-  delete reglInput.gl
-  delete reglInput.container
-
-  var regl = createREGL(reglInput)
-
-  function addSubcontext (sc) {
-    subcontexts.push(sc)
-    intersectionObserver.observe(sc.element)
-  }
-
-  function removeSubcontext (sc) {
-    subcontexts.splice(subcontexts.indexOf(sc), 1)
-    intersectionObserver.unobserve(sc.element)
-  }
-
-  var viewBox = {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  }
-
-  function createSubContext (input : CreateSubContextInput) : SubREGL {
-    var element
-    if (typeof input === 'object' && input) {
-      if (typeof (input as HTMLElement).getBoundingClientRect === 'function') {
-        element = input
-      } else if (input.element) {
-        element = input.element
-      }
-    } else if (typeof input === 'string') {
-      element = document.querySelector(element)
-    }
-    if (!element) {
-      element = document.body
-    }
-
-    var subcontext : SubContext = {
-      tick: 0,
-      element: element,
-      callbacks: [],
-      intersectionObserverEntry: null,
-    }
-
-    addSubcontext(subcontext)
-
-    function wrapBox (boxDesc) {
-      return boxDesc
-    }
-
-    var scheduled = false
-    function schedule (cb) {
-      subcontext.callbacks.push(cb)
-      if (!scheduled) {
-        scheduled = true
-        window.requestAnimationFrame(draw)
-      }
-      function draw () {
-        regl.draw(frame)
-        scheduled = false
-      }
-    }
-
-    function subREGL (options) : SubREGL {
-      if ('viewport' in options) {
-        options.viewport = wrapBox(options.viewport)
-      }
-      if ('scissor' in options) {
-        if ('box' in options) {
-          options.scissor.box = wrapBox(options.scissor.box)
-        }
-        if ('enable' in options) {
-          options.scissor.box = true
-        }
-      }
-      var draw = regl.apply(regl, Array.prototype.slice.call(arguments))
-      if (!setRAF) {
-        return function () {
-          if (setRAF) return draw.apply(this, arguments)
-          var args = arguments
-          schedule(function () {
-            draw.apply(null, args)
-          })
-        }
-      } else return draw
-    }
-
-    Object.keys(regl).forEach(function (option) {
-      if (option === 'clear') {
-        subREGL.clear = function (opts) {
-          if (opts && opts.framebuffer) {
-            if (setRAF) return clear.apply(this,arguments)
-            var args = arguments
-            schedule(function () {
-              regl.clear.apply(null, args)
-            })
-          } else {
-            if (setRAF) return regl[option].apply(this, arguments)
-            subcontext.callbacks = []
-            var args = arguments
-            schedule(function () {
-              regl.clear.apply(null, args)
-            })
-          }
-        }
-      } else if (option === 'draw') {
-        subREGL.draw = function () {
-          if (setRAF) return regl[option].apply(this, arguments)
-          var args = arguments
-          schedule(function () {
-            regl.draw.apply(null, args)
-          })
-        }
-      } else subREGL[option] = regl[option]
-    })
-
-    subREGL.frame = function subFrame (cb) {
-      setRAF = true
-      subcontext.callbacks.push(cb)
-      regl.frame(frame)
-      return {
-        cancel: function () {
-          subcontext.callbacks.splice(subcontext.callbacks.indexOf(cb), 1)
-        }
-      }
-    }
-
-    subREGL.destroy = function () {
-      removeSubcontext(subcontext)
-    }
-
-    subREGL.container = element
-
-    return subREGL
-  }
-
-  createSubContext.destroy = function () {
-    regl.destroy()
-    intersectionObserver.disconnect()
-  }
-
-  createSubContext.regl = regl
-
-  var setViewport = regl({
-    context: {
-      tick: regl.prop('subcontext.tick')
-    },
-
-    viewport: regl.prop('viewbox'),
-
-    scissor: {
-      enable: true,
-      box: regl.prop('scissorbox')
-    }
-  })
-
-  function executeCallbacks (context, props) {
-    var callbacks = props.subcontext.callbacks
-    for (var i = 0; i < callbacks.length; ++i) {
-      callbacks[i](context)
-    }
-  }
-
-  var setRAF = false
-  function frame (context) {
-    regl.clear({
-      color: [0, 0, 0, 0]
-    })
-
-    var width = window.innerWidth
-    var height = window.innerHeight
-
-    var pixelRatio = context.pixelRatio
-    for (var i = 0; i < subcontexts.length; ++i) {
-      var sc = subcontexts[i]
-
-      if (!sc.intersectionObserverEntry?.isIntersecting) {
-        continue
-      }
-
-      var rect = sc.element.getBoundingClientRect()
-
-      viewBox.x = pixelRatio * (rect.left)
-      viewBox.y = pixelRatio * (height - rect.bottom)
-      viewBox.width = pixelRatio * (rect.right - rect.left)
-      viewBox.height = pixelRatio * (rect.bottom - rect.top)
-
-      setViewport({
-        subcontext: sc,
-        viewbox: viewBox,
-        scissorbox: viewBox
-      }, executeCallbacks)
-
-      sc.tick += 1
-    }
-  }
-
-  createSubContext.subcontexts = subcontexts
-
-  return createSubContext
-}

package/src/regl-element-define.ts

@@ -1,2 +0,0 @@
-import { define } from '@/src/regl-element'
-define()

package/src/regl-element.ts

@@ -1,31 +0,0 @@
-import createRegl from 'regl'
-import type {
-  InitializationOptions,
-  Regl,
-} from 'regl'
-import reglWcInitializationOptions from '@/src/regl-wc-initialization-options'
-
-export class ReglElement extends HTMLElement {
-  regl : Regl
-
-  get reglInitializationOptions () : InitializationOptions {
-    return {}
-  }
-
-  createRegl () : void {
-    const options = reglWcInitializationOptions(this)
-    this.regl = createRegl(options)
-  }
-  connectedCallback () : void {
-    this.createRegl()
-  }
-  disconnectedCallback () {
-    this?.regl?.destroy()
-  }
-}
-
-export const define = (tag='regl-element') => {
-  if (!customElements.get(tag)) {
-    customElements.define(tag, ReglElemnt)
-  }
-}

package/src/regl-multi-element-define.ts

@@ -1,2 +0,0 @@
-import { define } from '@/src/regl-multi-element'
-define()

package/src/regl-multi-element.ts

@@ -1,69 +0,0 @@
-import defregl from '@/src/deferred-regl'
-import { MULTI_ROOT_EVENTS } from "@/src/regl-multi-root"
-
-import type { DeferredRegl } from '@/src/deferred-regl'
-import type {
-  CreateSubContext,
-  SubREGL,
-} from '@/src/multi-regl'
-import type {
-  MreglReadyEvent,
-  ReglMultiRootElement,
-} from '@/src/regl-multi-root'
-
-export class ReglMultiElement extends HTMLElement {
-  regl : DeferredRegl
-
-  _mregl : null | CreateSubContext
-  _regl : null | SubREGL
-  _root : null | ReglMultiRootElement
-  _rootTag : string
-
-  constructor ({ rootTag='regl-multi-root' }={}) {
-    super()
-    this._mregl = null
-    this._root = null
-    this._rootTag = rootTag
-    this.regl = defregl()
-  }
-
-  _setMregl (mregl) {
-    this._mregl = mregl
-    this._regl = mregl(this)
-    this.regl.setRegl(this._regl)
-  }
-
-  connectedCallback () {
-    const rootId = this.getAttribute('root') || ''
-    this._root = document.getElementById(rootId) ||
-      document.querySelector(this._rootTag)
-
-    if (!this._root){
-      throw new Error('\`root\` attribute must be set to the ID of the regl-multi-root element.')
-    }
-
-    if (this._root?.mregl) {
-      // console.log('connected-set')
-      this._setMregl(this._root.mregl)
-    }
-    else {
-      this._root.addEventListener(MULTI_ROOT_EVENTS.MREGL_READY, (event : MreglReadyEveent) => {
-        // console.log('evented-set')
-        this._setMregl(event.detail.mregl)
-      })
-    }
-  }
-
-  disconnectedCallback() {
-    this._regl?.destroy()
-    this._regl = null
-    this.regl.setRegl(null)
-    this._root = null
-  }
-}
-
-export function define (tag='regl-multi-element') {
-  if (!customElements.get(tag)) {
-    customElements.define(tag, ReglMultiElement)
-  }
-}

package/src/regl-multi-root-define.ts

@@ -1,2 +0,0 @@
-import { define } from "@/src/regl-multi-root"
-define()

package/src/regl-multi-root.ts

@@ -1,80 +0,0 @@
-import createRegl from 'regl'
-import mregl from '@/src/multi-regl'
-import reglWcInitializationOptions from '@/src/regl-wc-initialization-options'
-
-import type {
-  InitializationOptions,
-  Regl,
-} from 'regl'
-import type {
-  CreateSubContext,
-  CreateSubContextInput,
-  SubREGL,
-} from '@/src/multi-regl'
-
-export const MULTI_ROOT_EVENTS = {
-  MREGL_READY: 'multi-regl-root:mregl-ready'
-}
-
-export type MreglReadyEvent = CustomEvent<{ mregl: CreateSubContext }>
-
-export interface ReglMultiRootElement extends HTMLElement {
-  mregl : null | CreateSubContext
-}
-
-export class ReglMultiRoot extends HTMLElement {
-  canvas : null | HTMLCanvasElement
-
-  _createRegl : (o : InitializationOptions) => Regl
-  _opts : InitializationOptions
-  mregl : null | CreateSubContext
-
-  get reglInitializationOptions () : InitializationOptions {
-    return {}
-  }
-
-  constructor (_createRegl=createRegl, opts={}) {
-    super()
-    this.mregl = null
-    this._createRegl = _createRegl
-    this._opts = opts
-  }
-
-  createMRegl () {
-    const options = {
-      ...this._opts,
-      ...reglWcInitializationOptions(this),
-    }
-    if (options?.canvas) {
-      this.canvas = options.canvas
-    }
-    else {
-      this.canvas = document.createElement('canvas')
-      this.appendChild(this.canvas)
-    }
-    this.mregl = mregl(this._createRegl, this.canvas, options)
-    this.dispatchEvent(new CustomEvent(MULTI_ROOT_EVENTS.MREGL_READY, {
-      detail: {
-        mregl: this.mregl,
-      },
-      bubbles: true,
-      composed: true,
-    }))
-  }
-
-  connectedCallback () {
-    this.createMRegl()
-  }
-
-  disconnectedCallback() {
-    this.mregl?.destroy()
-    this.mregl = null
-    this.canvas = null
-  }
-}
-
-export function define (tag='regl-multi-root') {
-  if (!customElements.get(tag)) {
-    customElements.define(tag, ReglMultiRoot)
-  }
-}