aptechka 0.1.0

package/src/packages/store/DerivedArray.ts

@@ -0,0 +1,36 @@
+import { Store, StoreOptions } from './Store'
+
+export type DerivedArrayCallback<StoreType, DerivedType> = (value: StoreType) => DerivedType
+
+export class DerivedArray<DerivedType, StoreType extends Array<any> = Array<any>> extends Store<
+  DerivedType[]
+> {
+  #unsubscriber: Function
+
+  constructor(
+    store: Store<StoreType>,
+    callback: DerivedArrayCallback<StoreType[number], DerivedType>,
+    parameters?: StoreOptions<DerivedType[]>
+  ) {
+    super(null!, parameters)
+
+    this.#unsubscriber = store.subscribe((e) => {
+      const res: Array<DerivedType> = []
+
+      e.current.forEach((v, i) => {
+        if (e.current[i] === e.previous?.[i] && this.current[i]) {
+          res.push(this.current[i])
+        } else {
+          res.push(callback(v))
+        }
+      })
+
+      this.current = res
+    })
+  }
+
+  public override close() {
+    super.close()
+    this.#unsubscriber()
+  }
+}

package/src/packages/store/Resource.ts

@@ -0,0 +1,38 @@
+import { Store, StoreOptions } from './Store'
+
+export type ResourceFetcher<StoreType = unknown> = () => Promise<StoreType>
+
+export class Resource<StoreType> extends Store<StoreType> {
+  #fetcher: ResourceFetcher<StoreType>
+
+  #isPending: Store<boolean>
+
+  constructor(
+    defaultValue: StoreType,
+    fetcher: ResourceFetcher<StoreType>,
+    parameters?: StoreOptions<StoreType>
+  ) {
+    super(defaultValue, parameters)
+
+    this.#isPending = new Store(false)
+
+    this.#fetcher = fetcher
+    this.refetch()
+  }
+
+  public get isPending() {
+    return this.#isPending
+  }
+
+  /**
+   * Calls fetcher again and sets isPending to true.
+   */
+  public refetch() {
+    this.#isPending.current = true
+
+    this.#fetcher().then((v) => {
+      this.#isPending.current = false
+      this.current = v
+    })
+  }
+}

package/src/packages/store/Store.ts

