aptechka 0.1.0 → 0.1.2

package/src/packages/animation/Animated.ts

@@ -1,189 +0,0 @@
-import { StoreOptions, StoreEntry, Store, StoreCallback } from '$packages/store'
-import { ticker, TickerCallbackEntry, TickerCallback, TickerAddOptions } from '$packages/ticker'
-import { ElementOrSelector, clamp, fix } from '$packages/utils'
-
-export interface AnimatedOptions extends StoreOptions<number>, TickerAddOptions {
-  min?: number | AnimatedEdgeFunction
-  max?: number | AnimatedEdgeFunction
-}
-
-export type AnimatedEdgeFunction = () => number
-
-export interface AnimatedEntry extends StoreEntry<number> {
-  min: number
-  max: number
-  delta: number
-  progress: number
-  direction: number
-  speed: number
-}
-
-export abstract class Animated<Entry extends AnimatedEntry = AnimatedEntry> extends Store<
-  number,
-  Entry
-> {
-  #maxFPS: number | undefined
-  #order: number | undefined
-  #culling: ElementOrSelector | undefined
-  #target: number
-  #min: AnimatedEdgeFunction
-  #max: AnimatedEdgeFunction
-  #setter: Animated | undefined
-  #isRunning = new Store(false)
-  #direction = 0
-  #speed = 0
-
-  constructor(options?: AnimatedOptions) {
-    super(0, options)
-
-    this.#order = options?.order
-    this.#maxFPS = options?.maxFPS
-    this.#culling = options?.culling
-    this.#min = this.#getEdgeFunction(options?.min)
-    this.#max = this.#getEdgeFunction(options?.max)
-    this.#target = this.current = 0
-  }
-
-  public get target() {
-    return this.#target
-  }
-
-  public get isRunning() {
-    return this.#isRunning
-  }
-
-  public get direction() {
-    return this.#direction
-  }
-
-  public get maxFPS() {
-    return this.#maxFPS
-  }
-
-  public get speed() {
-    return this.#speed
-  }
-
-  public get min(): number {
-    return this.#min()
-  }
-
-  public set min(value: number | AnimatedEdgeFunction | undefined) {
-    this.#min = this.#getEdgeFunction(value)
-    this.set(this.#target)
-    this.current = this.#target
-  }
-
-  public get max(): number {
-    return this.#max()
-  }
-
-  public set max(value: number | AnimatedEdgeFunction | undefined) {
-    this.#max = this.#getEdgeFunction(value)
-    this.set(this.#target)
-    this.current = this.#target
-  }
-
-  public get delta() {
-    return this.max - this.min
-  }
-
-  public get progress() {
-    return this.delta ? fix((this.current - this.min) / this.delta, 6) : 0
-  }
-
-  public get setter() {
-    return this.#setter
-  }
-
-  public override get entry(): Entry {
-    return {
-      ...super.entry,
-      min: this.min,
-      max: this.max,
-      delta: this.delta,
-      direction: this.direction,
-      progress: this.progress,
-      speed: this.speed,
-    }
-  }
-
-  public set setter(animated: Animated | undefined) {
-    this.#setter?.unsubscribe(this.#setterListener)
-    this.#setter = animated
-    this.#setter?.subscribe(this.#setterListener)
-  }
-
-  public set(value: number, equalize = false) {
-    const previous = this.#target
-
-    this.#target = clamp(value, this.min, this.max)
-
-    if (equalize) {
-      this.current = this.#target
-    }
-
-    if (this.#target !== previous) {
-      this.#speed = 0
-      this.#direction = Math.sign(value - this.#target) || 1
-      this.update()
-    }
-  }
-
-  public shift(value: number, equalize = false) {
-    this.set(this.#target + value, equalize)
-  }
-
-  public override close() {
-    super.close()
-
-    this.unlistenAnimationFrame()
-
-    this.#setter?.unsubscribe(this.#setterListener)
-    this.#setter = undefined
-  }
-
-  public override reset() {
-    this.set(this.initial, true)
-    super.reset()
-    this.unlistenAnimationFrame()
-  }
-
-  public listenAnimationFrame() {
-    this.#isRunning.current = true
-    ticker.subscribe(this.#animationFrameListener, {
-      maxFPS: this.#maxFPS,
-      order: this.#order,
-      culling: this.#culling,
-    })
-  }
-
-  public unlistenAnimationFrame() {
-    this.#speed = 0
-    this.#isRunning.current = false
-    ticker.unsubscribe(this.#animationFrameListener)
-  }
-
-  protected abstract update(): void
-
-  protected abstract handleAnimationFrame(e: TickerCallbackEntry): void
-
-  #setterListener: StoreCallback<AnimatedEntry> = (e) => {
-    this.set(e.current)
-  }
-
-  #animationFrameListener: TickerCallback = (e) => {
-    const current = this.current
-
-    this.handleAnimationFrame(e)
-
-    const delta = Math.abs(current - this.target)
-
-    this.#speed = delta / e.elapsed
-  }
-
-  #getEdgeFunction(value: number | AnimatedEdgeFunction | undefined) {
-    const v = value || 0
-    return typeof v === 'function' ? v : () => v
-  }
-}

