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 { 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];

21
src/folk-spreadsheet.ts
View File

@ -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<string, string>) {
export function templateCells(numberOfRows: number, numberOfColumns: number, expressions: Record<string, string> = {}) {
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')}
</style>`;
this.style.setProperty('--column-count', columns.length.toString());
this.style.setProperty('--row-count', rows.length.toString());
this.#shadow.setHTMLUnsafe(html`
<s-header empty></s-header>
<s-columns>${columnHeaders}</s-columns>
@ -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);

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 };