diff --git a/demo/html-spreadsheet.html b/demo/html-spreadsheet.html
index dd73381..5a7b241 100644
--- a/demo/html-spreadsheet.html
+++ b/demo/html-spreadsheet.html
@@ -19,106 +19,106 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/folk-shape.ts b/src/folk-shape.ts
index 7530173..edcc0c6 100644
--- a/src/folk-shape.ts
+++ b/src/folk-shape.ts
@@ -75,7 +75,8 @@ const styles = css`
outline: solid 1px hsl(214, 84%, 56%);
}
- :host(:hover) {
+ :host(:hover),
+ :host(:state(highlighted)) {
outline: solid 2px hsl(214, 84%, 56%);
}
@@ -253,6 +254,18 @@ export class FolkShape extends HTMLElement {
this.#requestUpdate();
}
+ #highlighted = false;
+ get highlighted() {
+ return this.#highlighted;
+ }
+ set highlighted(highlighted) {
+ if (this.#highlighted === highlighted) return;
+
+ this.#highlighted = highlighted;
+
+ highlighted ? this.#internals.states.add('highlighted') : this.#internals.states.delete('highlighted');
+ }
+
constructor() {
super();
diff --git a/src/folk-space-projector.ts b/src/folk-space-projector.ts
index e636bd7..f40fe62 100644
--- a/src/folk-space-projector.ts
+++ b/src/folk-space-projector.ts
@@ -18,6 +18,7 @@ export class FolkSpaceProjector extends FolkBaseSet {
bottom: 5px;
right: 5px;
pointer-events: auto;
+ box-shadow: 0px 3px 5px 0px rgba(173, 168, 168, 0.6);
}
`,
];
@@ -35,11 +36,15 @@ export class FolkSpaceProjector extends FolkBaseSet {
connectedCallback(): void {
super.connectedCallback();
this.#spreadsheet.addEventListener('propagate', this.#onPropagate);
+ this.#spreadsheet.addEventListener('focusin', this.#onFocusin);
+ this.#spreadsheet.addEventListener('focusout', this.#onFocusout);
}
disconnectedCallback(): void {
super.disconnectedCallback();
this.#spreadsheet.removeEventListener('propagate', this.#onPropagate);
+ this.#spreadsheet.removeEventListener('focusin', this.#onFocusin);
+ this.#spreadsheet.removeEventListener('focusout', this.#onFocusout);
}
#lock = false;
@@ -81,6 +86,36 @@ export class FolkSpaceProjector extends FolkBaseSet {
}
};
+ #onFocusin = (event: Event) => {
+ const cell = event.target;
+
+ if (!(cell instanceof FolkSpreadSheetCell)) return;
+
+ const shape = this.sourceElements
+ .values()
+ .drop(cell.row - 1)
+ .find(() => true);
+
+ if (!(shape instanceof FolkShape)) return;
+
+ shape.highlighted = true;
+ };
+
+ #onFocusout = (event: Event) => {
+ const cell = event.target;
+
+ if (!(cell instanceof FolkSpreadSheetCell)) return;
+
+ const shape = this.sourceElements
+ .values()
+ .drop(cell.row - 1)
+ .find(() => true);
+
+ if (!(shape instanceof FolkShape)) return;
+
+ shape.highlighted = false;
+ };
+
override update(changedProperties: PropertyValues): void {
super.update(changedProperties);
diff --git a/src/folk-spreadsheet.ts b/src/folk-spreadsheet.ts
index e477756..4492218 100644
--- a/src/folk-spreadsheet.ts
+++ b/src/folk-spreadsheet.ts
@@ -106,6 +106,11 @@ const styles = css`
justify-content: end;
}
+ ::slotted(folk-cell:hover) {
+ outline: 1px solid #1b73e8;
+ z-index: 5;
+ }
+
::slotted(folk-cell:focus) {
outline: 2px solid #1b73e8;
z-index: 4;