Update storybook

.storybook/main.js

@@ -1,4 +1,4 @@
 module.exports = {
-	stories: ['../examples/stories/**/*.stories.js'],
+	stories: ["../examples/stories/**/*.story.js"],
-	addons: ['@storybook/addon-knobs/register']
+	addons: ["@storybook/addon-knobs/register"],
 };

examples/stories/animation.story.js

@@ -0,0 +1,49 @@
+/* eslint-disable */
+import { createViewer } from "./util";
+import { withKnobs, number } from "@storybook/addon-knobs";
+import * as skinview3d from "../..";
+import { radios } from "@storybook/addon-knobs";
+
+let { viewer, element, defaultAnimation } = createViewer();
+let currentAnimation = defaultAnimation;
+
+export default {
+	title: "Skinview3d",
+	name: "Animation",
+	decorators: [withKnobs],
+};
+
+export const Animation = () => {
+	if (currentAnimation) {
+		currentAnimation.remove();
+	}
+
+	const animationMap = {
+		Walk: skinview3d.WalkingAnimation,
+		Run: skinview3d.RunningAnimation,
+		Rotate: skinview3d.RotatingAnimation,
+	};
+
+	const animationKey = radios("Animations", Object.keys(animationMap), "Run");
+
+	if (currentAnimation) {
+		currentAnimation.resetAndRemove();
+	}
+
+	currentAnimation = viewer.animations.add(animationMap[animationKey]);
+
+	const label = "Speed";
+
+	const defaultValue = 0.5;
+	const options = {
+		range: true,
+		min: 0.1,
+		max: 2,
+		step: 0.01,
+	};
+	const value = number(label, defaultValue, options);
+
+	currentAnimation.speed = value;
+
+	return element;
+};

examples/stories/basic.story.js

@@ -0,0 +1,19 @@
+/* eslint-disable */
+import { createViewer } from "./util";
+import { withKnobs, number } from "@storybook/addon-knobs";
+let { viewer, element } = createViewer();
+
+export default {
+	title: "Skinview3d",
+	name: "Basic",
+	decorators: [withKnobs],
+};
+
+export const Basic = () => {
+	const width = number("Canvas Width", 300);
+	const height = number("Canvas Height", 400);
+
+	viewer.setSize(width, height);
+
+	return element;
+};

examples/stories/index.stories.js

@@ -1,100 +0,0 @@
-/* eslint-disable */
-import * as skinview3d from "../..";
-import { withKnobs, radios, number } from "@storybook/addon-knobs";
-
-export default {
-	title: "Skinview3d",
-	decorators: [withKnobs],
-};
-
-let currentAnimation;
-
-const createViewer = () => {
-	const element = document.createElement("div");
-	const viewer = new skinview3d.SkinViewer(element, {
-		width: 300,
-		height: 400,
-		skin: "textures/1_8_texturemap_redux.png",
-	});
-
-	console.log(viewer);
-
-	// Control objects with your mouse!
-	const control = skinview3d.createOrbitControls(viewer);
-	control.enableRotate = true;
-	control.enableZoom = false;
-	control.enablePan = false;
-
-	// Add an animation
-	currentAnimation = viewer.animations.add(skinview3d.WalkingAnimation);
-
-	return { viewer, element };
-};
-
-let { viewer, element } = createViewer();
-
-export const Basic = () => {
-	// reset
-	let { viewer, element } = createViewer();
-	if (currentAnimation) {
-		currentAnimation.remove();
-	}
-
-	return element;
-};
-
-export const Animation = () => {
-	if (currentAnimation) {
-		currentAnimation.remove();
-	}
-
-	const animationMap = {
-		Walk: skinview3d.WalkingAnimation,
-		Run: skinview3d.RunningAnimation,
-		Rotate: skinview3d.RotatingAnimation,
-	};
-
-	const animationKey = radios("Animations", Object.keys(animationMap), "Run");
-	currentAnimation = viewer.animations.add(animationMap[animationKey]);
-
-	const label = "Speed";
-
-	const defaultValue = 0.5;
-	const options = {
-		range: true,
-		min: 0.1,
-		max: 2,
-		step: 0.01,
-	};
-	const value = number(label, defaultValue, options);
-
-	currentAnimation.speed = value;
-
-	return element;
-};
-
-export const Textures = () => {
-	const skinOptions = {
-		"1.8 Skin": "1_8_texturemap_redux",
-		"Classic Skin": "Hacksore",
-		"HD Skin": "ironman_hd",
-	};
-	const skinUrl = radios("Skin Textures", skinOptions, "1_8_texturemap_redux");
-
-	const capeOptions = {
-		None: "none",
-		"Classic Cape": "cape",
-		"HD Cape": "hd_cape",
-	};
-
-	const capeUrl = radios("Cape Textures", capeOptions, "none");
-	viewer.loadSkin(`textures/${skinUrl}.png`);
-
-	if (capeUrl === "none") {
-		viewer.loadCape(null);
-	} else {
-		viewer.loadCape(`textures/${capeUrl}.png`);
-	}
-
-	return element;
-};