@@ -0,0 +1,144 @@
+import { storeRegistry } from './StoreRegistry'
+
+export interface StoreEntry<StoreType> {
+  current: StoreType
+  previous: StoreType | undefined
+}
+
+export type StoreCallback<Entry extends StoreEntry<any>> = (entry: Entry) => void
+
+export type StoreEqualityCheckCallback<StoreType> = (
+  currentValue: StoreType,
+  newValue: StoreType
+) => boolean
+export type StoreValidateCallback<StoreType> = (value: StoreType) => StoreType
+
+export interface StorePassport {
+  name: string
+  description?: string
+}
+
+export interface StoreOptions<StoreType> {
+  equalityCheck?: StoreEqualityCheckCallback<StoreType>
+  passport?: StorePassport
+  validate?: StoreValidateCallback<StoreType>
+}
+
+export class Store<
+  StoreType = unknown,
+  Entry extends StoreEntry<StoreType> = StoreEntry<StoreType>
+> {
+  #passport: StorePassport | undefined
+  #initial: StoreType
+  #previous: StoreType | undefined
+  #current: StoreType
+  #equalityCheck: StoreEqualityCheckCallback<StoreType>
+  #callbacks = new Set<StoreCallback<Entry>>()
+  #validate: StoreValidateCallback<StoreType>
+
+  constructor(value: StoreType, options?: StoreOptions<StoreType>) {
+    this.#passport = options?.passport
+    this.#initial = value
+    this.#previous = undefined
+
+    this.#current = value
+
+    this.#equalityCheck =
+      options?.equalityCheck || ((currentValue, newValue) => currentValue === newValue)
+
+    this.#validate = options?.validate || ((value) => value)
+
+    if (this.#passport) {
+      storeRegistry.updateStore(this)
+    }
+  }
+
+  public get passport() {
+    return this.#passport
+  }
+
+  public get initial() {
+    return this.#initial
+  }
+
+  public get previous() {
+    return this.#previous
+  }
+
+  public get current() {
+    return this.#current
+  }
+
+  public set current(value: StoreType) {
+    if (!this.#equalityCheck(this.#current, value)) {
+      this.#previous = this.#current
+      this.#current = this.#validate(value)
+      this.#notify()
+    }
+  }
+
+  public get subscribers() {
+    return this.#callbacks
+  }
+
+  public get entry() {
+    return {
+      current: this.#current,
+      previous: this.#previous,
+    } as Entry
+  }
+
+  public subscribe(callback: StoreCallback<Entry>) {
+    if (this.#passport && !this.#callbacks.size) {
+      shareStore(this)
+    }
+
+    this.#callbacks.add(callback)
+
+    callback(this.entry)
+
+    return () => {
+      this.unsubscribe(callback)
+    }
+  }
+
+  public unsubscribe(callback: StoreCallback<Entry>) {
+    this.#callbacks.delete(callback)
+
+    if (this.#passport && !this.#callbacks.size) {
+      unshareStore(this)
+    }
+  }
+
+  public reset() {
+    this.current = this.initial
+  }
+
+  public close() {
+    this.#callbacks.clear()
+
+    if (this.#passport) {
+      unshareStore(this)
+    }
+  }
+
+  #notify() {
+    for (const callback of this.#callbacks) {
+      callback(this.entry)
+    }
+  }
+}
+
+export const activeStores = new Store<Array<Store<any, any>>>([])
+
+function shareStore(store: Store<any, any>) {
+  if (!activeStores.current.find((s) => s.passport!.name === store.passport!.name)) {
+    activeStores.current = [...activeStores.current, store]
+  }
+}
+
+function unshareStore(store: Store<any, any>) {
+  if (activeStores.current.includes(store)) {
+    activeStores.current = activeStores.current.filter((s) => s !== store)
+  }
+}

package/src/packages/store/StoreRegistry.ts

