link projections
This commit is contained in:
“chrisshank”
parent
b8130582c9
commit
a69840c8ab
|
|
@ -19,106 +19,106 @@
|
||||||
<body>
|
<body>
|
||||||
<folk-shape x="50" y="50" width="500">
|
<folk-shape x="50" y="50" width="500">
|
||||||
<folk-spreadsheet>
|
<folk-spreadsheet>
|
||||||
<folk-cell column="A" row="1" expression="1"></folk-cell>
|
<folk-cell row="1" column="A" expression="1"></folk-cell>
|
||||||
<folk-cell column="B" row="1"></folk-cell>
|
<folk-cell row="1" column="B"></folk-cell>
|
||||||
<folk-cell column="C" row="1"></folk-cell>
|
<folk-cell row="1" column="C"></folk-cell>
|
||||||
<folk-cell column="D" row="1"></folk-cell>
|
<folk-cell row="1" column="D"></folk-cell>
|
||||||
<folk-cell column="E" row="1"></folk-cell>
|
<folk-cell row="1" column="E"></folk-cell>
|
||||||
<folk-cell column="F" row="1"></folk-cell>
|
<folk-cell row="1" column="F"></folk-cell>
|
||||||
<folk-cell column="G" row="1"></folk-cell>
|
<folk-cell row="1" column="G"></folk-cell>
|
||||||
<folk-cell column="H" row="1"></folk-cell>
|
<folk-cell row="1" column="H"></folk-cell>
|
||||||
<folk-cell column="I" row="1"></folk-cell>
|
<folk-cell row="1" column="I"></folk-cell>
|
||||||
<folk-cell column="J" row="1"></folk-cell>
|
<folk-cell row="1" column="J"></folk-cell>
|
||||||
<folk-cell column="A" row="2" expression="$A1 * 2"></folk-cell>
|
<folk-cell row="2" column="A" expression="$A1 * 2"></folk-cell>
|
||||||
<folk-cell column="B" row="2"></folk-cell>
|
<folk-cell row="2" column="B"></folk-cell>
|
||||||
<folk-cell column="C" row="2"></folk-cell>
|
<folk-cell row="2" column="C"></folk-cell>
|
||||||
<folk-cell column="D" row="2"></folk-cell>
|
<folk-cell row="2" column="D"></folk-cell>
|
||||||
<folk-cell column="E" row="2"></folk-cell>
|
<folk-cell row="2" column="E"></folk-cell>
|
||||||
<folk-cell column="F" row="2"></folk-cell>
|
<folk-cell row="2" column="F"></folk-cell>
|
||||||
<folk-cell column="G" row="2"></folk-cell>
|
<folk-cell row="2" column="G"></folk-cell>
|
||||||
<folk-cell column="H" row="2"></folk-cell>
|
<folk-cell row="2" column="H"></folk-cell>
|
||||||
<folk-cell column="I" row="2"></folk-cell>
|
<folk-cell row="2" column="I"></folk-cell>
|
||||||
<folk-cell column="J" row="2"></folk-cell>
|
<folk-cell row="2" column="J"></folk-cell>
|
||||||
<folk-cell column="A" row="3"></folk-cell>
|
<folk-cell row="3" column="A"></folk-cell>
|
||||||
<folk-cell column="B" row="3"></folk-cell>
|
<folk-cell row="3" column="B"></folk-cell>
|
||||||
<folk-cell column="C" row="3"></folk-cell>
|
<folk-cell row="3" column="C"></folk-cell>
|
||||||
<folk-cell column="D" row="3"></folk-cell>
|
<folk-cell row="3" column="D"></folk-cell>
|
||||||
<folk-cell column="E" row="3"></folk-cell>
|
<folk-cell row="3" column="E"></folk-cell>
|
||||||
<folk-cell column="F" row="3"></folk-cell>
|
<folk-cell row="3" column="F"></folk-cell>
|
||||||
<folk-cell column="G" row="3"></folk-cell>
|
<folk-cell row="3" column="G"></folk-cell>
|
||||||
<folk-cell column="H" row="3"></folk-cell>
|
<folk-cell row="3" column="H"></folk-cell>
|
||||||
<folk-cell column="I" row="3"></folk-cell>
|
<folk-cell row="3" column="I"></folk-cell>
|
||||||
<folk-cell column="J" row="3"></folk-cell>
|
<folk-cell row="3" column="J"></folk-cell>
|
||||||
<folk-cell column="A" row="4"></folk-cell>
|
<folk-cell row="4" column="A"></folk-cell>
|
||||||
<folk-cell column="B" row="4"></folk-cell>
|
<folk-cell row="4" column="B"></folk-cell>
|
||||||
<folk-cell column="C" row="4"></folk-cell>
|
<folk-cell row="4" column="C"></folk-cell>
|
||||||
<folk-cell column="D" row="4"></folk-cell>
|
<folk-cell row="4" column="D"></folk-cell>
|
||||||
<folk-cell column="E" row="4"></folk-cell>
|
<folk-cell row="4" column="E"></folk-cell>
|
||||||
<folk-cell column="F" row="4"></folk-cell>
|
<folk-cell row="4" column="F"></folk-cell>
|
||||||
<folk-cell column="G" row="4"></folk-cell>
|
<folk-cell row="4" column="G"></folk-cell>
|
||||||
<folk-cell column="H" row="4"></folk-cell>
|
<folk-cell row="4" column="H"></folk-cell>
|
||||||
<folk-cell column="I" row="4"></folk-cell>
|
<folk-cell row="4" column="I"></folk-cell>
|
||||||
<folk-cell column="J" row="4"></folk-cell>
|
<folk-cell row="4" column="J"></folk-cell>
|
||||||
<folk-cell column="A" row="5"></folk-cell>
|
<folk-cell row="5" column="A"></folk-cell>
|
||||||
<folk-cell column="B" row="5"></folk-cell>
|
<folk-cell row="5" column="B"></folk-cell>
|
||||||
<folk-cell column="C" row="5"></folk-cell>
|
<folk-cell row="5" column="C"></folk-cell>
|
||||||
<folk-cell column="D" row="5"></folk-cell>
|
<folk-cell row="5" column="D"></folk-cell>
|
||||||
<folk-cell column="E" row="5"></folk-cell>
|
<folk-cell row="5" column="E"></folk-cell>
|
||||||
<folk-cell column="F" row="5"></folk-cell>
|
<folk-cell row="5" column="F"></folk-cell>
|
||||||
<folk-cell column="G" row="5"></folk-cell>
|
<folk-cell row="5" column="G"></folk-cell>
|
||||||
<folk-cell column="H" row="5"></folk-cell>
|
<folk-cell row="5" column="H"></folk-cell>
|
||||||
<folk-cell column="I" row="5"></folk-cell>
|
<folk-cell row="5" column="I"></folk-cell>
|
||||||
<folk-cell column="J" row="5"></folk-cell>
|
<folk-cell row="5" column="J"></folk-cell>
|
||||||
<folk-cell column="A" row="6"></folk-cell>
|
<folk-cell row="6" column="A"></folk-cell>
|
||||||
<folk-cell column="B" row="6"></folk-cell>
|
<folk-cell row="6" column="B"></folk-cell>
|
||||||
<folk-cell column="C" row="6"></folk-cell>
|
<folk-cell row="6" column="C"></folk-cell>
|
||||||
<folk-cell column="D" row="6"></folk-cell>
|
<folk-cell row="6" column="D"></folk-cell>
|
||||||
<folk-cell column="E" row="6"></folk-cell>
|
<folk-cell row="6" column="E"></folk-cell>
|
||||||
<folk-cell column="F" row="6"></folk-cell>
|
<folk-cell row="6" column="F"></folk-cell>
|
||||||
<folk-cell column="G" row="6"></folk-cell>
|
<folk-cell row="6" column="G"></folk-cell>
|
||||||
<folk-cell column="H" row="6"></folk-cell>
|
<folk-cell row="6" column="H"></folk-cell>
|
||||||
<folk-cell column="I" row="6"></folk-cell>
|
<folk-cell row="6" column="I"></folk-cell>
|
||||||
<folk-cell column="J" row="6"></folk-cell>
|
<folk-cell row="6" column="J"></folk-cell>
|
||||||
<folk-cell column="A" row="7"></folk-cell>
|
<folk-cell row="7" column="A"></folk-cell>
|
||||||
<folk-cell column="B" row="7"></folk-cell>
|
<folk-cell row="7" column="B"></folk-cell>
|
||||||
<folk-cell column="C" row="7"></folk-cell>
|
<folk-cell row="7" column="C"></folk-cell>
|
||||||
<folk-cell column="D" row="7"></folk-cell>
|
<folk-cell row="7" column="D"></folk-cell>
|
||||||
<folk-cell column="E" row="7"></folk-cell>
|
<folk-cell row="7" column="E"></folk-cell>
|
||||||
<folk-cell column="F" row="7"></folk-cell>
|
<folk-cell row="7" column="F"></folk-cell>
|
||||||
<folk-cell column="G" row="7"></folk-cell>
|
<folk-cell row="7" column="G"></folk-cell>
|
||||||
<folk-cell column="H" row="7"></folk-cell>
|
<folk-cell row="7" column="H"></folk-cell>
|
||||||
<folk-cell column="I" row="7"></folk-cell>
|
<folk-cell row="7" column="I"></folk-cell>
|
||||||
<folk-cell column="J" row="7"></folk-cell>
|
<folk-cell row="7" column="J"></folk-cell>
|
||||||
<folk-cell column="A" row="8"></folk-cell>
|
<folk-cell row="8" column="A"></folk-cell>
|
||||||
<folk-cell column="B" row="8"></folk-cell>
|
<folk-cell row="8" column="B"></folk-cell>
|
||||||
<folk-cell column="C" row="8"></folk-cell>
|
<folk-cell row="8" column="C"></folk-cell>
|
||||||
<folk-cell column="D" row="8"></folk-cell>
|
<folk-cell row="8" column="D"></folk-cell>
|
||||||
<folk-cell column="E" row="8"></folk-cell>
|
<folk-cell row="8" column="E"></folk-cell>
|
||||||
<folk-cell column="F" row="8"></folk-cell>
|
<folk-cell row="8" column="F"></folk-cell>
|
||||||
<folk-cell column="G" row="8"></folk-cell>
|
<folk-cell row="8" column="G"></folk-cell>
|
||||||
<folk-cell column="H" row="8"></folk-cell>
|
<folk-cell row="8" column="H"></folk-cell>
|
||||||
<folk-cell column="I" row="8"></folk-cell>
|
<folk-cell row="8" column="I"></folk-cell>
|
||||||
<folk-cell column="J" row="8"></folk-cell>
|
<folk-cell row="8" column="J"></folk-cell>
|
||||||
<folk-cell column="A" row="9"></folk-cell>
|
<folk-cell row="9" column="A"></folk-cell>
|
||||||
<folk-cell column="B" row="9"></folk-cell>
|
<folk-cell row="9" column="B"></folk-cell>
|
||||||
<folk-cell column="C" row="9"></folk-cell>
|
<folk-cell row="9" column="C"></folk-cell>
|
||||||
<folk-cell column="D" row="9"></folk-cell>
|
<folk-cell row="9" column="D"></folk-cell>
|
||||||
<folk-cell column="E" row="9"></folk-cell>
|
<folk-cell row="9" column="E"></folk-cell>
|
||||||
<folk-cell column="F" row="9"></folk-cell>
|
<folk-cell row="9" column="F"></folk-cell>
|
||||||
<folk-cell column="G" row="9"></folk-cell>
|
<folk-cell row="9" column="G"></folk-cell>
|
||||||
<folk-cell column="H" row="9"></folk-cell>
|
<folk-cell row="9" column="H"></folk-cell>
|
||||||
<folk-cell column="I" row="9"></folk-cell>
|
<folk-cell row="9" column="I"></folk-cell>
|
||||||
<folk-cell column="J" row="9"></folk-cell>
|
<folk-cell row="9" column="J"></folk-cell>
|
||||||
<folk-cell column="A" row="10"></folk-cell>
|
<folk-cell row="10" column="A"></folk-cell>
|
||||||
<folk-cell column="B" row="10"></folk-cell>
|
<folk-cell row="10" column="B"></folk-cell>
|
||||||
<folk-cell column="C" row="10"></folk-cell>
|
<folk-cell row="10" column="C"></folk-cell>
|
||||||
<folk-cell column="D" row="10"></folk-cell>
|
<folk-cell row="10" column="D"></folk-cell>
|
||||||
<folk-cell column="E" row="10"></folk-cell>
|
<folk-cell row="10" column="E"></folk-cell>
|
||||||
<folk-cell column="F" row="10"></folk-cell>
|
<folk-cell row="10" column="F"></folk-cell>
|
||||||
<folk-cell column="G" row="10"></folk-cell>
|
<folk-cell row="10" column="G"></folk-cell>
|
||||||
<folk-cell column="H" row="10"></folk-cell>
|
<folk-cell row="10" column="H"></folk-cell>
|
||||||
<folk-cell column="I" row="10"></folk-cell>
|
<folk-cell row="10" column="I"></folk-cell>
|
||||||
<folk-cell column="J" row="10"></folk-cell>
|
<folk-cell row="10" column="J"></folk-cell>
|
||||||
</folk-spreadsheet>
|
</folk-spreadsheet>
|
||||||
</folk-shape>
|
</folk-shape>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -75,7 +75,8 @@ const styles = css`
|
||||||
outline: solid 1px hsl(214, 84%, 56%);
|
outline: solid 1px hsl(214, 84%, 56%);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(:hover) {
|
:host(:hover),
|
||||||
|
:host(:state(highlighted)) {
|
||||||
outline: solid 2px hsl(214, 84%, 56%);
|
outline: solid 2px hsl(214, 84%, 56%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -253,6 +254,18 @@ export class FolkShape extends HTMLElement {
|
||||||
this.#requestUpdate();
|
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() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@ export class FolkSpaceProjector extends FolkBaseSet {
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
pointer-events: auto;
|
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 {
|
connectedCallback(): void {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
this.#spreadsheet.addEventListener('propagate', this.#onPropagate);
|
this.#spreadsheet.addEventListener('propagate', this.#onPropagate);
|
||||||
|
this.#spreadsheet.addEventListener('focusin', this.#onFocusin);
|
||||||
|
this.#spreadsheet.addEventListener('focusout', this.#onFocusout);
|
||||||
}
|
}
|
||||||
|
|
||||||
disconnectedCallback(): void {
|
disconnectedCallback(): void {
|
||||||
super.disconnectedCallback();
|
super.disconnectedCallback();
|
||||||
this.#spreadsheet.removeEventListener('propagate', this.#onPropagate);
|
this.#spreadsheet.removeEventListener('propagate', this.#onPropagate);
|
||||||
|
this.#spreadsheet.removeEventListener('focusin', this.#onFocusin);
|
||||||
|
this.#spreadsheet.removeEventListener('focusout', this.#onFocusout);
|
||||||
}
|
}
|
||||||
|
|
||||||
#lock = false;
|
#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 {
|
override update(changedProperties: PropertyValues<this>): void {
|
||||||
super.update(changedProperties);
|
super.update(changedProperties);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -106,6 +106,11 @@ const styles = css`
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::slotted(folk-cell:hover) {
|
||||||
|
outline: 1px solid #1b73e8;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
::slotted(folk-cell:focus) {
|
::slotted(folk-cell:focus) {
|
||||||
outline: 2px solid #1b73e8;
|
outline: 2px solid #1b73e8;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue