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

renames

This commit is contained in:
Orion Reed 2024-12-19 20:54:40 -05:00
parent 9fe82fc075
commit 39881e3930
4 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
labs/simple-space.ts → labs/folk-transformed-space.ts
View File

@ -3,8 +3,8 @@ import { html } from '@lib/tags';
import { TransformEvent } from '@lib/TransformEvent'; import { TransformEvent } from '@lib/TransformEvent';
import { css } from '@lit/reactive-element'; import { css } from '@lit/reactive-element';
export class SimpleSpace extends FolkElement { export class FolkTransformedSpace extends FolkElement {
static override tagName = 'simple-space'; static override tagName = 'folk-transformed-space';
static styles = css` static styles = css`
:host { :host {

5
labs/standalone/folk-transformed-space.ts Normal file
View File

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

5
labs/standalone/simple-space.ts
View File

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

11
website/canvas/simple-space.html → website/canvas/space-transform.html
View File

@ -9,7 +9,7 @@
margin: 0; margin: 0;
height: 100%; height: 100%;
} }
simple-space { folk-transformed-space {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -20,22 +20,21 @@
</style> </style>
</head> </head>
<body> <body>
<simple-space id="space"> <folk-transformed-space>
<folk-shape x="250" y="100" width="50" height="50"></folk-shape> <folk-shape x="250" y="100" width="50" height="50"></folk-shape>
<folk-shape x="200" y="200" width="75" height="75" rotation="90"></folk-shape> <folk-shape x="200" y="200" width="75" height="75" rotation="90"></folk-shape>
<folk-shape x="50" y="250" width="25" height="25" rotation="180"></folk-shape> <folk-shape x="50" y="250" width="25" height="25" rotation="180"></folk-shape>
<folk-shape x="350" y="50" width="100" height="100" rotation="270"></folk-shape> <folk-shape x="350" y="50" width="100" height="100" rotation="270"></folk-shape>
<folk-shape x="500" y="500" width="150" height="150" rotation="360"></folk-shape> <folk-shape x="500" y="500" width="150" height="150" rotation="360"></folk-shape>
</simple-space> </folk-transformed-space>
<script type="module"> <script type="module">
import '@labs/standalone/simple-space.ts'; import '@labs/standalone/folk-transformed-space.ts';
import '@labs/standalone/folk-shape.ts'; import '@labs/standalone/folk-shape.ts';
const space = document.getElementById('space'); const space = document.querySelector('folk-transformed-space');
document.addEventListener('click', (event) => { document.addEventListener('click', (event) => {
if (event.target !== space) return; if (event.target !== space) return;
// Random rotation between 30 and 75 degrees
const min = 20; const min = 20;
const max = 70; const max = 70;
const randomRotation = Math.random() * (max - min) + min; const randomRotation = Math.random() * (max - min) + min;