@khesira/textflow 1.0.0

package/README.md

@@ -0,0 +1,15 @@
+# textflow
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.14. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/index'
+export {}

package/dist/src/TextElement.d.ts

@@ -0,0 +1,44 @@
+import { BoundingBox, Settings } from './types';
+import { Direction } from './directions';
+export declare class TextElement {
+    private _positionX;
+    private _positionY;
+    private readonly _maxAccelerationX;
+    private readonly _width;
+    private readonly _height;
+    private readonly _text;
+    private readonly _fontSize;
+    private readonly _textDirection;
+    private _accelerateId;
+    private _breakDownId;
+    private _accelerationX;
+    private _accelerationY;
+    private _velocityX;
+    private _velocityY;
+    private readonly _acceleration;
+    private _boundingBox;
+    private readonly _font;
+    private readonly _color;
+    constructor(_positionX: number, _positionY: number, _maxAccelerationX: number, _width: number, _height: number, _text: string, _fontSize: number, _textDirection: Direction, _settings: Settings);
+    get width(): number;
+    get height(): number;
+    get positionX(): number;
+    set positionX(value: number);
+    get positionY(): number;
+    set positionY(value: number);
+    get boundingBox(): BoundingBox;
+    set boundingBox(value: BoundingBox);
+    get accelerationX(): number;
+    get fontSize(): number;
+    get font(): string;
+    get color(): string;
+    get text(): string;
+    isCollidingWithBorder(direction: number, width: number): boolean;
+    private calculateBoundingBox;
+    private accelerate;
+    private breakDown;
+    boostUpByCollision: (textElement: TextElement) => void;
+    breakDownByCollision: (textElement: TextElement) => void;
+    start(): void;
+    move(): void;
+}

package/dist/src/TextFlowView.d.ts

@@ -0,0 +1,18 @@
+import { World } from './World';
+import { Settings } from './types';
+export declare class TextFlowView {
+    private readonly _settings;
+    private readonly _target;
+    private readonly _canvas;
+    private readonly _context2d;
+    private readonly _world;
+    private _renderId;
+    constructor(_settings: Settings, _target: HTMLElement, _canvas: HTMLCanvasElement, _context2d: CanvasRenderingContext2D, _world: World);
+    setFontSize(fontSize: number): void;
+    measureText(text: string): number;
+    resize(): void;
+    clear(): void;
+    start(): void;
+    stop(): void;
+    private renderView;
+}

package/dist/src/TextWriter.d.ts

@@ -0,0 +1,28 @@
+import { Settings } from './types';
+import { World } from './World';
+import { TextFlowView } from './TextFlowView';
+import { Direction } from './directions';
+export declare class TextWriter {
+    private readonly _settings;
+    private readonly _textDirection;
+    private _width;
+    private _height;
+    private readonly _world;
+    private readonly _view;
+    private readonly _texts;
+    private _textId;
+    private _isRunning;
+    private _minFontSize;
+    private _maxFontSize;
+    private readonly _marginTop;
+    private readonly _marginBottom;
+    private readonly _maxTexts;
+    constructor(_settings: Settings, _textDirection: Direction, _width: number, _height: number, _world: World, _view: TextFlowView, _texts: string[]);
+    addText(): void;
+    resize(width: number, height: number): void;
+    start(): void;
+    stop(): void;
+    private updateFontSizes;
+    private random;
+    private randomSetTimeout;
+}

package/dist/src/World.d.ts

@@ -0,0 +1,23 @@
+import { Direction } from './directions';
+import { TextElement } from './TextElement';
+export declare class World {
+    private readonly _textDirection;
+    private updateId;
+    private _isRunning;
+    private _elements;
+    private _width;
+    constructor(_textDirection: Direction);
+    get elements(): TextElement[];
+    addElement(element: TextElement): void;
+    resize(width: number): void;
+    start(): void;
+    stop(): void;
+    private areObjectsColliding;
+    private getCollisionAxis;
+    private handleCollision;
+    private handleXCollision;
+    private handleYCollision;
+    private detectCollisions;
+    private updateElements;
+    private updateWorld;
+}

package/dist/src/directions.d.ts

