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

space thingy

This commit is contained in:
“chrisshank” 2024-12-12 13:06:03 -08:00
parent d7abdf752c
commit b8130582c9
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/spreadsheet-shape-projection.html
View File

@ -28,6 +28,10 @@
<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-shape x="200" y="200" width="50" height="50" rotation="45"></folk-shape>
<folk-shape x="400" y="100" width="50" height="50"></folk-shape>
<folk-shape x="300" y="200" width="50" height="50"></folk-shape>
<folk-shape x="500" y="300" width="50" height="50" rotation="45"></folk-shape>
</folk-space-projector>
<script type="module">

10
src/folk-space-projector.ts
View File

@ -13,13 +13,15 @@ export class FolkSpaceProjector extends FolkBaseSet {
static override styles = [
FolkBaseSet.styles,
css`
folk-shape {
folk-spreadsheet {
position: absolute;
bottom: 5px;
right: 5px;
pointer-events: auto;
}
`,
];
#shape = document.createElement('folk-shape');
#spreadsheet = document.createElement('folk-spreadsheet');
override firstUpdated(changedProperties: PropertyValues<this>): void {
@ -27,9 +29,7 @@ export class FolkSpaceProjector extends FolkBaseSet {
this.#spreadsheet.style.setProperty('--cell-width', '50px');
this.#shape.appendChild(this.#spreadsheet);
this.renderRoot.append(this.#shape);
this.renderRoot.append(this.#spreadsheet);
}
connectedCallback(): void {