Skip to content

Commit

Permalink
rename spreadsheet
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChrisShank
ChrisShank committed Nov 26, 2024
1 parent 27cf7e5 commit 24e5c3c
Show file tree
Hide file tree
Showing 4 changed files with 356 additions and 354 deletions.
226 changes: 113 additions & 113 deletions demo/spreadsheet-graph.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

body[overlay] {
s-table::after {
folk-spreadsheet::after {
display: block;
content: '';
position: fixed;
Expand All @@ -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);
Expand All @@ -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');
Expand All @@ -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', '');
Expand All @@ -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);
}
Expand All @@ -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', '');
});
}
Expand Down
Loading

0 comments on commit 24e5c3c

Please sign in to comment.