aptechka 0.1.0

package/src/packages/attribute/index.ts

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

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

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

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

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

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

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

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

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

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

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

package/src/packages/device/Viewport.ts

@@ -0,0 +1,67 @@
+import { RESIZE_ORDER } from '$packages/order'
+import { resizer } from '$packages/resizer'
+import { Store } from '$packages/store'
+import { isBrowser } from '$packages/utils'
+
+export enum ViewportBreakpoints {
+  'mobile' = '600px',
+  'tablet' = '1024px',
+  'notebook' = '1280px',
+  'desktop' = '1281px',
+}
+
+export enum ViewportMediaRules {
+  '<=mobile' = '(max-width: 600px)',
+  '>=mobile' = '(min-width: 601px)',
+  '<=tablet' = '(max-width: 1024px)',
+  '>=tablet' = '(min-width: 1025px)',
+  '<=notebook' = '(max-width: 1280px)',
+  '>=notebook' = '(min-width: 1281px)',
+  '<=desktop' = '(max-width: 1280px)',
+  '>=desktop' = '(min-width: 1281px)',
+}
+
+class Viewport {
+  #width = 0
+  #height = 0
+  #pixelRatio = 0
+  #store_type = new Store<keyof typeof ViewportBreakpoints | undefined>(undefined)
+
+  constructor() {
+    if (isBrowser) {
+      resizer.subscribe(() => {
+        this.#width = document.documentElement.clientWidth
+        this.#height = innerHeight
+        this.#pixelRatio = devicePixelRatio
+
+        if (matchMedia(ViewportMediaRules['<=mobile']).matches) {
+          this.#store_type.current = 'mobile'
+        } else if (matchMedia(ViewportMediaRules['<=tablet']).matches) {
+          this.#store_type.current = 'tablet'
+        } else if (matchMedia(ViewportMediaRules['<=notebook']).matches) {
+          this.#store_type.current = 'notebook'
+        } else if (matchMedia(ViewportMediaRules['>=desktop']).matches) {
+          this.#store_type.current = 'desktop'
+        }
+      }, RESIZE_ORDER.DEVICE)
+    }
+  }
+
+  public get width() {
+    return this.#width
+  }
+
+  public get height() {
+    return this.#height
+  }
+
+  public get store_type() {
+    return this.#store_type
+  }
+
+  public get pixelRatio() {
+    return this.#pixelRatio
+  }
+}
+
+export const viewport = new Viewport()

package/src/packages/device/index.ts

@@ -0,0 +1,2 @@
+export { device, type DeviceOS } from './Device'
+export { viewport, ViewportBreakpoints, ViewportMediaRules } from './Viewport'