package/src/packages/animation/Damped.ts

@@ -1,39 +0,0 @@
-import { TickerCallbackEntry } from '$packages/ticker'
-import { damp, fix } from '$packages/utils'
-import { AnimatedOptions, Animated } from './Animated'
-
-export interface DampedOptions extends AnimatedOptions {
-  damping?: number
-}
-
-export class Damped extends Animated {
-  public damping: number
-
-  constructor(options?: DampedOptions) {
-    super({
-      ...options,
-      min: options?.min ?? -Infinity,
-      max: options?.max ?? Infinity,
-    })
-
-    this.damping = options?.damping || 0
-  }
-
-  protected update() {
-    if (this.damping) {
-      this.listenAnimationFrame()
-    } else {
-      this.current = this.target
-      this.unlistenAnimationFrame()
-    }
-  }
-
-  protected handleAnimationFrame(e: TickerCallbackEntry) {
-    if (fix(this.current, 4) === fix(this.target, 4)) {
-      this.unlistenAnimationFrame()
-      this.current = this.target
-    }
-
-    this.current = damp(this.current, this.target, this.damping, e.elapsed)
-  }
-}

package/src/packages/animation/Tweened.ts

@@ -1,51 +0,0 @@
-import { TickerCallbackEntry } from '$packages/ticker'
-import { EasingFunction, linear } from '$packages/utils'
-import { AnimatedOptions, Animated } from './Animated'
-
-export interface TweenedOptions extends AnimatedOptions {
-  easing?: EasingFunction
-}
-
-export class Tweened extends Animated {
-  public easing: EasingFunction
-
-  constructor(options?: TweenedOptions) {
-    super({
-      ...options,
-      min: options?.min || 0,
-      max: options?.max || 1000,
-    })
-
-    this.easing = options?.easing || linear
-  }
-
-  public start() {
-    this.listenAnimationFrame()
-  }
-
-  public pause() {
-    this.unlistenAnimationFrame()
-  }
-
-  public stop() {
-    this.reset()
-  }
-
-  public override get max() {
-    return super.max
-  }
-
-  protected update() {
-    const normalized = (this.target - this.min) / (this.delta || 1)
-    const eased = this.easing(normalized)
-    this.current = this.min + eased * this.delta
-  }
-
-  protected handleAnimationFrame(e: TickerCallbackEntry) {
-    this.shift(e.elapsed)
-
-    if ((e.elapsed && this.current === 0) || this.current === this.delta) {
-      this.unlistenAnimationFrame()
-    }
-  }
-}

package/src/packages/animation/index.ts

@@ -1,10 +0,0 @@
-export {
-  Animated,
-  type AnimatedOptions,
-  type AnimatedEdgeFunction,
-  type AnimatedEntry,
-} from './Animated'
-
-export { Tweened, type TweenedOptions } from './Tweened'
-
-export { Damped, type DampedOptions } from './Damped'

