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

fix shape edge case

This commit is contained in:
“chrisshank” 2024-12-07 13:21:29 -08:00
parent a655e21f45
commit 8fdcb3b3f7
3 changed files with 7 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/sticky-html-rope.html
View File

@ -36,7 +36,6 @@
</style>
</head>
<body>
<button id="wind">☁️</button>
<folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
<folk-shape id="box2" x="300" y="105" width="30" height="30"></folk-shape>
<folk-shape id="box3" x="200" y="150" width="30" height="30"></folk-shape>

29
src/folk-shape.ts
View File

@ -231,9 +231,10 @@ export class FolkShape extends HTMLElement {
set width(width: Dimension) {
if (width === 'auto') {
resizeObserver.observe(this, this.#onAutoResize);
} else if (this.#attrWidth === 'auto' && this.#attrHeight !== 'auto') {
resizeObserver.unobserve(this, this.#onAutoResize);
} else {
if (this.#attrWidth === 'auto' && this.#attrHeight !== 'auto') {
resizeObserver.unobserve(this, this.#onAutoResize);
}
this.#previousRect.width = this.#rect.width;
this.#rect.width = width;
}
@ -248,9 +249,10 @@ export class FolkShape extends HTMLElement {
set height(height: Dimension) {
if (height === 'auto') {
resizeObserver.observe(this, this.#onAutoResize);
} else if (this.#attrHeight === 'auto' && this.#attrWidth !== 'auto') {
resizeObserver.unobserve(this, this.#onAutoResize);
} else {
if (this.#attrHeight === 'auto' && this.#attrWidth !== 'auto') {
resizeObserver.unobserve(this, this.#onAutoResize);
}
this.#previousRect.height = this.#rect.height;
this.#rect.height = height;
}
@ -334,9 +336,6 @@ export class FolkShape extends HTMLElement {
const focusedElement = this.#shadow.activeElement;
const handle = focusedElement?.getAttribute('part') as Handle | null;
// Create synthetic mouse coordinates for keyboard events
let syntheticMouse: Point | null = null;
if (handle?.startsWith('resize')) {
const anyChange =
event.key === 'ArrowUp' ||
@ -348,22 +347,6 @@ export class FolkShape extends HTMLElement {
// Get the corner coordinates of the shape for the corresponding handle
const rect = this.#rect;
let vector: Point;
switch (event.key) {
case 'ArrowUp':
vector = { x: 0, y: -MOVEMENT_DELTA };
break;
case 'ArrowDown':
vector = { x: 0, y: MOVEMENT_DELTA };
break;
case 'ArrowLeft':
vector = { x: -MOVEMENT_DELTA, y: 0 };
break;
case 'ArrowRight':
vector = { x: MOVEMENT_DELTA, y: 0 };
break;
}
// Map handle names to corner points
const HANDLE_TO_CORNER: Record<string, Point> = {
'resize-top-left': rect.topLeft,

1
tsconfig.json
View File

@ -10,6 +10,7 @@
"allowImportingTsExtensions": true,
"useDefineForClassFields": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"lib": ["DOM", "DOM.Iterable", "ESNext", "WebWorker"],
"types": ["@webgpu/types", "@types/node", "bun-types"]
},