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

hoist handle maps

This commit is contained in:
“chrisshank” 2024-12-07 12:21:16 -08:00
parent 12214f74ff
commit ae55b1b851
1 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/folk-shape.ts
View File

@ -6,12 +6,6 @@ import { Vector } from './common/Vector';
import { getResizeCursorUrl, getRotateCursorUrl } from './common/cursors'; import { getResizeCursorUrl, getRotateCursorUrl } from './common/cursors';
import { TransformEvent } from './common/TransformEvent'; import { TransformEvent } from './common/TransformEvent';
declare global {
interface HTMLElementTagNameMap {
'folk-shape': FolkShape;
}
}
const resizeObserver = new ResizeObserverManager(); const resizeObserver = new ResizeObserverManager();
type ResizeHandle = 'resize-top-left' | 'resize-top-right' | 'resize-bottom-right' | 'resize-bottom-left'; type ResizeHandle = 'resize-top-left' | 'resize-top-right' | 'resize-bottom-right' | 'resize-bottom-left';
@ -19,6 +13,29 @@ type RotateHandle = 'rotation-top-left' | 'rotation-top-right' | 'rotation-botto
type Handle = ResizeHandle | RotateHandle | 'move'; type Handle = ResizeHandle | RotateHandle | 'move';
export type Dimension = number | 'auto'; export type Dimension = number | 'auto';
type HandleMap = Record<ResizeHandle, ResizeHandle>;
const oppositeHandleMap: HandleMap = {
'resize-bottom-right': 'resize-top-left',
'resize-bottom-left': 'resize-top-right',
'resize-top-left': 'resize-bottom-right',
'resize-top-right': 'resize-bottom-left',
};
const flipXHandleMap: HandleMap = {
'resize-bottom-right': 'resize-bottom-left',
'resize-bottom-left': 'resize-bottom-right',
'resize-top-left': 'resize-top-right',
'resize-top-right': 'resize-top-left',
};
const flipYHandleMap: HandleMap = {
'resize-bottom-right': 'resize-top-right',
'resize-bottom-left': 'resize-top-left',
'resize-top-left': 'resize-bottom-left',
'resize-top-right': 'resize-bottom-right',
};
const styles = css` const styles = css`
:host { :host {
display: block; display: block;
@ -159,7 +176,12 @@ const styles = css`
} }
`; `;
// TODO: add z coordinate? declare global {
interface HTMLElementTagNameMap {
'folk-shape': FolkShape;
}
}
export class FolkShape extends HTMLElement { export class FolkShape extends HTMLElement {
static tagName = 'folk-shape'; static tagName = 'folk-shape';
@ -617,31 +639,10 @@ export class FolkShape extends HTMLElement {
const flipHeight = this.#rect.height < 0; const flipHeight = this.#rect.height < 0;
if (flipWidth && flipHeight) { if (flipWidth && flipHeight) {
// Both axes flipped
const oppositeHandleMap: Record<ResizeHandle, ResizeHandle> = {
'resize-bottom-right': 'resize-top-left',
'resize-bottom-left': 'resize-top-right',
'resize-top-left': 'resize-bottom-right',
'resize-top-right': 'resize-bottom-left',
};
nextHandle = oppositeHandleMap[handle]; nextHandle = oppositeHandleMap[handle];
} else if (flipWidth) { } else if (flipWidth) {
// Only X axis flipped
const flipXHandleMap: Record<ResizeHandle, ResizeHandle> = {
'resize-bottom-right': 'resize-bottom-left',
'resize-bottom-left': 'resize-bottom-right',
'resize-top-left': 'resize-top-right',
'resize-top-right': 'resize-top-left',
};
nextHandle = flipXHandleMap[handle]; nextHandle = flipXHandleMap[handle];
} else if (flipHeight) { } else if (flipHeight) {
// Only Y axis flipped
const flipYHandleMap: Record<ResizeHandle, ResizeHandle> = {
'resize-bottom-right': 'resize-top-right',
'resize-bottom-left': 'resize-top-left',
'resize-top-left': 'resize-bottom-left',
'resize-top-right': 'resize-bottom-right',
};
nextHandle = flipYHandleMap[handle]; nextHandle = flipYHandleMap[handle];
} }