examples/stories/textures.story.js

@@ -0,0 +1,103 @@
+/* eslint-disable */
+import { createViewer } from "./util";
+import { radios, withKnobs, optionsKnob } from "@storybook/addon-knobs";
+let { viewer, element } = createViewer();
+
+const bodyParts = viewer.playerObject.skin;
+const skinParts = {};
+
+// set inner parts
+skinParts.head = bodyParts.head.innerLayer;
+skinParts.body = bodyParts.body.innerLayer;
+skinParts.leftArm = bodyParts.leftArm.innerLayer;
+skinParts.rightArm = bodyParts.rightArm.innerLayer;
+skinParts.leftLeg = bodyParts.leftLeg.innerLayer;
+skinParts.rightLeg = bodyParts.rightLeg.innerLayer;
+
+// set outter parts
+skinParts.head2 = bodyParts.head.outerLayer;
+skinParts.body2 = bodyParts.body.outerLayer;
+skinParts.leftArm2 = bodyParts.leftArm.outerLayer;
+skinParts.rightArm2 = bodyParts.rightArm.outerLayer;
+skinParts.leftLeg2 = bodyParts.leftLeg.outerLayer;
+skinParts.rightLeg2 = bodyParts.rightLeg.outerLayer;
+
+export default {
+	title: "Skinview3d",
+	name: "Textures",
+	decorators: [withKnobs],
+};
+
+export const Textures = () => {
+	const skinOptions = {
+		"1.8 Skin": "1_8_texturemap_redux",
+		"Classic Skin": "Hacksore",
+		"HD Skin": "ironman_hd",
+	};
+	const skinUrl = radios("Skin Textures", skinOptions, "1_8_texturemap_redux");
+
+	const capeOptions = {
+		None: "none",
+		"Classic Cape": "cape",
+		"HD Cape": "hd_cape",
+	};
+
+	const capeUrl = radios("Cape Textures", capeOptions, "none");
+	viewer.loadSkin(`textures/${skinUrl}.png`);
+
+	if (capeUrl === "none") {
+		viewer.loadCape(null);
+	} else {
+		viewer.loadCape(`textures/${capeUrl}.png`);
+	}
+
+	// bottom layers
+	const valuesBottomLayer = {
+		Head: "head",
+		Body: "body",
+		LeftArm: "leftArm",
+		RightArm: "rightArm",
+		RightLeg: "rightLeg",
+		LeftLeg: "leftLeg",
+	};
+
+	const optionsBottomLayer = optionsKnob(
+		"Bottom Layer",
+		valuesBottomLayer,
+		Object.values(valuesBottomLayer),
+		{
+			display: "inline-check",
+		}
+	);
+
+	// bottom layers
+	const valuesTopLayer = {
+		Head2: "head2",
+		Body2: "body2",
+		LeftArm2: "leftArm2",
+		RightArm2: "rightArm2",
+		RightLeg2: "rightLeg2",
+		LeftLeg2: "leftLeg2",
+	};
+
+	const optionsTopLayer = optionsKnob(
+		"Top Layer",
+		valuesTopLayer,
+		Object.values(valuesTopLayer),
+		{
+			display: "inline-check",
+		}
+	);
+
+	// toggle parts
+	console.log(skinParts);
+	for (let partName in skinParts) {
+		const visible = optionsBottomLayer
+			.concat(optionsTopLayer)
+			.includes(partName);
+
+		skinParts[partName].visible = visible;
+	}
+
+	return element;
+};

examples/stories/util.js

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import * as skinview3d from "../..";
+
+export const createViewer = (config) => {
+	const width = config?.width || 300;
+	const height = config?.height || 400;
+
+	const element = document.createElement("div");
+	const viewer = new skinview3d.SkinViewer(element, {
+		width: width,
+		height: height,
+		skin: "textures/1_8_texturemap_redux.png",
+	});
+
+	const control = skinview3d.createOrbitControls(viewer);
+	control.enableRotate = true;
+	control.enableZoom = true;
+	control.enablePan = true;
+
+	return { viewer, element };
+};