shaders 2.2.42 → 2.2.44

package/dist/vue/utils/generatePresetCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA+sBD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UA+D/B,CAAA"}
+{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAkXD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UAgE/B,CAAA"}

package/dist/vue/utils/generatePresetCode.js

@@ -1,2 +1,392 @@
-import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-_7ZzqQPH.js";
+function camelToKebab(str) {
+	return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+var DEFAULT_TRANSFORM = {
+	offsetX: 0,
+	offsetY: 0,
+	rotation: 0,
+	scale: 1,
+	anchorX: .5,
+	anchorY: .5,
+	edges: "transparent"
+};
+var shaderMetadata = {
+	"AngularBlur": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Ascii": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Beam": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Blob": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Blur": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"BrightnessContrast": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Bulge": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"CRTScreen": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"ChannelBlur": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Checkerboard": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"ChromaFlow": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"ChromaticAberration": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Circle": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"CursorTrail": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"DiffuseBlur": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Dither": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"DotGrid": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Duotone": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"FilmGrain": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"FloatingParticles": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"GlassTiles": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Glow": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Godrays": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Grayscale": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Grid": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"GridDistortion": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Group": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Halftone": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"HueShift": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"ImageTexture": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Invert": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"LinearBlur": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"LinearGradient": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Liquify": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Perspective": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Pixelate": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"PolarCoordinates": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Posterize": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"ProgressiveBlur": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"RadialGradient": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"RectangularCoordinates": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Ripples": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Saturation": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Sharpness": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Shatter": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"SimplexNoise": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"SineWave": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"SolidColor": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Spherize": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Spiral": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Strands": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Stretch": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Stripes": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Swirl": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"TiltShift": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Tint": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Tritone": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Twirl": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"Vibrance": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"WaveDistortion": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"WebcamTexture": {
+		"opacity": 1,
+		"blendMode": "normal"
+	},
+	"ZoomBlur": {
+		"opacity": 1,
+		"blendMode": "normal"
+	}
+};
+function generatePropString(props, componentType, indent = "  ") {
+	return Object.entries(props).sort(([a], [b]) => a.localeCompare(b)).filter(([key, value]) => {
+		if (key === "maskType" && value === "alpha") return false;
+		if (key === "transform" && typeof value === "object") {
+			if (Object.keys(DEFAULT_TRANSFORM).every((k) => value[k] === DEFAULT_TRANSFORM[k])) return false;
+		}
+		const componentDefaults = shaderMetadata[componentType] || {};
+		if (componentDefaults.hasOwnProperty(key)) {
+			const defaultValue = componentDefaults[key];
+			if (value != null && defaultValue != null && typeof value === "object" && typeof defaultValue === "object") return JSON.stringify(value) !== JSON.stringify(defaultValue);
+			return value !== defaultValue;
+		}
+		if (key === "opacity" && value === 1) return false;
+		if (key === "blendMode" && value === "normal") return false;
+		return true;
+	}).map(([key, value]) => {
+		const kebabKey = camelToKebab(key);
+		if (key === "transform" && typeof value === "object") {
+			const nonDefaultKeys = {};
+			for (const k in value) if (value[k] !== DEFAULT_TRANSFORM[k]) nonDefaultKeys[k] = value[k];
+			const keys = Object.keys(nonDefaultKeys).sort();
+			if (keys.length > 1) return `:${kebabKey}="{\n${indent}    ${keys.map((k) => `'${k}':${typeof nonDefaultKeys[k] === "string" ? `'${nonDefaultKeys[k]}'` : nonDefaultKeys[k]}`).join(`,\n${indent}    `)}\n${indent}  }"`;
+			else if (keys.length === 1) {
+				const k = keys[0];
+				const v = nonDefaultKeys[k];
+				return `:${kebabKey}="{'${k}':${typeof v === "string" ? `'${v}'` : v}}"`;
+			}
+		}
+		if (typeof value === "string") return `${kebabKey}="${value}"`;
+		else if (value !== null && typeof value === "object") {
+			const roundedValue = { ...value };
+			if ("x" in roundedValue && typeof roundedValue.x === "number") roundedValue.x = Math.round(roundedValue.x * 100) / 100;
+			if ("y" in roundedValue && typeof roundedValue.y === "number") roundedValue.y = Math.round(roundedValue.y * 100) / 100;
+			return `:${kebabKey}="${JSON.stringify(roundedValue).replace(/"/g, "'")}"`;
+		} else return `:${kebabKey}="${value}"`;
+	}).join("\n" + indent + "  ");
+}
+function isIdUsedAsMaskSource(id, allComponents) {
+	const flatComponents = [];
+	function flattenComponents(components) {
+		for (const component of components) {
+			flatComponents.push(component);
+			if (component.children) flattenComponents(component.children);
+		}
+	}
+	flattenComponents(allComponents);
+	return flatComponents.some((component) => component.props?.maskSource === id);
+}
+function generatePresetCode(preset) {
+	const generateComponentString = (config, indent = "  ") => {
+		const propString = config.props ? generatePropString(config.props, config.type, indent) : "";
+		let idString = "";
+		if (config.id) {
+			if (isIdUsedAsMaskSource(config.id, preset.components)) idString = `id="${config.id}"`;
+		}
+		const attributes = [idString, propString].filter(Boolean).join("\n" + indent + "  ");
+		if (config.children && config.children.length > 0) {
+			const childrenString = config.children.map((child) => generateComponentString(child, indent + "  ")).join("\n");
+			if (attributes) return `${indent}<${config.type}\n${indent}  ${attributes}>\n${childrenString}\n${indent}</${config.type}>`;
+			else return `${indent}<${config.type}>\n${childrenString}\n${indent}</${config.type}>`;
+		} else if (attributes) return `${indent}<${config.type}\n${indent}  ${attributes}/>`;
+		else return `${indent}<${config.type}/>`;
+	};
+	return `<Shader>\n${preset.components.map((config) => generateComponentString(config)).join("\n")}\n</Shader>`;
+}
+const availableComponents = [
+	"AngularBlur",
+	"Ascii",
+	"Beam",
+	"Blob",
+	"Blur",
+	"BrightnessContrast",
+	"Bulge",
+	"CRTScreen",
+	"ChannelBlur",
+	"Checkerboard",
+	"ChromaFlow",
+	"ChromaticAberration",
+	"Circle",
+	"CursorTrail",
+	"DiffuseBlur",
+	"Dither",
+	"DotGrid",
+	"Duotone",
+	"FilmGrain",
+	"FloatingParticles",
+	"GlassTiles",
+	"Glow",
+	"Godrays",
+	"Grayscale",
+	"Grid",
+	"GridDistortion",
+	"Group",
+	"Halftone",
+	"HueShift",
+	"ImageTexture",
+	"Invert",
+	"LinearBlur",
+	"LinearGradient",
+	"Liquify",
+	"Perspective",
+	"Pixelate",
+	"PolarCoordinates",
+	"Posterize",
+	"ProgressiveBlur",
+	"RadialGradient",
+	"RectangularCoordinates",
+	"Ripples",
+	"Saturation",
+	"Sharpness",
+	"Shatter",
+	"SimplexNoise",
+	"SineWave",
+	"SolidColor",
+	"Spherize",
+	"Spiral",
+	"Strands",
+	"Stretch",
+	"Stripes",
+	"Swirl",
+	"TiltShift",
+	"Tint",
+	"Tritone",
+	"Twirl",
+	"Vibrance",
+	"WaveDistortion",
+	"WebcamTexture",
+	"ZoomBlur"
+];
 export { availableComponents, generatePresetCode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaders",
-  "version": "2.2.42",
+  "version": "2.2.44",
   "description": "Declarative shader components for Vue, React, and Svelte",
   "author": "Simon Le Marchant<https://github.com/marchantweb>",
   "homepage": "https://shaders.com/",
@@ -364,6 +364,11 @@
       "types": "./dist/core/shaders/Shatter/index.d.ts",
       "import": "./dist/core/shaders/Shatter/index.js",
       "require": "./dist/core/shaders/Shatter/index.js"
+    },
+    "./core/WebcamTexture": {
+      "types": "./dist/core/shaders/WebcamTexture/index.d.ts",
+      "import": "./dist/core/shaders/WebcamTexture/index.js",
+      "require": "./dist/core/shaders/WebcamTexture/index.js"
     }
   },
   "typesVersions": {
@@ -581,6 +586,9 @@
       "core/WaveDistortion": [
         "./dist/core/shaders/WaveDistortion/index.d.ts"
       ],
+      "core/WebcamTexture": [
+        "./dist/core/shaders/WebcamTexture/index.d.ts"
+      ],
       "core/ZoomBlur": [
         "./dist/core/shaders/ZoomBlur/index.d.ts"
       ],