aptechka 0.1.0 → 0.1.2

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

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

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

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

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

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

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

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

package/src/packages/layout-box/index.ts

@@ -1,417 +0,0 @@
-import { cssUnitParser } from '$packages/css-unit-parser'
-import { Ladder } from '$packages/ladder'
-import { TICK_ORDER } from '$packages/order'
-import { resizer } from '$packages/resizer'
-import { scrollEnties } from '$packages/scroll-entries'
-import { StoreCallback, StoreEntry } from '$packages/store'
-import { ticker } from '$packages/ticker'
-import {
-  ElementOrSelector,
-  Axes3D,
-  Axes2D,
-  isBrowser,
-  getCumulativeOffsetLeft,
-  getCumulativeOffsetTop,
-} from '$packages/utils'
-
-export function decomposeCSSMatrix(matrix: WebKitCSSMatrix) {
-  const scaleX = Math.sqrt(
-    matrix.m11 * matrix.m11 + matrix.m12 * matrix.m12 + matrix.m13 * matrix.m13
-  )
-  const scaleY = Math.sqrt(
-    matrix.m21 * matrix.m21 + matrix.m22 * matrix.m22 + matrix.m23 * matrix.m23
-  )
-  const scaleZ = Math.sqrt(
-    matrix.m31 * matrix.m31 + matrix.m32 * matrix.m32 + matrix.m33 * matrix.m33
-  )
-
-  const rotationX = Math.atan2(matrix.m32, matrix.m33)
-  const rotationY = Math.atan2(
-    -matrix.m31,
-    Math.sqrt(matrix.m32 * matrix.m32 + matrix.m33 * matrix.m33)
-  )
-  const rotationZ = Math.atan2(matrix.m21, matrix.m11)
-
-  const translationX = matrix.m41
-  const translationY = matrix.m42
-  const translationZ = matrix.m43
-
-  return {
-    scaleX,
-    scaleY,
-    scaleZ,
-    rotationX,
-    rotationY,
-    rotationZ,
-    translationX,
-    translationY,
-    translationZ,
-  }
-}
-
-export interface LayoutBoxOptions {
-  containerElement?: ElementOrSelector
-  cartesian?: boolean
-  scrollAxis?: Axes3D | 'auto'
-  frontSide?: LayoutBoxFrontSide
-  sizeStep?: boolean
-  positionStep?: boolean
-  culling?: boolean
-}
-
-export interface LayoutBoxScrollStepCallbackReturn {
-  axis: Axes2D
-  value: number
-}
-
-export type LayoutBoxXYZ = { x: number; y: number; z: number }
-
-export type LayoutBoxScrollStepCallback = () => LayoutBoxScrollStepCallbackReturn
-export type LayoutBoxStepCallback = StoreCallback<StoreEntry<LayoutBoxXYZ>>
-
-export type LayoutBoxFrontSide = 'left' | 'top'
-
-export interface LayoutBoxBindedObject {
-  position?: LayoutBoxXYZ
-  scale?: LayoutBoxXYZ
-  rotation?: LayoutBoxXYZ
-}
-
-export class LayoutBox {
-  #element: HTMLElement = null!
-  #containerElement: HTMLElement = null!
-  #scrollStepSetterCallbacks: Array<LayoutBoxScrollStepCallback> = []
-
-  #scrollAxis: Axes3D | 'auto' = 'auto'
-  #frontSide: LayoutBoxFrontSide = 'top'
-
-  #isCartesian = false
-  #isSizeStep = true
-  #isPositionStep = true
-
-  #width = 0
-  #height = 0
-  #depth = 0
-
-  #top = 0
-  #left = 0
-  #front = 0
-
-  #x = 0
-  #y = 0
-  #z = 0
-
-  #CSSTranslation = { x: 0, y: 0, z: 0 }
-  #CSSRotation = { x: 0, y: 0, z: 0 }
-  #CSSScale = { x: 1, y: 1, z: 1 }
-
-  #rotation = new Ladder({ x: 0, y: 0, z: 0 })
-  #position = new Ladder({ x: 0, y: 0, z: 0 })
-  #scale = new Ladder({ x: 0, y: 0, z: 0 })
-
-  constructor(element: ElementOrSelector, options?: LayoutBoxOptions) {
-    if (isBrowser) {
-      this.#element = this.#getElement(element) || document.body
-      this.#containerElement = this.#getElement(options?.containerElement) || document.body
-
-      this.#scrollAxis = options?.scrollAxis || 'auto'
-      this.#frontSide = options?.frontSide || 'top'
-
-      this.#isCartesian = options?.cartesian || false
-      this.#isSizeStep = options?.sizeStep !== undefined ? options.sizeStep : true
-      this.#isPositionStep = options?.positionStep !== undefined ? options.positionStep : true
-
-      this.#scale.setStep('_size', '+', {
-        x: 1,
-        y: 1,
-        z: 1,
-      })
-
-      this.#position.setStep('_position', '+', {
-        x: 0,
-        y: 0,
-        z: 0,
-      })
-
-      this.#scale.setStep('_scale', '*', {
-        x: 1,
-        y: 1,
-        z: 1,
-      })
-
-      this.#position.setStep('_translation', '+', {
-        x: 0,
-        y: 0,
-        z: 0,
-      })
-
-      this.#rotation.setStep('_rotation', '+', {
-        x: 0,
-        y: 0,
-        z: 0,
-      })
-
-      addEventListener('DOMContentLoaded', () => {
-        const scrollEntries = scrollEnties.getAll(this.element)
-
-        scrollEntries.forEach((entry) => {
-          this.setScrollStep(() => {
-            return entry
-          })
-        })
-      })
-
-      ticker.subscribe(this.#tickListener, {
-        order: TICK_ORDER.LAYOUT_BOX,
-        culling: options?.culling ? this.element : undefined,
-      })
-
-      resizer.subscribe(this.#resizeListener, TICK_ORDER.LAYOUT_BOX)
-    }
-  }
-
-  public get element() {
-    return this.#element
-  }
-
-  public get containerElement() {
-    return this.#containerElement
-  }
-
-  public get position() {
-    return this.#position.current
-  }
-
-  public get rotation() {
-    return this.#rotation.current
-  }
-
-  public get scale() {
-    return this.#scale.current
-  }
-
-  public get left() {
-    return this.#left
-  }
-
-  public get top() {
-    return this.#top
-  }
-
-  public get front() {
-    return this.#front
-  }
-
-  public get width() {
-    return this.#width
-  }
-
-  public get height() {
-    return this.#height
-  }
-
-  public get depth() {
-    return this.#depth
-  }
-
-  public bindObject(object: LayoutBoxBindedObject) {
-    object.position && this.#position.bind(object.position)
-    object.rotation && this.#rotation.bind(object.rotation)
-    object.scale && this.#scale.bind(object.scale)
-  }
-
-  public unbindObject(object: LayoutBoxBindedObject) {
-    object.position && this.#position.unbind(object.position)
-    object.rotation && this.#rotation.unbind(object.rotation)
-    object.scale && this.#scale.unbind(object.scale)
-  }
-
-  public setScrollStep(callback: LayoutBoxScrollStepCallback) {
-    if (!this.#scrollStepSetterCallbacks.includes(callback)) {
-      this.#scrollStepSetterCallbacks.push(callback)
-    }
-
-    return () => this.deleteScrollStep(callback)
-  }
-
-  public deleteScrollStep(callback: LayoutBoxScrollStepCallback) {
-    this.#scrollStepSetterCallbacks = this.#scrollStepSetterCallbacks.filter((s) => s !== callback)
-  }
-
-  public destroy() {
-    ticker.unsubscribe(this.#tickListener)
-    resizer.unsubscribe(this.#resizeListener)
-
-    this.#position.close()
-    this.#rotation.close()
-    this.#scale.close()
-  }
-
-  public setPositionStep(...args: Parameters<Ladder['setStep']>) {
-    this.#position.setStep(...args)
-  }
-
-  public setRotationStep(...args: Parameters<Ladder['setStep']>) {
-    this.#rotation.setStep(...args)
-  }
-
-  public setScaleStep(...args: Parameters<Ladder['setStep']>) {
-    this.#scale.setStep(...args)
-  }
-
-  public deletePositionStep(...args: Parameters<Ladder['deleteStep']>) {
-    this.#position.deleteStep(...args)
-  }
-
-  public deleteRotationStep(...args: Parameters<Ladder['deleteStep']>) {
-    this.#rotation.deleteStep(...args)
-  }
-
-  public deleteScaleStep(...args: Parameters<Ladder['deleteStep']>) {
-    this.#scale.deleteStep(...args)
-  }
-
-  #recalculate() {
-    this.#scale.calculate()
-    this.#position.calculate()
-    this.#rotation.calculate()
-  }
-
-  #composeSteps() {
-    this.#scale.setStep('_size', '+', {
-      x: this.#isSizeStep ? this.#width : 1,
-      y: this.#isSizeStep ? this.#height : 1,
-      z: this.#isSizeStep ? this.#depth : 1,
-    })
-
-    const xPosition = this.#isPositionStep ? this.#x : 0
-    const yPosition = this.#isPositionStep ? this.#y : 0
-    const zPosition = this.#isPositionStep ? this.#z : 0
-
-    this.#position.setStep('_position', '+', {
-      x: xPosition,
-      y: yPosition,
-      z: zPosition,
-    })
-
-    this.#scale.setStep('_scale', '*', {
-      x: this.#CSSScale.x,
-      y: this.#CSSScale.y,
-      z: this.#CSSScale.z,
-    })
-
-    this.#position.setStep('_translation', '+', {
-      x: this.#CSSTranslation.x,
-      y: this.#CSSTranslation.y,
-      z: this.#CSSTranslation.z,
-    })
-
-    this.#rotation.setStep('_rotation', '+', {
-      x: this.#CSSRotation.x,
-      y: this.#CSSRotation.y,
-      z: this.#CSSRotation.z,
-    })
-  }
-
-  #updateDimensions() {
-    const computed = getComputedStyle(this.#element)
-
-    this.#width = Math.max(this.#element.clientWidth, 1)
-
-    this.#height = Math.max(this.#element.clientHeight, 1)
-
-    this.#depth = Math.max(cssUnitParser.parse(computed.getPropertyValue('--depth') || '0px'), 1)
-
-    const vl = getCumulativeOffsetLeft(this.#containerElement)
-    const vt = getCumulativeOffsetTop(this.#containerElement)
-    const vw = this.#containerElement.clientWidth
-    const vh = this.#containerElement.clientHeight
-
-    this.#left = getCumulativeOffsetLeft(this.#element) - vl
-    this.#top = getCumulativeOffsetTop(this.#element) - vt
-
-    if (this.#scrollAxis === 'z') {
-      const nl = this.#left / vw
-      const nt = this.#top / vh
-
-      this.#left = (nl - Math.floor(nl)) * vw
-      this.#top = (nt - Math.floor(nt)) * vh
-
-      if (this.#frontSide === 'left') {
-        this.#front = getCumulativeOffsetLeft(this.#element) - vl - this.#left
-      } else {
-        this.#front = getCumulativeOffsetTop(this.#element) - vt - this.#top
-      }
-    }
-
-    this.#left += this.#element.clientLeft
-    this.#top += this.#element.clientTop
-
-    if (this.#isCartesian) {
-      const viewHalfWidth = Math.round(vw / 2)
-      const viewHalfHeight = Math.round(vh / 2)
-
-      const thisHalfWidth = this.#width ? Math.round(this.#width / 2) : 0
-      const thisHalfHeight = this.#height ? Math.round(this.#height / 2) : 0
-
-      const positionX = this.#left - viewHalfWidth + thisHalfWidth
-      const positionY = (this.#top - viewHalfHeight + thisHalfHeight) * -1
-      this.#x = positionX
-      this.#y = positionY
-    } else {
-      this.#x = this.#left
-      this.#y = this.#top
-    }
-
-    this.#z = this.#front * -1
-
-    const cssMatrix = new WebKitCSSMatrix(computed.transform)
-    const decomposedMatrix = decomposeCSSMatrix(cssMatrix)
-
-    this.#CSSTranslation.x = decomposedMatrix.translationX
-    this.#CSSTranslation.y = decomposedMatrix.translationY
-    this.#CSSTranslation.z = decomposedMatrix.translationZ
-
-    this.#CSSScale.x = decomposedMatrix.scaleX
-    this.#CSSScale.y = decomposedMatrix.scaleY
-    this.#CSSScale.z = decomposedMatrix.scaleZ
-
-    this.#CSSRotation.x = decomposedMatrix.rotationX
-    this.#CSSRotation.y = decomposedMatrix.rotationY
-    this.#CSSRotation.z = decomposedMatrix.rotationZ
-
-    this.#composeSteps()
-    this.#recalculate()
-  }
-
-  #updateScrollPosition() {
-    for (let index = 0; index < this.#scrollStepSetterCallbacks.length; index++) {
-      const callbackReturn = this.#scrollStepSetterCallbacks[index]()
-
-      let axis = callbackReturn.axis as Axes3D
-
-      if (this.#scrollAxis !== 'auto') {
-        axis = this.#scrollAxis
-      }
-
-      this.#position.setStep(`_scroll_${index}`, '+', {
-        [axis]: callbackReturn.value * (axis === 'x' ? -1 : this.#isCartesian ? 1 : -1),
-      })
-    }
-  }
-
-  #getElement(element: string | HTMLElement | undefined) {
-    return typeof element === 'string' ? document.querySelector<HTMLElement>(element) : element
-  }
-
-  #resizeListener = () => {
-    if (isBrowser) {
-      this.#updateDimensions()
-    }
-  }
-
-  #tickListener = () => {
-    this.#updateScrollPosition()
-    this.#recalculate()
-  }
-}