@@ -0,0 +1,105 @@
+import { isBrowser } from '$packages/utils'
+import { Store, activeStores } from './Store'
+
+export interface StoreRegistryStateStore {
+  name: string
+  value: any
+}
+
+export type StoreRegistryState = {
+  stores: Array<StoreRegistryStateStore>
+}
+
+class StoreRegistry {
+  #loadedState: StoreRegistryState | null = null
+  #projectName: string | undefined
+  #localStoreRegistryName = ''
+
+  constructor() {
+    if (isBrowser) {
+      this.#projectName = document.documentElement.getAttribute('data-project') || undefined
+      this.#localStoreRegistryName = this.#projectName
+        ? this.#projectName + '-store-registry'
+        : 'store-registry'
+    }
+  }
+
+  public get projectName() {
+    return this.#projectName
+  }
+
+  public get localStoreRegistryName() {
+    return this.#localStoreRegistryName
+  }
+
+  public get loadedState() {
+    return this.#loadedState
+  }
+
+  public saveState() {
+    const fullState = this.getState()
+    const stringState = JSON.stringify(fullState)
+    localStorage.setItem(this.#localStoreRegistryName, stringState)
+  }
+
+  public loadState(
+    state: string | StoreRegistryState | null = localStorage.getItem(this.#localStoreRegistryName)
+  ) {
+    if (state) {
+      if (typeof state === 'string') {
+        this.#loadedState = JSON.parse(state) as StoreRegistryState
+      } else {
+        this.#loadedState = state
+      }
+
+      activeStores.current.forEach((store) => {
+        this.updateStore(store)
+      })
+    }
+  }
+
+  public resetState() {
+    activeStores.current.forEach((store) => {
+      store.reset()
+    })
+
+    this.saveState()
+  }
+
+  public updateStore(store: Store<any, any>) {
+    if (!Array.isArray(this.#loadedState?.stores)) {
+      return store
+    }
+
+    const passport = store.passport
+
+    if (passport) {
+      const match = this.#loadedState?.stores.find((s) => s.name === passport.name)
+
+      if (match) {
+        store.current = match.value
+      }
+    }
+
+    return store
+  }
+
+  public getState() {
+    const state: StoreRegistryState = {
+      stores: [],
+    }
+
+    activeStores.current.forEach((store) => {
+      if (store.passport) {
+        state.stores.push({
+          value: store.current as any,
+          name: store.passport.name,
+        })
+      }
+    })
+
+    return state
+  }
+}
+
+export const storeRegistry = new StoreRegistry()

package/src/packages/store/index.ts

@@ -0,0 +1,23 @@
+export {
+  Store,
+  activeStores,
+  type StoreEntry,
+  type StoreCallback,
+  type StorePassport,
+  type StoreOptions,
+  type StoreEqualityCheckCallback,
+} from './Store'
+
+export { Derived, type DerivedCallback } from './Derived'
+
+export { DerivedArray, type DerivedArrayCallback } from './DerivedArray'
+
+export { Resource, type ResourceFetcher } from './Resource'
+
+export { Composed, type ComposedCallback } from './Composed'
+
+export {
+  storeRegistry,
+  type StoreRegistryState,
+  type StoreRegistryStateStore,
+} from './StoreRegistry'

package/src/packages/ticker/index.ts

@@ -0,0 +1,173 @@
+import { intersector } from '$packages/intersector'
+import { ElementOrSelector, isBrowser } from '$packages/utils'
+
+export interface TickerCallbackEntry {
+  timestamp: number
+  elapsed: number
+}
+
+export type TickerCallback = (entry: TickerCallbackEntry) => void
+
+export interface TickerAddOptions {
+  maxFPS?: number
+  order?: number
+  culling?: ElementOrSelector
+}
+
+class TickerSubscriber {
+  #callback: TickerCallback
+  #maxFPS: number | undefined
+  #order: number
+  #lastTimestamp = 0
+  #elapsed = 0
+  #isVisible = false
+
+  constructor(callback: TickerCallback, options?: TickerAddOptions) {
+    this.#callback = callback
+    this.#maxFPS = options?.maxFPS
+    this.#order = options?.order || 0
+
+    if (options?.culling && isBrowser) {
+      intersector.subscribe(options.culling, this.#intersectionListener)
+    } else {
+      this.#isVisible = true
+    }
+  }
+
+  public get callback() {
+    return this.#callback
+  }
+
+  public get order() {
+    return this.#order
+  }
+
+  public sync(timestamp: number) {
+    this.#lastTimestamp = timestamp - this.#elapsed
+  }
+
+  public tick(timestamp: number) {
+    this.#elapsed = Math.max(0, timestamp - this.#lastTimestamp)
+
+    if (this.#maxFPS) {
+      if (this.#elapsed >= 1000 / this.#maxFPS) {
+        this.#lastTimestamp = timestamp - (this.#elapsed % this.#maxFPS)
+      } else {
+        return
+      }
+    } else {
+      this.#lastTimestamp = timestamp
+    }
+
+    if (this.#isVisible) {
+      this.#callback({
+        elapsed: this.#elapsed,
+        timestamp: timestamp,
+      })
+    }
+  }
+
+  public destroy() {
+    intersector.unsubscribe(this.#intersectionListener)
+  }
+
+  #intersectionListener = (entry: IntersectionObserverEntry) => {
+    this.#isVisible = entry.isIntersecting
+  }
+}
+
+export class Ticker {
+  #idleTime = 0
+  #timestamp = 0
+  #lastFrameId: number | undefined
+
+  #isDocumentHidden = false
+
+  #subscribers: Array<TickerSubscriber> = []
+
+  constructor() {
+    if (isBrowser) {
+      document.addEventListener('visibilitychange', this.#documentVisibilityChangeListener)
+    }
+  }
+
+  public subscribe(callback: TickerCallback, options?: TickerAddOptions) {
+    if (!isBrowser) {
+      return
+    }
+
+    if (!this.#subscribers.find((s) => s.callback === callback)) {
+      const subscriber = new TickerSubscriber(callback, options)
+      subscriber.sync(performance.now())
+      this.#subscribers.push(subscriber)
+      this.#subscribers = this.#subscribers.sort((a, b) => a.order - b.order)
+    }
+
+    this.#requestAnimationFrame()
+  }
+
+  public unsubscribe(callback: TickerCallback) {
+    if (!isBrowser) {
+      return
+    }
+
+    const matches = this.#subscribers.filter((subscriber) => subscriber.callback === callback)
+
+    if (matches.length) {
+      matches.forEach((m) => m.destroy())
+
+      this.#subscribers = this.#subscribers.filter((subscriber) => subscriber.callback !== callback)
+
+      if (!this.#subscribers.length) {
+        this.#cancelAnimationFrame()
+      }
+    }
+  }
+
+  public destroy() {
+    if (isBrowser) {
+      this.#cancelAnimationFrame()
+      document.removeEventListener('visibilitychange', this.#documentVisibilityChangeListener)
+    }
+  }
+
+  #requestAnimationFrame() {
+    if (this.#subscribers.length && !this.#lastFrameId) {
+      this.#lastFrameId = requestAnimationFrame(this.#animationFrameListener)
+    }
+  }
+
+  #cancelAnimationFrame() {
+    if (this.#lastFrameId) {
+      cancelAnimationFrame(this.#lastFrameId)
+      this.#lastFrameId = undefined
+    }
+  }
+
+  #animationFrameListener = (timestamp: number) => {
+    if (this.#isDocumentHidden) {
+      this.#isDocumentHidden = false
+      this.#idleTime = timestamp - this.#timestamp
+
+      for (const subscriber of this.#subscribers) {
+        subscriber.sync(this.#timestamp)
+      }
+    }
+
+    this.#lastFrameId = requestAnimationFrame(this.#animationFrameListener)
+
+    this.#timestamp = timestamp - this.#idleTime
+
+    for (const subscriber of this.#subscribers) {
+      subscriber.tick(this.#timestamp)
+    }
+  }
+
+  #documentVisibilityChangeListener = () => {
+    if (document.hidden) {
+      this.#isDocumentHidden = true
+    }
+  }
+}
+
+export const ticker = new Ticker()

package/src/packages/utils/array.ts

@@ -0,0 +1,3 @@
+export function insert(arr: Array<any>, index: number, ...newItems: any[]) {
+  return [...arr.slice(0, index), ...newItems, ...arr.slice(index)]
+}

package/src/packages/utils/attributes.ts

@@ -0,0 +1,19 @@
+export function parseAttribute(element: HTMLElement, attributeName: string) {
+  return parseAttributeValue(element.getAttribute(attributeName))
+}
+
+export function parseAttributeValue(value: string | null | undefined) {
+  if (value == undefined) {
+    return null
+  } else if (!value) {
+    return true
+  } else if (!isNaN(Number(value))) {
+    return Number(value)
+  } else if (value === 'true') {
+    return true
+  } else if (value === 'false') {
+    return false
+  } else {
+    return value
+  }
+}

package/src/packages/utils/browser.ts

@@ -0,0 +1,2 @@
+export const isBrowser: boolean =
+  typeof window !== 'undefined' && typeof window.document !== 'undefined'

package/src/packages/utils/canvas.ts

@@ -0,0 +1,46 @@
+export function measureText(context: CanvasRenderingContext2D, text: string) {
+  const metrics = context.measureText(text)
+  const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
+  const width = metrics.width
+
+  return {
+    height,
+    width,
+  }
+}
+
+export function fixPosition(position: number) {
+  return Math.floor(position) + 0.5
+}
+
+export function cover(
+  contentWidth: number,
+  contentHeight: number,
+  containerWidth: number,
+  containerHeight: number,
+  offsetLeft?: number,
+  offsetTop?: number
+) {
+  let contentRatio = contentWidth / contentHeight
+  let containerRatio = containerWidth / containerHeight
+  let resultHeight = 0
+  let resultWidth = 0
+
+  offsetLeft = typeof offsetLeft === 'undefined' ? 0.5 : offsetLeft
+  offsetTop = typeof offsetTop === 'undefined' ? 0.5 : offsetTop
+
+  if (contentRatio > containerRatio) {
+    resultHeight = containerHeight
+    resultWidth = containerHeight * contentRatio
+  } else {
+    resultWidth = containerWidth
+    resultHeight = containerWidth / contentRatio
+  }
+
+  return [
+    (containerWidth - resultWidth) * offsetLeft,
+    (containerHeight - resultHeight) * offsetTop,
+    resultWidth,
+    resultHeight,
+  ] as const
+}

package/src/packages/utils/collisions.ts

@@ -0,0 +1,12 @@
+import { Circle, Dot2D, Rect2D } from './ts-shape.js'
+
+export function dotRectCollision(dot: Dot2D, rect: Rect2D) {
+  return (
+    dot.x < rect.x + rect.width && dot.x > rect.x && dot.y < rect.y + rect.height && dot.y > rect.y
+  )
+}
+
+export function dotCircleCollision(dot: Dot2D, circle: Circle) {
+  const distance = Math.sqrt((dot.x - circle.x) ** 2 + (dot.y - circle.y) ** 2)
+  return distance < circle.radius
+}

package/src/packages/utils/coordinates.ts

@@ -0,0 +1,40 @@
+import { Dot2D, Rect2D } from './ts-shape.js'
+
+export function screenToCartesian(
+  screenCoordinate: Dot2D,
+  container: Pick<Rect2D, 'width' | 'height'>,
+  normalize = false,
+) {
+  let x = screenCoordinate.x - container.width / 2
+  let y = container.height / 2 - screenCoordinate.y
+
+  if (normalize) {
+    x = x / (container.width / 2)
+    y = y / (container.height / 2)
+  }
+
+  return { x, y }
+}
+
+export function normalize(coordinate: Dot2D, size: Dot2D) {
+  const x = coordinate.x / size.x
+  const y = coordinate.y / size.y
+
+  return { x, y }
+}
+
+export function getPointerPosition(event: MouseEvent | PointerEvent | Dot2D, rect?: Rect2D) {
+  rect = rect
+    ? rect
+    : {
+        x: 0,
+        y: 0,
+        width: document.documentElement.offsetWidth,
+        height: innerHeight,
+      }
+
+  return {
+    x: ((event.x - rect.x) / rect.width) * rect.width,
+    y: ((event.y - rect.y) / rect.height) * rect.height,
+  }
+}

package/src/packages/utils/decoding.ts

@@ -0,0 +1,11 @@
+export function encode(string: string) {
+  const decodedStr = window.atob(string)
+  // @ts-ignore
+  return decodeURIComponent(window.escape(decodedStr))
+}
+
+export function decode(string: string) {
+  // @ts-ignore
+  const encodedStr = window.unescape(encodeURIComponent(string))
+  return window.btoa(encodedStr)
+}

package/src/packages/utils/dev.ts

@@ -0,0 +1,5 @@
+export function resizeInterval({ ms = 200 } = {}) {
+  setInterval(() => {
+    window.dispatchEvent(new Event('resize'))
+  }, ms)
+}