shaders 2.5.134 → 3.0.436

package/dist/core/Heart-Dd1xGz1I.js

@@ -0,0 +1,296 @@
+import { At as call, E as shapeLocalCoords, It as vec4, O as strokeMaskFromSdf, Qt as mixColorsVariants, T as sdf_exports, Zt as mixColorsLinear, b as heartSdf, n as tgpu, on as d, p as ShapeMask } from "./coords-BxHv8WrA.js";
+import { a as transformColor, c as transformPosition, l as transformStrokePosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-fqzznt4g.js";
+const heartShape = tgpu.fn([
+	d.vec2f,
+	d.f32,
+	d.f32,
+	d.f32,
+	d.f32,
+	d.f32,
+	d.vec2f,
+	d.f32
+], ShapeMask)(/* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((center, radius, rotation, softness, strokeThickness, strokePosition, uv, aspect) => {
+	"use gpu";
+	const local = shapeLocalCoords(center, rotation, uv, aspect);
+	return strokeMaskFromSdf(heartSdf(local.x, local.y, radius), softness, strokeThickness, strokePosition);
+}), {
+	v: 1,
+	name: void 0,
+	ast: {
+		"params": [
+			{
+				"type": "i",
+				"name": "center"
+			},
+			{
+				"type": "i",
+				"name": "radius"
+			},
+			{
+				"type": "i",
+				"name": "rotation"
+			},
+			{
+				"type": "i",
+				"name": "softness"
+			},
+			{
+				"type": "i",
+				"name": "strokeThickness"
+			},
+			{
+				"type": "i",
+				"name": "strokePosition"
+			},
+			{
+				"type": "i",
+				"name": "uv"
+			},
+			{
+				"type": "i",
+				"name": "aspect"
+			}
+		],
+		"body": [0, [
+			[
+				13,
+				"local",
+				[
+					6,
+					[
+						7,
+						"sdf",
+						"shapeLocalCoords"
+					],
+					[
+						"center",
+						"rotation",
+						"uv",
+						"aspect"
+					]
+				]
+			],
+			[
+				13,
+				"dist",
+				[
+					6,
+					[
+						7,
+						"sdf",
+						"heartSdf"
+					],
+					[
+						[
+							7,
+							"local",
+							"x"
+						],
+						[
+							7,
+							"local",
+							"y"
+						],
+						"radius"
+					]
+				]
+			],
+			[10, [
+				6,
+				[
+					7,
+					"sdf",
+					"strokeMaskFromSdf"
+				],
+				[
+					"dist",
+					"softness",
+					"strokeThickness",
+					"strokePosition"
+				]
+			]]
+		]],
+		"externalNames": ["sdf"]
+	},
+	externals: () => ({ sdf: sdf_exports })
+}) && $.f)({}));
+const componentDefinition = {
+	name: "Heart",
+	boundingBoxDeclaration: { propBindings: {
+		x: {
+			prop: "center",
+			as: "position-x"
+		},
+		y: {
+			prop: "center",
+			as: "position-y"
+		},
+		width: {
+			prop: "radius",
+			as: "half-canvas-height"
+		},
+		height: {
+			prop: "radius",
+			as: "half-canvas-height"
+		},
+		rotation: {
+			prop: "rotation",
+			as: "degrees"
+		}
+	} },
+	category: "Shapes",
+	description: "Heart shape with adjustable size",
+	acceptsUVContext: true,
+	props: {
+		origin: {
+			default: "center",
+			description: "Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.",
+			ui: {
+				type: "origin",
+				label: "Origin",
+				group: "Position"
+			}
+		},
+		color: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Fill color of the heart",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Colors"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the heart",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position",
+				units: ["%", "px"]
+			}
+		},
+		radius: {
+			default: .32,
+			description: "Size of the heart (fit radius)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Size",
+				group: "Shape"
+			}
+		},
+		rotation: {
+			default: 0,
+			description: "Rotation in degrees",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Rotation",
+				group: "Shape"
+			}
+		},
+		softness: {
+			default: 0,
+			description: "Edge softness for antialiasing",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .1,
+				step: .001,
+				label: "Softness",
+				group: "Effect"
+			}
+		},
+		strokeThickness: {
+			default: 0,
+			description: "Stroke thickness. Zero means no stroke.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .2,
+				step: .005,
+				label: "Stroke Thickness",
+				group: "Stroke"
+			}
+		},
+		strokeColor: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Color of the stroke outline",
+			ui: {
+				type: "color",
+				label: "Stroke Color",
+				group: "Colors"
+			}
+		},
+		strokePosition: {
+			default: "center",
+			transform: transformStrokePosition,
+			description: "Position of the stroke relative to the shape edge",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Outside",
+						value: "outside"
+					},
+					{
+						label: "Center",
+						value: "center"
+					},
+					{
+						label: "Inside",
+						value: "inside"
+					}
+				],
+				label: "Stroke Position",
+				group: "Stroke"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for blending fill and stroke colors",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Blending",
+				group: "Colors"
+			}
+		}
+	},
+	fragment: (params) => {
+		const { uniforms, ctx, propValues } = params;
+		const uv = params.uvContext ?? ctx.uv;
+		const colorSpaceMode = propValues.colorSpace ?? 0;
+		const mask = call(heartShape, "heartShape", [
+			uniforms.center,
+			uniforms.radius,
+			uniforms.rotation,
+			uniforms.softness,
+			uniforms.strokeThickness,
+			uniforms.strokePosition,
+			uv,
+			ctx.aspect
+		]);
+		const blended = call(mixColorsVariants[colorSpaceMode] ?? mixColorsLinear, "mixColors", [
+			uniforms.color,
+			uniforms.strokeColor,
+			mask.member("strokeBlend")
+		]);
+		return vec4(blended.member("rgb"), blended.member("a").mul(mask.member("overallMask")));
+	}
+};
+var Heart_default = componentDefinition;
+export { componentDefinition as n, heartShape as r, Heart_default as t };