aptechka 0.1.0

package/src/packages/en3/test/En3Raycaster.ts

@@ -0,0 +1,187 @@
+import { Intersection, Object3D, Raycaster, Vector2 } from 'three'
+import { en3 } from '../core/en3'
+
+export type En3RaycasterEventType =
+  | 'en3-pointerdown'
+  | 'en3-pointerup'
+  | 'en3-pointermove'
+  | 'en3-pointerleave'
+  | 'en3-pointerenter'
+  | 'en3-pointermove'
+
+export type En3RaycasterEvent = {
+  type: En3RaycasterEventType
+  originalEvent: PointerEvent
+} & Intersection<Object3D>
+
+export interface En3RaycasterOptions {
+  targetName?: string
+  eventDispatcher?: Object3D
+  propagation?: boolean
+}
+
+interface En3RaycasterTargetParameters extends En3RaycasterOptions {
+  object3D: Object3D
+}
+
+export type En3RaycasterCallback = (event: En3RaycasterEvent) => void
+
+class En3RaycasterTarget {
+  #targetName: string | undefined
+  #eventDispatcher: Object3D
+  #propagation: boolean
+  #object3D: Object3D
+  #target: () => Object3D
+
+  public intersection: Intersection<Object3D> | undefined
+
+  constructor(parameters: En3RaycasterTargetParameters) {
+    this.#targetName = parameters.targetName || undefined
+    this.#eventDispatcher = parameters.eventDispatcher || parameters.object3D
+    this.#propagation = parameters.propagation || false
+    this.#object3D = parameters.object3D
+
+    this.#target = !this.#targetName
+      ? () => this.#object3D
+      : () => this.#object3D.getObjectByName(this.#targetName!) || this.#object3D
+  }
+
+  public get object3D() {
+    return this.#object3D
+  }
+
+  public get eventDispatcher() {
+    return this.#eventDispatcher
+  }
+
+  public get propagation() {
+    return this.#propagation
+  }
+
+  public get target() {
+    return this.#target()
+  }
+
+  public dispatch(type: En3RaycasterEventType, originalEvent: PointerEvent) {
+    this.eventDispatcher.dispatchEvent<any>({
+      originalEvent,
+      type,
+      ...this.intersection,
+    })
+  }
+}
+
+export class En3Raycaster {
+  static #instance: En3Raycaster | undefined
+
+  #targets: Array<En3RaycasterTarget> = []
+  #hits: Array<En3RaycasterTarget> = []
+
+  #pointer = new Vector2()
+  #raycaster = new Raycaster()
+
+  constructor() {
+    if (En3Raycaster.#instance) {
+      return En3Raycaster.#instance
+    }
+
+    En3Raycaster.#instance = this
+
+    en3.containerElement.addEventListener('pointerdown', this.#pointerdownListener)
+    en3.containerElement.addEventListener('pointerup', this.#pointerupListener)
+    en3.containerElement.addEventListener('pointermove', this.#pointermoveListener)
+  }
+
+  public destroy() {
+    en3.containerElement.removeEventListener('pointerdown', this.#pointerdownListener)
+    en3.containerElement.removeEventListener('pointerup', this.#pointerupListener)
+    en3.containerElement.removeEventListener('pointermove', this.#pointermoveListener)
+    En3Raycaster.#instance = undefined
+  }
+
+  public add(object3D: Object3D, options?: En3RaycasterOptions) {
+    if (this.#targets.find((t) => t.object3D.uuid === object3D.uuid)) {
+      return
+    }
+
+    const target = new En3RaycasterTarget({
+      object3D,
+      ...options,
+    })
+
+    this.#targets.push(target)
+  }
+
+  public remove(object3D: Object3D) {
+    this.#targets = this.#targets.filter((t) => t.object3D.uuid !== object3D.uuid)
+    this.#hits = this.#hits.filter((h) => h.object3D.uuid !== object3D.uuid)
+  }
+
+  #pointerdownListener = (event: PointerEvent) => {
+    for (let index = 0; index < this.#hits.length; index++) {
+      this.#hits[index].dispatch('en3-pointerdown', event)
+    }
+  }
+
+  #pointerupListener = (event: PointerEvent) => {
+    for (let index = 0; index < this.#hits.length; index++) {
+      this.#hits[index].dispatch('en3-pointerup', event)
+    }
+  }
+
+  #pointermoveListener = (event: PointerEvent) => {
+    this.#pointer.x = (event.clientX / en3.width) * 2 - 1
+    this.#pointer.y = -(event.clientY / en3.height) * 2 + 1
+
+    if (en3.camera) {
+      this.#raycaster.setFromCamera(this.#pointer, en3.camera)
+    }
+
+    const hits: Array<En3RaycasterTarget> = []
+
+    for (const target of this.#targets) {
+      const intersection = this.#raycaster.intersectObject(target.target)
+
+      if (intersection.length) {
+        target.intersection = intersection[0]
+        hits.push(target)
+      }
+    }
+
+    let isStopPropagation = false
+
+    const leaveHits = this.#hits.filter(
+      (s) => !hits.find((h) => h.object3D.uuid === s.object3D.uuid)
+    )
+
+    const finalHits = hits
+      .sort((a, b) => b.object3D.position.z - a.object3D.position.z)
+      .filter((h) => {
+        if (isStopPropagation) {
+          return false
+        }
+
+        isStopPropagation = !h.propagation
+
+        return true
+      })
+
+    const enterHits = finalHits.filter(
+      (s) => !this.#hits.find((h) => h.object3D.uuid === s.object3D.uuid)
+    )
+
+    for (let index = 0; index < leaveHits.length; index++) {
+      leaveHits[index].dispatch('en3-pointerleave', event)
+    }
+
+    for (let index = 0; index < enterHits.length; index++) {
+      enterHits[index].dispatch('en3-pointerenter', event)
+    }
+
+    this.#hits = finalHits
+
+    for (let index = 0; index < this.#hits.length; index++) {
+      this.#hits[index].dispatch('en3-pointermove', event)
+    }
+  }
+}

package/src/packages/en3/utils/coverTexture.ts

@@ -0,0 +1,29 @@
+import { Dot2D } from '$packages/utils'
+import { Texture } from 'three'
+
+/**
+ * texture.matrixAutoUpdate must be false
+ */
+export function coverTexture(texture: Texture, planeSize: Dot2D, aspect?: number) {
+  const width = planeSize.x
+  const height = planeSize.y
+  const _aspect = aspect || texture.image.width / texture.image.height
+
+  let sx = 0
+  let sy = 0
+  let tx = texture.offset.x
+  let ty = texture.offset.y
+  let r = texture.rotation
+  let cx = texture.center.x
+  let cy = texture.center.y
+
+  if (width / height > _aspect) {
+    sx = 1
+    sy = (height / width) * _aspect
+  } else {
+    sy = 1
+    sx = width / height / _aspect
+  }
+
+  texture.matrix.setUvTransform(tx, ty, sx, sy, r, cx, cy)
+}

package/src/packages/en3/utils/dispose.ts

@@ -0,0 +1,27 @@
+import { Material, Mesh, Object3D } from 'three'
+
+export function dispose(object3d: Object3D) {
+  const cleanMaterial = (material: Material) => {
+    material.dispose()
+
+    for (const key of Object.keys(material)) {
+      const value = material[key as keyof Material]
+
+      if (value && typeof value === 'object' && 'minFilter' in value) {
+        value.dispose()
+      }
+    }
+  }
+
+  object3d.traverse((object: Object3D) => {
+    if (!(object instanceof Mesh)) return
+
+    object.geometry.dispose()
+
+    if (!Array.isArray(object.material) && object.material.isMaterial) {
+      cleanMaterial(object.material)
+    } else if (Array.isArray(object.material)) {
+      for (const material of object.material) cleanMaterial(material)
+    }
+  })
+}

package/src/packages/en3/utils/traverseMaterials.ts

@@ -0,0 +1,10 @@
+import { Mesh, Material, Object3D } from 'three'
+
+export function traverseMaterials(object: Object3D, callback: (material: Material) => void) {
+  object.traverse((node: Object3D) => {
+    if (node instanceof Mesh && node.material) {
+      const materials = Array.isArray(node.material) ? node.material : [node.material]
+      materials.forEach(callback)
+    }
+  })
+}

package/src/packages/en3/utils/traverseMeshes.ts

@@ -0,0 +1,9 @@
+import { Mesh, Object3D } from 'three'
+
+export function traverseMeshes(object: Object3D, callback: (mesh: Mesh) => void) {
+  object.traverse((node: Object3D) => {
+    if (node instanceof Mesh) {
+      callback(node)
+    }
+  })
+}

package/src/packages/image/index.ts

@@ -0,0 +1,19 @@
+import { define } from '$packages/custom-element'
+import { SourceElement } from '$packages/source'
+
+@define('e-image')
+export class ImageElement extends SourceElement<HTMLImageElement> {
+  protected override createConsumer() {
+    return document.createElement('img')
+  }
+
+  protected override consumeSource(url: string | null) {
+    this.consumerElement.src = url || ''
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'e-image': ImageElement
+  }
+}

package/src/packages/intersector/index.ts

@@ -0,0 +1,83 @@
+import { isBrowser } from '$packages/utils'
+
+export type IntersectorCallback = (entry: IntersectionObserverEntry) => void
+
+interface IntersectorSubscriber {
+  element: Element
+  callback: IntersectorCallback
+  entry: IntersectionObserverEntry | null
+}
+
+export class Intersector {
+  #subscribers: Array<IntersectorSubscriber> = []
+  #intersectionObserver: IntersectionObserver = null!
+
+  constructor() {
+    if (isBrowser) {
+      this.#intersectionObserver = new IntersectionObserver(this.#intersectionListener)
+    }
+  }
+
+  public subscribe(elementOrSelector: HTMLElement | string, callback: IntersectorCallback) {
+    const element =
+      typeof elementOrSelector === 'string'
+        ? document.querySelector<HTMLElement>(elementOrSelector)
+        : elementOrSelector
+
+    if (!element) {
+      return
+    }
+
+    const alreadyObserved = this.#subscribers.find((sub) => sub.element === element)
+
+    if (!alreadyObserved) {
+      this.#intersectionObserver.observe(element)
+    } else {
+      const alreadyIntersected = this.#subscribers.find((s) => s.element === element && s.entry)
+
+      if (alreadyIntersected?.entry!.isIntersecting) {
+        callback(alreadyIntersected.entry)
+      }
+    }
+
+    this.#subscribers.push({
+      element,
+      callback,
+      entry: alreadyObserved?.entry || null,
+    })
+
+    return () => {
+      this.unsubscribe(callback)
+    }
+  }
+
+  public unsubscribe(callback: IntersectorCallback) {
+    const subscriber = this.#subscribers.find((sub) => sub.callback === callback)
+
+    if (subscriber) {
+      this.#subscribers = this.#subscribers.filter((sub) => sub.callback === callback)
+
+      if (!this.#subscribers.find((sub) => sub.element === subscriber.element)) {
+        this.#intersectionObserver.unobserve(subscriber.element)
+      }
+    }
+  }
+
+  #intersectionListener: IntersectionObserverCallback = (entries) => {
+    const matches = this.#subscribers.map((subscriber) => {
+      return {
+        subscriber,
+        entry: entries.find((entry) => entry.target === subscriber.element),
+      }
+    })
+
+    matches.forEach((match) => {
+      if (match.entry) {
+        match.subscriber.entry = match.entry
+        match.subscriber.callback(match.entry)
+      }
+    })
+  }
+}
+
+export const intersector = new Intersector()

