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

rotate cursor

This commit is contained in:
Orion Reed 2024-12-03 05:11:57 -05:00
parent de8e3acacd
commit 3fb3da9944
1 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/folk-shape.ts
View File

@ -9,6 +9,13 @@ export type Shape = 'rectangle' | 'circle' | 'triangle';
type Handle = 'resize-nw' | 'resize-ne' | 'resize-se' | 'resize-sw' | 'rotation' | 'move';
const resizeCursorUrl = (degrees: number) =>
`url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><g fill='none' transform='rotate(${degrees} 16 16)'><path d='M9 9L21 21M9 9H12L9 12V9ZM21 21V18L18 21H21Z' stroke='white' stroke-width='3' stroke-linejoin='miter'/><path d='M9 9L21 21M9 9H12L9 12V9ZM21 21V18L18 21H21Z' stroke='black' stroke-width='1.5' stroke-linejoin='miter'/></g></svg>") 16 16, nwse-resize`;
const rotateCursorUrl = (degrees: number) =>
`url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180%' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(${
degrees + 45
} 16 16)' filter='url(%23shadow)'><path d='M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z' fill='black'/><path fill-rule='evenodd' clip-rule='evenodd' d='M21.4789 7.03223L27.4035 12.9945L21.4789 18.9521V15.1868C18.4798 15.6549 16.1113 18.0273 15.649 21.0284H19.475L13.5128 26.953L7.55519 21.0284H11.6189C12.1243 15.8155 16.2679 11.6677 21.4789 11.1559L21.4789 7.03223ZM22.4789 12.1031C17.0214 12.1503 12.6071 16.5691 12.5674 22.0284H9.97889L13.513 25.543L17.05 22.0284H14.5675C14.5705 21.6896 14.5947 21.3558 14.6386 21.0284C15.1157 17.4741 17.9266 14.6592 21.4789 14.1761C21.8063 14.1316 22.1401 14.1069 22.4789 14.1032V16.5284L25.9935 12.9942L22.4789 9.45729L22.4789 12.1031Z' fill='white'/></g></svg>") 16 16, pointer`;
export type TransformEventDetail = {
rotate: number;
};
@ -118,7 +125,7 @@ styles.replaceSync(css`
padding: 0;
background: hsl(210, 20%, 98%);
z-index: calc(infinity);
width: 13px;
width: 9px;
aspect-ratio: 1;
transform: translate(-50%, -50%);
border: 1.5px solid hsl(214, 84%, 56%);
@ -147,12 +154,12 @@ styles.replaceSync(css`
[part='resize-nw'],
[part='resize-se'] {
cursor: var(--fc-nwse-resize, nwse-resize);
cursor: var(--fc-nwse-resize, url('${resizeCursorUrl(0)}') 16 16, nwse-resize);
}
[part='resize-ne'],
[part='resize-sw'] {
cursor: var(--fc-nesw-resize, nesw-resize);
cursor: var(--fc-nesw-resize, url('${resizeCursorUrl(0)}') 16 16, nesw-resize);
}
[part='rotation'] {
@ -164,14 +171,16 @@ styles.replaceSync(css`
border: 1.5px solid hsl(214, 84%, 56%);
border-radius: 50%;
background: hsl(210, 20%, 98%);
width: 13px;
width: 11px;
aspect-ratio: 1;
top: 0;
left: 50%;
translate: -50% -150%;
cursor: url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(45 16 16)' filter='url(%23shadow)'><path d='M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z' fill='black'/><path fill-rule='evenodd' clip-rule='evenodd' d='M21.4789 7.03223L27.4035 12.9945L21.4789 18.9521V15.1868C18.4798 15.6549 16.1113 18.0273 15.649 21.0284H19.475L13.5128 26.953L7.55519 21.0284H11.6189C12.1243 15.8155 16.2679 11.6677 21.4789 11.1559L21.4789 7.03223ZM22.4789 12.1031C17.0214 12.1503 12.6071 16.5691 12.5674 22.0284H9.97889L13.513 25.543L17.05 22.0284H14.5675C14.5705 21.6896 14.5947 21.3558 14.6386 21.0284C15.1157 17.4741 17.9266 14.6592 21.4789 14.1761C21.8063 14.1316 22.1401 14.1069 22.4789 14.1032V16.5284L25.9935 12.9942L22.4789 9.45729L22.4789 12.1031Z' fill='white'/></g></svg>")
16 16,
pointer;
cursor: var(--fc-rotate, url('${rotateCursorUrl(0)}') 16 16, pointer);
}
:state(rotate) {
cursor: var(--fc-rotate, url('${rotateCursorUrl(0)}') 16 16, pointer) !important;
}
:host(:not(:focus-within)) [part^='resize'],
@ -503,6 +512,7 @@ export class FolkShape extends HTMLElement {
this.#internals.states.delete(interaction);
this.removeEventListener('pointermove', this);
this.removeEventListener('lostpointercapture', this);
document.body.style.cursor = 'default';
return;
}
}
@ -527,12 +537,14 @@ export class FolkShape extends HTMLElement {
// Any updates that should be batched should happen here like updating the DOM or emitting events should be executed here.
#update(updatedProperties: Set<string>) {
// if (updatedProperties.has('type')) {
// // TODO: Update shape styles. For many shapes, we could just use clip-path to style the shape.
// // If we use relative values in `clip-path: polygon()`, then no JS is needed to style the shape
// // If `clip-path: path()` is used then we need to update the path in JS.
// // See https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
// }
if (updatedProperties.has('rotation')) {
const degrees = (this.#rotation * 180) / Math.PI;
this.style.setProperty('--fc-nwse-resize', resizeCursorUrl(degrees));
this.style.setProperty('--fc-nesw-resize', resizeCursorUrl(degrees + 90));
this.style.setProperty('--fc-rotate', rotateCursorUrl(degrees));
document.body.style.cursor = rotateCursorUrl(degrees);
}
this.#dispatchTransformEvent(updatedProperties);
}