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

bigger handlers for touch devices

This commit is contained in:
“chrisshank” 2024-12-09 14:50:52 -08:00
parent 35f61d853d
commit 2f87770e66
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/folk-shape.ts
View File

@ -102,13 +102,19 @@ const styles = css`
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border: 1.5px solid hsl(214, 84%, 56%); border: 1.5px solid hsl(214, 84%, 56%);
border-radius: 2px; border-radius: 2px;
@media (any-pointer: coarse) {
width: 13px;
}
} }
[part^='rotation'] { [part^='rotation'] {
border-radius: 0px;
opacity: 0; opacity: 0;
width: 16px; width: 16px;
aspect-ratio: 1;
@media (any-pointer: coarse) {
width: 20px;
}
} }
[part$='top-left'] { [part$='top-left'] {
@ -177,8 +183,6 @@ export class FolkShape extends HTMLElement {
#handles: Record<ResizeHandle | RotateHandle, HTMLElement>; #handles: Record<ResizeHandle | RotateHandle, HTMLElement>;
// Used for rotation handling, would love a better way to do this that avoids this clutter.
#initialRotation = 0;
#startAngle = 0; #startAngle = 0;
get x() { get x() {
@ -330,7 +334,6 @@ export class FolkShape extends HTMLElement {
// Setup rotation initial state if needed // Setup rotation initial state if needed
if (handle?.startsWith('rotation')) { if (handle?.startsWith('rotation')) {
this.#initialRotation = this.#rect.rotation;
const parentRotateOrigin = this.#rect.toParentSpace({ const parentRotateOrigin = this.#rect.toParentSpace({
x: this.#rect.width * this.#rect.rotateOrigin.x, x: this.#rect.width * this.#rect.rotateOrigin.x,
y: this.#rect.height * this.#rect.rotateOrigin.y, y: this.#rect.height * this.#rect.rotateOrigin.y,