package/src/packages/ladder/index.ts

@@ -0,0 +1,112 @@
+import { Store } from '$packages/store'
+
+export type LadderDefaultStepName = number | string
+
+export type LadderOperation = '+' | '*' | '/' | '-'
+
+export type LadderStep<T> = [LadderOperation, T]
+
+export type LadderSteps<K, T> = Map<K, LadderStep<T>>
+
+export type LadderDefaultValueType = { [key: string]: number }
+
+export class Ladder<
+  V extends LadderDefaultValueType = LadderDefaultValueType,
+  K extends LadderDefaultStepName = LadderDefaultStepName
+> extends Store<V> {
+  #base: V
+  #steps: LadderSteps<K, V>
+  #bindings: Set<V>
+
+  constructor(base: V) {
+    super(base, {
+      equalityCheck: () => false,
+    })
+
+    this.#base = { ...base }
+    this.#steps = new Map()
+    this.#bindings = new Set()
+  }
+
+  public get base() {
+    return this.#base
+  }
+
+  public get steps() {
+    return this.#steps
+  }
+
+  public override close() {
+    super.close()
+    this.#bindings.clear()
+    this.#steps.clear()
+  }
+
+  public bind(sub: V) {
+    this.#bindings.add(sub)
+  }
+
+  public unbind(sub: V) {
+    this.#bindings.delete(sub)
+  }
+
+  public deleteStep(stepName: K) {
+    this.steps.delete(stepName)
+  }
+
+  public getStepValue(stepName: K) {
+    return this.steps.get(stepName)![1]
+  }
+
+  public setStep(stepName: K, action: LadderOperation, value: Partial<V>) {
+    const readyValue = {} as V
+
+    for (const key in this.current) {
+      ;(readyValue[key] as any) = value[key] || 0
+    }
+
+    this.steps.set(stepName, [action, readyValue])
+  }
+
+  public calculate() {
+    const calculated = {} as V
+
+    for (const key in this.base) {
+      calculated[key] = this.base[key]
+    }
+
+    for (const item of this.steps) {
+      const step = item[1]
+
+      if (step[0] === '+') {
+        for (const key in this.base) {
+          const value = step[1][key] as number
+          ;(calculated[key] as any) += value
+        }
+      } else if (step[0] === '*') {
+        for (const key in this.base) {
+          const value = step[1][key] as number
+          ;(calculated[key] as any) *= value
+        }
+      } else if (step[0] === '/') {
+        for (const key in this.base) {
+          const value = step[1][key] as number
+          ;(calculated[key] as any) /= value
+        }
+      } else if (step[0] === '-') {
+        for (const key in this.base) {
+          const value = step[1][key] as number
+          ;(calculated[key] as any) -= value
+        }
+      }
+    }
+
+    for (const sub of this.#bindings) {
+      for (const key in calculated) {
+        sub[key] = calculated[key]
+      }
+    }
+
+    this.current = calculated
+  }
+}