diff --git a/demo/shapes.html b/demo/shapes.html
index 5aa092e..9799ad9 100644
--- a/demo/shapes.html
+++ b/demo/shapes.html
@@ -17,6 +17,12 @@
spatial-geometry {
background: rgb(187, 178, 178);
+ box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+ }
+
+ spatial-geometry:state(moving) {
+ scale: 1.05;
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
diff --git a/src/elements/spatial-geometry.ts b/src/elements/spatial-geometry.ts
index fe4cb46..7070cb9 100644
--- a/src/elements/spatial-geometry.ts
+++ b/src/elements/spatial-geometry.ts
@@ -32,10 +32,10 @@ styles.replaceSync(`
:host {
display: block;
position: absolute;
- cursor: var(--fc-grab, grab);;
+ cursor: var(--fc-grab, grab);
}
-:host(:hover) {
+:host(:hover), :host(:focus-within){
outline: solid 1px hsl(214, 84%, 56%);
}
@@ -151,45 +151,29 @@ styles.replaceSync(`
position: absolute;
box-sizing: border-box;
padding: 0;
- border: unset;
- background: unset;
+ border: 1.5px solid hsl(214, 84%, 56%);
+ border-radius: 50%;
+ background: hsl(210, 20%, 98%);
+ width: 13px;
+ aspect-ratio: 1;
+ top: 0;
+ left: 50%;
+ translate: -50% -150%;
+ z-index: 2;
+ cursor: url("data:image/svg+xml,") 16 16, pointer;
+}
- &[rotation-handler="top-left"],
- &[rotation-handler="top-right"],
- &[rotation-handler="bottom-right"],
- &[rotation-handler="bottom-left"] {
- width: 13px;
- aspect-ratio: 1;
- z-index: 2;
- }
-
- &[rotation-handler="top-left"] {
- top: 0;
- left: 0;
- transform: translate(-100%, -100%);
- cursor: url("data:image/svg+xml,") 16 16, pointer;
- }
-
- &[rotation-handler="top-right"] {
- top: 0;
- left: 100%;
- transform: translate(0, -100%);
- cursor: url("data:image/svg+xml,") 16 16, pointer;
- }
-
- &[rotation-handler="bottom-right"] {
- top: 100%;
- left: 100%;
- cursor: url("data:image/svg+xml,") 16 16, pointer;
- }
-
- &[rotation-handler="bottom-left"] {
- top: 100%;
- left: 0;
- transform: translate(-100%, 0);
- cursor: url("data:image/svg+xml,") 16 16, pointer;
- }
-}`);
+:host(:focus-within) [rotation-handler]::before {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ translate: -50% -150%;
+ z-index: 2;
+ border: 1px solid hsl(214, 84%, 56%);
+ height: 50%;
+ width: 1px;
+}
+ `);
// TODO: add z coordinate?
export class SpatialGeometry extends HTMLElement {
@@ -217,8 +201,8 @@ export class SpatialGeometry extends HTMLElement {
// Maybe can add the first resize handler here, and lazily instantiate the rest when needed?
// I can see it becoming important at scale
shadowRoot.innerHTML = `
+
-
`;
@@ -340,13 +324,17 @@ export class SpatialGeometry extends HTMLElement {
return;
}
case 'pointermove': {
- if (event.target === this) {
+ const target = event.target as HTMLElement;
+
+ if (target === null) return;
+
+ if (target === this) {
this.x += event.movementX;
this.y += event.movementY;
return;
}
- const resizeDirection = (event.target as HTMLElement).getAttribute('resize-handler');
+ const resizeDirection = target.getAttribute('resize-handler');
if (resizeDirection !== null) {
// This triggers a move and resize event :(
@@ -370,34 +358,17 @@ export class SpatialGeometry extends HTMLElement {
return;
}
- const rotationDirection = (event.target as HTMLElement).getAttribute('rotation-handler');
-
- if (rotationDirection !== null) {
- console.log(rotationDirection);
+ if (target.hasAttribute('rotation-handler')) {
const centerX = (this.#x + this.#width) / 2;
const centerY = (this.#y + this.#height) / 2;
- const newAngle =
- (Math.atan2(centerY - event.clientX, centerX - event.clientY) * 180) / Math.PI;
- console.log(newAngle - this.#rotate);
- // this.rotate -= newAngle;
+ var newAngle =
+ ((Math.atan2(event.clientY - centerY, event.clientX - centerX) + Math.PI / 2) * 180) /
+ Math.PI;
+ console.log(newAngle);
+ this.rotate = newAngle;
// When a rotation handler is
// newAngle = (Math.atan2(centerY - mouseY, centerX - mouseX) * 180) / Math.PI - currentAngle;
- // if (rotationDirection.includes('top-left')) {
-
- // }
-
- // if (rotationDirection.includes('top-right')) {
-
- // }
-
- // if (rotationDirection.includes('bottom-right')) {
-
- // }
-
- // if (rotationDirection.includes('bottom-left')) {
-
- // }
return;
}