@6edesign/svelte-three
Version:
[Demo](https://6edesign.github.io/svelte-three-mograph/)
501 lines (445 loc) • 11.7 kB
JavaScript
import './Layout.css.proxy.js';
/* src/documentation/Layout.svelte generated by Svelte v3.31.2 */
import {
SvelteComponent,
add_render_callback,
add_resize_listener,
append,
attr,
check_outros,
create_component,
create_slot,
destroy_component,
destroy_each,
detach,
element,
group_outros,
init,
insert,
mount_component,
noop,
safe_not_equal,
space,
text,
transition_in,
transition_out,
update_slot
} from "../../web_modules/svelte/internal.js";
import { pages } from "./config/index.js";
import Scene from "../components/Scene.js";
import Icosahedron from "../components/primitives/Icosahedron.js";
import AmbientLight from "../components/lights/AmbientLight.js";
import DirectionalLight from "../components/lights/DirectionalLight.js";
import Particle from "../components/mograph/Particle.js";
import Material from "../components/materials/Material.js";
const get_default_slot_changes = dirty => ({
width: dirty & /*w*/ 1,
height: dirty & /*h*/ 2
});
const get_default_slot_context = ctx => ({
width: /*w*/ ctx[0],
height: /*h*/ ctx[1]
});
function get_each_context(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[5] = list[i].path;
child_ctx[6] = list[i].linkText;
return child_ctx;
}
const get_header_slot_changes = dirty => ({
width: dirty & /*w*/ 1,
height: dirty & /*h*/ 2
});
const get_header_slot_context = ctx => ({
width: /*w*/ ctx[0],
height: /*h*/ ctx[1]
});
// (19:8) <Particle position={[0, 0, 100]} rotationalVelocity={[0.008, 0.008, 0]} let:rotation >
function create_default_slot_2(ctx) {
let icosahedron;
let current;
icosahedron = new Icosahedron({
props: {
size: 3,
detail: 1,
rotation: /*rotation*/ ctx[9]
}
});
return {
c() {
create_component(icosahedron.$$.fragment);
},
m(target, anchor) {
mount_component(icosahedron, target, anchor);
current = true;
},
p(ctx, dirty) {
const icosahedron_changes = {};
if (dirty & /*rotation*/ 512) icosahedron_changes.rotation = /*rotation*/ ctx[9];
icosahedron.$set(icosahedron_changes);
},
i(local) {
if (current) return;
transition_in(icosahedron.$$.fragment, local);
current = true;
},
o(local) {
transition_out(icosahedron.$$.fragment, local);
current = false;
},
d(detaching) {
destroy_component(icosahedron, detaching);
}
};
}
// (18:6) <Material metalness={0} roughness={0.8} color="#fff" wireframe={true}>
function create_default_slot_1(ctx) {
let particle;
let current;
particle = new Particle({
props: {
position: [0, 0, 100],
rotationalVelocity: [0.008, 0.008, 0],
$$slots: {
default: [
create_default_slot_2,
({ rotation }) => ({ 9: rotation }),
({ rotation }) => rotation ? 512 : 0
]
},
$$scope: { ctx }
}
});
return {
c() {
create_component(particle.$$.fragment);
},
m(target, anchor) {
mount_component(particle, target, anchor);
current = true;
},
p(ctx, dirty) {
const particle_changes = {};
if (dirty & /*$$scope, rotation*/ 528) {
particle_changes.$$scope = { dirty, ctx };
}
particle.$set(particle_changes);
},
i(local) {
if (current) return;
transition_in(particle.$$.fragment, local);
current = true;
},
o(local) {
transition_out(particle.$$.fragment, local);
current = false;
},
d(detaching) {
destroy_component(particle, detaching);
}
};
}
// (15:4) <Scene width={120} height={120} background="#333">
function create_default_slot(ctx) {
let ambientlight;
let t0;
let directionallight;
let t1;
let material;
let current;
ambientlight = new AmbientLight({ props: { intensity: 1 } });
directionallight = new DirectionalLight({});
material = new Material({
props: {
metalness: 0,
roughness: 0.8,
color: "#fff",
wireframe: true,
$$slots: { default: [create_default_slot_1] },
$$scope: { ctx }
}
});
return {
c() {
create_component(ambientlight.$$.fragment);
t0 = space();
create_component(directionallight.$$.fragment);
t1 = space();
create_component(material.$$.fragment);
},
m(target, anchor) {
mount_component(ambientlight, target, anchor);
insert(target, t0, anchor);
mount_component(directionallight, target, anchor);
insert(target, t1, anchor);
mount_component(material, target, anchor);
current = true;
},
p(ctx, dirty) {
const material_changes = {};
if (dirty & /*$$scope*/ 16) {
material_changes.$$scope = { dirty, ctx };
}
material.$set(material_changes);
},
i(local) {
if (current) return;
transition_in(ambientlight.$$.fragment, local);
transition_in(directionallight.$$.fragment, local);
transition_in(material.$$.fragment, local);
current = true;
},
o(local) {
transition_out(ambientlight.$$.fragment, local);
transition_out(directionallight.$$.fragment, local);
transition_out(material.$$.fragment, local);
current = false;
},
d(detaching) {
destroy_component(ambientlight, detaching);
if (detaching) detach(t0);
destroy_component(directionallight, detaching);
if (detaching) detach(t1);
destroy_component(material, detaching);
}
};
}
// (37:6) {#each pages as { path, linkText }}
function create_each_block(ctx) {
let li;
let a;
let t0_value = /*linkText*/ ctx[6] + "";
let t0;
let a_href_value;
let t1;
return {
c() {
li = element("li");
a = element("a");
t0 = text(t0_value);
t1 = space();
attr(a, "href", a_href_value = /*path*/ ctx[5]);
attr(a, "class", "svelte-ol68qr");
},
m(target, anchor) {
insert(target, li, anchor);
append(li, a);
append(a, t0);
append(li, t1);
},
p: noop,
d(detaching) {
if (detaching) detach(li);
}
};
}
// (46:4) {#if w && h}
function create_if_block(ctx) {
let current;
const default_slot_template = /*#slots*/ ctx[2].default;
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[4], get_default_slot_context);
return {
c() {
if (default_slot) default_slot.c();
},
m(target, anchor) {
if (default_slot) {
default_slot.m(target, anchor);
}
current = true;
},
p(ctx, dirty) {
if (default_slot) {
if (default_slot.p && dirty & /*$$scope, w, h*/ 19) {
update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[4], dirty, get_default_slot_changes, get_default_slot_context);
}
}
},
i(local) {
if (current) return;
transition_in(default_slot, local);
current = true;
},
o(local) {
transition_out(default_slot, local);
current = false;
},
d(detaching) {
if (default_slot) default_slot.d(detaching);
}
};
}
function create_fragment(ctx) {
let div1;
let section0;
let scene;
let t0;
let div0;
let t4;
let t5;
let section1;
let ul;
let t6;
let section2;
let section2_resize_listener;
let current;
scene = new Scene({
props: {
width: 120,
height: 120,
background: "#333",
$$slots: { default: [create_default_slot] },
$$scope: { ctx }
}
});
const header_slot_template = /*#slots*/ ctx[2].header;
const header_slot = create_slot(header_slot_template, ctx, /*$$scope*/ ctx[4], get_header_slot_context);
let each_value = pages;
let each_blocks = [];
for (let i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
}
let if_block = /*w*/ ctx[0] && /*h*/ ctx[1] && create_if_block(ctx);
return {
c() {
div1 = element("div");
section0 = element("section");
create_component(scene.$$.fragment);
t0 = space();
div0 = element("div");
div0.innerHTML = `<strong class="svelte-ol68qr">@6eDesign/svelte-three</strong>
<emphasis class="svelte-ol68qr">npm i -D @6eDesign/svelte-three</emphasis>`;
t4 = space();
if (header_slot) header_slot.c();
t5 = space();
section1 = element("section");
ul = element("ul");
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}
t6 = space();
section2 = element("section");
if (if_block) if_block.c();
attr(div0, "class", "header-text svelte-ol68qr");
attr(section0, "class", "header svelte-ol68qr");
attr(ul, "class", "svelte-ol68qr");
attr(section1, "class", "sidebar svelte-ol68qr");
attr(section2, "class", "content svelte-ol68qr");
add_render_callback(() => /*section2_elementresize_handler*/ ctx[3].call(section2));
attr(div1, "class", "main-grid svelte-ol68qr");
},
m(target, anchor) {
insert(target, div1, anchor);
append(div1, section0);
mount_component(scene, section0, null);
append(section0, t0);
append(section0, div0);
append(section0, t4);
if (header_slot) {
header_slot.m(section0, null);
}
append(div1, t5);
append(div1, section1);
append(section1, ul);
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(ul, null);
}
append(div1, t6);
append(div1, section2);
if (if_block) if_block.m(section2, null);
section2_resize_listener = add_resize_listener(section2, /*section2_elementresize_handler*/ ctx[3].bind(section2));
current = true;
},
p(ctx, [dirty]) {
const scene_changes = {};
if (dirty & /*$$scope*/ 16) {
scene_changes.$$scope = { dirty, ctx };
}
scene.$set(scene_changes);
if (header_slot) {
if (header_slot.p && dirty & /*$$scope, w, h*/ 19) {
update_slot(header_slot, header_slot_template, ctx, /*$$scope*/ ctx[4], dirty, get_header_slot_changes, get_header_slot_context);
}
}
if (dirty & /*pages*/ 0) {
each_value = pages;
let i;
for (i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(child_ctx, dirty);
} else {
each_blocks[i] = create_each_block(child_ctx);
each_blocks[i].c();
each_blocks[i].m(ul, null);
}
}
for (; i < each_blocks.length; i += 1) {
each_blocks[i].d(1);
}
each_blocks.length = each_value.length;
}
if (/*w*/ ctx[0] && /*h*/ ctx[1]) {
if (if_block) {
if_block.p(ctx, dirty);
if (dirty & /*w, h*/ 3) {
transition_in(if_block, 1);
}
} else {
if_block = create_if_block(ctx);
if_block.c();
transition_in(if_block, 1);
if_block.m(section2, null);
}
} else if (if_block) {
group_outros();
transition_out(if_block, 1, 1, () => {
if_block = null;
});
check_outros();
}
},
i(local) {
if (current) return;
transition_in(scene.$$.fragment, local);
transition_in(header_slot, local);
transition_in(if_block);
current = true;
},
o(local) {
transition_out(scene.$$.fragment, local);
transition_out(header_slot, local);
transition_out(if_block);
current = false;
},
d(detaching) {
if (detaching) detach(div1);
destroy_component(scene);
if (header_slot) header_slot.d(detaching);
destroy_each(each_blocks, detaching);
if (if_block) if_block.d();
section2_resize_listener();
}
};
}
function instance($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props;
let w, h;
function section2_elementresize_handler() {
w = this.clientWidth;
h = this.clientHeight;
$$invalidate(0, w);
$$invalidate(1, h);
}
$$self.$$set = $$props => {
if ("$$scope" in $$props) $$invalidate(4, $$scope = $$props.$$scope);
};
return [w, h, slots, section2_elementresize_handler, $$scope];
}
class Layout extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, {});
}
}
export default Layout;