link projections
This commit is contained in:
“chrisshank”
parent
b8130582c9
commit
a69840c8ab
|
|
@ -19,106 +19,106 @@
|
|||
<body>
|
||||
<folk-shape x="50" y="50" width="500">
|
||||
<folk-spreadsheet>
|
||||
<folk-cell column="A" row="1" expression="1"></folk-cell>
|
||||
<folk-cell column="B" row="1"></folk-cell>
|
||||
<folk-cell column="C" row="1"></folk-cell>
|
||||
<folk-cell column="D" row="1"></folk-cell>
|
||||
<folk-cell column="E" row="1"></folk-cell>
|
||||
<folk-cell column="F" row="1"></folk-cell>
|
||||
<folk-cell column="G" row="1"></folk-cell>
|
||||
<folk-cell column="H" row="1"></folk-cell>
|
||||
<folk-cell column="I" row="1"></folk-cell>
|
||||
<folk-cell column="J" row="1"></folk-cell>
|
||||
<folk-cell column="A" row="2" expression="$A1 * 2"></folk-cell>
|
||||
<folk-cell column="B" row="2"></folk-cell>
|
||||
<folk-cell column="C" row="2"></folk-cell>
|
||||
<folk-cell column="D" row="2"></folk-cell>
|
||||
<folk-cell column="E" row="2"></folk-cell>
|
||||
<folk-cell column="F" row="2"></folk-cell>
|
||||
<folk-cell column="G" row="2"></folk-cell>
|
||||
<folk-cell column="H" row="2"></folk-cell>
|
||||
<folk-cell column="I" row="2"></folk-cell>
|
||||
<folk-cell column="J" row="2"></folk-cell>
|
||||
<folk-cell column="A" row="3"></folk-cell>
|
||||
<folk-cell column="B" row="3"></folk-cell>
|
||||
<folk-cell column="C" row="3"></folk-cell>
|
||||
<folk-cell column="D" row="3"></folk-cell>
|
||||
<folk-cell column="E" row="3"></folk-cell>
|
||||
<folk-cell column="F" row="3"></folk-cell>
|
||||
<folk-cell column="G" row="3"></folk-cell>
|
||||
<folk-cell column="H" row="3"></folk-cell>
|
||||
<folk-cell column="I" row="3"></folk-cell>
|
||||
<folk-cell column="J" row="3"></folk-cell>
|
||||
<folk-cell column="A" row="4"></folk-cell>
|
||||
<folk-cell column="B" row="4"></folk-cell>
|
||||
<folk-cell column="C" row="4"></folk-cell>
|
||||
<folk-cell column="D" row="4"></folk-cell>
|
||||
<folk-cell column="E" row="4"></folk-cell>
|
||||
<folk-cell column="F" row="4"></folk-cell>
|
||||
<folk-cell column="G" row="4"></folk-cell>
|
||||
<folk-cell column="H" row="4"></folk-cell>
|
||||
<folk-cell column="I" row="4"></folk-cell>
|
||||
<folk-cell column="J" row="4"></folk-cell>
|
||||
<folk-cell column="A" row="5"></folk-cell>
|
||||
<folk-cell column="B" row="5"></folk-cell>
|
||||
<folk-cell column="C" row="5"></folk-cell>
|
||||
<folk-cell column="D" row="5"></folk-cell>
|
||||
<folk-cell column="E" row="5"></folk-cell>
|
||||
<folk-cell column="F" row="5"></folk-cell>
|
||||
<folk-cell column="G" row="5"></folk-cell>
|
||||
<folk-cell column="H" row="5"></folk-cell>
|
||||
<folk-cell column="I" row="5"></folk-cell>
|
||||
<folk-cell column="J" row="5"></folk-cell>
|
||||
<folk-cell column="A" row="6"></folk-cell>
|
||||
<folk-cell column="B" row="6"></folk-cell>
|
||||
<folk-cell column="C" row="6"></folk-cell>
|
||||
<folk-cell column="D" row="6"></folk-cell>
|
||||
<folk-cell column="E" row="6"></folk-cell>
|
||||
<folk-cell column="F" row="6"></folk-cell>
|
||||
<folk-cell column="G" row="6"></folk-cell>
|
||||
<folk-cell column="H" row="6"></folk-cell>
|
||||
<folk-cell column="I" row="6"></folk-cell>
|
||||
<folk-cell column="J" row="6"></folk-cell>
|
||||
<folk-cell column="A" row="7"></folk-cell>
|
||||
<folk-cell column="B" row="7"></folk-cell>
|
||||
<folk-cell column="C" row="7"></folk-cell>
|
||||
<folk-cell column="D" row="7"></folk-cell>
|
||||
<folk-cell column="E" row="7"></folk-cell>
|
||||
<folk-cell column="F" row="7"></folk-cell>
|
||||
<folk-cell column="G" row="7"></folk-cell>
|
||||
<folk-cell column="H" row="7"></folk-cell>
|
||||
<folk-cell column="I" row="7"></folk-cell>
|
||||
<folk-cell column="J" row="7"></folk-cell>
|
||||
<folk-cell column="A" row="8"></folk-cell>
|
||||
<folk-cell column="B" row="8"></folk-cell>
|
||||
<folk-cell column="C" row="8"></folk-cell>
|
||||
<folk-cell column="D" row="8"></folk-cell>
|
||||
<folk-cell column="E" row="8"></folk-cell>
|
||||
<folk-cell column="F" row="8"></folk-cell>
|
||||
<folk-cell column="G" row="8"></folk-cell>
|
||||
<folk-cell column="H" row="8"></folk-cell>
|
||||
<folk-cell column="I" row="8"></folk-cell>
|
||||
<folk-cell column="J" row="8"></folk-cell>
|
||||
<folk-cell column="A" row="9"></folk-cell>
|
||||
<folk-cell column="B" row="9"></folk-cell>
|
||||
<folk-cell column="C" row="9"></folk-cell>
|
||||
<folk-cell column="D" row="9"></folk-cell>
|
||||
<folk-cell column="E" row="9"></folk-cell>
|
||||
<folk-cell column="F" row="9"></folk-cell>
|
||||
<folk-cell column="G" row="9"></folk-cell>
|
||||
<folk-cell column="H" row="9"></folk-cell>
|
||||
<folk-cell column="I" row="9"></folk-cell>
|
||||
<folk-cell column="J" row="9"></folk-cell>
|
||||
<folk-cell column="A" row="10"></folk-cell>
|
||||
<folk-cell column="B" row="10"></folk-cell>
|
||||
<folk-cell column="C" row="10"></folk-cell>
|
||||
<folk-cell column="D" row="10"></folk-cell>
|
||||
<folk-cell column="E" row="10"></folk-cell>
|
||||
<folk-cell column="F" row="10"></folk-cell>
|
||||
<folk-cell column="G" row="10"></folk-cell>
|
||||
<folk-cell column="H" row="10"></folk-cell>
|
||||
<folk-cell column="I" row="10"></folk-cell>
|
||||
<folk-cell column="J" row="10"></folk-cell>
|
||||
<folk-cell row="1" column="A" expression="1"></folk-cell>
|
||||
<folk-cell row="1" column="B"></folk-cell>
|
||||
<folk-cell row="1" column="C"></folk-cell>
|
||||
<folk-cell row="1" column="D"></folk-cell>
|
||||
<folk-cell row="1" column="E"></folk-cell>
|
||||
<folk-cell row="1" column="F"></folk-cell>
|
||||
<folk-cell row="1" column="G"></folk-cell>
|
||||
<folk-cell row="1" column="H"></folk-cell>
|
||||
<folk-cell row="1" column="I"></folk-cell>
|
||||
<folk-cell row="1" column="J"></folk-cell>
|
||||
<folk-cell row="2" column="A" expression="$A1 * 2"></folk-cell>
|
||||
<folk-cell row="2" column="B"></folk-cell>
|
||||
<folk-cell row="2" column="C"></folk-cell>
|
||||
<folk-cell row="2" column="D"></folk-cell>
|
||||
<folk-cell row="2" column="E"></folk-cell>
|
||||
<folk-cell row="2" column="F"></folk-cell>
|
||||
<folk-cell row="2" column="G"></folk-cell>
|
||||
<folk-cell row="2" column="H"></folk-cell>
|
||||
<folk-cell row="2" column="I"></folk-cell>
|
||||
<folk-cell row="2" column="J"></folk-cell>
|
||||
<folk-cell row="3" column="A"></folk-cell>
|
||||
<folk-cell row="3" column="B"></folk-cell>
|
||||
<folk-cell row="3" column="C"></folk-cell>
|
||||
<folk-cell row="3" column="D"></folk-cell>
|
||||
<folk-cell row="3" column="E"></folk-cell>
|
||||
<folk-cell row="3" column="F"></folk-cell>
|
||||
<folk-cell row="3" column="G"></folk-cell>
|
||||
<folk-cell row="3" column="H"></folk-cell>
|
||||
<folk-cell row="3" column="I"></folk-cell>
|
||||
<folk-cell row="3" column="J"></folk-cell>
|
||||
<folk-cell row="4" column="A"></folk-cell>
|
||||
<folk-cell row="4" column="B"></folk-cell>
|
||||
<folk-cell row="4" column="C"></folk-cell>
|
||||
<folk-cell row="4" column="D"></folk-cell>
|
||||
<folk-cell row="4" column="E"></folk-cell>
|
||||
<folk-cell row="4" column="F"></folk-cell>
|
||||
<folk-cell row="4" column="G"></folk-cell>
|
||||
<folk-cell row="4" column="H"></folk-cell>
|
||||
<folk-cell row="4" column="I"></folk-cell>
|
||||
<folk-cell row="4" column="J"></folk-cell>
|
||||
<folk-cell row="5" column="A"></folk-cell>
|
||||
<folk-cell row="5" column="B"></folk-cell>
|
||||
<folk-cell row="5" column="C"></folk-cell>
|
||||
<folk-cell row="5" column="D"></folk-cell>
|
||||
<folk-cell row="5" column="E"></folk-cell>
|
||||
<folk-cell row="5" column="F"></folk-cell>
|
||||
<folk-cell row="5" column="G"></folk-cell>
|
||||
<folk-cell row="5" column="H"></folk-cell>
|
||||
<folk-cell row="5" column="I"></folk-cell>
|
||||
<folk-cell row="5" column="J"></folk-cell>
|
||||
<folk-cell row="6" column="A"></folk-cell>
|
||||
<folk-cell row="6" column="B"></folk-cell>
|
||||
<folk-cell row="6" column="C"></folk-cell>
|
||||
<folk-cell row="6" column="D"></folk-cell>
|
||||
<folk-cell row="6" column="E"></folk-cell>
|
||||
<folk-cell row="6" column="F"></folk-cell>
|
||||
<folk-cell row="6" column="G"></folk-cell>
|
||||
<folk-cell row="6" column="H"></folk-cell>
|
||||
<folk-cell row="6" column="I"></folk-cell>
|
||||
<folk-cell row="6" column="J"></folk-cell>
|
||||
<folk-cell row="7" column="A"></folk-cell>
|
||||
<folk-cell row="7" column="B"></folk-cell>
|
||||
<folk-cell row="7" column="C"></folk-cell>
|
||||
<folk-cell row="7" column="D"></folk-cell>
|
||||
<folk-cell row="7" column="E"></folk-cell>
|
||||
<folk-cell row="7" column="F"></folk-cell>
|
||||
<folk-cell row="7" column="G"></folk-cell>
|
||||
<folk-cell row="7" column="H"></folk-cell>
|
||||
<folk-cell row="7" column="I"></folk-cell>
|
||||
<folk-cell row="7" column="J"></folk-cell>
|
||||
<folk-cell row="8" column="A"></folk-cell>
|
||||
<folk-cell row="8" column="B"></folk-cell>
|
||||
<folk-cell row="8" column="C"></folk-cell>
|
||||
<folk-cell row="8" column="D"></folk-cell>
|
||||
<folk-cell row="8" column="E"></folk-cell>
|
||||
<folk-cell row="8" column="F"></folk-cell>
|
||||
<folk-cell row="8" column="G"></folk-cell>
|
||||
<folk-cell row="8" column="H"></folk-cell>
|
||||
<folk-cell row="8" column="I"></folk-cell>
|
||||
<folk-cell row="8" column="J"></folk-cell>
|
||||
<folk-cell row="9" column="A"></folk-cell>
|
||||
<folk-cell row="9" column="B"></folk-cell>
|
||||
<folk-cell row="9" column="C"></folk-cell>
|
||||
<folk-cell row="9" column="D"></folk-cell>
|
||||
<folk-cell row="9" column="E"></folk-cell>
|
||||
<folk-cell row="9" column="F"></folk-cell>
|
||||
<folk-cell row="9" column="G"></folk-cell>
|
||||
<folk-cell row="9" column="H"></folk-cell>
|
||||
<folk-cell row="9" column="I"></folk-cell>
|
||||
<folk-cell row="9" column="J"></folk-cell>
|
||||
<folk-cell row="10" column="A"></folk-cell>
|
||||
<folk-cell row="10" column="B"></folk-cell>
|
||||
<folk-cell row="10" column="C"></folk-cell>
|
||||
<folk-cell row="10" column="D"></folk-cell>
|
||||
<folk-cell row="10" column="E"></folk-cell>
|
||||
<folk-cell row="10" column="F"></folk-cell>
|
||||
<folk-cell row="10" column="G"></folk-cell>
|
||||
<folk-cell row="10" column="H"></folk-cell>
|
||||
<folk-cell row="10" column="I"></folk-cell>
|
||||
<folk-cell row="10" column="J"></folk-cell>
|
||||
</folk-spreadsheet>
|
||||
</folk-shape>
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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<this>): void {
|
||||
super.update(changedProperties);
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue