regl-web-components 0.0.1

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "regl-web-components",
+  "version": "0.0.1",
+  "author": {
+    "name": "rubén rodríguez",
+    "url": "https://rubenrodriguez.me"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.sr.ht/~rubonics/regl-web-components"
+  },
+  "exports": {
+    ".": "./dist/all.js",
+    "./define": "./dist/all-define.js",
+    "./regl-element": "./dist/regl-element.js",
+    "./regl-element/define": "./dist/regl-element-define.js",
+    "./regl-multi-element": "./dist/regl-multi-element.js",
+    "./regl-multi-element/define": "./dist/regl-multi-element-define.js",
+    "./regl-multi-root": "./dist/regl-multi-root.js",
+    "./regl-multi-root/define": "./dist/regl-multi-root-define.js"
+  },
+  "devDependencies": {
+    "@types/web": "^0.0.297",
+    "esbuild": "^0.27.1",
+    "esbuild-plugin-path-alias": "^1.0.7"
+  },
+  "dependencies": {
+    "regl": "^2.1.1"
+  },
+  "scripts": {
+    "dev": "node bundler/esbuild.watch.mjs",
+    "build": "node bundler/esbuild.build.mjs",
+    "start": "npm run dev"
+  }
+}

package/src/all-define.ts

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

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

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

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

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

package/src/regl-element.ts

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

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

package/src/regl-multi-element.ts

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

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

package/src/regl-multi-root.ts

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