package/src/packages/attribute/index.ts

@@ -1,59 +0,0 @@
-import { Store, StoreOptions } from '$packages/store'
-import { ElementOrSelector, isBrowser, getElement, parseAttributeValue } from '$packages/utils'
-
-export class Attribute<T extends string | number | boolean> extends Store<T> {
-  #element: HTMLElement | null = null
-  #name: string
-  #mutationObserver: MutationObserver = null!
-
-  constructor(
-    elementOrSelector: ElementOrSelector,
-    name: string,
-    defaultValue: T,
-    options?: StoreOptions<T>
-  ) {
-    super(defaultValue, options)
-
-    this.#name = name
-
-    this.subscribe((e) => {
-      this.#element?.setAttribute(this.#name, e.current.toString())
-    })
-
-    if (isBrowser) {
-      this.#element = getElement(elementOrSelector)!
-
-      this.#mutationObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === 'attributes' && mutation.attributeName === this.#name) {
-            this.#tryUpdate()
-          }
-        })
-      })
-    }
-  }
-
-  public unobserve() {
-    if (isBrowser) {
-      this.#mutationObserver.disconnect()
-    }
-  }
-
-  public observe() {
-    if (isBrowser && this.#element) {
-      this.#mutationObserver.observe(this.#element, {
-        attributes: true,
-      })
-
-      this.#tryUpdate()
-    }
-  }
-
-  #tryUpdate() {
-    const value = this.#element!.getAttribute(this.#name)
-
-    if (value != undefined) {
-      this.current = parseAttributeValue(value) as T
-    }
-  }
-}

package/src/packages/canvas-2d/index.ts

