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