aptechka 0.1.0

package/src/packages/utils/dom.ts

@@ -0,0 +1,48 @@
+export function findParentElement<T extends typeof Element>(
+  element: Element | null,
+  Constructor: T
+): T | null {
+  if (!element) {
+    return null
+  }
+
+  let parent = element.parentElement as T | null
+
+  if (!(element.parentElement instanceof Constructor)) {
+    parent = findParentElement(element.parentElement, Constructor)
+  }
+
+  return parent as T
+}
+
+export type ElementOrSelector<T extends HTMLElement = HTMLElement> = string | T
+
+export function getElement<T extends HTMLElement>(
+  elementOrSelector: ElementOrSelector<T>,
+  from = document
+) {
+  return typeof elementOrSelector === 'string'
+    ? from.querySelector<T>(elementOrSelector)
+    : elementOrSelector
+}
+
+export function findScrollParentElement(
+  node: Node | null,
+  _initial: Node | null = null
+): HTMLElement {
+  _initial = _initial || node
+
+  if (!node || !(node instanceof HTMLElement)) {
+    return document.body
+  }
+
+  if (_initial !== node) {
+    const computedStyle = getComputedStyle(node)
+
+    if (computedStyle.overflow.includes('auto') || computedStyle.overflow.includes('scroll')) {
+      return node
+    }
+  }
+
+  return findScrollParentElement(node.parentNode, _initial)
+}

package/src/packages/utils/easings.ts

@@ -0,0 +1,69 @@
+export type EasingFunction = (t: number) => number
+
+export const linear: EasingFunction = (t: number) => {
+  return t
+}
+
+export const easeInQuad: EasingFunction = (t: number) => {
+  return t * t
+}
+
+export const easeOutQuad: EasingFunction = (t: number) => {
+  return t * (2 - t)
+}
+
+export const easeInOutQuad: EasingFunction = (t: number) => {
+  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
+}
+
+export const easeInCubic: EasingFunction = (t: number) => {
+  return t * t * t
+}
+
+export const easeOutCubic: EasingFunction = (t: number) => {
+  return --t * t * t + 1
+}
+
+export const easeInOutCubic: EasingFunction = (t: number) => {
+  return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
+}
+
+export const easeInQuart: EasingFunction = (t: number) => {
+  return t * t * t * t
+}
+
+export const easeOutQuart: EasingFunction = (t: number) => {
+  return 1 - --t * t * t * t
+}
+
+export const easeInOutQuart: EasingFunction = (t: number) => {
+  return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t
+}
+
+export const easeInQuint: EasingFunction = (t: number) => {
+  return t * t * t * t * t
+}
+
+export const easeOutQuint: EasingFunction = (t: number) => {
+  return 1 + --t * t * t * t * t
+}
+
+export const easeInOutQuint: EasingFunction = (t: number) => {
+  return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t
+}
+
+export const easeInExpo: EasingFunction = (t: number) => {
+  return t === 0 ? 0 : 2 ** (10 * (t - 1))
+}
+
+export const easeOutExpo: EasingFunction = (t: number) => {
+  return t === 1 ? 1 : 1 - 2 ** (-10 * t)
+}
+
+export const easeInOutExpo: EasingFunction = (t: number) => {
+  return t === 0 || t === 1
+    ? t
+    : t < 0.5
+    ? 0.5 * 2 ** (10 * 2 * (t - 0.5))
+    : 0.5 * (2 - Math.abs(2 ** (-10 * 2 * (t - 0.5))))
+}

package/src/packages/utils/file.ts

@@ -0,0 +1,17 @@
+export function createJSONAndSave(filename: string, dataObjToWrite: object) {
+  const blob = new Blob([JSON.stringify(dataObjToWrite)], { type: 'application/json' })
+  const link = document.createElement('a')
+
+  link.download = filename + '.json'
+  link.href = window.URL.createObjectURL(blob)
+  link.dataset.downloadurl = ['application/json', link.download, link.href].join(':')
+
+  const evt = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true,
+  })
+
+  link.dispatchEvent(evt)
+  link.remove()
+}

package/src/packages/utils/function.ts

@@ -0,0 +1,29 @@
+export const debounce = <F extends (...args: Parameters<F>) => ReturnType<F>>(
+  callback: F,
+  delay = 100
+): ((...args: Parameters<F>) => void) => {
+  let timeout: ReturnType<typeof setTimeout>
+
+  return (...args: Parameters<F>): void => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => callback(...args), delay)
+  }
+}
+
+export const throttle = <F extends (...args: Parameters<F>) => ReturnType<F>>(
+  callback: F,
+  delay = 0
+): ((...args: Parameters<F>) => void) => {
+  let wait = false
+
+  return (...args: Parameters<F>): void => {
+    if (!wait) {
+      wait = true
+
+      setTimeout(() => {
+        callback(...args)
+        wait = false
+      }, delay)
+    }
+  }
+}