@@ -0,0 +1,71 @@
+export interface Direction {
+    x: number;
+    y: number;
+}
+export declare const directions: {
+    readonly none: {
+        readonly x: 0;
+        readonly y: 0;
+    };
+    readonly north: {
+        readonly x: 0;
+        readonly y: -1;
+    };
+    readonly northEast: {
+        readonly x: 1;
+        readonly y: -1;
+    };
+    readonly east: {
+        readonly x: 1;
+        readonly y: 0;
+    };
+    readonly southEast: {
+        readonly x: 1;
+        readonly y: 1;
+    };
+    readonly south: {
+        readonly x: 0;
+        readonly y: 1;
+    };
+    readonly southWest: {
+        readonly x: -1;
+        readonly y: 1;
+    };
+    readonly west: {
+        readonly x: -1;
+        readonly y: 0;
+    };
+    readonly northWest: {
+        readonly x: -1;
+        readonly y: -1;
+    };
+};
+export declare const defaultDirections: ({
+    readonly x: 0;
+    readonly y: 0;
+} | {
+    readonly x: 0;
+    readonly y: -1;
+} | {
+    readonly x: 1;
+    readonly y: -1;
+} | {
+    readonly x: 1;
+    readonly y: 0;
+} | {
+    readonly x: 1;
+    readonly y: 1;
+} | {
+    readonly x: 0;
+    readonly y: 1;
+} | {
+    readonly x: -1;
+    readonly y: 1;
+} | {
+    readonly x: -1;
+    readonly y: 0;
+} | {
+    readonly x: -1;
+    readonly y: -1;
+})[];
+export declare function randomDirection(availableDirections?: readonly Direction[]): Direction;

package/dist/src/index.d.ts

@@ -0,0 +1,18 @@
+import { Settings } from './types';
+export type { Settings };
+export declare class TextFlowElement extends HTMLElement {
+    private active;
+    private resizeObserver;
+    private world;
+    private view;
+    private textWriter;
+    private animationFrameId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private loop;
+    private startLoop;
+    private stopLoop;
+    private resize;
+    private visibilityChange;
+}
+export declare function registerTextFlowSlider(tagName?: string): void;

package/dist/src/settings.d.ts

@@ -0,0 +1,3 @@
+import { Settings } from './types.ts';
+export declare const defaultSettings: Settings;
+export declare function sanitizeSettings(userSettings: any): Settings;

package/dist/src/types.d.ts

