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

fix move dragging

This commit is contained in:
“chrisshank” 2024-12-02 20:32:06 -08:00
parent 4d7217a40a
commit f8da732d20
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/folk-shape.ts
View File

@ -80,7 +80,12 @@ styles.replaceSync(css`
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
pointer-events: none;
}
::slotted(*) {
cursor: default; cursor: default;
pointer-events: auto;
} }
:host(:focus-within) { :host(:focus-within) {
@ -188,6 +193,8 @@ export class FolkShape extends HTMLElement {
customElements.define(this.tagName, this); customElements.define(this.tagName, this);
} }
#shadow = this.attachShadow({ mode: 'open', delegatesFocus: true });
#internals = this.attachInternals(); #internals = this.attachInternals();
#type = (this.getAttribute('type') || 'rectangle') as Shape; #type = (this.getAttribute('type') || 'rectangle') as Shape;
@ -288,15 +295,11 @@ export class FolkShape extends HTMLElement {
this.addEventListener('pointerdown', this); this.addEventListener('pointerdown', this);
const shadowRoot = this.attachShadow({ this.#shadow.adoptedStyleSheets.push(styles);
mode: 'open',
delegatesFocus: true,
});
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. // Ideally we would creating these lazily on first focus, but the resize handlers need to be around for delegate focus to work.
// Maybe can add the first resize handler here, and lazily instantiate the rest when needed? // Maybe can add the first resize handler here, and lazily instantiate the rest when needed?
// I can see it becoming important at scale // I can see it becoming important at scale
shadowRoot.innerHTML = html` <button part="rotation"></button> this.#shadow.innerHTML = html` <button part="rotation"></button>
<button part="resize-nw"></button> <button part="resize-nw"></button>
<button part="resize-ne"></button> <button part="resize-ne"></button>
<button part="resize-se"></button> <button part="resize-se"></button>