aptechka 0.1.1 → 0.1.2

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)
-    }
-  }
-}

package/src/packages/controls/index.ts

@@ -1,5 +0,0 @@
-export { Controls, type ControlsValue } from './Controls'
-export { KeyboardControls } from './KeyboardControls'
-export { LinearControls, type LinearControlsOptions } from './LinearControls'
-export { WheelControls, type WheelControlsOptions } from './WheelControls'
-export { user } from './User'

package/src/packages/css-unit-parser/index.ts

@@ -1,32 +0,0 @@
-class CSSUnitParser {
-  #dummyElement: HTMLElement = null!
-
-  public parse(value: string) {
-    this.#createDummy()
-
-    this.#dummyElement.style.left = value
-    const computedWidth = getComputedStyle(this.#dummyElement).getPropertyValue('left')
-
-    return parseFloat(computedWidth)
-  }
-
-  #createDummy() {
-    if (!this.#dummyElement) {
-      this.#dummyElement = document.createElement('div')
-      this.#dummyElement.style.cssText = `
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 0;
-        height: 0;
-        visibility: hidden;
-      `
-    }
-
-    if (!document.body.contains(this.#dummyElement)) {
-      document.body.prepend(this.#dummyElement)
-    }
-  }
-}
-
-export const cssUnitParser = new CSSUnitParser()

package/src/packages/custom-element/index.ts

@@ -1,19 +0,0 @@
-import { isBrowser } from '$packages/utils'
-
-export function define(name: string) {
-  return function (Constructor: CustomElementConstructor) {
-    if (isBrowser && !customElements.get(name)) {
-      customElements.define(name, Constructor)
-    }
-  }
-}
-
-const HTMLElement = (
-  isBrowser
-    ? window.HTMLElement
-    : class {
-        attachShadow(..._: any): any {}
-      }
-) as typeof window.HTMLElement
-
-export class CustomElement extends HTMLElement {}

package/src/packages/device/Device.ts

@@ -1,113 +0,0 @@
-import { RESIZE_ORDER } from '$packages/order'
-import { resizer } from '$packages/resizer'
-import { isBrowser } from '$packages/utils'
-import { TierResult, getGPUTier } from 'detect-gpu'
-
-export type DeviceOS = 'macOS' | 'iOS' | 'Windows' | 'Android' | 'Linux' | 'unknown'
-
-class Device {
-  #OS = 'unknown'
-  #gpu = 'unknown'
-  #gpuTier = 0
-  #gpuDetection: Promise<TierResult> = null!
-  #isMobile = false
-  #isTouch = false
-  #isWebgl = false
-  #isWebp = false
-  #isApple = false
-
-  constructor() {
-    if (isBrowser) {
-      this.#gpuDetection = getGPUTier()
-
-      this.#gpuDetection.then((v) => {
-        this.#gpu = v.gpu || 'unknown'
-        this.#gpuTier = v.tier
-      })
-
-      resizer.subscribe(() => {
-        this.#isMobile = /Mobi|Android/i.test(navigator.userAgent)
-
-        this.#isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0
-
-        setTimeout(() => {
-          this.#isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0
-        }, 0)
-      }, RESIZE_ORDER.DEVICE)
-
-      {
-        const canvas = document.createElement('canvas')
-        const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
-        this.#isWebgl = (gl && gl instanceof WebGLRenderingContext) || false
-      }
-
-      {
-        const canvas = document.createElement('canvas')
-        if (canvas.getContext('2d')) {
-          this.#isWebp = canvas.toDataURL('image/webp').indexOf('data:image/webp') == 0
-        }
-      }
-
-      const userAgent = window.navigator.userAgent
-      const platform =
-        (window.navigator as any)?.userAgentData?.platform || window.navigator.platform
-      const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K', 'macOS']
-      const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
-      const iosPlatforms = ['iPhone', 'iPad', 'iPod']
-
-      if (macosPlatforms.includes(platform)) {
-        this.#OS = 'macOS'
-        this.#isApple = true
-      } else if (iosPlatforms.includes(platform)) {
-        this.#OS = 'iOS'
-        this.#isApple = true
-      } else if (windowsPlatforms.includes(platform)) {
-        this.#OS = 'Windows'
-      } else if (/Android/.test(userAgent)) {
-        this.#OS = 'Android'
-      } else if (/Linux/.test(platform)) {
-        this.#OS = 'Linux'
-      } else {
-        this.#OS = 'unknown'
-      }
-    }
-  }
-
-  public get OS() {
-    return this.#OS
-  }
-
-  public get gpu() {
-    return this.#gpu
-  }
-
-  public get gpuTier() {
-    return this.#gpuTier
-  }
-
-  public get gpuDetection() {
-    return this.#gpuDetection
-  }
-
-  public get isMobile() {
-    return this.#isMobile
-  }
-
-  public get isTouch() {
-    return this.#isTouch
-  }
-
-  public get isWebgl() {
-    return this.#isWebgl
-  }
-
-  public get isWebp() {
-    return this.#isWebp
-  }
-
-  public get isApple() {
-    return this.#isApple
-  }
-}
-
-export const device = new Device()