jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rename

This commit is contained in:
Orion Reed 2024-12-07 13:54:55 -05:00
parent ff14bc981d
commit cc33fca454
6 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/__tests__/TransformDOMRect.test.ts → src/__tests__/DOMRectTransform.test.ts
View File

@ -1,5 +1,5 @@
import { expect, test, describe } from 'bun:test';
import { TransformDOMRect, TransformDOMRectReadonly } from '../common/TransformDOMRect';
import { DOMRectTransform, DOMRectTransformReadonly } from '../common/DOMRectTransform';
import { Point } from '../common/types';
// Helper for comparing points with floating point values
@ -10,7 +10,7 @@ const expectPointClose = (actual: Point, expected: Point) => {
describe('TransformDOMRect', () => {
test('constructor initializes with default values', () => {
const rect = new TransformDOMRect();
const rect = new DOMRectTransform();
expect(rect.x).toBe(0);
expect(rect.y).toBe(0);
expect(rect.width).toBe(0);
@ -19,7 +19,7 @@ describe('TransformDOMRect', () => {
});
test('constructor initializes with provided values', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 10,
y: 20,
width: 100,
@ -34,7 +34,7 @@ describe('TransformDOMRect', () => {
});
test('DOMRect properties are calculated correctly', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 10,
y: 20,
width: 100,
@ -47,7 +47,7 @@ describe('TransformDOMRect', () => {
});
test('vertices returns correct local space corners', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
width: 100,
height: 50,
});
@ -60,7 +60,7 @@ describe('TransformDOMRect', () => {
});
test('coordinate space conversion with rotation', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 10,
y: 20,
width: 100,
@ -76,7 +76,7 @@ describe('TransformDOMRect', () => {
});
test('getBounds returns correct bounding box after rotation', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 0,
y: 0,
width: 100,
@ -90,7 +90,7 @@ describe('TransformDOMRect', () => {
});
test('setters update matrices correctly', () => {
const rect = new TransformDOMRect();
const rect = new DOMRectTransform();
rect.x = 10;
rect.y = 20;
rect.width = 100;
@ -105,7 +105,7 @@ describe('TransformDOMRect', () => {
});
test('coordinate transformations with rotation and translation', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 200,
@ -129,7 +129,7 @@ describe('TransformDOMRect', () => {
describe('corner', () => {
test('setTopLeft with local space coordinates', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 200,
@ -145,7 +145,7 @@ describe('TransformDOMRect', () => {
});
test('setTopRight with local space coordinates', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 200,
@ -161,7 +161,7 @@ describe('TransformDOMRect', () => {
});
test('setBottomRight with local space coordinates', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 200,
@ -177,7 +177,7 @@ describe('TransformDOMRect', () => {
});
test('setBottomLeft with local space coordinates', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 200,
@ -193,7 +193,7 @@ describe('TransformDOMRect', () => {
});
test('corner setters with rotation', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 200,
@ -216,7 +216,7 @@ describe('TransformDOMRect', () => {
});
test('setBottomRight works with upside down rotation', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 200,
@ -235,7 +235,7 @@ describe('TransformDOMRect', () => {
});
test('resizing from corners keeps the opposite corner fixed without rotation', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 200,
@ -253,7 +253,7 @@ describe('TransformDOMRect', () => {
});
test('resizing from corners keeps the opposite corner fixed with rotation', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 200,
@ -285,7 +285,7 @@ describe('TransformDOMRect', () => {
describe('point conversion with rotation', () => {
test('converts points correctly with 45-degree rotation', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 100,
@ -309,7 +309,7 @@ describe('TransformDOMRect', () => {
});
test('maintains relative positions through multiple transformations', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 100,
@ -363,7 +363,7 @@ describe('TransformDOMRect', () => {
];
testRotations.forEach((rotation) => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 100,
@ -393,7 +393,7 @@ describe('TransformDOMRect', () => {
});
test('maintains aspect ratio through transformations', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 100,
y: 100,
width: 200,
@ -422,7 +422,7 @@ describe('TransformDOMRect', () => {
describe('TransformDOMRectReadonly', () => {
test('prevents modifications through setters', () => {
const rect = new TransformDOMRectReadonly({
const rect = new DOMRectTransformReadonly({
x: 10,
y: 20,
width: 100,
@ -444,7 +444,7 @@ describe('TransformDOMRectReadonly', () => {
});
test('allows reading properties', () => {
const rect = new TransformDOMRectReadonly({
const rect = new DOMRectTransformReadonly({
x: 10,
y: 20,
width: 100,
@ -460,7 +460,7 @@ describe('TransformDOMRectReadonly', () => {
describe('Performance Tests', () => {
test('matrix operations performance', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 10,
y: 20,
width: 100,
@ -479,7 +479,7 @@ describe('Performance Tests', () => {
});
test('vertices calculation performance', () => {
const rect = new TransformDOMRect({
const rect = new DOMRectTransform({
x: 10,
y: 20,
width: 100,

10
src/common/TransformDOMRect.ts → src/common/DOMRectTransform.ts
View File

@ -1,7 +1,7 @@
import { Point } from './types';
import { Matrix } from './Matrix';
interface TransformDOMRectInit {
interface DOMRectTransformInit {
height?: number;
width?: number;
x?: number;
@ -21,7 +21,7 @@ interface TransformDOMRectInit {
* - Positive `y` values extend **downward**.
* - Rotation is **clockwise**, in **radians**, around the rectangle's **center**.
*/
export class TransformDOMRect implements DOMRect {
export class DOMRectTransform implements DOMRect {
// Private properties for position, size, rotation, and origins
private _x: number; // X-coordinate of the top-left corner
private _y: number; // Y-coordinate of the top-left corner
@ -41,7 +41,7 @@ export class TransformDOMRect implements DOMRect {
* Constructs a new `TransformDOMRect`.
* @param init - Optional initial values.
*/
constructor(init: TransformDOMRectInit = {}) {
constructor(init: DOMRectTransformInit = {}) {
this._x = init.x ?? 0;
this._y = init.y ?? 0;
this._width = init.width ?? 0;
@ -460,8 +460,8 @@ export class TransformDOMRect implements DOMRect {
* A **read-only** version of `TransformDOMRect` that prevents modification of position,
* size, and rotation properties.
*/
export class TransformDOMRectReadonly extends TransformDOMRect {
constructor(init: TransformDOMRectInit = {}) {
export class DOMRectTransformReadonly extends DOMRectTransform {
constructor(init: DOMRectTransformInit = {}) {
super(init);
}

8
src/common/TransformEvent.ts
View File

@ -1,11 +1,11 @@
import type { TransformDOMRectReadonly } from './TransformDOMRect';
import type { DOMRectTransformReadonly } from './DOMRectTransform';
// TODO: expose previous and current rects
export class TransformEvent extends Event {
readonly #current: TransformDOMRectReadonly;
readonly #previous: TransformDOMRectReadonly;
readonly #current: DOMRectTransformReadonly;
readonly #previous: DOMRectTransformReadonly;
constructor(current: TransformDOMRectReadonly, previous?: TransformDOMRectReadonly) {
constructor(current: DOMRectTransformReadonly, previous?: DOMRectTransformReadonly) {
super('transform', { cancelable: true, bubbles: true });
this.#current = current;
this.#previous = previous ?? current;

4
src/common/collision.ts
View File

@ -1,4 +1,4 @@
import { TransformDOMRect } from './TransformDOMRect';
import { DOMRectTransform } from './DOMRectTransform';
import { Point } from './types';
const sign = (value: number): -1 | 1 => (value < 0 ? -1 : 1);
@ -59,7 +59,7 @@ export function aabbIntersection(rect1: DOMRect, rect2: DOMRect, proximity = 0)
);
}
export function collisionDetection(rect1: TransformDOMRect, rect2: TransformDOMRect) {
export function collisionDetection(rect1: DOMRectTransform, rect2: DOMRectTransform) {
// Performance optimization to test if
if (!aabbIntersection(rect1, rect2)) return false;
}

8
src/folk-rope.ts
View File

@ -2,7 +2,7 @@
import { Vector } from './common/Vector.ts';
import type { Point } from './common/types.ts';
import { TransformDOMRect } from './common/TransformDOMRect.ts';
import { DOMRectTransform } from './common/DOMRectTransform.ts';
import { FolkBaseConnection } from './folk-base-connection.ts';
const lerp = (first: number, second: number, percentage: number) => first + (second - first) * percentage;
@ -120,11 +120,11 @@ export class FolkRope extends FolkBaseConnection {
this.draw();
};
override render(sourceRect: TransformDOMRect | DOMRectReadOnly, targetRect: TransformDOMRect | DOMRectReadOnly) {
override render(sourceRect: DOMRectTransform | DOMRectReadOnly, targetRect: DOMRectTransform | DOMRectReadOnly) {
let source: Point;
let target: Point;
if (sourceRect instanceof TransformDOMRect) {
if (sourceRect instanceof DOMRectTransform) {
source = Vector.lerp(sourceRect.bottomRight, sourceRect.bottomLeft, 0.5);
} else {
source = {
@ -133,7 +133,7 @@ export class FolkRope extends FolkBaseConnection {
};
}
if (targetRect instanceof TransformDOMRect) {
if (targetRect instanceof DOMRectTransform) {
target = Vector.lerp(targetRect.bottomRight, targetRect.bottomLeft, 0.5);
} else {
target = {

10
src/folk-shape.ts
View File

@ -1,7 +1,7 @@
import { css, html } from './common/tags';
import { ResizeObserverManager } from './common/resize-observer';
import { Point } from './common/types';
import { TransformDOMRect, TransformDOMRectReadonly } from './common/TransformDOMRect';
import { DOMRectTransform, DOMRectTransformReadonly } from './common/DOMRectTransform';
import { Vector } from './common/Vector';
import { getResizeCursorUrl, getRotateCursorUrl } from './common/cursors';
import { TransformEvent } from './common/TransformEvent';
@ -175,8 +175,8 @@ export class FolkShape extends HTMLElement {
#attrWidth: Dimension = 0;
#attrHeight: Dimension = 0;
#rect = new TransformDOMRect();
#previousRect = new TransformDOMRect();
#rect = new DOMRectTransform();
#previousRect = new DOMRectTransform();
// Used for rotation handling, would love a better way to do this that avoids this clutter.
#initialRotation = 0;
@ -276,7 +276,7 @@ export class FolkShape extends HTMLElement {
this.#rect.transformOrigin = { x: 0, y: 0 };
this.#rect.rotateOrigin = { x: 0.5, y: 0.5 };
this.#previousRect = new TransformDOMRect(this.#rect);
this.#previousRect = new DOMRectTransform(this.#rect);
}
#isConnected = false;
@ -287,7 +287,7 @@ export class FolkShape extends HTMLElement {
}
getTransformDOMRectReadonly() {
return new TransformDOMRectReadonly(this.#rect);
return new DOMRectTransformReadonly(this.#rect);
}
getTransformDOMRect() {
return this.#rect;