@@ -1,137 +0,0 @@
-import { define, CustomElement } from '$packages/custom-element'
-import { Notifier } from '$packages/notifier'
-import { resizer } from '$packages/resizer'
-import { ticker, TickerCallback } from '$packages/ticker'
-import { clamp } from '$packages/utils'
-
-export interface Canvas2DRenderDetail {
-  pixelRatio: number
-  width: number
-  height: number
-  element: HTMLElement
-  canvasElement: HTMLElement
-  context: CanvasRenderingContext2D
-  timestamp: number
-  elapsed: number
-}
-
-export type Canvas2DRenderCallback = (detail: Canvas2DRenderDetail) => void
-
-@define('canvas-2d')
-export class Canvas2DElement extends CustomElement {
-  #renderEvent = new Notifier<Canvas2DRenderCallback>()
-
-  #canvasElement: HTMLCanvasElement = null!
-  #context: CanvasRenderingContext2D = null!
-
-  #width = 0
-  #height = 0
-  #pixelRatio = 1
-
-  #timestamp = 0
-  #elapsed = 1
-
-  public get renderEvent() {
-    return this.#renderEvent
-  }
-
-  public get canvasElement() {
-    return this.#canvasElement
-  }
-
-  public get context() {
-    return this.#context
-  }
-
-  public get pixelRatio() {
-    return this.#pixelRatio
-  }
-
-  public get width() {
-    return this.#width
-  }
-
-  public get height() {
-    return this.#height
-  }
-
-  public get detail(): Canvas2DRenderDetail {
-    return {
-      width: this.#width,
-      height: this.#height,
-      element: this,
-      canvasElement: this.#canvasElement,
-      pixelRatio: this.#pixelRatio,
-      context: this.#context,
-      timestamp: this.#timestamp,
-      elapsed: this.#elapsed,
-    }
-  }
-
-  protected connectedCallback() {
-    this.style.display = 'block'
-    this.style.width = '100%'
-    this.style.height = '100%'
-
-    this.#canvasElement = document.createElement('canvas')
-
-    this.#canvasElement.style.cssText = `
-      display: block;
-      width: 100%;
-      height: 100%;
-    `
-
-    this.#context = this.#canvasElement.getContext('2d')!
-
-    this.appendChild(this.#canvasElement)
-
-    resizer.subscribe(this.#resizeListener)
-
-    if (!this.hasAttribute('static')) {
-      ticker.subscribe(this.#tickListener, {
-        culling: this,
-        maxFPS: this.hasAttribute('fps') ? parseInt(this.getAttribute('fps')!) : undefined,
-      })
-    }
-  }
-
-  protected disconnectedCallback() {
-    resizer.unsubscribe(this.#resizeListener)
-    ticker.unsubscribe(this.#tickListener)
-
-    this.#renderEvent.close()
-    this.#canvasElement.remove()
-    this.style.display = ''
-    this.style.width = ''
-    this.style.height = ''
-  }
-
-  #resizeListener = () => {
-    this.#pixelRatio = clamp(devicePixelRatio, 1, 2)
-
-    const rect = this.getBoundingClientRect()
-
-    this.#width = rect.width
-    this.#height = rect.height
-
-    this.#canvasElement.width = this.#width * this.pixelRatio
-    this.#canvasElement.height = this.#height * this.pixelRatio
-
-    this.context.scale(this.pixelRatio, this.pixelRatio)
-
-    this.renderEvent.notify(this.detail)
-  }
-
-  #tickListener: TickerCallback = (e) => {
-    this.#timestamp = e.timestamp
-    this.#elapsed = e.elapsed
-
-    this.#renderEvent.notify(this.detail)
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'canvas-2d': Canvas2DElement
-  }
-}

package/src/packages/controls/Controls.ts

@@ -1,15 +0,0 @@
-import { Notifier } from '$packages/notifier'
-
-export type ControlsValue = number | 'max' | 'min'
-export type ControlsCallback = (value: ControlsValue) => void
-
-export abstract class Controls {
-  #changeEvent = new Notifier<ControlsCallback>()
-
-  public get changeEvent() {
-    return this.#changeEvent
-  }
-
-  public abstract connect(): void
-  public abstract disconnect(): void
-}

package/src/packages/controls/KeyboardControls.ts

@@ -1,63 +0,0 @@
-import { isBrowser, getElement } from '$packages/utils'
-import { Controls } from './Controls'
-import { user } from './User'
-
-export interface KeyboardControlsOptions {
-  element?: HTMLElement
-}
-
-export class KeyboardControls extends Controls {
-  #element: HTMLElement | Window = null!
-
-  constructor(options?: KeyboardControlsOptions) {
-    super()
-
-    if (isBrowser) {
-      this.#element = options?.element ? getElement(options.element) || window : window
-    }
-  }
-
-  public connect() {
-    if (isBrowser) {
-      this.#element.addEventListener('keydown', this.#keydownListener as EventListener)
-    }
-  }
-
-  public disconnect() {
-    if (isBrowser) {
-      this.#element.removeEventListener('keydown', this.#keydownListener as EventListener)
-    }
-  }
-
-  #keydownListener = (e: KeyboardEvent) => {
-    const dir = e.shiftKey ? -1 : 1
-
-    let interaction = true
-
-    if (e.code === 'Space') {
-      this.changeEvent.notify(dir * 500)
-    } else if (e.code === 'ArrowLeft') {
-      this.changeEvent.notify(-1 * 100)
-    } else if (e.code === 'ArrowRight') {
-      this.changeEvent.notify(1 * 100)
-    } else if (e.code === 'ArrowUp') {
-      this.changeEvent.notify(-1 * 100)
-    } else if (e.code === 'ArrowDown') {
-      this.changeEvent.notify(1 * 100)
-    } else if (e.code === 'PageUp') {
-      this.changeEvent.notify(-1 * 1000)
-    } else if (e.code === 'PageDown') {
-      this.changeEvent.notify(1 * 1000)
-    } else if (e.code === 'Home') {
-      this.changeEvent.notify('min')
-    } else if (e.code === 'End') {
-      this.changeEvent.notify('max')
-    } else {
-      interaction = false
-    }
-
-    if (interaction) {
-      user.registerInteraction()
-    }
-  }
-}

package/src/packages/controls/LinearControls.ts

@@ -1,27 +0,0 @@
-import { ticker, TickerCallback } from '$packages/ticker'
-import { Controls } from './Controls'
-
-export interface LinearControlsOptions {
-  speed?: number
-}
-
-export class LinearControls extends Controls {
-  speed: number
-
-  constructor(options?: LinearControlsOptions) {
-    super()
-    this.speed = options?.speed || 1
-  }
-
-  public connect() {
-    ticker.subscribe(this.#animationFrameCallback)
-  }
-
-  public disconnect() {
-    ticker.unsubscribe(this.#animationFrameCallback)
-  }
-
-  #animationFrameCallback: TickerCallback = (e) => {
-    this.changeEvent.notify(e.elapsed * this.speed)
-  }
-}

package/src/packages/controls/User.ts

@@ -1,20 +0,0 @@
-class User {
-  #idleTimeoutId: ReturnType<typeof setTimeout> | undefined
-  #isIdle = true
-
-  public get isIdle() {
-    return this.#isIdle
-  }
-
-  public registerInteraction() {
-    clearTimeout(this.#idleTimeoutId)
-
-    this.#isIdle = false
-
-    this.#idleTimeoutId = setTimeout(() => {
-      this.#isIdle = true
-    }, 2000)
-  }
-}
-
-export const user = new User()

package/src/packages/controls/WheelControls.ts

@@ -1,92 +0,0 @@
-import { Axes2D, isBrowser, getElement } from '$packages/utils'
-import { Controls } from './Controls'
-import { user } from './User'
-
-export interface WheelControlsOptions {
-  axis?: Axes2D
-  speed?: number
-  debounce?: boolean
-  element?: HTMLElement
-}
-
-export class WheelControls extends Controls {
-  axis: Axes2D
-  speed: number
-  debounce: boolean
-
-  #element: HTMLElement | Window = null!
-
-  #timeout: ReturnType<typeof setTimeout> | undefined
-  #prevEventDate: number
-
-  constructor(options?: WheelControlsOptions) {
-    super()
-
-    this.axis = options?.axis || 'y'
-    this.speed = options?.speed || 1
-    this.debounce = options?.debounce || false
-
-    this.#prevEventDate = Date.now()
-
-    if (isBrowser) {
-      this.#element = options?.element ? getElement(options.element) || window : window
-    }
-  }
-
-  public connect() {
-    if (isBrowser) {
-      this.#element.addEventListener('wheel', this.#wheelListener as EventListener, {
-        passive: false,
-      })
-    }
-  }
-
-  public disconnect() {
-    if (isBrowser) {
-      this.#element.removeEventListener('wheel', this.#wheelListener as EventListener)
-    }
-  }
-
-  #wheelListener = (event: WheelEvent) => {
-    let delta = 0
-
-    if (
-      (this.axis === 'x' && Math.abs(event.deltaY) > Math.abs(event.deltaX)) ||
-      (this.axis === 'y' && Math.abs(event.deltaX) > Math.abs(event.deltaY))
-    ) {
-      return
-    }
-
-    delta = (this.axis === 'x' ? event.deltaX : event.deltaY) * this.speed
-
-    user.registerInteraction()
-    event.stopPropagation()
-    event.preventDefault()
-
-    if (this.debounce) {
-      const now = Date.now()
-
-      if (now - this.#prevEventDate > 40) {
-        delta = 100 * Math.sign(delta)
-      }
-
-      this.#prevEventDate = now
-
-      if (Math.abs(delta) < 100) {
-        return
-      }
-
-      if (this.#timeout) {
-        return
-      }
-
-      this.changeEvent.notify(delta)
-
-      this.#timeout = setTimeout(() => {
-        this.#timeout = undefined
-      }, 80)
-    } else {
-      this.changeEvent.notify(delta)
-    }
-  }
-}