diff --git a/demo/spreadsheet-shape-projection.html b/demo/spreadsheet-shape-projection.html
new file mode 100644
index 0000000..b9e4e56
--- /dev/null
+++ b/demo/spreadsheet-shape-projection.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ Shapes
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/folk-ink.ts b/src/folk-ink.ts
index 8a3a92f..e8aae3f 100644
--- a/src/folk-ink.ts
+++ b/src/folk-ink.ts
@@ -1,8 +1,7 @@
import { getStroke, StrokeOptions } from 'perfect-freehand';
-import { css } from './common/tags';
import { FolkElement } from './common/folk-element';
import { property } from '@lit/reactive-element/decorators.js';
-import { PropertyValues } from '@lit/reactive-element';
+import { css, PropertyValues } from '@lit/reactive-element';
import { getSvgPathFromStroke } from './common/utils';
export type Point = [x: number, y: number, pressure: number];
diff --git a/src/folk-spreadsheet.ts b/src/folk-spreadsheet.ts
index ae2f4cb..e477756 100644
--- a/src/folk-spreadsheet.ts
+++ b/src/folk-spreadsheet.ts
@@ -3,8 +3,6 @@ import { css, html } from './common/tags';
// hardcoded column and row numbers
const styles = css`
:host {
- --column-number: 10;
- --row-number: 10;
--cell-height: 1.75rem;
--cell-width: 100px;
--border-color: #e1e1e1;
@@ -12,8 +10,8 @@ const styles = css`
box-sizing: border-box;
display: grid;
font-family: monospace;
- grid-template-columns: 50px repeat(var(--column-number), var(--cell-width));
- grid-template-rows: repeat(calc(var(--row-number) + 1), var(--cell-height));
+ grid-template-columns: 50px repeat(var(--column-count), var(--cell-width));
+ grid-template-rows: repeat(calc(var(--row-count) + 1), var(--cell-height));
position: relative;
overflow: scroll;
scroll-snap-type: both mandatory;
@@ -116,20 +114,20 @@ const styles = css`
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-function getColumnName(index: number) {
+export function getColumnName(index: number) {
return alphabet[index % alphabet.length];
}
-function getColumnIndex(name: string) {
+export function getColumnIndex(name: string) {
return alphabet.indexOf(name);
}
-function relativeColumnName(name: string, num: number) {
+export function relativeColumnName(name: string, num: number) {
const index = alphabet.indexOf(name);
return alphabet[index + num];
}
-export function templateCells(numberOfRows: number, numberOfColumns: number, expressions: Record) {
+export function templateCells(numberOfRows: number, numberOfColumns: number, expressions: Record = {}) {
const cells: string[] = [];
for (let i = 0; i < numberOfRows; i += 1) {
for (let j = 0; j < numberOfColumns; j += 1) {
@@ -214,6 +212,9 @@ export class FolkSpreadsheet extends HTMLElement {
.join('\n')}
`;
+ this.style.setProperty('--column-count', columns.length.toString());
+ this.style.setProperty('--row-count', rows.length.toString());
+
this.#shadow.setHTMLUnsafe(html`
${columnHeaders}
@@ -435,7 +436,7 @@ export class FolkSpreadSheetCell extends HTMLElement {
get expression() {
return this.#expression;
}
- set expression(expression) {
+ set expression(expression: any) {
expression = String(expression).trim();
this.#expression = expression;
@@ -499,7 +500,7 @@ export class FolkSpreadSheetCell extends HTMLElement {
this.#value = value;
this.textContent = value.toString();
- this.dispatchEvent(new Event('propagate'));
+ this.dispatchEvent(new Event('propagate', { bubbles: true }));
this.setAttribute('type', typeof value);
} catch (error) {
console.log(error);
diff --git a/src/standalone/folk-space-projector.ts b/src/standalone/folk-space-projector.ts
new file mode 100644
index 0000000..212aa64
--- /dev/null
+++ b/src/standalone/folk-space-projector.ts
@@ -0,0 +1,5 @@
+import { FolkSpaceProjector } from '../folk-space-projector';
+
+FolkSpaceProjector.define();
+
+export { FolkSpaceProjector };