revert webcomponents.
This commit is contained in:
David Allemang
231
index.bak.html
231
index.bak.html
@@ -1,231 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Pipeline Test</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background: #222;
|
|
||||||
color: #eee;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
width: 80ch;
|
|
||||||
margin-inline: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.figure {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 20em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.figure > canvas {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<h1>Visualizer</h1>
|
|
||||||
|
|
||||||
<h2>Dynamic</h2>
|
|
||||||
|
|
||||||
<div class="figure" id="demo-pulses"></div>
|
|
||||||
|
|
||||||
<div class="figure" id="demo-piston"></div>
|
|
||||||
|
|
||||||
<h2>Static Sub-Figures</h2>
|
|
||||||
<div style="display: grid; grid-template-columns: 1fr 1fr;">
|
|
||||||
<div class="figure" id="demo-top-static"></div>
|
|
||||||
<div class="figure" id="demo-iso"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="atlas-container" style="position: absolute; right: 0; top: 0"></div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script type="module">
|
|
||||||
import {Engine} from './src/engine.js';
|
|
||||||
import {Diorama} from './src/diorama.js';
|
|
||||||
import {World, WorldFrame} from './src/world.js';
|
|
||||||
import {SpacetimeController} from './src/controller.js';
|
|
||||||
|
|
||||||
async function initDocument() {
|
|
||||||
try {
|
|
||||||
const engine = new Engine();
|
|
||||||
document.getElementById('atlas-container')?.appendChild(engine.atlas.canvas);
|
|
||||||
|
|
||||||
const w_static = new World(`
|
|
||||||
p -1 0 0 redstone_wire east=side west=none north=none south=none power=0
|
|
||||||
p 0 0 0 repeater facing=east delay=1 locked=false powered=false
|
|
||||||
p 2 0 0 oak_trapdoor facing=east half=bottom open=true
|
|
||||||
p 0 -1 0 lodestone
|
|
||||||
p 0 -2 0 piston facing=north extended=false
|
|
||||||
`)
|
|
||||||
const f_static = new WorldFrame(w_static);
|
|
||||||
const d_static_top = new Diorama('demo-top-static', f_static, () => engine.requestRender());
|
|
||||||
d_static_top.radius = 5;
|
|
||||||
d_static_top.theta = 180;
|
|
||||||
d_static_top.phi = 90;
|
|
||||||
d_static_top.centerView();
|
|
||||||
d_static_top.saveState();
|
|
||||||
engine.addDiorama(d_static_top)
|
|
||||||
const d_static_iso = new Diorama('demo-iso', f_static, () => engine.requestRender());
|
|
||||||
d_static_iso.radius = 5;
|
|
||||||
d_static_iso.centerView();
|
|
||||||
d_static_iso.saveState();
|
|
||||||
engine.addDiorama(d_static_iso);
|
|
||||||
const c_static_iso = new SpacetimeController(d_static_iso, {
|
|
||||||
timeline: false,
|
|
||||||
subticks: false,
|
|
||||||
autoplay: false,
|
|
||||||
loop: false,
|
|
||||||
zoom: false,
|
|
||||||
pan: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const w_pulses = new World(`
|
|
||||||
p 0 0 0 observer facing=south powered=false
|
|
||||||
p 0 0 1 observer facing=east powered=false
|
|
||||||
p 1 0 1 observer facing=north powered=false
|
|
||||||
p 1 0 0 observer facing=west powered=false
|
|
||||||
t 0
|
|
||||||
p 0 0 1 powered=false
|
|
||||||
p 0 0 0 powered=true
|
|
||||||
t 2
|
|
||||||
p 0 0 0 powered=false
|
|
||||||
p 1 0 0 powered=true
|
|
||||||
t 4
|
|
||||||
p 1 0 0 powered=false
|
|
||||||
p 1 0 1 powered=true
|
|
||||||
t 6
|
|
||||||
p 1 0 1 powered=false
|
|
||||||
p 0 0 1 powered=true
|
|
||||||
t 8
|
|
||||||
p 0 0 0
|
|
||||||
`);
|
|
||||||
const f_pulses = new WorldFrame(w_pulses);
|
|
||||||
const d_pulses = new Diorama('demo-pulses', f_pulses, () => engine.requestRender());
|
|
||||||
d_pulses.radius = 4;
|
|
||||||
d_pulses.centerView()
|
|
||||||
d_pulses.saveState()
|
|
||||||
engine.addDiorama(d_pulses);
|
|
||||||
const c_pulses = new SpacetimeController(d_pulses, {
|
|
||||||
timeline: false,
|
|
||||||
subticks: false,
|
|
||||||
loop: true,
|
|
||||||
autoplay: true,
|
|
||||||
pan: false,
|
|
||||||
zoom: false,
|
|
||||||
orbit: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const w_piston = new World(`
|
|
||||||
p 0 0 0 redstone_wire power=0 east=side west=none north=none south=none
|
|
||||||
p 1 0 0 repeater facing=west powered=false locked=false delay=2
|
|
||||||
p 2 0 0 sticky_piston facing=east extended=false
|
|
||||||
p 2 -1 0 piston facing=east extended=false
|
|
||||||
p 3 0 0 slime_block
|
|
||||||
p 4 0 0 slime_block
|
|
||||||
t 2
|
|
||||||
p 0 0 0 power=15
|
|
||||||
t 6
|
|
||||||
p 1 0 0 powered=true
|
|
||||||
l begin-extend
|
|
||||||
t 7
|
|
||||||
p 2 0 0 extended=true
|
|
||||||
p 4.0 0 0 air &
|
|
||||||
p 4.5 0 0 slime_block
|
|
||||||
p 3.0 0 0 air &
|
|
||||||
p 3.5 0 0 slime_block
|
|
||||||
p 2.5 0 0 piston_head facing=east short=true type=sticky
|
|
||||||
p 2 -1 0 extended=true
|
|
||||||
p 2.5 -1 0 piston_head facing=east short=true type=normal
|
|
||||||
t 8
|
|
||||||
p 4.5 0 0 air &
|
|
||||||
p 5.0 0 0 slime_block
|
|
||||||
p 3.5 0 0 air &
|
|
||||||
p 4.0 0 0 slime_block
|
|
||||||
p 2.5 0 0 air &
|
|
||||||
p 3.0 0 0 piston_head facing=east short=false type=sticky
|
|
||||||
p 2.5 -1 0 air &
|
|
||||||
p 3.0 -1 0 piston_head facing=east short=false type=normal
|
|
||||||
l end-extend
|
|
||||||
t 12
|
|
||||||
p 0 0 0 power=0
|
|
||||||
t 16
|
|
||||||
p 1 0 0 powered=false
|
|
||||||
l begin-retract
|
|
||||||
t 17
|
|
||||||
p 3 0 0 air &
|
|
||||||
p 2.5 0 0 piston_head facing=east short=true type=sticky
|
|
||||||
p 4.0 0 0 air &
|
|
||||||
p 3.5 0 0 slime_block
|
|
||||||
p 5.0 0 0 air &
|
|
||||||
p 4.5 0 0 slime_block
|
|
||||||
p 3.0 -1 0 air &
|
|
||||||
p 2.5 -1 0 piston_head facing=east short=true type=normal
|
|
||||||
t 18
|
|
||||||
p 2.5 0 0 air
|
|
||||||
p 3.5 0 0 air &
|
|
||||||
p 3.0 0 0 slime_block
|
|
||||||
p 4.5 0 0 air &
|
|
||||||
p 4.0 0 0 slime_block
|
|
||||||
p 2 0 0 extended=false
|
|
||||||
p 2.5 -1 0 air
|
|
||||||
p 2 -1 0 extended=false
|
|
||||||
l end-retract
|
|
||||||
`);
|
|
||||||
const f_piston_t = new WorldFrame(w_piston);
|
|
||||||
const d_piston_t = new Diorama('demo-piston', f_piston_t, () => engine.requestRender());
|
|
||||||
d_piston_t.radius = 4;
|
|
||||||
d_piston_t.centerView();
|
|
||||||
d_piston_t.saveState();
|
|
||||||
engine.addDiorama(d_piston_t);
|
|
||||||
const c_piston = new SpacetimeController(d_piston_t, {
|
|
||||||
loop: true,
|
|
||||||
})
|
|
||||||
|
|
||||||
// Fetch and build everything concurrently!
|
|
||||||
await engine.updateAll();
|
|
||||||
engine.requestRender();
|
|
||||||
|
|
||||||
|
|
||||||
// const factor = 2.5;
|
|
||||||
// const update_time = () => {
|
|
||||||
// for (let i = 0; i < 20; i++) {
|
|
||||||
// setTimeout(() => f_piston_t.seek(i), i * factor * 50)
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
// setInterval(update_time, factor * 1000)
|
|
||||||
// update_time();
|
|
||||||
//
|
|
||||||
// let i = 0;
|
|
||||||
// let n = w_piston.eventCount;
|
|
||||||
// const update_state = () => {
|
|
||||||
// f_piston_s.seekIndex(i);
|
|
||||||
// i = (i + 1) % n;
|
|
||||||
// };
|
|
||||||
// setInterval(update_state, 250);
|
|
||||||
// update_state()
|
|
||||||
//
|
|
||||||
// const update_pulses = () => {
|
|
||||||
// for (let i = 0; i < 8; i++) {
|
|
||||||
// setTimeout(() => f_pulses.seek(i), i * factor * 50)
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
// setInterval(update_pulses, factor * 8 * 50)
|
|
||||||
// update_pulses();
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Renderer Initialization Failed:", err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
initDocument();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
230
index.html
230
index.html
@@ -1,23 +1,231 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Web Components Test</title>
|
<meta charset="UTF-8">
|
||||||
|
<title>Pipeline Test</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #222;
|
||||||
|
color: #eee;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
<link rel="stylesheet" href="./src/styles.css">
|
main {
|
||||||
<script type="module" src="./src/components.js"></script>
|
width: 80ch;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 20em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure > canvas {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<mc-diorama>
|
<h1>Visualizer</h1>
|
||||||
<mc-frame>
|
|
||||||
<mc-world>
|
<h2>Dynamic</h2>
|
||||||
|
|
||||||
|
<div class="figure" id="demo-pulses"></div>
|
||||||
|
|
||||||
|
<div class="figure" id="demo-piston"></div>
|
||||||
|
|
||||||
|
<h2>Static Sub-Figures</h2>
|
||||||
|
<div style="display: grid; grid-template-columns: 1fr 1fr;">
|
||||||
|
<div class="figure" id="demo-top-static"></div>
|
||||||
|
<div class="figure" id="demo-iso"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="atlas-container" style="position: absolute; right: 0; top: 0"></div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import {Engine} from './src/engine.js';
|
||||||
|
import {Diorama} from './src/diorama.js';
|
||||||
|
import {World, WorldFrame} from './src/world.js';
|
||||||
|
import {SpacetimeController} from "./src/controller.js";
|
||||||
|
|
||||||
|
async function initDocument() {
|
||||||
|
try {
|
||||||
|
const engine = new Engine();
|
||||||
|
document.getElementById('atlas-container')?.appendChild(engine.atlas.canvas);
|
||||||
|
|
||||||
|
const w_static = new World(`
|
||||||
p -1 0 0 redstone_wire east=side west=none north=none south=none power=0
|
p -1 0 0 redstone_wire east=side west=none north=none south=none power=0
|
||||||
p 0 0 0 repeater facing=east delay=1 locked=false powered=false
|
p 0 0 0 repeater facing=east delay=1 locked=false powered=false
|
||||||
p 2 0 0 oak_trapdoor facing=east half=bottom open=true
|
p 2 0 0 oak_trapdoor facing=east half=bottom open=true
|
||||||
p 0 -1 0 lodestone
|
p 0 -1 0 lodestone
|
||||||
p 0 -2 0 piston facing=north extended=false
|
p 0 -2 0 piston facing=north extended=false
|
||||||
</mc-world>
|
`)
|
||||||
</mc-frame>
|
const f_static = new WorldFrame(w_static);
|
||||||
</mc-diorama>
|
const d_static_top = new Diorama('demo-top-static', f_static, () => engine.requestRender());
|
||||||
</main>
|
d_static_top.radius = 5;
|
||||||
|
d_static_top.theta = 180;
|
||||||
|
d_static_top.phi = 90;
|
||||||
|
d_static_top.centerView();
|
||||||
|
d_static_top.saveState();
|
||||||
|
engine.addDiorama(d_static_top)
|
||||||
|
const d_static_iso = new Diorama('demo-iso', f_static, () => engine.requestRender());
|
||||||
|
d_static_iso.radius = 5;
|
||||||
|
d_static_iso.centerView();
|
||||||
|
d_static_iso.saveState();
|
||||||
|
engine.addDiorama(d_static_iso);
|
||||||
|
const c_static_iso = new SpacetimeController(d_static_iso, {
|
||||||
|
timeline: false,
|
||||||
|
subticks: false,
|
||||||
|
autoplay: false,
|
||||||
|
loop: false,
|
||||||
|
zoom: false,
|
||||||
|
pan: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const w_pulses = new World(`
|
||||||
|
p 0 0 0 observer facing=south powered=false
|
||||||
|
p 0 0 1 observer facing=east powered=false
|
||||||
|
p 1 0 1 observer facing=north powered=false
|
||||||
|
p 1 0 0 observer facing=west powered=false
|
||||||
|
t 0
|
||||||
|
p 0 0 1 powered=false
|
||||||
|
p 0 0 0 powered=true
|
||||||
|
t 2
|
||||||
|
p 0 0 0 powered=false
|
||||||
|
p 1 0 0 powered=true
|
||||||
|
t 4
|
||||||
|
p 1 0 0 powered=false
|
||||||
|
p 1 0 1 powered=true
|
||||||
|
t 6
|
||||||
|
p 1 0 1 powered=false
|
||||||
|
p 0 0 1 powered=true
|
||||||
|
t 8
|
||||||
|
p 0 0 0
|
||||||
|
`);
|
||||||
|
const f_pulses = new WorldFrame(w_pulses);
|
||||||
|
const d_pulses = new Diorama('demo-pulses', f_pulses, () => engine.requestRender());
|
||||||
|
d_pulses.radius = 4;
|
||||||
|
d_pulses.centerView()
|
||||||
|
d_pulses.saveState()
|
||||||
|
engine.addDiorama(d_pulses);
|
||||||
|
const c_pulses = new SpacetimeController(d_pulses, {
|
||||||
|
timeline: false,
|
||||||
|
subticks: false,
|
||||||
|
loop: true,
|
||||||
|
autoplay: true,
|
||||||
|
pan: false,
|
||||||
|
zoom: false,
|
||||||
|
orbit: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const w_piston = new World(`
|
||||||
|
p 0 0 0 redstone_wire power=0 east=side west=none north=none south=none
|
||||||
|
p 1 0 0 repeater facing=west powered=false locked=false delay=2
|
||||||
|
p 2 0 0 sticky_piston facing=east extended=false
|
||||||
|
p 2 -1 0 piston facing=east extended=false
|
||||||
|
p 3 0 0 slime_block
|
||||||
|
p 4 0 0 slime_block
|
||||||
|
t 2
|
||||||
|
p 0 0 0 power=15
|
||||||
|
t 6
|
||||||
|
p 1 0 0 powered=true
|
||||||
|
l begin-extend
|
||||||
|
t 7
|
||||||
|
p 2 0 0 extended=true
|
||||||
|
p 4.0 0 0 air &
|
||||||
|
p 4.5 0 0 slime_block
|
||||||
|
p 3.0 0 0 air &
|
||||||
|
p 3.5 0 0 slime_block
|
||||||
|
p 2.5 0 0 piston_head facing=east short=true type=sticky
|
||||||
|
p 2 -1 0 extended=true
|
||||||
|
p 2.5 -1 0 piston_head facing=east short=true type=normal
|
||||||
|
t 8
|
||||||
|
p 4.5 0 0 air &
|
||||||
|
p 5.0 0 0 slime_block
|
||||||
|
p 3.5 0 0 air &
|
||||||
|
p 4.0 0 0 slime_block
|
||||||
|
p 2.5 0 0 air &
|
||||||
|
p 3.0 0 0 piston_head facing=east short=false type=sticky
|
||||||
|
p 2.5 -1 0 air &
|
||||||
|
p 3.0 -1 0 piston_head facing=east short=false type=normal
|
||||||
|
l end-extend
|
||||||
|
t 12
|
||||||
|
p 0 0 0 power=0
|
||||||
|
t 16
|
||||||
|
p 1 0 0 powered=false
|
||||||
|
l begin-retract
|
||||||
|
t 17
|
||||||
|
p 3 0 0 air &
|
||||||
|
p 2.5 0 0 piston_head facing=east short=true type=sticky
|
||||||
|
p 4.0 0 0 air &
|
||||||
|
p 3.5 0 0 slime_block
|
||||||
|
p 5.0 0 0 air &
|
||||||
|
p 4.5 0 0 slime_block
|
||||||
|
p 3.0 -1 0 air &
|
||||||
|
p 2.5 -1 0 piston_head facing=east short=true type=normal
|
||||||
|
t 18
|
||||||
|
p 2.5 0 0 air
|
||||||
|
p 3.5 0 0 air &
|
||||||
|
p 3.0 0 0 slime_block
|
||||||
|
p 4.5 0 0 air &
|
||||||
|
p 4.0 0 0 slime_block
|
||||||
|
p 2 0 0 extended=false
|
||||||
|
p 2.5 -1 0 air
|
||||||
|
p 2 -1 0 extended=false
|
||||||
|
l end-retract
|
||||||
|
`);
|
||||||
|
const f_piston_t = new WorldFrame(w_piston);
|
||||||
|
const d_piston_t = new Diorama('demo-piston', f_piston_t, () => engine.requestRender());
|
||||||
|
d_piston_t.radius = 4;
|
||||||
|
d_piston_t.centerView();
|
||||||
|
d_piston_t.saveState();
|
||||||
|
engine.addDiorama(d_piston_t);
|
||||||
|
const c_piston = new SpacetimeController(d_piston_t, {
|
||||||
|
loop: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Fetch and build everything concurrently!
|
||||||
|
await engine.updateAll();
|
||||||
|
engine.requestRender();
|
||||||
|
|
||||||
|
|
||||||
|
// const factor = 2.5;
|
||||||
|
// const update_time = () => {
|
||||||
|
// for (let i = 0; i < 20; i++) {
|
||||||
|
// setTimeout(() => f_piston_t.seek(i), i * factor * 50)
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
// setInterval(update_time, factor * 1000)
|
||||||
|
// update_time();
|
||||||
|
//
|
||||||
|
// let i = 0;
|
||||||
|
// let n = w_piston.eventCount;
|
||||||
|
// const update_state = () => {
|
||||||
|
// f_piston_s.seekIndex(i);
|
||||||
|
// i = (i + 1) % n;
|
||||||
|
// };
|
||||||
|
// setInterval(update_state, 250);
|
||||||
|
// update_state()
|
||||||
|
//
|
||||||
|
// const update_pulses = () => {
|
||||||
|
// for (let i = 0; i < 8; i++) {
|
||||||
|
// setTimeout(() => f_pulses.seek(i), i * factor * 50)
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
// setInterval(update_pulses, factor * 8 * 50)
|
||||||
|
// update_pulses();
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Renderer Initialization Failed:", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
initDocument();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,70 +0,0 @@
|
|||||||
import {World} from "./world.js";
|
|
||||||
|
|
||||||
const diorama_template = document.createElement('template');
|
|
||||||
diorama_template.innerHTML = `<canvas></canvas>`;
|
|
||||||
|
|
||||||
customElements.define('mc-world', class extends HTMLElement {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
this.data = new World(this.innerText);
|
|
||||||
|
|
||||||
if (this.parentElement.tagName.toLowerCase() === 'mc-frame') {
|
|
||||||
this.parentElement.world = this;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
customElements.define('mc-frame', class extends HTMLElement {
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ['worldid'];
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
if (this.parentElement.tagName.toLowerCase() === 'mc-diorama') {
|
|
||||||
this.parentElement.frame = this;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, old, val) {
|
|
||||||
if (name === 'worldid') {
|
|
||||||
let elem = document.getElementById(val);
|
|
||||||
console.assert(elem.tagName === 'MC-WORLD', 'worldid does not refer to a mc-world.');
|
|
||||||
this.world = elem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
if (this.parentElement.tagName.toLowerCase() === 'mc-diorama') {
|
|
||||||
this.parentElement.frame = this;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
customElements.define('mc-diorama', class extends HTMLElement {
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ['frameid'];
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
const shadow = this.attachShadow({mode: 'open'});
|
|
||||||
shadow.appendChild(diorama_template.content.cloneNode(true));
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, oldValue, newValue) {
|
|
||||||
if (name === 'frameid') {
|
|
||||||
let elem = document.getElementById(newValue);
|
|
||||||
console.assert(elem.tagName === 'MC-FRAME', 'frameid does not refer to a mc-frame.');
|
|
||||||
this.frame = elem.frame;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
@layer defaults {
|
|
||||||
mc-diorama {
|
|
||||||
display: block;
|
|
||||||
width: 300px;
|
|
||||||
height: 150px;
|
|
||||||
margin-block: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
mc-world, mc-frame {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
@import 'defaults.css';
|
|
||||||
Reference in New Issue
Block a user