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="100" width="50" height="50"></folk-shape>
<folk-shape x="100" y="200" 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="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> </folk-space-projector>
<script type="module"> <script type="module">

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

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