package/src/packages/utils/index.ts

@@ -0,0 +1,61 @@
+export { insert } from './array'
+export { parseAttribute, parseAttributeValue } from './attributes'
+export { isBrowser } from './browser'
+export { measureText, fixPosition, cover } from './canvas'
+export { dotRectCollision, dotCircleCollision } from './collisions'
+export { screenToCartesian, normalize, getPointerPosition } from './coordinates'
+export { encode, decode } from './decoding'
+export { resizeInterval } from './dev'
+export {
+  findParentElement,
+  getElement,
+  findScrollParentElement,
+  type ElementOrSelector,
+} from './dom'
+export {
+  linear,
+  easeInQuad,
+  easeOutQuad,
+  easeInOutQuad,
+  easeInCubic,
+  easeOutCubic,
+  easeInOutCubic,
+  easeInQuart,
+  easeOutQuart,
+  easeInOutQuart,
+  easeInQuint,
+  easeOutQuint,
+  easeInOutQuint,
+  easeInExpo,
+  easeOutExpo,
+  easeInOutExpo,
+  type EasingFunction,
+} from './easings'
+export { createJSONAndSave } from './file'
+export { debounce, throttle } from './function'
+export { getCumulativePosition, getCumulativeOffsetLeft, getCumulativeOffsetTop } from './layout'
+export {
+  lerp,
+  damp,
+  step,
+  round,
+  clamp,
+  mapRange,
+  smoothstep,
+  smootherstep,
+  calculateDistance,
+  calculateDistanceWithRadius,
+} from './math'
+export { fix, roundTo, generateId } from './number'
+export { isObject, cloneDeep, mergeDeep, isNullish, compareObjects, pick, omit } from './object'
+export { kebabToCamel, camelToKebab, snakeToDotted, toPascalCase, capitalize } from './string'
+export type { Axes2D, Axes3D, Dot2D, Rect2D, Circle, Dot3D, Rect3D } from './ts-shape'
+export type {
+  NestedKeys,
+  NestedValueOf,
+  DeepOmit,
+  DeepPartial,
+  Requiredish,
+  WithRequired,
+  Split,
+} from './ts-utility'

package/src/packages/utils/layout.ts

@@ -0,0 +1,22 @@
+export const getCumulativePosition = (
+  target: HTMLElement,
+  from: 'offsetLeft' | 'offsetTop' = 'offsetLeft',
+  stopElement?: HTMLElement
+): number => {
+  let acc = 0
+
+  do {
+    acc += target[from] || 0
+    target = target.offsetParent as HTMLElement
+  } while (target && target !== stopElement)
+
+  return acc
+}
+
+export const getCumulativeOffsetLeft = (target: HTMLElement, stopElement?: HTMLElement) => {
+  return getCumulativePosition(target, 'offsetLeft', stopElement)
+}
+
+export const getCumulativeOffsetTop = (target: HTMLElement, stopElement?: HTMLElement) => {
+  return getCumulativePosition(target, 'offsetTop', stopElement)
+}

package/src/packages/utils/math.ts

@@ -0,0 +1,74 @@
+import { Dot2D } from './ts-shape.js'
+
+export function lerp(a: number, b: number, c: number) {
+  return (1 - c) * a + c * b
+}
+
+export function damp(a: number, b: number, c: number, dt: number) {
+  return lerp(a, b, 1 - Math.exp(-c * dt))
+}
+
+export function step(edge: number, value: number, x = 0, y = 1): number {
+  return value < edge ? x : y
+}
+
+export function round(number: number, precision: number = 5): number {
+  return +number.toFixed(precision)
+}
+
+export function clamp(number: number, min: number = 0, max: number = 0) {
+  return Math.max(min, Math.min(number, max))
+}
+
+export function mapRange(value: number, rangeA: [number, number], rangeB: [number, number]) {
+  const ratio = (value - rangeA[0]) / (rangeA[1] - rangeA[0])
+
+  const mappedValue = ratio * (rangeB[1] - rangeB[0]) + rangeB[0]
+
+  const clampedValue = clamp(mappedValue, rangeB[0], rangeB[1])
+
+  return clampedValue
+}
+
+// https://github.com/mrdoob/three.js/blob/dev/src/math/MathUtils.js#L84
+export function smoothstep(x: number, min: number, max: number) {
+  if (x <= min) return 0
+  if (x >= max) return 1
+
+  x = (x - min) / (max - min)
+
+  return x * x * (3 - 2 * x)
+}
+
+// https://github.com/mrdoob/three.js/blob/dev/src/math/MathUtils.js#L95
+export function smootherstep(x: number, min: number, max: number) {
+  if (x <= min) return 0
+  if (x >= max) return 1
+
+  x = (x - min) / (max - min)
+
+  return x * x * x * (x * (x * 6 - 15) + 10)
+}
+
+export function calculateDistance(d1: Dot2D, d2: Dot2D) {
+  const xDistance = d2.x - d1.x
+  const yDistance = d2.y - d1.y
+
+  const distance = Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2))
+
+  return distance
+}
+
+export function calculateDistanceWithRadius(
+  x1: number,
+  y1: number,
+  r1: number,
+  x2: number,
+  y2: number,
+  r2: number,
+) {
+  const dx = x2 - x1
+  const dy = y2 - y1
+  const distance = Math.sqrt(dx * dx + dy * dy) - (r1 + r2)
+  return distance
+}

package/src/packages/utils/number.ts

@@ -0,0 +1,26 @@
+const precision = [
+  1, 10, 100, 1000, 10000, 100000, 1000000, 10000000, 100000000, 1000000000, 10000000000,
+]
+
+export function fix(number: number, n: number = 5): number {
+  return ((0.5 + number * precision[n]) << 0) / precision[n]
+}
+
+export function roundTo(number: number, to: number) {
+  return Math.round(number / to) * to
+}
+
+export function generateId(
+  length: number,
+  characters = 'abcdefghijklmnopqrstuvwxyz0123456789',
+): string {
+  const charactersLength = characters.length
+  const key = crypto.getRandomValues(new Uint8Array(length))
+
+  let generatedKey = ''
+  for (let i = 0; i < length; i++) {
+    generatedKey += characters.charAt(key[i] % charactersLength)
+  }
+
+  return generatedKey
+}

package/src/packages/utils/object.ts

@@ -0,0 +1,108 @@
+export function isObject(value: any): value is object {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+export function cloneDeep<T>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') {
+    return obj
+  }
+
+  if (obj instanceof Date) {
+    return new Date(obj.getTime()) as any
+  }
+
+  if (obj instanceof Node) {
+    return obj
+  }
+
+  const clonedObj: any = Array.isArray(obj) ? [] : {}
+
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      clonedObj[key] = cloneDeep(obj[key])
+    }
+  }
+
+  return clonedObj
+}
+
+export function mergeDeep(target: object, source: object, isObjectFunction = isObject): object {
+  for (const key in source) {
+    if (isObjectFunction((source as any)[key])) {
+      if (!(target as any)[key]) Object.assign(target, { [key]: {} })
+      mergeDeep((target as any)[key], (source as any)[key], isObjectFunction)
+    } else {
+      Object.assign(target, { [key]: (source as any)[key] })
+    }
+  }
+
+  return target
+}
+
+export function isNullish(value: any) {
+  return value === null || typeof value === 'undefined'
+}
+
+export function compareObjects(obj1: any, obj2: any): boolean {
+  if (typeof obj1 !== typeof obj2) {
+    return false
+  }
+
+  if ([obj1, obj2].some((v) => isNullish(v))) {
+    return obj1 === obj2
+  }
+
+  if (Array.isArray(obj1)) {
+    const maxArray = (obj1.length > obj2.length ? obj1 : obj2) as Array<any>
+    const minArray = (obj1.length > obj2.length ? obj2 : obj1) as Array<any>
+    return maxArray.every((item, index) => compareObjects(item, minArray[index]))
+  }
+
+  if (
+    typeof obj1 !== 'object' ||
+    obj1 instanceof Node ||
+    (typeof obj1 === 'object' && obj1.constructor.toString().startsWith('class'))
+  ) {
+    return obj1 === obj2
+  }
+
+  for (const key in obj1) {
+    if (!obj2.hasOwnProperty(key)) {
+      return false
+    }
+
+    if (typeof obj1[key] === 'object' && typeof obj2[key] === 'object') {
+      if (!compareObjects(obj1[key], obj2[key])) {
+        return false
+      }
+    } else if (obj1[key] !== obj2[key]) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export function pick<T extends object, R extends keyof T>(object: T, keys: Array<R>): Pick<T, R> {
+  const result = {} as Pick<T, R>
+
+  for (const key in object) {
+    if (keys.includes(key as any)) {
+      ;(result as any)[key] = object[key]
+    }
+  }
+
+  return result
+}
+
+export function omit<T extends object, R extends keyof T>(object: T, keys: Array<R>): Omit<T, R> {
+  const result = {} as Omit<T, R>
+
+  for (const key in object) {
+    if (!keys.includes(key as any)) {
+      ;(result as any)[key] = object[key]
+    }
+  }
+
+  return result
+}

package/src/packages/utils/string.ts

@@ -0,0 +1,49 @@
+export function kebabToCamel(kebab: string, capitalize = false) {
+  let camel = ''
+
+  kebab.split('-').forEach((part, i) => {
+    if (i === 0 && !capitalize) {
+      camel += part
+    } else {
+      const firstLetter = part[0]
+      const restLetters = part.slice(1)
+      const capitalized = firstLetter.toUpperCase() + restLetters
+
+      camel += capitalized
+    }
+  })
+
+  return camel
+}
+
+export function camelToKebab(camelCaseString: string) {
+  return camelCaseString.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+export function snakeToDotted(snake: string) {
+  return snake.split('_').join('.')
+}
+
+export function toPascalCase(str: string) {
+  if (/^[a-z\d]+$/i.test(str)) {
+    return str.charAt(0).toUpperCase() + str.slice(1)
+  }
+  return str
+    .replace(/([a-z\d])([a-z\d]*)/gi, (_, g1, g2) => g1.toUpperCase() + g2.toLowerCase())
+    .replace(/[^a-z\d]/gi, '')
+}
+
+export function capitalize(string: string, everyWord = false) {
+  const cfl = (string: string) => {
+    return string.slice(0, 1).toUpperCase() + string.slice(1)
+  }
+
+  if (everyWord) {
+    return string
+      .split(' ')
+      .map((v) => cfl(v))
+      .join(' ')
+  } else {
+    return cfl(string)
+  }
+}

package/src/packages/utils/ts-shape.ts

@@ -0,0 +1,25 @@
+export type Axes2D = 'x' | 'y'
+
+export type Axes3D = Axes2D | 'z'
+
+export type Dot2D = {
+  x: number
+  y: number
+}
+
+export type Rect2D = Dot2D & {
+  width: number
+  height: number
+}
+
+export type Circle = Dot2D & {
+  radius: number
+}
+
+export type Dot3D = Dot2D & {
+  z: number
+}
+
+export type Rect3D = Rect2D & {
+  depth: number
+}

package/src/packages/utils/ts-utility.ts

@@ -0,0 +1,47 @@
+export type NestedKeys<T> = T extends Node
+  ? ''
+  : T extends object
+    ? {
+        [K in keyof T]: T[K] extends infer U
+          ? `${Extract<K, string>}${NestedKeys<U> extends '' ? '' : '.'}${NestedKeys<U>}`
+          : never
+      }[keyof T]
+    : ''
+
+export type NestedValueOf<Obj, Key extends string> = Obj extends object
+  ? Key extends `${infer Parent}.${infer Leaf}`
+    ? Parent extends keyof Obj
+      ? NestedValueOf<Obj[Parent], Leaf>
+      : never
+    : Key extends keyof Obj
+      ? Obj[Key]
+      : never
+  : never
+
+type Tail<T extends any[]> = ((...t: T) => void) extends (h: any, ...r: infer R) => void ? R : never
+
+export type DeepOmit<T, Path extends string[]> = T extends object
+  ? Path['length'] extends 1
+    ? Omit<T, Path[0]>
+    : {
+        [K in keyof T]: K extends Path[0] ? DeepOmit<T[K], Tail<Path>> : T[K]
+      }
+  : T
+
+export type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K]
+}
+
+export type Requiredish<T> = {
+  [K in keyof Required<T>]: T[K]
+}
+
+export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] }
+
+export type Split<S extends string, D extends string> = string extends S
+  ? string[]
+  : S extends ''
+    ? []
+    : S extends `${infer T}${D}${infer U}`
+      ? [T, ...Split<U, D>]
+      : [S]

package/src/packages/video/index.ts

@@ -0,0 +1,39 @@
+import { define } from '$packages/custom-element'
+import { SourceElement } from '$packages/source'
+
+@define('e-video')
+export class VideoElement extends SourceElement<HTMLVideoElement> {
+  protected override connectedCallback() {
+    super.connectedCallback()
+
+    this.captureEvent.subscribe(() => {
+      if (this.hasAttribute('e-autoplay')) {
+        this.consumerElement.play()
+      }
+    })
+
+    this.releaseEvent.subscribe(() => {
+      if (this.hasAttribute('e-autoplay')) {
+        this.consumerElement.pause()
+
+        if (this.hasAttribute('replay')) {
+          this.consumerElement.currentTime = 0
+        }
+      }
+    })
+  }
+
+  protected override createConsumer() {
+    return document.createElement('video')
+  }
+
+  protected override consumeSource(url: string | null) {
+    this.consumerElement.src = url || ''
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'e-video': VideoElement
+  }
+}

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+
+    "experimentalDecorators": true,
+    "allowJs": true,
+
+    "types": ["vite/client"],
+    "baseUrl": "./",
+    "paths": {
+      "$packages/*": ["src/packages/*"],
+    },
+  },
+  "include": ["src"]
+}