diff --git a/.prettierrc b/.prettierrc index 1435ec0..eb7bff1 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,9 @@ { "singleQuote": true, "printWidth": 120, - "htmlWhitespaceSensitivity": "strict" -} + "htmlWhitespaceSensitivity": "strict", + "plugins": [ + "prettier-plugin-organize-imports" + ], + "organizeImportsSkipDestructiveCodeActions": true +} \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index a6b5631..7592224 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/labs/folk-arrow.ts b/labs/folk-arrow.ts index 945a0e8..b593ad1 100644 --- a/labs/folk-arrow.ts +++ b/labs/folk-arrow.ts @@ -1,8 +1,8 @@ -import { getBoxToBoxArrow } from 'perfect-arrows'; -import { FolkBaseConnection } from './folk-base-connection.ts'; -import { getSvgPathFromStroke, pointsOnBezierCurves } from '@lib/utils.ts'; -import { getStroke, StrokeOptions } from 'perfect-freehand'; +import { getSvgPathFromStroke, pointsOnBezierCurves } from '@lib/utils'; import { PropertyValues } from '@lit/reactive-element'; +import { getBoxToBoxArrow } from 'perfect-arrows'; +import { getStroke, StrokeOptions } from 'perfect-freehand'; +import { FolkBaseConnection } from './folk-base-connection.ts'; export type Arrow = [ /** The x position of the (padded) starting point. */ @@ -22,7 +22,7 @@ export type Arrow = [ /** The angle (in radians) for a starting arrowhead. */ as: number, /** The angle (in radians) for a center arrowhead. */ - ac: number + ac: number, ]; declare global { @@ -75,7 +75,7 @@ export class FolkArrow extends FolkBaseConnection { targetRect.x, targetRect.y, targetRect.width, - targetRect.height + targetRect.height, ) as Arrow; const points = pointsOnBezierCurves([ diff --git a/labs/folk-base-connection.ts b/labs/folk-base-connection.ts index 4d2b0bd..9725617 100644 --- a/labs/folk-base-connection.ts +++ b/labs/folk-base-connection.ts @@ -1,9 +1,7 @@ -import { parseVertex } from '@lib/utils.ts'; -import { ClientRectObserverEntry } from '@lib/client-rect-observer.ts'; -import { FolkObserver, parseDeepCSSSelector } from '@lib/folk-observer.ts'; -import { FolkElement } from '@lib/folk-element.ts'; -import { property, state } from '@lit/reactive-element/decorators.js'; +import { ClientRectObserverEntry, FolkElement, FolkObserver, parseDeepCSSSelector } from '@lib'; +import { parseVertex } from '@lib/utils'; import { css, CSSResultGroup, PropertyValues } from '@lit/reactive-element'; +import { property, state } from '@lit/reactive-element/decorators.js'; const folkObserver = new FolkObserver(); diff --git a/labs/folk-base-set.ts b/labs/folk-base-set.ts index b0b020e..9400c04 100644 --- a/labs/folk-base-set.ts +++ b/labs/folk-base-set.ts @@ -1,7 +1,5 @@ import { property, state } from '@lit/reactive-element/decorators.js'; -import { ClientRectObserverEntry } from '@lib/client-rect-observer.ts'; -import { FolkElement } from '@lib/folk-element.ts'; -import { FolkObserver, parseDeepCSSSelector } from '@lib/folk-observer.ts'; +import { ClientRectObserverEntry, FolkElement, FolkObserver, parseDeepCSSSelector } from '@lib'; import { css, CSSResultGroup, PropertyValues } from '@lit/reactive-element'; const folkObserver = new FolkObserver(); diff --git a/labs/folk-distance-field.ts b/labs/folk-distance-field.ts index 0e6592b..391c9e5 100644 --- a/labs/folk-distance-field.ts +++ b/labs/folk-distance-field.ts @@ -1,9 +1,7 @@ -import { DOMRectTransform } from '@lib/DOMRectTransform.ts'; -import { Point } from '@lib/types.ts'; -import { glsl } from '@lib/tags.ts'; -import { WebGLUtils } from '@lib/webgl.ts'; -import { FolkBaseSet } from './folk-base-set.ts'; +import { DOMRectTransform, Point, WebGLUtils } from '@lib'; +import { glsl } from '@lib/tags'; import { PropertyValues } from '@lit/reactive-element'; +import { FolkBaseSet } from './folk-base-set.ts'; /** * The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL. @@ -296,7 +294,7 @@ export class FolkDistanceField extends FolkBaseSet { this.renderSeedPointsForGroup( this.groups[groupName].shapeVAO, this.groups[groupName].textures[this.groups[groupName].isPingTexture ? 0 : 1], - vertexCount + vertexCount, ); } } @@ -462,7 +460,7 @@ export class FolkDistanceField extends FolkBaseSet { gl.FLOAT, // type false, // normalize 0, // stride - 0 // offset + 0, // offset ); gl.bindVertexArray(null); diff --git a/labs/folk-graph.ts b/labs/folk-graph.ts index d12124b..88e3653 100644 --- a/labs/folk-graph.ts +++ b/labs/folk-graph.ts @@ -2,9 +2,8 @@ import { FolkBaseSet } from './folk-base-set.ts'; import { PropertyValues } from '@lit/reactive-element'; import { Layout } from 'webcola'; import { FolkShape } from './folk-shape.ts'; -import { AnimationFrameController, AnimationFrameControllerHost } from '@lib/animation-frame-controller.ts'; +import { AnimationFrameController, AnimationFrameControllerHost, TransformIntegrator } from '@lib'; import { FolkBaseConnection } from './folk-base-connection'; -import { TransformIntegrator } from '@lib/EffectIntegrator.ts'; export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHost { static override tagName = 'folk-graph'; diff --git a/labs/folk-hull.ts b/labs/folk-hull.ts index 6ffa931..385d6d0 100644 --- a/labs/folk-hull.ts +++ b/labs/folk-hull.ts @@ -1,7 +1,7 @@ -import { FolkBaseSet } from './folk-base-set'; +import type { Point } from '@lib'; import { verticesToPolygon } from '@lib/utils'; -import type { Point } from '@lib/types'; import { PropertyValues, css } from '@lit/reactive-element'; +import { FolkBaseSet } from './folk-base-set'; declare global { interface HTMLElementTagNameMap { diff --git a/labs/folk-ink.ts b/labs/folk-ink.ts index 6b5f7ce..62b707c 100644 --- a/labs/folk-ink.ts +++ b/labs/folk-ink.ts @@ -1,8 +1,8 @@ -import { getStroke, StrokeOptions } from 'perfect-freehand'; -import { FolkElement } from '@lib/folk-element'; -import { property } from '@lit/reactive-element/decorators.js'; -import { css, PropertyValues } from '@lit/reactive-element'; +import { FolkElement } from '@lib'; import { getSvgPathFromStroke } from '@lib/utils'; +import { css, PropertyValues } from '@lit/reactive-element'; +import { property } from '@lit/reactive-element/decorators.js'; +import { getStroke, StrokeOptions } from 'perfect-freehand'; export type Point = [x: number, y: number, pressure: number]; diff --git a/labs/folk-map.ts b/labs/folk-map.ts index 4d373fe..386aa96 100644 --- a/labs/folk-map.ts +++ b/labs/folk-map.ts @@ -1,10 +1,9 @@ -import { LatLng, LatLngExpression, LeafletEvent, map, Map, tileLayer } from 'leaflet'; - +import { FolkElement } from '@lib'; +import { css, unsafeCSS } from '@lit/reactive-element'; +import { LatLng, LatLngExpression, LeafletEvent, map, tileLayer } from 'leaflet'; // @ts-ignore // Vite specific import :( import leafletCSS from 'leaflet/dist/leaflet.css?inline'; -import { FolkElement } from '@lib/folk-element'; -import { css, PropertyValues, unsafeCSS } from '@lit/reactive-element'; export class RecenterEvent extends Event { constructor() { @@ -39,12 +38,12 @@ export class FolkMap extends FolkElement { tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap', - }) + }), ); this.#map.setView( (this.getAttribute('coordinates') || '0, 0').split(',').map(Number) as LatLngExpression, - Number(this.getAttribute('zoom') || 13) + Number(this.getAttribute('zoom') || 13), ); return root; diff --git a/labs/folk-physics.ts b/labs/folk-physics.ts index 52d3d44..efc0c39 100644 --- a/labs/folk-physics.ts +++ b/labs/folk-physics.ts @@ -1,9 +1,9 @@ -import { DOMRectTransform } from '@lib/DOMRectTransform.ts'; -import { FolkBaseSet } from './folk-base-set.ts'; -import { PropertyValues } from '@lit/reactive-element'; -import { FolkShape } from './folk-shape'; import RAPIER, { init } from '@dimforge/rapier2d-compat'; -import { TransformIntegrator } from '@lib/EffectIntegrator.ts'; +import { DOMRectTransform, TransformIntegrator } from '@lib'; +import { PropertyValues } from '@lit/reactive-element'; +import { FolkBaseSet } from './folk-base-set.ts'; +import { FolkShape } from './folk-shape'; + await init(); export class FolkPhysics extends FolkBaseSet { @@ -72,7 +72,7 @@ export class FolkPhysics extends FolkBaseSet { const bodyDesc = RAPIER.RigidBodyDesc.dynamic() .setTranslation( (rect.x + rect.width / 2) * FolkPhysics.PHYSICS_SCALE, - (rect.y + rect.height / 2) * FolkPhysics.PHYSICS_SCALE + (rect.y + rect.height / 2) * FolkPhysics.PHYSICS_SCALE, ) .setRotation(rect.rotation); @@ -81,7 +81,7 @@ export class FolkPhysics extends FolkBaseSet { // Scale down the collider size const colliderDesc = RAPIER.ColliderDesc.cuboid( (rect.width / 2) * FolkPhysics.PHYSICS_SCALE, - (rect.height / 2) * FolkPhysics.PHYSICS_SCALE + (rect.height / 2) * FolkPhysics.PHYSICS_SCALE, ).setTranslation(0, 0); this.world!.createCollider(colliderDesc, body); @@ -101,7 +101,7 @@ export class FolkPhysics extends FolkBaseSet { x: (rect.x + rect.width / 2) * FolkPhysics.PHYSICS_SCALE, y: (rect.y + rect.height / 2) * FolkPhysics.PHYSICS_SCALE, }, - true + true, ); body.setRotation(rect.rotation, true); } else if (body.bodyType() === RAPIER.RigidBodyType.KinematicPositionBased) { @@ -111,7 +111,7 @@ export class FolkPhysics extends FolkBaseSet { this.world!.removeCollider(collider, true); const newColliderDesc = RAPIER.ColliderDesc.cuboid( (rect.width / 2) * FolkPhysics.PHYSICS_SCALE, - (rect.height / 2) * FolkPhysics.PHYSICS_SCALE + (rect.height / 2) * FolkPhysics.PHYSICS_SCALE, ).setTranslation(0, 0); this.world!.createCollider(newColliderDesc, body); } @@ -151,7 +151,7 @@ export class FolkPhysics extends FolkBaseSet { x: (result.x + result.width / 2) * FolkPhysics.PHYSICS_SCALE, y: (result.y + result.height / 2) * FolkPhysics.PHYSICS_SCALE, }, - true + true, ); body.setRotation(result.rotation, true); } diff --git a/labs/folk-projector.ts b/labs/folk-projector.ts index c8896bd..2ef5a3e 100644 --- a/labs/folk-projector.ts +++ b/labs/folk-projector.ts @@ -1,4 +1,4 @@ -import { DOMRectTransform } from '@lib/DOMRectTransform'; +import { DOMRectTransform } from '@lib'; import { FolkShape } from './folk-shape'; declare global { diff --git a/labs/folk-proximity.ts b/labs/folk-proximity.ts index 2f99478..230b3cf 100644 --- a/labs/folk-proximity.ts +++ b/labs/folk-proximity.ts @@ -1,5 +1,4 @@ -import { aabbIntersection } from '@lib/collision.ts'; -import { TransformEvent } from '@lib/TransformEvent.ts'; +import { aabbIntersection, TransformEvent } from '@lib'; import { FolkHull } from './folk-hull'; import { FolkShape } from './folk-shape.ts'; @@ -178,7 +177,7 @@ export class FolkProximity extends HTMLElement { const isInCluster = Array.from(cluster.sourceElements) .filter((element) => el !== element) .some((element) => - aabbIntersection(el.getTransformDOMRect(), (element as FolkShape).getTransformDOMRect(), PROXIMITY) + aabbIntersection(el.getTransformDOMRect(), (element as FolkShape).getTransformDOMRect(), PROXIMITY), ); if (!isInCluster) { diff --git a/labs/folk-rope.ts b/labs/folk-rope.ts index 4597e71..4b8c40b 100644 --- a/labs/folk-rope.ts +++ b/labs/folk-rope.ts @@ -1,12 +1,9 @@ // This is a rewrite of https://github.com/guerrillacontra/html5-es6-physics-rope -import { Vector } from '@lib/Vector.ts'; -import type { Point } from '@lib/types.ts'; -import { DOMRectTransform } from '@lib/DOMRectTransform.ts'; -import { FolkBaseConnection } from './folk-base-connection.ts'; +import { AnimationFrameController, AnimationFrameControllerHost, DOMRectTransform, Vector, type Point } from '@lib'; import { css, PropertyValues } from '@lit/reactive-element'; -import { AnimationFrameController, AnimationFrameControllerHost } from '@lib/animation-frame-controller.ts'; import { property } from '@lit/reactive-element/decorators.js'; +import { FolkBaseConnection } from './folk-base-connection.ts'; // Each rope part is one of these uses a high precision variant of Störmer–Verlet integration to keep the simulation consistent otherwise it would "explode"! interface RopePoint { diff --git a/labs/folk-sand.glsl.ts b/labs/folk-sand.glsl.ts index 5428de6..f700467 100644 --- a/labs/folk-sand.glsl.ts +++ b/labs/folk-sand.glsl.ts @@ -1,4 +1,4 @@ -import { glsl } from '@lib/tags.ts'; +import { glsl } from '@lib/tags'; /** Falling sand shaders using block cellular automata with Margolus offsets. * Based on "Probabilistic Cellular Automata for Granular Media in Video Games" (https://arxiv.org/abs/2008.06341) diff --git a/labs/folk-sand.ts b/labs/folk-sand.ts index 76085a3..e91e20f 100644 --- a/labs/folk-sand.ts +++ b/labs/folk-sand.ts @@ -1,17 +1,15 @@ -import { WebGLUtils } from '@lib/webgl.ts'; +import { DOMRectTransform, WebGLUtils } from '@lib'; +import { css, PropertyValues } from '@lit/reactive-element'; +import { FolkBaseSet } from './folk-base-set.ts'; import { collisionFragmentShader, collisionVertexShader, - simulationShader, distanceFieldInitShader, distanceFieldPropagationShader, - visualizationShader, + simulationShader, vertexShader, + visualizationShader, } from './folk-sand.glsl.ts'; -import { requestAnimationFrame } from '@lib/rAF.ts'; -import { FolkBaseSet } from './folk-base-set.ts'; -import { css, PropertyValues } from '@lit/reactive-element'; -import { DOMRectTransform } from '@lib/DOMRectTransform.ts'; export class FolkSand extends FolkBaseSet { static override tagName = 'folk-sand'; diff --git a/labs/folk-shape.ts b/labs/folk-shape.ts index 4f45c22..1552223 100644 --- a/labs/folk-shape.ts +++ b/labs/folk-shape.ts @@ -1,10 +1,6 @@ -import { css, html } from '@lib/tags'; -import { ResizeObserverManager } from '@lib/resize-observer'; -import { Point } from '@lib/types'; -import { DOMRectTransform, DOMRectTransformReadonly } from '@lib/DOMRectTransform'; -import { Vector } from '@lib/Vector'; import { getResizeCursorUrl, getRotateCursorUrl } from '@labs/utils/cursors'; -import { TransformEvent } from '@lib/TransformEvent'; +import { DOMRectTransform, DOMRectTransformReadonly, Point, ResizeObserverManager, TransformEvent, Vector } from '@lib'; +import { css, html } from '@lib/tags'; const resizeObserver = new ResizeObserverManager(); @@ -277,21 +273,23 @@ export class FolkShape extends HTMLElement { // Ideally we would creating these lazily on first focus, but the resize handlers need to be around for delegate focus to work. // Maybe can add the first resize handler here, and lazily instantiate the rest when needed? // I can see it becoming important at scale - this.#shadow.setHTMLUnsafe(html` - - - - - - - -