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

tie resize handlers to DOM focus

This commit is contained in:
“chrisshank” 2024-08-18 14:05:44 -07:00
parent d29b6d93f4
commit 8503437d4c
1 changed files with 15 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/elements/spatial-geometry.ts
View File

@ -25,11 +25,11 @@ styles.replaceSync(`
user-select: none; user-select: none;
} }
:host(:not([selected])) [resize-handler] { :host(:not(:focus, :focus-within, :state(moving))) [resize-handler] {
display: none; opacity: 0;
} }
:host([selected]) [resize-handler] { :is(:host(:focus), :host(:focus-within), :host(:state(moving))) [resize-handler] {
display: block; display: block;
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
@ -147,8 +147,18 @@ export class SpatialGeometry extends HTMLElement {
this.addEventListener('touchstart', this); this.addEventListener('touchstart', this);
this.addEventListener('dragstart', this); this.addEventListener('dragstart', this);
const shadowRoot = this.attachShadow({ mode: 'open' }); const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true });
shadowRoot.adoptedStyleSheets.push(styles); shadowRoot.adoptedStyleSheets.push(styles);
// Ideally we would creating these lazily on first focus, but the resize handlers need to be around for delegate focus to work.
shadowRoot.innerHTML = `
<button resize-handler="top-left"></button>
<button resize-handler="top"></button>
<button resize-handler="top-right"></button>
<button resize-handler="right"></button>
<button resize-handler="bottom-right"></button>
<button resize-handler="bottom"></button>
<button resize-handler="bottom-left"></button>
<button resize-handler="left"></button>`;
} }
#type: Shape = 'rectangle'; #type: Shape = 'rectangle';
@ -220,9 +230,8 @@ export class SpatialGeometry extends HTMLElement {
target.addEventListener('pointermove', this); target.addEventListener('pointermove', this);
target.setPointerCapture(event.pointerId); target.setPointerCapture(event.pointerId);
this.setAttribute('selected', '');
this.#createResizeHandlers();
this.#internals.states.add('moving'); this.#internals.states.add('moving');
this.focus();
return; return;
} }
case 'pointermove': { case 'pointermove': {
@ -302,21 +311,4 @@ export class SpatialGeometry extends HTMLElement {
} }
} }
} }
#firstSelection = true;
#createResizeHandlers() {
// lazily create resize handlers on first selection
if (this.#firstSelection && this.shadowRoot !== null) {
this.shadowRoot.innerHTML = `
<button resize-handler="top-left"></button>
<button resize-handler="top"></button>
<button resize-handler="top-right"></button>
<button resize-handler="right"></button>
<button resize-handler="bottom-right"></button>
<button resize-handler="bottom"></button>
<button resize-handler="bottom-left"></button>
<button resize-handler="left"></button>`;
this.#firstSelection = false;
}
}
} }