rename spreadsheet
This commit is contained in:
“chrisshank”
parent
27cf7e5022
commit
24e5c3cae5
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
|
||||
body[overlay] {
|
||||
s-table::after {
|
||||
folk-spreadsheet::after {
|
||||
display: block;
|
||||
content: '';
|
||||
position: fixed;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
s-cell[graph] {
|
||||
folk-cell[graph] {
|
||||
position: fixed;
|
||||
top: var(--cell-top);
|
||||
left: var(--cell-left);
|
||||
|
|
@ -46,133 +46,133 @@
|
|||
<body>
|
||||
<button>Toggle</button>
|
||||
<fc-geometry x="50" y="50" width="500">
|
||||
<s-table>
|
||||
<s-cell
|
||||
<folk-spreadsheet>
|
||||
<folk-cell
|
||||
column="A"
|
||||
row="1"
|
||||
expression="1"
|
||||
style="--cell-top: 100px; --cell-left: 100px; view-transition-name: A1"
|
||||
></s-cell>
|
||||
<s-cell column="B" row="1"></s-cell>
|
||||
<s-cell column="C" row="1"></s-cell>
|
||||
<s-cell column="D" row="1"></s-cell>
|
||||
<s-cell column="E" row="1"></s-cell>
|
||||
<s-cell column="F" row="1"></s-cell>
|
||||
<s-cell column="G" row="1"></s-cell>
|
||||
<s-cell column="H" row="1"></s-cell>
|
||||
<s-cell column="I" row="1"></s-cell>
|
||||
<s-cell column="J" row="1"></s-cell>
|
||||
<s-cell
|
||||
></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"
|
||||
style="--cell-top: 200px; --cell-left: 100px; view-transition-name: A2"
|
||||
></s-cell>
|
||||
<s-cell column="B" row="2"></s-cell>
|
||||
<s-cell column="C" row="2"></s-cell>
|
||||
<s-cell column="D" row="2"></s-cell>
|
||||
<s-cell column="E" row="2"></s-cell>
|
||||
<s-cell column="F" row="2"></s-cell>
|
||||
<s-cell column="G" row="2"></s-cell>
|
||||
<s-cell column="H" row="2"></s-cell>
|
||||
<s-cell column="I" row="2"></s-cell>
|
||||
<s-cell column="J" row="2"></s-cell>
|
||||
<s-cell column="A" row="3"></s-cell>
|
||||
<s-cell column="B" row="3"></s-cell>
|
||||
<s-cell column="C" row="3"></s-cell>
|
||||
<s-cell column="D" row="3"></s-cell>
|
||||
<s-cell column="E" row="3"></s-cell>
|
||||
<s-cell column="F" row="3"></s-cell>
|
||||
<s-cell column="G" row="3"></s-cell>
|
||||
<s-cell column="H" row="3"></s-cell>
|
||||
<s-cell column="I" row="3"></s-cell>
|
||||
<s-cell column="J" row="3"></s-cell>
|
||||
<s-cell column="A" row="4"></s-cell>
|
||||
<s-cell column="B" row="4"></s-cell>
|
||||
<s-cell
|
||||
></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"
|
||||
expression="$A1 + $A2"
|
||||
style="--cell-top: 150px; --cell-left: 250px; view-transition-name: C4"
|
||||
></s-cell>
|
||||
<s-cell column="D" row="4"></s-cell>
|
||||
<s-cell column="E" row="4"></s-cell>
|
||||
<s-cell column="F" row="4"></s-cell>
|
||||
<s-cell column="G" row="4"></s-cell>
|
||||
<s-cell column="H" row="4"></s-cell>
|
||||
<s-cell column="I" row="4"></s-cell>
|
||||
<s-cell column="J" row="4"></s-cell>
|
||||
<s-cell column="A" row="5"></s-cell>
|
||||
<s-cell column="B" row="5"></s-cell>
|
||||
<s-cell column="C" row="5"></s-cell>
|
||||
<s-cell column="D" row="5"></s-cell>
|
||||
<s-cell column="E" row="5"></s-cell>
|
||||
<s-cell column="F" row="5"></s-cell>
|
||||
<s-cell column="G" row="5"></s-cell>
|
||||
<s-cell column="H" row="5"></s-cell>
|
||||
<s-cell column="I" row="5"></s-cell>
|
||||
<s-cell column="J" row="5"></s-cell>
|
||||
<s-cell column="A" row="6"></s-cell>
|
||||
<s-cell column="B" row="6"></s-cell>
|
||||
<s-cell column="C" row="6"></s-cell>
|
||||
<s-cell column="D" row="6"></s-cell>
|
||||
<s-cell column="E" row="6"></s-cell>
|
||||
<s-cell column="F" row="6"></s-cell>
|
||||
<s-cell column="G" row="6"></s-cell>
|
||||
<s-cell column="H" row="6"></s-cell>
|
||||
<s-cell column="I" row="6"></s-cell>
|
||||
<s-cell column="J" row="6"></s-cell>
|
||||
<s-cell column="A" row="7"></s-cell>
|
||||
<s-cell column="B" row="7"></s-cell>
|
||||
<s-cell column="C" row="7"></s-cell>
|
||||
<s-cell column="D" row="7"></s-cell>
|
||||
<s-cell column="E" row="7"></s-cell>
|
||||
<s-cell column="F" row="7"></s-cell>
|
||||
<s-cell column="G" row="7"></s-cell>
|
||||
<s-cell column="H" row="7"></s-cell>
|
||||
<s-cell column="I" row="7"></s-cell>
|
||||
<s-cell column="J" row="7"></s-cell>
|
||||
<s-cell column="A" row="8"></s-cell>
|
||||
<s-cell column="B" row="8"></s-cell>
|
||||
<s-cell column="C" row="8"></s-cell>
|
||||
<s-cell column="D" row="8"></s-cell>
|
||||
<s-cell column="E" row="8"></s-cell>
|
||||
<s-cell column="F" row="8"></s-cell>
|
||||
<s-cell column="G" row="8"></s-cell>
|
||||
<s-cell column="H" row="8"></s-cell>
|
||||
<s-cell column="I" row="8"></s-cell>
|
||||
<s-cell column="J" row="8"></s-cell>
|
||||
<s-cell column="A" row="9"></s-cell>
|
||||
<s-cell column="B" row="9"></s-cell>
|
||||
<s-cell column="C" row="9"></s-cell>
|
||||
<s-cell column="D" row="9"></s-cell>
|
||||
<s-cell column="E" row="9"></s-cell>
|
||||
<s-cell column="F" row="9"></s-cell>
|
||||
<s-cell column="G" row="9"></s-cell>
|
||||
<s-cell column="H" row="9"></s-cell>
|
||||
<s-cell column="I" row="9"></s-cell>
|
||||
<s-cell column="J" row="9"></s-cell>
|
||||
<s-cell column="A" row="10"></s-cell>
|
||||
<s-cell column="B" row="10"></s-cell>
|
||||
<s-cell column="C" row="10"></s-cell>
|
||||
<s-cell column="D" row="10"></s-cell>
|
||||
<s-cell column="E" row="10"></s-cell>
|
||||
<s-cell column="F" row="10"></s-cell>
|
||||
<s-cell column="G" row="10"></s-cell>
|
||||
<s-cell column="H" row="10"></s-cell>
|
||||
<s-cell column="I" row="10"></s-cell>
|
||||
<s-cell column="J" row="10"></s-cell>
|
||||
</s-table>
|
||||
></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-spreadsheet>
|
||||
</fc-geometry>
|
||||
|
||||
<script type="module">
|
||||
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
|
||||
import { FolkConnection } from '../src/arrows/fc-connection.ts';
|
||||
import { SpreadsheetTable } from '../src/spreadsheet/spreadsheet.ts';
|
||||
import { FolkSpreadsheet } from '../src/spreadsheet/spreadsheet.ts';
|
||||
|
||||
FolkGeometry.register();
|
||||
FolkConnection.register();
|
||||
SpreadsheetTable.register();
|
||||
FolkSpreadsheet.register();
|
||||
|
||||
let isProjected = false;
|
||||
const button = document.querySelector('button');
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
function addOverlayGraph() {
|
||||
document.body.setAttribute('overlay', '');
|
||||
|
||||
document.querySelectorAll('s-cell').forEach((cell) => {
|
||||
document.querySelectorAll('folk-cell').forEach((cell) => {
|
||||
if (cell.dependencies.length === 0) return;
|
||||
|
||||
cell.setAttribute('graph', '');
|
||||
|
|
@ -197,8 +197,8 @@
|
|||
dep.setAttribute('graph', '');
|
||||
|
||||
const connection = document.createElement('fc-connection');
|
||||
connection.source = `s-cell[row="${dep.row}"][column="${dep.column}"]`;
|
||||
connection.target = `s-cell[row="${cell.row}"][column="${cell.column}"]`;
|
||||
connection.source = `folk-cell[row="${dep.row}"][column="${dep.column}"]`;
|
||||
connection.target = `folk-cell[row="${cell.row}"][column="${cell.column}"]`;
|
||||
|
||||
document.body.appendChild(connection);
|
||||
}
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
|
||||
document.querySelectorAll('fc-connection').forEach((arrow) => arrow.remove());
|
||||
|
||||
document.querySelectorAll('s-cell').forEach((cell) => {
|
||||
document.querySelectorAll('folk-cell').forEach((cell) => {
|
||||
cell.removeAttribute('graph', '');
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,126 +40,126 @@
|
|||
</fc-geometry>
|
||||
|
||||
<fc-geometry x="25" y="300" width="500">
|
||||
<s-table>
|
||||
<s-cell row="1" column="A" expression="0"></s-cell>
|
||||
<s-cell row="1" column="B"></s-cell>
|
||||
<s-cell row="1" column="C"></s-cell>
|
||||
<s-cell row="1" column="D"></s-cell>
|
||||
<s-cell row="1" column="E"></s-cell>
|
||||
<s-cell row="1" column="F"></s-cell>
|
||||
<s-cell row="1" column="G"></s-cell>
|
||||
<s-cell row="1" column="H"></s-cell>
|
||||
<s-cell row="1" column="I"></s-cell>
|
||||
<s-cell row="1" column="J"></s-cell>
|
||||
<s-cell row="2" column="A" expression="0"></s-cell>
|
||||
<s-cell row="2" column="B"></s-cell>
|
||||
<s-cell row="2" column="C"></s-cell>
|
||||
<s-cell row="2" column="D"></s-cell>
|
||||
<s-cell row="2" column="E"></s-cell>
|
||||
<s-cell row="2" column="F"></s-cell>
|
||||
<s-cell row="2" column="G"></s-cell>
|
||||
<s-cell row="2" column="H"></s-cell>
|
||||
<s-cell row="2" column="I"></s-cell>
|
||||
<s-cell row="2" column="J"></s-cell>
|
||||
<s-cell row="3" column="A" expression="[$A1 + 0.25, $A2 - 0.25]"></s-cell>
|
||||
<s-cell row="3" column="B"></s-cell>
|
||||
<s-cell row="3" column="C"></s-cell>
|
||||
<s-cell row="3" column="D"></s-cell>
|
||||
<s-cell row="3" column="E"></s-cell>
|
||||
<s-cell row="3" column="F"></s-cell>
|
||||
<s-cell row="3" column="G"></s-cell>
|
||||
<s-cell row="3" column="H"></s-cell>
|
||||
<s-cell row="3" column="I"></s-cell>
|
||||
<s-cell row="3" column="J"></s-cell>
|
||||
<s-cell row="4" column="A"></s-cell>
|
||||
<s-cell row="4" column="B"></s-cell>
|
||||
<s-cell row="4" column="C"></s-cell>
|
||||
<s-cell row="4" column="D"></s-cell>
|
||||
<s-cell row="4" column="E"></s-cell>
|
||||
<s-cell row="4" column="F"></s-cell>
|
||||
<s-cell row="4" column="G"></s-cell>
|
||||
<s-cell row="4" column="H"></s-cell>
|
||||
<s-cell row="4" column="I"></s-cell>
|
||||
<s-cell row="4" column="J"></s-cell>
|
||||
<s-cell row="5" column="A"></s-cell>
|
||||
<s-cell row="5" column="B"></s-cell>
|
||||
<s-cell row="5" column="C"></s-cell>
|
||||
<s-cell row="5" column="D"></s-cell>
|
||||
<s-cell row="5" column="E"></s-cell>
|
||||
<s-cell row="5" column="F"></s-cell>
|
||||
<s-cell row="5" column="G"></s-cell>
|
||||
<s-cell row="5" column="H"></s-cell>
|
||||
<s-cell row="5" column="I"></s-cell>
|
||||
<s-cell row="5" column="J"></s-cell>
|
||||
<s-cell row="6" column="A"></s-cell>
|
||||
<s-cell row="6" column="B"></s-cell>
|
||||
<s-cell row="6" column="C"></s-cell>
|
||||
<s-cell row="6" column="D"></s-cell>
|
||||
<s-cell row="6" column="E"></s-cell>
|
||||
<s-cell row="6" column="F"></s-cell>
|
||||
<s-cell row="6" column="G"></s-cell>
|
||||
<s-cell row="6" column="H"></s-cell>
|
||||
<s-cell row="6" column="I"></s-cell>
|
||||
<s-cell row="6" column="J"></s-cell>
|
||||
<s-cell row="7" column="A"></s-cell>
|
||||
<s-cell row="7" column="B"></s-cell>
|
||||
<s-cell row="7" column="C"></s-cell>
|
||||
<s-cell row="7" column="D"></s-cell>
|
||||
<s-cell row="7" column="E"></s-cell>
|
||||
<s-cell row="7" column="F"></s-cell>
|
||||
<s-cell row="7" column="G"></s-cell>
|
||||
<s-cell row="7" column="H"></s-cell>
|
||||
<s-cell row="7" column="I"></s-cell>
|
||||
<s-cell row="7" column="J"></s-cell>
|
||||
<s-cell row="8" column="A"></s-cell>
|
||||
<s-cell row="8" column="B"></s-cell>
|
||||
<s-cell row="8" column="C"></s-cell>
|
||||
<s-cell row="8" column="D"></s-cell>
|
||||
<s-cell row="8" column="E"></s-cell>
|
||||
<s-cell row="8" column="F"></s-cell>
|
||||
<s-cell row="8" column="G"></s-cell>
|
||||
<s-cell row="8" column="H"></s-cell>
|
||||
<s-cell row="8" column="I"></s-cell>
|
||||
<s-cell row="8" column="J"></s-cell>
|
||||
<s-cell row="9" column="A"></s-cell>
|
||||
<s-cell row="9" column="B"></s-cell>
|
||||
<s-cell row="9" column="C"></s-cell>
|
||||
<s-cell row="9" column="D"></s-cell>
|
||||
<s-cell row="9" column="E"></s-cell>
|
||||
<s-cell row="9" column="F"></s-cell>
|
||||
<s-cell row="9" column="G"></s-cell>
|
||||
<s-cell row="9" column="H"></s-cell>
|
||||
<s-cell row="9" column="I"></s-cell>
|
||||
<s-cell row="9" column="J"></s-cell>
|
||||
<s-cell row="10" column="A"></s-cell>
|
||||
<s-cell row="10" column="B"></s-cell>
|
||||
<s-cell row="10" column="C"></s-cell>
|
||||
<s-cell row="10" column="D"></s-cell>
|
||||
<s-cell row="10" column="E"></s-cell>
|
||||
<s-cell row="10" column="F"></s-cell>
|
||||
<s-cell row="10" column="G"></s-cell>
|
||||
<s-cell row="10" column="H"></s-cell>
|
||||
<s-cell row="10" column="I"></s-cell>
|
||||
<s-cell row="10" column="J"></s-cell>
|
||||
</s-table>
|
||||
<folk-spreadsheet>
|
||||
<folk-cell row="1" column="A" expression="0"></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="0"></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" expression="[$A1 + 0.25, $A2 - 0.25]"></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>
|
||||
</fc-geometry>
|
||||
|
||||
<event-propagator
|
||||
source="#map1"
|
||||
target="s-cell[column='A'][row='1']"
|
||||
target="folk-cell[column='A'][row='1']"
|
||||
triggers="recenter"
|
||||
expression="$target.expression = $source.coordinates.lat"
|
||||
></event-propagator>
|
||||
|
||||
<event-propagator
|
||||
source="#map1"
|
||||
target="s-cell[column='A'][row='2']"
|
||||
target="folk-cell[column='A'][row='2']"
|
||||
triggers="recenter"
|
||||
expression="$target.expression = $source.coordinates.lng"
|
||||
></event-propagator>
|
||||
|
||||
<event-propagator
|
||||
source="s-cell[column='A'][row='3']"
|
||||
source="folk-cell[column='A'][row='3']"
|
||||
target="#map2"
|
||||
triggers="propagate"
|
||||
expression="$target.coordinates = $source.value"
|
||||
|
|
@ -169,11 +169,11 @@
|
|||
import { FolkMap } from '../src/folk-map.ts';
|
||||
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
|
||||
import { EventPropagator } from '../src/arrows/event-propagator.ts';
|
||||
import { SpreadsheetTable } from '../src/spreadsheet/spreadsheet.ts';
|
||||
import { FolkSpreadsheet } from '../src/spreadsheet/spreadsheet.ts';
|
||||
|
||||
FolkMap.register();
|
||||
FolkGeometry.register();
|
||||
SpreadsheetTable.register();
|
||||
FolkSpreadsheet.register();
|
||||
EventPropagator.register();
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -18,116 +18,116 @@
|
|||
</head>
|
||||
<body>
|
||||
<fc-geometry x="50" y="50" width="500">
|
||||
<s-table>
|
||||
<s-cell column="A" row="1" expression="1"></s-cell>
|
||||
<s-cell column="B" row="1"></s-cell>
|
||||
<s-cell column="C" row="1"></s-cell>
|
||||
<s-cell column="D" row="1"></s-cell>
|
||||
<s-cell column="E" row="1"></s-cell>
|
||||
<s-cell column="F" row="1"></s-cell>
|
||||
<s-cell column="G" row="1"></s-cell>
|
||||
<s-cell column="H" row="1"></s-cell>
|
||||
<s-cell column="I" row="1"></s-cell>
|
||||
<s-cell column="J" row="1"></s-cell>
|
||||
<s-cell column="A" row="2" expression="$A1 * 2"></s-cell>
|
||||
<s-cell column="B" row="2"></s-cell>
|
||||
<s-cell column="C" row="2"></s-cell>
|
||||
<s-cell column="D" row="2"></s-cell>
|
||||
<s-cell column="E" row="2"></s-cell>
|
||||
<s-cell column="F" row="2"></s-cell>
|
||||
<s-cell column="G" row="2"></s-cell>
|
||||
<s-cell column="H" row="2"></s-cell>
|
||||
<s-cell column="I" row="2"></s-cell>
|
||||
<s-cell column="J" row="2"></s-cell>
|
||||
<s-cell column="A" row="3"></s-cell>
|
||||
<s-cell column="B" row="3"></s-cell>
|
||||
<s-cell column="C" row="3"></s-cell>
|
||||
<s-cell column="D" row="3"></s-cell>
|
||||
<s-cell column="E" row="3"></s-cell>
|
||||
<s-cell column="F" row="3"></s-cell>
|
||||
<s-cell column="G" row="3"></s-cell>
|
||||
<s-cell column="H" row="3"></s-cell>
|
||||
<s-cell column="I" row="3"></s-cell>
|
||||
<s-cell column="J" row="3"></s-cell>
|
||||
<s-cell column="A" row="4"></s-cell>
|
||||
<s-cell column="B" row="4"></s-cell>
|
||||
<s-cell column="C" row="4"></s-cell>
|
||||
<s-cell column="D" row="4"></s-cell>
|
||||
<s-cell column="E" row="4"></s-cell>
|
||||
<s-cell column="F" row="4"></s-cell>
|
||||
<s-cell column="G" row="4"></s-cell>
|
||||
<s-cell column="H" row="4"></s-cell>
|
||||
<s-cell column="I" row="4"></s-cell>
|
||||
<s-cell column="J" row="4"></s-cell>
|
||||
<s-cell column="A" row="5"></s-cell>
|
||||
<s-cell column="B" row="5"></s-cell>
|
||||
<s-cell column="C" row="5"></s-cell>
|
||||
<s-cell column="D" row="5"></s-cell>
|
||||
<s-cell column="E" row="5"></s-cell>
|
||||
<s-cell column="F" row="5"></s-cell>
|
||||
<s-cell column="G" row="5"></s-cell>
|
||||
<s-cell column="H" row="5"></s-cell>
|
||||
<s-cell column="I" row="5"></s-cell>
|
||||
<s-cell column="J" row="5"></s-cell>
|
||||
<s-cell column="A" row="6"></s-cell>
|
||||
<s-cell column="B" row="6"></s-cell>
|
||||
<s-cell column="C" row="6"></s-cell>
|
||||
<s-cell column="D" row="6"></s-cell>
|
||||
<s-cell column="E" row="6"></s-cell>
|
||||
<s-cell column="F" row="6"></s-cell>
|
||||
<s-cell column="G" row="6"></s-cell>
|
||||
<s-cell column="H" row="6"></s-cell>
|
||||
<s-cell column="I" row="6"></s-cell>
|
||||
<s-cell column="J" row="6"></s-cell>
|
||||
<s-cell column="A" row="7"></s-cell>
|
||||
<s-cell column="B" row="7"></s-cell>
|
||||
<s-cell column="C" row="7"></s-cell>
|
||||
<s-cell column="D" row="7"></s-cell>
|
||||
<s-cell column="E" row="7"></s-cell>
|
||||
<s-cell column="F" row="7"></s-cell>
|
||||
<s-cell column="G" row="7"></s-cell>
|
||||
<s-cell column="H" row="7"></s-cell>
|
||||
<s-cell column="I" row="7"></s-cell>
|
||||
<s-cell column="J" row="7"></s-cell>
|
||||
<s-cell column="A" row="8"></s-cell>
|
||||
<s-cell column="B" row="8"></s-cell>
|
||||
<s-cell column="C" row="8"></s-cell>
|
||||
<s-cell column="D" row="8"></s-cell>
|
||||
<s-cell column="E" row="8"></s-cell>
|
||||
<s-cell column="F" row="8"></s-cell>
|
||||
<s-cell column="G" row="8"></s-cell>
|
||||
<s-cell column="H" row="8"></s-cell>
|
||||
<s-cell column="I" row="8"></s-cell>
|
||||
<s-cell column="J" row="8"></s-cell>
|
||||
<s-cell column="A" row="9"></s-cell>
|
||||
<s-cell column="B" row="9"></s-cell>
|
||||
<s-cell column="C" row="9"></s-cell>
|
||||
<s-cell column="D" row="9"></s-cell>
|
||||
<s-cell column="E" row="9"></s-cell>
|
||||
<s-cell column="F" row="9"></s-cell>
|
||||
<s-cell column="G" row="9"></s-cell>
|
||||
<s-cell column="H" row="9"></s-cell>
|
||||
<s-cell column="I" row="9"></s-cell>
|
||||
<s-cell column="J" row="9"></s-cell>
|
||||
<s-cell column="A" row="10"></s-cell>
|
||||
<s-cell column="B" row="10"></s-cell>
|
||||
<s-cell column="C" row="10"></s-cell>
|
||||
<s-cell column="D" row="10"></s-cell>
|
||||
<s-cell column="E" row="10"></s-cell>
|
||||
<s-cell column="F" row="10"></s-cell>
|
||||
<s-cell column="G" row="10"></s-cell>
|
||||
<s-cell column="H" row="10"></s-cell>
|
||||
<s-cell column="I" row="10"></s-cell>
|
||||
<s-cell column="J" row="10"></s-cell>
|
||||
</s-table>
|
||||
<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-spreadsheet>
|
||||
</fc-geometry>
|
||||
|
||||
<script type="module">
|
||||
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
|
||||
import { SpreadsheetTable } from '../src/spreadsheet/spreadsheet.ts';
|
||||
import { FolkSpreadsheet } from '../src/spreadsheet/spreadsheet.ts';
|
||||
|
||||
FolkGeometry.register();
|
||||
SpreadsheetTable.register();
|
||||
FolkSpreadsheet.register();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ s-columns, s-rows, s-body {
|
|||
gap: 1px;
|
||||
}
|
||||
|
||||
::slotted(s-cell) {
|
||||
::slotted(folk-cell) {
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
|
@ -101,11 +101,11 @@ s-columns, s-rows, s-body {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
::slotted(s-cell[type='number']) {
|
||||
::slotted(folk-cell[type='number']) {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
::slotted(s-cell:focus) {
|
||||
::slotted(folk-cell:focus) {
|
||||
outline: 2px solid #1b73e8;
|
||||
z-index: 4;
|
||||
}
|
||||
|
|
@ -134,9 +134,9 @@ export function templateCells(numberOfRows: number, numberOfColumns: number, exp
|
|||
const row = i + 1;
|
||||
const expression = expressions[`${column}${row}`];
|
||||
cells.push(
|
||||
`<s-cell column="${column}" row="${row}" tabindex="0" ${
|
||||
`<folk-cell column="${column}" row="${row}" tabindex="0" ${
|
||||
expression ? `expression="${expression}"` : ''
|
||||
}></s-cell>`
|
||||
}></folk-cell>`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -145,16 +145,16 @@ export function templateCells(numberOfRows: number, numberOfColumns: number, exp
|
|||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
's-table': SpreadsheetTable;
|
||||
'folk-spreadsheet': FolkSpreadsheet;
|
||||
}
|
||||
}
|
||||
|
||||
export class SpreadsheetTable extends HTMLElement {
|
||||
static tagName = 's-table';
|
||||
export class FolkSpreadsheet extends HTMLElement {
|
||||
static tagName = 'folk-spreadsheet';
|
||||
|
||||
static register() {
|
||||
SpreadsheetCell.register();
|
||||
SpreadsheetHeader.register();
|
||||
FolkSpreadSheetCell.register();
|
||||
FolkSpreadsheetHeader.register();
|
||||
customElements.define(this.tagName, this);
|
||||
}
|
||||
|
||||
|
|
@ -162,7 +162,7 @@ export class SpreadsheetTable extends HTMLElement {
|
|||
|
||||
#textarea;
|
||||
|
||||
#editedCell: SpreadsheetCell | null = null;
|
||||
#editedCell: FolkSpreadSheetCell | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
|
@ -182,7 +182,7 @@ export class SpreadsheetTable extends HTMLElement {
|
|||
const columnNames = new Set();
|
||||
const rowNames = new Set();
|
||||
|
||||
const cells = this.querySelectorAll('s-cell');
|
||||
const cells = this.querySelectorAll('folk-cell');
|
||||
|
||||
cells.forEach((cell) => {
|
||||
columnNames.add(cell.column);
|
||||
|
|
@ -199,12 +199,14 @@ export class SpreadsheetTable extends HTMLElement {
|
|||
${columns
|
||||
.map(
|
||||
(column) =>
|
||||
`s-header[column="${column}"], ::slotted(s-cell[column="${column}"]) { grid-column: ${
|
||||
`s-header[column="${column}"], ::slotted(folk-cell[column="${column}"]) { grid-column: ${
|
||||
getColumnIndex(column) + 1
|
||||
}; }`
|
||||
)
|
||||
.join('\n')}
|
||||
${rows.map((row) => `s-header[row="${row}"], ::slotted(s-cell[row="${row}"]) { grid-row: ${row}; }`).join('\n')}
|
||||
${rows
|
||||
.map((row) => `s-header[row="${row}"], ::slotted(folk-cell[row="${row}"]) { grid-row: ${row}; }`)
|
||||
.join('\n')}
|
||||
</style>`;
|
||||
|
||||
this.#shadow.innerHTML = `
|
||||
|
|
@ -227,8 +229,8 @@ export class SpreadsheetTable extends HTMLElement {
|
|||
this.#range = range;
|
||||
}
|
||||
|
||||
getCell(column: string, row: number | string): SpreadsheetCell | null {
|
||||
return this.querySelector(`s-cell[column="${column}"][row="${row}"]`);
|
||||
getCell(column: string, row: number | string): FolkSpreadSheetCell | null {
|
||||
return this.querySelector(`folk-cell[column="${column}"][row="${row}"]`);
|
||||
}
|
||||
|
||||
handleEvent(event: Event) {
|
||||
|
|
@ -238,7 +240,7 @@ export class SpreadsheetTable extends HTMLElement {
|
|||
|
||||
const { target } = event;
|
||||
|
||||
if (target instanceof SpreadsheetCell) {
|
||||
if (target instanceof FolkSpreadSheetCell) {
|
||||
event.preventDefault(); // dont scroll as we change focus
|
||||
|
||||
switch (event.code) {
|
||||
|
|
@ -276,13 +278,13 @@ export class SpreadsheetTable extends HTMLElement {
|
|||
return;
|
||||
}
|
||||
case 'dblclick': {
|
||||
if (event.target instanceof SpreadsheetCell) {
|
||||
if (event.target instanceof FolkSpreadSheetCell) {
|
||||
this.#focusTextarea(event.target);
|
||||
}
|
||||
return;
|
||||
}
|
||||
case 'focusin': {
|
||||
if (event.target instanceof SpreadsheetCell) {
|
||||
if (event.target instanceof FolkSpreadSheetCell) {
|
||||
this.#getHeader('column', event.target.column).selected = true;
|
||||
this.#getHeader('row', event.target.row).selected = true;
|
||||
this.range = event.target.name;
|
||||
|
|
@ -291,7 +293,7 @@ export class SpreadsheetTable extends HTMLElement {
|
|||
return;
|
||||
}
|
||||
case 'focusout': {
|
||||
if (event.target instanceof SpreadsheetCell) {
|
||||
if (event.target instanceof FolkSpreadSheetCell) {
|
||||
this.#getHeader('column', event.target.column).selected = false;
|
||||
this.#getHeader('row', event.target.row).selected = false;
|
||||
this.range = event.target.name;
|
||||
|
|
@ -308,11 +310,11 @@ export class SpreadsheetTable extends HTMLElement {
|
|||
}
|
||||
}
|
||||
|
||||
#getHeader(type: 'row' | 'column', value: string | number): SpreadsheetHeader {
|
||||
#getHeader(type: 'row' | 'column', value: string | number): FolkSpreadsheetHeader {
|
||||
return this.#shadow.querySelector(`s-header[${type}="${value}"]`)!;
|
||||
}
|
||||
|
||||
#focusTextarea(cell: SpreadsheetCell) {
|
||||
#focusTextarea(cell: FolkSpreadSheetCell) {
|
||||
this.#editedCell = cell;
|
||||
const gridColumn = getColumnIndex(cell.column) + 2;
|
||||
const gridRow = cell.row + 1;
|
||||
|
|
@ -337,11 +339,11 @@ export class SpreadsheetTable extends HTMLElement {
|
|||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
's-header': SpreadsheetHeader;
|
||||
's-header': FolkSpreadsheetHeader;
|
||||
}
|
||||
}
|
||||
|
||||
export class SpreadsheetHeader extends HTMLElement {
|
||||
export class FolkSpreadsheetHeader extends HTMLElement {
|
||||
static tagName = 's-header';
|
||||
|
||||
static register() {
|
||||
|
|
@ -367,12 +369,12 @@ export class SpreadsheetHeader extends HTMLElement {
|
|||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
's-cell': SpreadsheetCell;
|
||||
'folk-cell': FolkSpreadSheetCell;
|
||||
}
|
||||
}
|
||||
|
||||
export class SpreadsheetCell extends HTMLElement {
|
||||
static tagName = 's-cell';
|
||||
export class FolkSpreadSheetCell extends HTMLElement {
|
||||
static tagName = 'folk-cell';
|
||||
|
||||
static register() {
|
||||
customElements.define(this.tagName, this);
|
||||
|
|
@ -413,7 +415,7 @@ export class SpreadsheetCell extends HTMLElement {
|
|||
|
||||
#expression = '';
|
||||
|
||||
#dependencies: ReadonlyArray<SpreadsheetCell> = [];
|
||||
#dependencies: ReadonlyArray<FolkSpreadSheetCell> = [];
|
||||
|
||||
get dependencies() {
|
||||
return this.#dependencies;
|
||||
|
|
@ -459,8 +461,8 @@ export class SpreadsheetCell extends HTMLElement {
|
|||
return this.#value;
|
||||
}
|
||||
|
||||
#getCell(column: string, row: number | string): SpreadsheetCell | null {
|
||||
return this.parentElement!.querySelector(`s-cell[column="${column}"][row="${row}"]`);
|
||||
#getCell(column: string, row: number | string): FolkSpreadSheetCell | null {
|
||||
return this.parentElement!.querySelector(`folk-cell[column="${column}"][row="${row}"]`);
|
||||
}
|
||||
|
||||
get cellAbove() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue