jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first stab at spreadsheet space thingy

This commit is contained in:
“chrisshank” 2024-12-12 12:32:16 -08:00
parent 7b4a4a856e
commit 5fb84aab65
4 changed files with 55 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
demo/spreadsheet-shape-projection.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shapes</title>
<style>
html {
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
}
body {
min-height: 100%;
position: relative;
margin: 0;
}
folk-shape {
background: rgb(187, 178, 178);
}
</style>
</head>
<body>
<folk-space-projector>
<folk-shape x="100" y="100" width="50" height="50"></folk-shape>
<folk-shape x="100" y="200" width="50" height="50"></folk-shape>
<folk-shape x="100" y="300" width="50" height="50" rotation="45"></folk-shape>
</folk-space-projector>
<script type="module">
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-space-projector.ts';
</script>
</body>
</html>

3
src/folk-ink.ts
View File

@ -1,8 +1,7 @@
import { getStroke, StrokeOptions } from 'perfect-freehand'; import { getStroke, StrokeOptions } from 'perfect-freehand';
import { css } from './common/tags';
import { FolkElement } from './common/folk-element'; import { FolkElement } from './common/folk-element';
import { property } from '@lit/reactive-element/decorators.js'; 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'; import { getSvgPathFromStroke } from './common/utils';
export type Point = [x: number, y: number, pressure: number]; export type Point = [x: number, y: number, pressure: number];

21
src/folk-spreadsheet.ts
View File

@ -3,8 +3,6 @@ import { css, html } from './common/tags';
// hardcoded column and row numbers // hardcoded column and row numbers
const styles = css` const styles = css`
:host { :host {
--column-number: 10;
--row-number: 10;
--cell-height: 1.75rem; --cell-height: 1.75rem;
--cell-width: 100px; --cell-width: 100px;
--border-color: #e1e1e1; --border-color: #e1e1e1;
@ -12,8 +10,8 @@ const styles = css`
box-sizing: border-box; box-sizing: border-box;
display: grid; display: grid;
font-family: monospace; font-family: monospace;
grid-template-columns: 50px repeat(var(--column-number), var(--cell-width)); grid-template-columns: 50px repeat(var(--column-count), var(--cell-width));
grid-template-rows: repeat(calc(var(--row-number) + 1), var(--cell-height)); grid-template-rows: repeat(calc(var(--row-count) + 1), var(--cell-height));
position: relative; position: relative;
overflow: scroll; overflow: scroll;
scroll-snap-type: both mandatory; scroll-snap-type: both mandatory;
@ -116,20 +114,20 @@ const styles = css`
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
function getColumnName(index: number) { export function getColumnName(index: number) {
return alphabet[index % alphabet.length]; return alphabet[index % alphabet.length];
} }
function getColumnIndex(name: string) { export function getColumnIndex(name: string) {
return alphabet.indexOf(name); return alphabet.indexOf(name);
} }
function relativeColumnName(name: string, num: number) { export function relativeColumnName(name: string, num: number) {
const index = alphabet.indexOf(name); const index = alphabet.indexOf(name);
return alphabet[index + num]; return alphabet[index + num];
} }
export function templateCells(numberOfRows: number, numberOfColumns: number, expressions: Record<string, string>) { export function templateCells(numberOfRows: number, numberOfColumns: number, expressions: Record<string, string> = {}) {
const cells: string[] = []; const cells: string[] = [];
for (let i = 0; i < numberOfRows; i += 1) { for (let i = 0; i < numberOfRows; i += 1) {
for (let j = 0; j < numberOfColumns; j += 1) { for (let j = 0; j < numberOfColumns; j += 1) {
@ -214,6 +212,9 @@ export class FolkSpreadsheet extends HTMLElement {
.join('\n')} .join('\n')}
</style>`; </style>`;
this.style.setProperty('--column-count', columns.length.toString());
this.style.setProperty('--row-count', rows.length.toString());
this.#shadow.setHTMLUnsafe(html` this.#shadow.setHTMLUnsafe(html`
<s-header empty></s-header> <s-header empty></s-header>
<s-columns>${columnHeaders}</s-columns> <s-columns>${columnHeaders}</s-columns>
@ -435,7 +436,7 @@ export class FolkSpreadSheetCell extends HTMLElement {
get expression() { get expression() {
return this.#expression; return this.#expression;
} }
set expression(expression) { set expression(expression: any) {
expression = String(expression).trim(); expression = String(expression).trim();
this.#expression = expression; this.#expression = expression;
@ -499,7 +500,7 @@ export class FolkSpreadSheetCell extends HTMLElement {
this.#value = value; this.#value = value;
this.textContent = value.toString(); this.textContent = value.toString();
this.dispatchEvent(new Event('propagate')); this.dispatchEvent(new Event('propagate', { bubbles: true }));
this.setAttribute('type', typeof value); this.setAttribute('type', typeof value);
} catch (error) { } catch (error) {
console.log(error); console.log(error);

5
src/standalone/folk-space-projector.ts Normal file
View File

@ -0,0 +1,5 @@
import { FolkSpaceProjector } from '../folk-space-projector';
FolkSpaceProjector.define();
export { FolkSpaceProjector };