@khesira/textflow 1.0.2 → 1.0.4

package/README.md

@@ -95,18 +95,19 @@ const settings: Settings = {
 
 ## Configuration (Settings)
 
-| Property | Type | Default Value | Description |
-| :--- | :--- | :--- | :--- |
-| `width` | `string` | `"100%"` | CSS width of the slider component (e.g., `"100%"`, `"400px"`). |
-| `height` | `string` | `"150px"` | CSS height of the slider component. |
-| `font` | `string` | `"sans-serif"` | Font family used inside the Canvas rendering context. |
-| `color` | `string` | `"#ffffff"` | Text color (accepts hex, rgb, rgba, or CSS color names). |
-| `background` | `string` | `"transparent"` | Background color of the canvas container. |
-| `maxTexts` | `number` | `10` | Maximum number of text elements allowed on screen simultaneously. |
-| `maxAcceleration` | `number` | `3` | Maximum velocity cap for the text particles. |
-| `marginTop` | `number` | `0` | Top boundary padding (in pixels) to restrict the spawn area. |
-| `marginBottom` | `number` | `0` | Bottom boundary padding (in pixels) to restrict the spawn area. |
-| `debug` | `boolean` | `false` | Enables red AABB bounding boxes and highlights the canvas clear zones. |
+| Property          | Type       | Default Value     | Description                                                            |
+|:------------------|:-----------|:------------------|:-----------------------------------------------------------------------|
+| `width`           | `string`   | `"100%"`          | CSS width of the slider component (e.g., `"100%"`, `"400px"`).         |
+| `height`          | `string`   | `"150px"`         | CSS height of the slider component.                                    |
+| `font`            | `string`   | `"sans-serif"`    | Font family used inside the Canvas rendering context.                  |
+| `color`           | `string`   | `"#ffffff"`       | Text color (accepts hex, rgb, rgba, or CSS color names).               |
+| `background`      | `string`   | `"transparent"`   | Background color of the canvas container.                              |
+| `maxTexts`        | `number`   | `10`              | Maximum number of text elements allowed on screen simultaneously.      |
+| `maxAcceleration` | `number`   | `3`               | Maximum velocity cap for the text particles.                           |
+| `headings`        | `string[]` | `['EAST','WEST']` | Flow directions of the texts picked randomly on each page load.        |
+| `marginTop`       | `number`   | `0`               | Top boundary padding (in pixels) to restrict the spawn area.           |
+| `marginBottom`    | `number`   | `0`               | Bottom boundary padding (in pixels) to restrict the spawn area.        |
+| `debug`           | `boolean`  | `false`           | Enables red AABB bounding boxes and highlights the canvas clear zones. |
 
 ## Architecture
 

package/dist/src/Direction.d.ts

@@ -0,0 +1,16 @@
+export type Heading = 'NORTH' | 'NORTHEAST' | 'EAST' | 'SOUTHEAST' | 'SOUTH' | 'SOUTHWEST' | 'WEST' | 'NORTHWEST' | 'NONE';
+export declare const VECTOR_MAPPING: Record<Heading, {
+    readonly x: number;
+    readonly y: number;
+}>;
+export declare class Direction {
+    readonly heading: Heading;
+    private constructor();
+    static from(heading: Heading): Direction;
+    static randomDirection(availableDirections?: readonly Heading[]): Direction;
+    get x(): number;
+    get y(): number;
+    get isVertical(): boolean;
+    get isHorizontal(): boolean;
+    get isDiagonal(): boolean;
+}

package/dist/src/TextElement.d.ts

@@ -1,9 +1,8 @@
 import { BoundingBox, Settings } from './types';
-import { Direction } from './directions';
+import { Direction } from './Direction';
 export declare class TextElement {
     private _positionX;
     private _positionY;
-    private readonly _maxAccelerationX;
     private readonly _width;
     private readonly _height;
     private readonly _text;
@@ -19,7 +18,8 @@ export declare class TextElement {
     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);
+    private readonly _maxAcceleration;
+    constructor(_positionX: number, _positionY: number, maxAcceleration: number, _width: number, _height: number, _text: string, _fontSize: number, _textDirection: Direction, _settings: Settings);
     get width(): number;
     get height(): number;
     get positionX(): number;
@@ -29,11 +29,13 @@ export declare class TextElement {
     get boundingBox(): BoundingBox;
     set boundingBox(value: BoundingBox);
     get accelerationX(): number;
+    get accelerationY(): number;
     get fontSize(): number;
     get font(): string;
     get color(): string;
     get text(): string;
-    isCollidingWithBorder(direction: number, width: number): boolean;
+    isCollidingWithBorderX(direction: number, width: number): boolean;
+    isCollidingWithBorderY(direction: number, height: number): boolean;
     private calculateBoundingBox;
     private accelerate;
     private breakDown;

package/dist/src/TextWriter.d.ts

@@ -1,7 +1,7 @@
 import { Settings } from './types';
 import { World } from './World';
 import { TextFlowView } from './TextFlowView';
-import { Direction } from './directions';
+import { Direction } from './Direction';
 export declare class TextWriter {
     private readonly _settings;
     private readonly _textDirection;

package/dist/src/World.d.ts

@@ -1,4 +1,4 @@
-import { Direction } from './directions';
+import { Direction } from './Direction';
 import { TextElement } from './TextElement';
 export declare class World {
     private readonly _textDirection;
@@ -6,10 +6,11 @@ export declare class World {
     private _isRunning;
     private _elements;
     private _width;
+    private _height;
     constructor(_textDirection: Direction);
     get elements(): TextElement[];
     addElement(element: TextElement): void;
-    resize(width: number): void;
+    resize(width: number, height: number): void;
     start(): void;
     stop(): void;
     private areObjectsColliding;

package/dist/src/types.d.ts

@@ -1,3 +1,8 @@
+import { Heading } from './Direction.ts';
+export declare enum CollisionAxis {
+    Horizontal = 0,
+    Vertical = 1
+}
 export interface BoundingBox {
     top: number;
     right: number;
@@ -9,6 +14,7 @@ export interface Settings {
     height: string;
     maxTexts: number;
     maxAcceleration: number;
+    headings: Heading[];
     marginTop: number;
     marginBottom: number;
     texts: string[];

package/dist/textflow.es.js

@@ -1,10 +1,13 @@
-//#region src/World.ts
-var e = class {
+//#region src/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e[e.Horizontal = 0] = "Horizontal", e[e.Vertical = 1] = "Vertical", e;
+}({}), t = class {
 	_textDirection;
 	updateId = void 0;
 	_isRunning = !1;
 	_elements = [];
 	_width = 0;
+	_height = 0;
 	constructor(e) {
 		this._textDirection = e;
 	}
@@ -14,8 +17,8 @@ var e = class {
 	addElement(e) {
 		this._elements.push(e);
 	}
-	resize(e) {
-		this._width = e;
+	resize(e, t) {
+		this._width = e, this._height = t;
 	}
 	start() {
 		this._isRunning || (this._isRunning = !0, this.updateWorld());
@@ -27,22 +30,29 @@ var e = class {
 		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,
+	getCollisionAxis(t, n) {
+		let r = [
 			t.positionX,
-			t.positionX + t.width
-		], r = [
-			e.positionY,
-			e.positionY + e.height,
+			t.positionX + t.width,
+			n.positionX,
+			n.positionX + n.width
+		], i = [
 			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);
+			t.positionY + t.height,
+			n.positionY,
+			n.positionY + n.height
+		], a = (e, t) => e - t;
+		return r.sort(a), i.sort(a), r[2] - r[1] < i[2] - i[1] ? e.Horizontal : e.Vertical;
+	}
+	handleCollision(t, n) {
+		switch (this.getCollisionAxis(t, n)) {
+			case e.Horizontal:
+				this.handleXCollision(t, n);
+				break;
+			case e.Vertical:
+				this.handleYCollision(t, n);
+				break;
+		}
 	}
 	handleXCollision(e, t) {
 		if (this._textDirection.x === 0) return;
@@ -66,13 +76,15 @@ var e = class {
 	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);
+			t.move();
+			let n = !1;
+			this._textDirection.x !== 0 && (n = t.isCollidingWithBorderX(this._textDirection.x, this._width)), !n && this._textDirection.y !== 0 && (n = t.isCollidingWithBorderY(this._textDirection.y, this._height)), n && this._elements.splice(e, 1);
 		}
 	}
 	updateWorld() {
 		this._isRunning && (this.detectCollisions(), this.updateElements(), this.updateId = window.setTimeout(() => this.updateWorld(), 1e3 / 60));
 	}
-}, t = class {
+}, n = class {
 	_settings;
 	_target;
 	_canvas;
@@ -110,10 +122,9 @@ var e = class {
 			this._renderId = requestAnimationFrame(this.renderView);
 		}
 	};
-}, n = class {
+}, r = class {
 	_positionX;
 	_positionY;
-	_maxAccelerationX;
 	_width;
 	_height;
 	_text;
@@ -129,8 +140,9 @@ var e = class {
 	_boundingBox;
 	_font;
 	_color;
+	_maxAcceleration;
 	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;
+		this._positionX = e, this._positionY = t, this._width = r, this._height = i, this._text = a, this._fontSize = o, this._textDirection = s, this._maxAcceleration = n, this._acceleration = 1 / this._fontSize, this._boundingBox = this.calculateBoundingBox(), this._font = `${o}pt ${c.font}`, this._color = c.color;
 	}
 	get width() {
 		return this._width;
@@ -159,6 +171,9 @@ var e = class {
 	get accelerationX() {
 		return this._accelerationX;
 	}
+	get accelerationY() {
+		return this._accelerationY;
+	}
 	get fontSize() {
 		return this._fontSize;
 	}
@@ -171,12 +186,18 @@ var e = class {
 	get text() {
 		return this._text;
 	}
-	isCollidingWithBorder(e, t) {
+	isCollidingWithBorderX(e, t) {
 		if (e < 0) {
 			if (this._boundingBox.right < 0) return !0;
 		} else if (this._boundingBox.left > t) return !0;
 		return !1;
 	}
+	isCollidingWithBorderY(e, t) {
+		if (e < 0) {
+			if (this._boundingBox.bottom < 0) return !0;
+		} else if (this._boundingBox.top > t) return !0;
+		return !1;
+	}
 	calculateBoundingBox() {
 		return {
 			top: this._positionY - this._height,
@@ -186,16 +207,16 @@ var e = class {
 		};
 	}
 	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);
+		this._accelerationX += this._acceleration * this._textDirection.x, this._accelerationY += this._acceleration * this._textDirection.y, Math.sqrt(this._accelerationX ** 2 + this._accelerationY ** 2) < this._maxAcceleration ? this._accelerateId = window.setTimeout(() => this.accelerate(), 40) : (this._accelerationX = this._maxAcceleration * this._textDirection.x, this._accelerationY = this._maxAcceleration * this._textDirection.y, 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);
+		this._accelerationX += .1 * this._textDirection.x, this._accelerationY += .1 * this._textDirection.y, Math.sqrt(this._accelerationX ** 2 + this._accelerationY ** 2) > this._maxAcceleration ? this._breakDownId = window.setTimeout(() => this.breakDown(), 40) : (this._accelerationX = this._maxAcceleration * this._textDirection.x, this._accelerationY = this._maxAcceleration * this._textDirection.y, 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();
+		this._textDirection.x !== 0 && (this._accelerationX += (e.accelerationX - this._accelerationX) * (e.fontSize / this._fontSize)), this._textDirection.y !== 0 && (this._accelerationY += (e.accelerationY - this._accelerationY) * (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();
+		this._textDirection.x !== 0 && (this._accelerationX -= this._accelerationX * (e.fontSize / this._fontSize)), this._textDirection.y !== 0 && (this._accelerationY -= this._accelerationY * (e.fontSize / this._fontSize)), clearTimeout(this._accelerateId), clearTimeout(this._breakDownId), this.accelerate();
 	};
 	start() {
 		this.accelerate();
@@ -203,7 +224,7 @@ var e = class {
 	move() {
 		this._velocityX = this._accelerationX, this._velocityY = this._accelerationY, this._positionX += this._velocityX, this._positionY += this._velocityY, this._boundingBox = this.calculateBoundingBox();
 	}
-}, r = class {
+}, i = class {
 	_settings;
 	_textDirection;
 	_width;
@@ -227,10 +248,12 @@ var e = class {
 			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;
+		let e = this.random(this._minFontSize, this._maxFontSize), t = this._texts[this.random(this._texts.length)];
 		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);
+		let n = this._view.measureText(t), i = this.random(1, this._settings.maxAcceleration + 1), a, o, s = this._textDirection.x, c = this._textDirection.y;
+		a = s > 0 ? -n : s < 0 ? this._width : this.random(0, this._width - n), o = c > 0 ? -e + this._marginTop : c < 0 ? this._height - this._marginBottom : this.random(this._marginTop, this._height - this._marginBottom - e), this._textDirection.isDiagonal && (Math.random() > .5 ? o = this.random(this._marginTop, this._height - this._marginBottom - e) : a = this.random(0, this._width - n));
+		let l = new r(a, o, i, n, e, t, e, this._textDirection, this._settings);
+		this._world.addElement(l), l.start(), this._textId = this.randomSetTimeout(() => this.addText(), 1e3, 2500);
 	}
 	resize(e, t) {
 		this._width = e, this._height = t, this.updateFontSizes();
@@ -250,71 +273,97 @@ var e = class {
 	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: {
+}, a = {
+	NORTH: {
 		x: 0,
 		y: -1
 	},
-	northEast: {
+	NORTHEAST: {
 		x: 1,
 		y: -1
 	},
-	east: {
+	EAST: {
 		x: 1,
 		y: 0
 	},
-	southEast: {
+	SOUTHEAST: {
 		x: 1,
 		y: 1
 	},
-	south: {
+	SOUTH: {
 		x: 0,
 		y: 1
 	},
-	southWest: {
+	SOUTHWEST: {
 		x: -1,
 		y: 1
 	},
-	west: {
+	WEST: {
 		x: -1,
 		y: 0
 	},
-	northWest: {
+	NORTHWEST: {
 		x: -1,
 		y: -1
+	},
+	NONE: {
+		x: 0,
+		y: 0
+	}
+}, o = class e {
+	heading;
+	constructor(e) {
+		this.heading = e;
+	}
+	static from(t) {
+		return new e(t);
+	}
+	static randomDirection(t = ["EAST", "WEST"]) {
+		let n = t[Math.floor(Math.random() * t.length)];
+		return e.from(n);
+	}
+	get x() {
+		return a[this.heading].x;
+	}
+	get y() {
+		return a[this.heading].y;
+	}
+	get isVertical() {
+		return this.x === 0 && this.y !== 0;
+	}
+	get isHorizontal() {
+		return this.y === 0 && this.x !== 0;
+	}
+	get isDiagonal() {
+		return this.x !== 0 && this.y !== 0;
+	}
+}, s = {
+	width: "100%",
+	height: "200px",
+	maxTexts: 15,
+	maxAcceleration: 15,
+	headings: ["EAST", "WEST"],
+	marginTop: 0,
+	marginBottom: 0,
+	texts: [
+		"Add",
+		"your",
+		"own",
+		"texts",
+		"here"
+	],
+	color: "#333",
+	background: "rgba(255, 255, 255, 1)",
+	font: "sans-serif",
+	debug: !1
+};
+function c(e) {
+	let t = { ...s };
+	if (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: ${s.maxTexts}`), typeof e.maxAcceleration == "number" && e.maxAcceleration > 0 && (t.maxAcceleration = e.maxAcceleration), Array.isArray(e.headings)) {
+		let n = e.headings.filter((e) => typeof e == "string" && e.toUpperCase() in a);
+		n.length > 0 && (t.headings = n);
 	}
-}, s = Object.values(o);
-function c(e = s) {
-	return e[Math.floor(Math.random() * e.length)];
+	return 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/index.ts
@@ -327,13 +376,13 @@ var l = class extends HTMLElement {
 	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) {
+		let e = this.querySelector(".physics-canvas"), r = e.getContext("2d");
+		if (!r) {
 			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(() => {
+		let a = this.dataset.settings, l = c(a ? JSON.parse(a) : s), u = this.dataset.texts, d = u ? JSON.parse(u) : l.texts, f = o.randomDirection(l.headings);
+		this.world = new t(f), this.view = new n(l, this, e, r, this.world), this.textWriter = new i(l, f, this.offsetWidth, this.offsetHeight, this.world, this.view, d), this.startLoop(), document.addEventListener("visibilitychange", this.visibilityChange), this.resizeObserver = new ResizeObserver(() => {
 			this.resize();
 		}), this.resizeObserver.observe(this);
 	}
@@ -350,7 +399,7 @@ var l = class extends HTMLElement {
 		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);
+		this.view.resize(), this.world.resize(this.offsetWidth, this.offsetHeight), this.textWriter.resize(this.offsetWidth, this.offsetHeight);
 	}
 	visibilityChange = () => {
 		document.hidden ? this.stopLoop() : this.startLoop();

package/dist/textflow.umd.js

@@ -1,5 +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=`
+(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=function(e){return e[e.Horizontal=0]=`Horizontal`,e[e.Vertical=1]=`Vertical`,e}({}),n=class{_textDirection;updateId=void 0;_isRunning=!1;_elements=[];_width=0;_height=0;constructor(e){this._textDirection=e}get elements(){return this._elements}addElement(e){this._elements.push(e)}resize(e,t){this._width=e,this._height=t}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,n){let r=[e.positionX,e.positionX+e.width,n.positionX,n.positionX+n.width],i=[e.positionY,e.positionY+e.height,n.positionY,n.positionY+n.height],a=(e,t)=>e-t;return r.sort(a),i.sort(a),r[2]-r[1]<i[2]-i[1]?t.Horizontal:t.Vertical}handleCollision(e,n){switch(this.getCollisionAxis(e,n)){case t.Horizontal:this.handleXCollision(e,n);break;case t.Vertical:this.handleYCollision(e,n);break}}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();let n=!1;this._textDirection.x!==0&&(n=t.isCollidingWithBorderX(this._textDirection.x,this._width)),!n&&this._textDirection.y!==0&&(n=t.isCollidingWithBorderY(this._textDirection.y,this._height)),n&&this._elements.splice(e,1)}}updateWorld(){this._isRunning&&(this.detectCollisions(),this.updateElements(),this.updateId=window.setTimeout(()=>this.updateWorld(),1e3/60))}},r=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)}}},i=class{_positionX;_positionY;_width;_height;_text;_fontSize;_textDirection;_accelerateId=void 0;_breakDownId=void 0;_accelerationX=0;_accelerationY=0;_velocityX=0;_velocityY=0;_acceleration=0;_boundingBox;_font;_color;_maxAcceleration;constructor(e,t,n,r,i,a,o,s,c){this._positionX=e,this._positionY=t,this._width=r,this._height=i,this._text=a,this._fontSize=o,this._textDirection=s,this._maxAcceleration=n,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 accelerationY(){return this._accelerationY}get fontSize(){return this._fontSize}get font(){return this._font}get color(){return this._color}get text(){return this._text}isCollidingWithBorderX(e,t){if(e<0){if(this._boundingBox.right<0)return!0}else if(this._boundingBox.left>t)return!0;return!1}isCollidingWithBorderY(e,t){if(e<0){if(this._boundingBox.bottom<0)return!0}else if(this._boundingBox.top>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,this._accelerationY+=this._acceleration*this._textDirection.y,Math.sqrt(this._accelerationX**2+this._accelerationY**2)<this._maxAcceleration?this._accelerateId=window.setTimeout(()=>this.accelerate(),40):(this._accelerationX=this._maxAcceleration*this._textDirection.x,this._accelerationY=this._maxAcceleration*this._textDirection.y,this._accelerateId=void 0)}breakDown(){this._accelerationX+=.1*this._textDirection.x,this._accelerationY+=.1*this._textDirection.y,Math.sqrt(this._accelerationX**2+this._accelerationY**2)>this._maxAcceleration?this._breakDownId=window.setTimeout(()=>this.breakDown(),40):(this._accelerationX=this._maxAcceleration*this._textDirection.x,this._accelerationY=this._maxAcceleration*this._textDirection.y,this._breakDownId=void 0,this._accelerateId=void 0)}boostUpByCollision=e=>{this._textDirection.x!==0&&(this._accelerationX+=(e.accelerationX-this._accelerationX)*(e.fontSize/this._fontSize)),this._textDirection.y!==0&&(this._accelerationY+=(e.accelerationY-this._accelerationY)*(e.fontSize/this._fontSize)),clearTimeout(this._accelerateId),clearTimeout(this._breakDownId),this.breakDown()};breakDownByCollision=e=>{this._textDirection.x!==0&&(this._accelerationX-=this._accelerationX*(e.fontSize/this._fontSize)),this._textDirection.y!==0&&(this._accelerationY-=this._accelerationY*(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()}},a=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)];this._view.setFontSize(e);let n=this._view.measureText(t),r=this.random(1,this._settings.maxAcceleration+1),a,o,s=this._textDirection.x,c=this._textDirection.y;a=s>0?-n:s<0?this._width:this.random(0,this._width-n),o=c>0?-e+this._marginTop:c<0?this._height-this._marginBottom:this.random(this._marginTop,this._height-this._marginBottom-e),this._textDirection.isDiagonal&&(Math.random()>.5?o=this.random(this._marginTop,this._height-this._marginBottom-e):a=this.random(0,this._width-n));let l=new i(a,o,r,n,e,t,e,this._textDirection,this._settings);this._world.addElement(l),l.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))}},o={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},NONE:{x:0,y:0}},s=class e{heading;constructor(e){this.heading=e}static from(t){return new e(t)}static randomDirection(t=[`EAST`,`WEST`]){let n=t[Math.floor(Math.random()*t.length)];return e.from(n)}get x(){return o[this.heading].x}get y(){return o[this.heading].y}get isVertical(){return this.x===0&&this.y!==0}get isHorizontal(){return this.y===0&&this.x!==0}get isDiagonal(){return this.x!==0&&this.y!==0}},c={width:`100%`,height:`200px`,maxTexts:15,maxAcceleration:15,headings:[`EAST`,`WEST`],marginTop:0,marginBottom:0,texts:[`Add`,`your`,`own`,`texts`,`here`],color:`#333`,background:`rgba(255, 255, 255, 1)`,font:`sans-serif`,debug:!1};function l(e){let t={...c};if(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: ${c.maxTexts}`),typeof e.maxAcceleration==`number`&&e.maxAcceleration>0&&(t.maxAcceleration=e.maxAcceleration),Array.isArray(e.headings)){let n=e.headings.filter(e=>typeof e==`string`&&e.toUpperCase()in o);n.length>0&&(t.headings=n)}return 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 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});
+        `;let e=this.querySelector(`.physics-canvas`),t=e.getContext(`2d`);if(!t){console.error(`Could not get context2d`);return}let i=this.dataset.settings,o=l(i?JSON.parse(i):c),u=this.dataset.texts,d=u?JSON.parse(u):o.texts,f=s.randomDirection(o.headings);this.world=new n(f),this.view=new r(o,this,e,t,this.world),this.textWriter=new a(o,f,this.offsetWidth,this.offsetHeight,this.world,this.view,d),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.offsetHeight),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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khesira/textflow",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "MIT",
   "author": "Mika Jünger",
   "description": "A framework agnostic canvas physics text slider",

package/dist/src/directions.d.ts

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