@@ -0,0 +1,19 @@
+export interface BoundingBox {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface Settings {
+    width: string;
+    height: string;
+    maxTexts: number;
+    maxAcceleration: number;
+    marginTop: number;
+    marginBottom: number;
+    texts: string[];
+    color: string;
+    background: string;
+    font: string;
+    debug: boolean;
+}

package/dist/textflow.es.js

@@ -0,0 +1,363 @@
+//#region src/World.ts
+var e = class {
+	_textDirection;
+	updateId = void 0;
+	_isRunning = !1;
+	_elements = [];
+	_width = 0;
+	constructor(e) {
+		this._textDirection = e;
+	}
+	get elements() {
+		return this._elements;
+	}
+	addElement(e) {
+		this._elements.push(e);
+	}
+	resize(e) {
+		this._width = e;
+	}
+	start() {
+		this._isRunning || (this._isRunning = !0, this.updateWorld());
+	}
+	stop() {
+		this._isRunning = !1, this.updateId !== void 0 && (window.clearTimeout(this.updateId), this.updateId = void 0);
+	}
+	areObjectsColliding(e, t) {
+		let n = e.boundingBox.left > t.boundingBox.right || t.boundingBox.left > e.boundingBox.right, r = e.boundingBox.top > t.boundingBox.bottom || t.boundingBox.top > e.boundingBox.bottom;
+		return !(n || r);
+	}
+	getCollisionAxis(e, t) {
+		let n = [
+			e.positionX,
+			e.positionX + e.width,
+			t.positionX,
+			t.positionX + t.width
+		], r = [
+			e.positionY,
+			e.positionY + e.height,
+			t.positionY,
+			t.positionY + t.height
+		], i = (e, t) => e - t;
+		return n.sort(i), r.sort(i), n[2] - n[1] < r[2] - r[1] ? "x" : "y";
+	}
+	handleCollision(e, t) {
+		this.getCollisionAxis(e, t) === "x" ? this.handleXCollision(e, t) : this.handleYCollision(e, t);
+	}
+	handleXCollision(e, t) {
+		if (this._textDirection.x === 0) return;
+		let n = e.boundingBox.left < t.boundingBox.left, r = n ? e : t, i = n ? t : e;
+		this._textDirection.x < 0 ? (r.boostUpByCollision(i), i.breakDownByCollision(r)) : (i.boostUpByCollision(r), r.breakDownByCollision(i));
+	}
+	handleYCollision(e, t) {
+		if (this._textDirection.y === 0) return;
+		let n = e.boundingBox.top < t.boundingBox.top, r = n ? e : t, i = n ? t : e;
+		this._textDirection.y < 0 ? (r.boostUpByCollision(i), i.breakDownByCollision(r)) : (i.boostUpByCollision(r), r.breakDownByCollision(i));
+	}
+	detectCollisions() {
+		for (let e = 0; e < this._elements.length; e++) {
+			let t = this._elements[e];
+			for (let n = e + 1; n < this._elements.length; n++) {
+				let e = this._elements[n];
+				this.areObjectsColliding(t, e) && this.handleCollision(t, e);
+			}
+		}
+	}
+	updateElements() {
+		for (let e = this._elements.length - 1; e >= 0; e--) {
+			let t = this._elements[e];
+			t.move(), t.isCollidingWithBorder(this._textDirection.x, this._width) && this._elements.splice(e, 1);
+		}
+	}
+	updateWorld() {
+		this._isRunning && (this.detectCollisions(), this.updateElements(), this.updateId = window.setTimeout(() => this.updateWorld(), 1e3 / 60));
+	}
+}, t = class {
+	_settings;
+	_target;
+	_canvas;
+	_context2d;
+	_world;
+	_renderId = 0;
+	constructor(e, t, n, r, i) {
+		this._settings = e, this._target = t, this._canvas = n, this._context2d = r, this._world = i, this._target.style.display = "block", this._target.style.width = this._settings.width, this._target.style.height = this._settings.height, this._target.style.background = this._settings.background;
+	}
+	setFontSize(e) {
+		this._context2d.font = `${e}pt ${this._settings.font}`;
+	}
+	measureText(e) {
+		return this._context2d.measureText(e).width;
+	}
+	resize() {
+		let e = typeof window < "u" && window.devicePixelRatio || 1;
+		this._canvas.width = this._target.clientWidth * e, this._canvas.height = this._target.clientHeight * e, this._canvas.style.width = `${this._target.clientWidth}px`, this._canvas.style.height = `${this._target.clientHeight}px`, this._context2d.scale(e, e);
+	}
+	clear() {
+		if (!this._context2d) return;
+		let e = this._context2d.fillStyle;
+		this._context2d.fillStyle = this._settings.debug ? "rgba(255, 255, 0, 1)" : this._settings.background, this._context2d.fillRect(0, 0, this._target.clientWidth, this._target.clientHeight), this._context2d.fillStyle = e;
+	}
+	start() {
+		this._context2d && (this._context2d.textAlign = "start", this._renderId === 0 && this.renderView());
+	}
+	stop() {
+		this._renderId !== 0 && (cancelAnimationFrame(this._renderId), this._renderId = 0), this.clear();
+	}
+	renderView = () => {
+		if (this._context2d) {
+			this.clear();
+			for (let e of this._world.elements) this._context2d.font = e.font, this._settings.debug && (this._context2d.fillStyle = "#ff0000", this._context2d.fillRect(e.positionX, e.positionY - e.height, e.width, e.height)), this._context2d.fillStyle = e.color, this._context2d.fillText(e.text, e.positionX, e.positionY);
+			this._renderId = requestAnimationFrame(this.renderView);
+		}
+	};
+}, n = class {
+	_positionX;
+	_positionY;
+	_maxAccelerationX;
+	_width;
+	_height;
+	_text;
+	_fontSize;
+	_textDirection;
+	_accelerateId = void 0;
+	_breakDownId = void 0;
+	_accelerationX = 0;
+	_accelerationY = 0;
+	_velocityX = 0;
+	_velocityY = 0;
+	_acceleration = 0;
+	_boundingBox;
+	_font;
+	_color;
+	constructor(e, t, n, r, i, a, o, s, c) {
+		this._positionX = e, this._positionY = t, this._maxAccelerationX = n, this._width = r, this._height = i, this._text = a, this._fontSize = o, this._textDirection = s, this._acceleration = 1 / this._fontSize, this._boundingBox = this.calculateBoundingBox(), this._font = `${o}pt ${c.font}`, this._color = c.color;
+	}
+	get width() {
+		return this._width;
+	}
+	get height() {
+		return this._height;
+	}
+	get positionX() {
+		return this._positionX;
+	}
+	set positionX(e) {
+		this._positionX = e;
+	}
+	get positionY() {
+		return this._positionY;
+	}
+	set positionY(e) {
+		this._positionY = e;
+	}
+	get boundingBox() {
+		return this._boundingBox;
+	}
+	set boundingBox(e) {
+		this._boundingBox = e;
+	}
+	get accelerationX() {
+		return this._accelerationX;
+	}
+	get fontSize() {
+		return this._fontSize;
+	}
+	get font() {
+		return this._font;
+	}
+	get color() {
+		return this._color;
+	}
+	get text() {
+		return this._text;
+	}
+	isCollidingWithBorder(e, t) {
+		if (e < 0) {
+			if (this._boundingBox.right < 0) return !0;
+		} else if (this._boundingBox.left > t) return !0;
+		return !1;
+	}
+	calculateBoundingBox() {
+		return {
+			top: this._positionY - this._height,
+			right: this._positionX + this._width,
+			bottom: this._positionY,
+			left: this._positionX
+		};
+	}
+	accelerate() {
+		this._accelerationX += this._acceleration * this._textDirection.x, Math.abs(this._accelerationX) < Math.abs(this._maxAccelerationX) ? this._accelerateId = window.setTimeout(() => this.accelerate(), 40) : (this._accelerationX = this._maxAccelerationX, this._accelerateId = void 0);
+	}
+	breakDown() {
+		this._accelerationX += .1 * this._textDirection.x, Math.abs(this._accelerationX) > Math.abs(this._maxAccelerationX) ? this._breakDownId = window.setTimeout(() => this.breakDown(), 40) : (this._accelerationX = this._maxAccelerationX, this._breakDownId = void 0, this._accelerateId = void 0);
+	}
+	boostUpByCollision = (e) => {
+		this._accelerationX += (e.accelerationX - this._accelerationX) * (e.fontSize / this._fontSize), clearTimeout(this._accelerateId), clearTimeout(this._breakDownId), this.breakDown();
+	};
+	breakDownByCollision = (e) => {
+		this._accelerationX -= this._accelerationX * (e.fontSize / this._fontSize), clearTimeout(this._accelerateId), clearTimeout(this._breakDownId), this.accelerate();
+	};
+	start() {
+		this.accelerate();
+	}
+	move() {
+		this._velocityX = this._accelerationX, this._velocityY = this._accelerationY, this._positionX += this._velocityX, this._positionY += this._velocityY, this._boundingBox = this.calculateBoundingBox();
+	}
+}, r = class {
+	_settings;
+	_textDirection;
+	_width;
+	_height;
+	_world;
+	_view;
+	_texts;
+	_textId = void 0;
+	_isRunning = !1;
+	_minFontSize = 16;
+	_maxFontSize = 20;
+	_marginTop;
+	_marginBottom;
+	_maxTexts;
+	constructor(e, t, n, r, i, a, o) {
+		this._settings = e, this._textDirection = t, this._width = n, this._height = r, this._world = i, this._view = a, this._texts = o, this._marginTop = this._settings.marginTop, this._marginBottom = this._settings.marginBottom, this._maxTexts = this._settings.maxTexts, this.updateFontSizes();
+	}
+	addText() {
+		if (!this._isRunning) return;
+		if (this._world.elements.length >= this._maxTexts) {
+			this._textId = this.randomSetTimeout(() => this.addText(), 1e3, 2500);
+			return;
+		}
+		let e = this.random(this._minFontSize, this._maxFontSize), t = this._texts[this.random(this._texts.length)], r = this.random(1, this._settings.maxAcceleration + 1) * this._textDirection.x;
+		this._view.setFontSize(e);
+		let i = this._view.measureText(t), a = new n(this._textDirection.x < 0 ? this._width : -i, this.random(this._marginTop, this._height - this._marginBottom - this._marginTop), r, i, e, t, e, this._textDirection, this._settings);
+		this._world.addElement(a), a.start(), this._textId = this.randomSetTimeout(() => this.addText(), 1e3, 2500);
+	}
+	resize(e, t) {
+		this._width = e, this._height = t, this.updateFontSizes();
+	}
+	start() {
+		this._isRunning || (this._isRunning = !0, this.addText());
+	}
+	stop() {
+		this._isRunning = !1, this._textId !== void 0 && (window.clearTimeout(this._textId), this._textId = void 0);
+	}
+	updateFontSizes() {
+		typeof window < "u" && (this._minFontSize = window.innerWidth <= 800 ? 12 : 16, this._maxFontSize = window.innerWidth <= 800 ? 16 : 20);
+	}
+	random(e, t) {
+		return t === void 0 ? Math.floor(Math.random() * e) : e + Math.floor(Math.random() * (t - e + 1));
+	}
+	randomSetTimeout(e, t, n) {
+		return window.setTimeout(() => e(), this.random(t, n));
+	}
+}, i = {
+	width: "100%",
+	height: "200px",
+	maxTexts: 15,
+	maxAcceleration: 15,
+	marginTop: 0,
+	marginBottom: 0,
+	texts: [
+		"Add",
+		"your",
+		"own",
+		"texts",
+		"here"
+	],
+	color: "#333",
+	background: "rgba(255, 255, 255, 1)",
+	font: "sans-serif",
+	debug: !1
+};
+function a(e) {
+	let t = { ...i };
+	return typeof e.maxTexts == "number" && e.maxTexts > 0 ? t.maxTexts = Math.floor(e.maxTexts) : e.maxTexts !== void 0 && console.warn(`[textflow] Invalid maxTexts "${e.maxTexts}". Using default: ${i.maxTexts}`), typeof e.maxAcceleration == "number" && e.maxAcceleration > 0 && (t.maxAcceleration = e.maxAcceleration), typeof e.marginTop == "number" && e.marginTop >= 0 && (t.marginTop = e.marginTop), typeof e.marginBottom == "number" && e.marginBottom >= 0 && (t.marginBottom = e.marginBottom), typeof e.font == "string" && e.font.trim() !== "" && (t.font = e.font), typeof e.color == "string" && e.color.trim() !== "" && (t.color = e.color), typeof e.background == "string" && e.background.trim() !== "" && (t.background = e.background), e.debug !== void 0 && (t.debug = !!e.debug), t;
+}
+//#endregion
+//#region src/directions.ts
+var o = {
+	none: {
+		x: 0,
+		y: 0
+	},
+	north: {
+		x: 0,
+		y: -1
+	},
+	northEast: {
+		x: 1,
+		y: -1
+	},
+	east: {
+		x: 1,
+		y: 0
+	},
+	southEast: {
+		x: 1,
+		y: 1
+	},
+	south: {
+		x: 0,
+		y: 1
+	},
+	southWest: {
+		x: -1,
+		y: 1
+	},
+	west: {
+		x: -1,
+		y: 0
+	},
+	northWest: {
+		x: -1,
+		y: -1
+	}
+}, s = Object.values(o);
+function c(e = s) {
+	return e[Math.floor(Math.random() * e.length)];
+}
+//#endregion
+//#region src/index.ts
+var l = class extends HTMLElement {
+	active = !1;
+	resizeObserver = null;
+	world;
+	view;
+	textWriter;
+	animationFrameId = null;
+	connectedCallback() {
+		this.innerHTML = "\n            <div class=\"slider-container\">\n                <canvas class=\"physics-canvas\"></canvas>\n            </div>\n        ";
+		let n = this.querySelector(".physics-canvas"), s = n.getContext("2d");
+		if (!s) {
+			console.error("Could not get context2d");
+			return;
+		}
+		let l = this.dataset.settings, u = a(l ? JSON.parse(l) : i), d = this.dataset.texts, f = d ? JSON.parse(d) : u.texts, p = c([o.east, o.west]);
+		this.world = new e(p), this.view = new t(u, this, n, s, this.world), this.textWriter = new r(u, p, this.offsetWidth, this.offsetHeight, this.world, this.view, f), this.startLoop(), document.addEventListener("visibilitychange", this.visibilityChange), this.resizeObserver = new ResizeObserver(() => {
+			this.resize();
+		}), this.resizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		this.stopLoop(), document.removeEventListener("visibilitychange", this.visibilityChange), this.resizeObserver && this.resizeObserver.disconnect();
+	}
+	loop = () => {
+		this.active && (this.animationFrameId = window.requestAnimationFrame(this.loop));
+	};
+	startLoop = () => {
+		this.active || (this.view.start(), this.world.start(), this.textWriter.start(), this.active = !0, this.animationFrameId = window.requestAnimationFrame(this.loop));
+	};
+	stopLoop() {
+		this.active && (this.view.stop(), this.world.stop(), this.textWriter.stop(), this.active = !1, this.animationFrameId &&= (window.cancelAnimationFrame(this.animationFrameId), null));
+	}
+	resize() {
+		this.view.resize(), this.world.resize(this.offsetWidth), this.textWriter.resize(this.offsetWidth, this.offsetHeight);
+	}
+	visibilityChange = () => {
+		document.hidden ? this.stopLoop() : this.startLoop();
+	};
+};
+function u(e = "textflow-container") {
+	typeof window < "u" && !customElements.get(e) && customElements.define(e, l);
+}
+//#endregion
+export { l as TextFlowElement, u as registerTextFlowSlider };

package/dist/textflow.umd.js

@@ -0,0 +1,5 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.TextFlow={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class{_textDirection;updateId=void 0;_isRunning=!1;_elements=[];_width=0;constructor(e){this._textDirection=e}get elements(){return this._elements}addElement(e){this._elements.push(e)}resize(e){this._width=e}start(){this._isRunning||(this._isRunning=!0,this.updateWorld())}stop(){this._isRunning=!1,this.updateId!==void 0&&(window.clearTimeout(this.updateId),this.updateId=void 0)}areObjectsColliding(e,t){let n=e.boundingBox.left>t.boundingBox.right||t.boundingBox.left>e.boundingBox.right,r=e.boundingBox.top>t.boundingBox.bottom||t.boundingBox.top>e.boundingBox.bottom;return!(n||r)}getCollisionAxis(e,t){let n=[e.positionX,e.positionX+e.width,t.positionX,t.positionX+t.width],r=[e.positionY,e.positionY+e.height,t.positionY,t.positionY+t.height],i=(e,t)=>e-t;return n.sort(i),r.sort(i),n[2]-n[1]<r[2]-r[1]?`x`:`y`}handleCollision(e,t){this.getCollisionAxis(e,t)===`x`?this.handleXCollision(e,t):this.handleYCollision(e,t)}handleXCollision(e,t){if(this._textDirection.x===0)return;let n=e.boundingBox.left<t.boundingBox.left,r=n?e:t,i=n?t:e;this._textDirection.x<0?(r.boostUpByCollision(i),i.breakDownByCollision(r)):(i.boostUpByCollision(r),r.breakDownByCollision(i))}handleYCollision(e,t){if(this._textDirection.y===0)return;let n=e.boundingBox.top<t.boundingBox.top,r=n?e:t,i=n?t:e;this._textDirection.y<0?(r.boostUpByCollision(i),i.breakDownByCollision(r)):(i.boostUpByCollision(r),r.breakDownByCollision(i))}detectCollisions(){for(let e=0;e<this._elements.length;e++){let t=this._elements[e];for(let n=e+1;n<this._elements.length;n++){let e=this._elements[n];this.areObjectsColliding(t,e)&&this.handleCollision(t,e)}}}updateElements(){for(let e=this._elements.length-1;e>=0;e--){let t=this._elements[e];t.move(),t.isCollidingWithBorder(this._textDirection.x,this._width)&&this._elements.splice(e,1)}}updateWorld(){this._isRunning&&(this.detectCollisions(),this.updateElements(),this.updateId=window.setTimeout(()=>this.updateWorld(),1e3/60))}},n=class{_settings;_target;_canvas;_context2d;_world;_renderId=0;constructor(e,t,n,r,i){this._settings=e,this._target=t,this._canvas=n,this._context2d=r,this._world=i,this._target.style.display=`block`,this._target.style.width=this._settings.width,this._target.style.height=this._settings.height,this._target.style.background=this._settings.background}setFontSize(e){this._context2d.font=`${e}pt ${this._settings.font}`}measureText(e){return this._context2d.measureText(e).width}resize(){let e=typeof window<`u`&&window.devicePixelRatio||1;this._canvas.width=this._target.clientWidth*e,this._canvas.height=this._target.clientHeight*e,this._canvas.style.width=`${this._target.clientWidth}px`,this._canvas.style.height=`${this._target.clientHeight}px`,this._context2d.scale(e,e)}clear(){if(!this._context2d)return;let e=this._context2d.fillStyle;this._context2d.fillStyle=this._settings.debug?`rgba(255, 255, 0, 1)`:this._settings.background,this._context2d.fillRect(0,0,this._target.clientWidth,this._target.clientHeight),this._context2d.fillStyle=e}start(){this._context2d&&(this._context2d.textAlign=`start`,this._renderId===0&&this.renderView())}stop(){this._renderId!==0&&(cancelAnimationFrame(this._renderId),this._renderId=0),this.clear()}renderView=()=>{if(this._context2d){this.clear();for(let e of this._world.elements)this._context2d.font=e.font,this._settings.debug&&(this._context2d.fillStyle=`#ff0000`,this._context2d.fillRect(e.positionX,e.positionY-e.height,e.width,e.height)),this._context2d.fillStyle=e.color,this._context2d.fillText(e.text,e.positionX,e.positionY);this._renderId=requestAnimationFrame(this.renderView)}}},r=class{_positionX;_positionY;_maxAccelerationX;_width;_height;_text;_fontSize;_textDirection;_accelerateId=void 0;_breakDownId=void 0;_accelerationX=0;_accelerationY=0;_velocityX=0;_velocityY=0;_acceleration=0;_boundingBox;_font;_color;constructor(e,t,n,r,i,a,o,s,c){this._positionX=e,this._positionY=t,this._maxAccelerationX=n,this._width=r,this._height=i,this._text=a,this._fontSize=o,this._textDirection=s,this._acceleration=1/this._fontSize,this._boundingBox=this.calculateBoundingBox(),this._font=`${o}pt ${c.font}`,this._color=c.color}get width(){return this._width}get height(){return this._height}get positionX(){return this._positionX}set positionX(e){this._positionX=e}get positionY(){return this._positionY}set positionY(e){this._positionY=e}get boundingBox(){return this._boundingBox}set boundingBox(e){this._boundingBox=e}get accelerationX(){return this._accelerationX}get fontSize(){return this._fontSize}get font(){return this._font}get color(){return this._color}get text(){return this._text}isCollidingWithBorder(e,t){if(e<0){if(this._boundingBox.right<0)return!0}else if(this._boundingBox.left>t)return!0;return!1}calculateBoundingBox(){return{top:this._positionY-this._height,right:this._positionX+this._width,bottom:this._positionY,left:this._positionX}}accelerate(){this._accelerationX+=this._acceleration*this._textDirection.x,Math.abs(this._accelerationX)<Math.abs(this._maxAccelerationX)?this._accelerateId=window.setTimeout(()=>this.accelerate(),40):(this._accelerationX=this._maxAccelerationX,this._accelerateId=void 0)}breakDown(){this._accelerationX+=.1*this._textDirection.x,Math.abs(this._accelerationX)>Math.abs(this._maxAccelerationX)?this._breakDownId=window.setTimeout(()=>this.breakDown(),40):(this._accelerationX=this._maxAccelerationX,this._breakDownId=void 0,this._accelerateId=void 0)}boostUpByCollision=e=>{this._accelerationX+=(e.accelerationX-this._accelerationX)*(e.fontSize/this._fontSize),clearTimeout(this._accelerateId),clearTimeout(this._breakDownId),this.breakDown()};breakDownByCollision=e=>{this._accelerationX-=this._accelerationX*(e.fontSize/this._fontSize),clearTimeout(this._accelerateId),clearTimeout(this._breakDownId),this.accelerate()};start(){this.accelerate()}move(){this._velocityX=this._accelerationX,this._velocityY=this._accelerationY,this._positionX+=this._velocityX,this._positionY+=this._velocityY,this._boundingBox=this.calculateBoundingBox()}},i=class{_settings;_textDirection;_width;_height;_world;_view;_texts;_textId=void 0;_isRunning=!1;_minFontSize=16;_maxFontSize=20;_marginTop;_marginBottom;_maxTexts;constructor(e,t,n,r,i,a,o){this._settings=e,this._textDirection=t,this._width=n,this._height=r,this._world=i,this._view=a,this._texts=o,this._marginTop=this._settings.marginTop,this._marginBottom=this._settings.marginBottom,this._maxTexts=this._settings.maxTexts,this.updateFontSizes()}addText(){if(!this._isRunning)return;if(this._world.elements.length>=this._maxTexts){this._textId=this.randomSetTimeout(()=>this.addText(),1e3,2500);return}let e=this.random(this._minFontSize,this._maxFontSize),t=this._texts[this.random(this._texts.length)],n=this.random(1,this._settings.maxAcceleration+1)*this._textDirection.x;this._view.setFontSize(e);let i=this._view.measureText(t),a=new r(this._textDirection.x<0?this._width:-i,this.random(this._marginTop,this._height-this._marginBottom-this._marginTop),n,i,e,t,e,this._textDirection,this._settings);this._world.addElement(a),a.start(),this._textId=this.randomSetTimeout(()=>this.addText(),1e3,2500)}resize(e,t){this._width=e,this._height=t,this.updateFontSizes()}start(){this._isRunning||(this._isRunning=!0,this.addText())}stop(){this._isRunning=!1,this._textId!==void 0&&(window.clearTimeout(this._textId),this._textId=void 0)}updateFontSizes(){typeof window<`u`&&(this._minFontSize=window.innerWidth<=800?12:16,this._maxFontSize=window.innerWidth<=800?16:20)}random(e,t){return t===void 0?Math.floor(Math.random()*e):e+Math.floor(Math.random()*(t-e+1))}randomSetTimeout(e,t,n){return window.setTimeout(()=>e(),this.random(t,n))}},a={width:`100%`,height:`200px`,maxTexts:15,maxAcceleration:15,marginTop:0,marginBottom:0,texts:[`Add`,`your`,`own`,`texts`,`here`],color:`#333`,background:`rgba(255, 255, 255, 1)`,font:`sans-serif`,debug:!1};function o(e){let t={...a};return typeof e.maxTexts==`number`&&e.maxTexts>0?t.maxTexts=Math.floor(e.maxTexts):e.maxTexts!==void 0&&console.warn(`[textflow] Invalid maxTexts "${e.maxTexts}". Using default: ${a.maxTexts}`),typeof e.maxAcceleration==`number`&&e.maxAcceleration>0&&(t.maxAcceleration=e.maxAcceleration),typeof e.marginTop==`number`&&e.marginTop>=0&&(t.marginTop=e.marginTop),typeof e.marginBottom==`number`&&e.marginBottom>=0&&(t.marginBottom=e.marginBottom),typeof e.font==`string`&&e.font.trim()!==``&&(t.font=e.font),typeof e.color==`string`&&e.color.trim()!==``&&(t.color=e.color),typeof e.background==`string`&&e.background.trim()!==``&&(t.background=e.background),e.debug!==void 0&&(t.debug=!!e.debug),t}var s={none:{x:0,y:0},north:{x:0,y:-1},northEast:{x:1,y:-1},east:{x:1,y:0},southEast:{x:1,y:1},south:{x:0,y:1},southWest:{x:-1,y:1},west:{x:-1,y:0},northWest:{x:-1,y:-1}},c=Object.values(s);function l(e=c){return e[Math.floor(Math.random()*e.length)]}var u=class extends HTMLElement{active=!1;resizeObserver=null;world;view;textWriter;animationFrameId=null;connectedCallback(){this.innerHTML=`
+            <div class="slider-container">
+                <canvas class="physics-canvas"></canvas>
+            </div>
+        `;let e=this.querySelector(`.physics-canvas`),r=e.getContext(`2d`);if(!r){console.error(`Could not get context2d`);return}let c=this.dataset.settings,u=o(c?JSON.parse(c):a),d=this.dataset.texts,f=d?JSON.parse(d):u.texts,p=l([s.east,s.west]);this.world=new t(p),this.view=new n(u,this,e,r,this.world),this.textWriter=new i(u,p,this.offsetWidth,this.offsetHeight,this.world,this.view,f),this.startLoop(),document.addEventListener(`visibilitychange`,this.visibilityChange),this.resizeObserver=new ResizeObserver(()=>{this.resize()}),this.resizeObserver.observe(this)}disconnectedCallback(){this.stopLoop(),document.removeEventListener(`visibilitychange`,this.visibilityChange),this.resizeObserver&&this.resizeObserver.disconnect()}loop=()=>{this.active&&(this.animationFrameId=window.requestAnimationFrame(this.loop))};startLoop=()=>{this.active||(this.view.start(),this.world.start(),this.textWriter.start(),this.active=!0,this.animationFrameId=window.requestAnimationFrame(this.loop))};stopLoop(){this.active&&(this.view.stop(),this.world.stop(),this.textWriter.stop(),this.active=!1,this.animationFrameId&&=(window.cancelAnimationFrame(this.animationFrameId),null))}resize(){this.view.resize(),this.world.resize(this.offsetWidth),this.textWriter.resize(this.offsetWidth,this.offsetHeight)}visibilityChange=()=>{document.hidden?this.stopLoop():this.startLoop()}};function d(e=`textflow-container`){typeof window<`u`&&!customElements.get(e)&&customElements.define(e,u)}e.TextFlowElement=u,e.registerTextFlowSlider=d});

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@khesira/textflow",
+  "version": "1.0.0",
+  "description": "A framework agnostic canvas physics text slider",
+  "type": "module",
+  "main": "./dist/textflow.umd.cjs",
+  "module": "./dist/textflow.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/textflow.es.js",
+      "require": "./dist/textflow.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build"
+  }
+}