@awesome-flow/noise 0.3.0 → 0.5.0

package/dist/nodes/transformers/index.js

@@ -1,47 +1,42 @@
 // src/nodes/transformers/noise-displace-node.tsx
 import { NodeContainer, NodeTrackConnections } from "@awesome-flow/core/layout";
-import { useEffect, useMemo } from "react";
-import { useIncomingHandleData, useUpdateNodeComputedData } from "@awesome-flow/core/hooks";
+import { useCallback } from "react";
+import { useUpdateNodeComputedData } from "@awesome-flow/core/hooks";
 import { Displace } from "libnoise-ts/module/transformer";
-import { Badge, Stack } from "@mantine/core";
+import { HandlesIncomingDataStatus } from "@awesome-flow/core/components";
 import { jsx, jsxs } from "react/jsx-runtime";
 function NoiseDisplaceNode({ id, selected, data, type }) {
   const updateComputedData = useUpdateNodeComputedData();
-  const incomingHandleData = useIncomingHandleData(id, data.handles);
-  const { sourceModule, xModule, yModule, zModule } = useMemo(() => {
-    return {
-      sourceModule: incomingHandleData["source" /* sourceModule */],
-      xModule: incomingHandleData["x-module" /* xModule */],
-      yModule: incomingHandleData["y-module" /* yModule */],
-      zModule: incomingHandleData["z-module" /* zModule */]
-    };
-  }, [incomingHandleData]);
-  useEffect(() => {
-    if (sourceModule && xModule && yModule && zModule) {
-      const module = new Displace(
-        sourceModule[0].module,
-        xModule[0].module,
-        yModule[0].module,
-        zModule[0].module
-      );
-      updateComputedData(id, { module });
-    }
-  }, [id, updateComputedData, sourceModule, xModule, yModule, zModule]);
-  const { sourceColor, xColor, yColor, zColor } = useMemo(() => {
-    return {
-      sourceColor: sourceModule ? "green" : "orange",
-      xColor: xModule ? "green" : "orange",
-      yColor: yModule ? "green" : "orange",
-      zColor: zModule ? "green" : "orange"
-    };
-  }, [sourceModule, xModule, yModule, zModule]);
+  const onDataUpdated = useCallback(
+    (handleData) => {
+      const sourceModule = handleData["source" /* sourceModule */];
+      const xModule = handleData["x-module" /* xModule */];
+      const yModule = handleData["y-module" /* yModule */];
+      const zModule = handleData["z-module" /* zModule */];
+      if (sourceModule && xModule && yModule && zModule) {
+        const module = new Displace(
+          sourceModule[0].module,
+          xModule[0].module,
+          yModule[0].module,
+          zModule[0].module
+        );
+        updateComputedData(id, { module });
+      }
+    },
+    []
+  );
   return /* @__PURE__ */ jsxs(NodeContainer, { id, selected, data, type, children: [
-    /* @__PURE__ */ jsxs(Stack, { align: "center", children: [
-      /* @__PURE__ */ jsx(Badge, { color: sourceColor, children: "Source Module" }),
-      /* @__PURE__ */ jsx(Badge, { color: xColor, children: "X Module" }),
-      /* @__PURE__ */ jsx(Badge, { color: yColor, children: "Y Module" }),
-      /* @__PURE__ */ jsx(Badge, { color: zColor, children: "Z Module" })
-    ] }),
+    /* @__PURE__ */ jsx(
+      HandlesIncomingDataStatus,
+      {
+        nodeId: id,
+        handles: data.handles,
+        handleKey: "dataId",
+        onDataUpdated,
+        type: "target",
+        resetComputedData: true
+      }
+    ),
     /* @__PURE__ */ jsx(NodeTrackConnections, { handles: data.handles, nodeId: id, type: "target" })
   ] });
 }
@@ -49,13 +44,13 @@ var noise_displace_node_default = NoiseDisplaceNode;
 
 // src/nodes/transformers/noise-rotate-point-node.tsx
 import { NodeContainer as NodeContainer2, NodeTrackConnections as NodeTrackConnections2 } from "@awesome-flow/core/layout";
-import { useEffect as useEffect2, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   useIncomingComputedData,
   useUpdateNodeComputedData as useUpdateNodeComputedData2,
   useUpdateNodeData
 } from "@awesome-flow/core/hooks";
-import { Group, NumberInput, Stack as Stack2 } from "@mantine/core";
+import { Group, NumberInput, Stack } from "@mantine/core";
 import { RotatePoint } from "libnoise-ts/module/transformer";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function NoiseRotatePointNode({
@@ -70,7 +65,7 @@ function NoiseRotatePointNode({
   const incoming = useIncomingComputedData(id);
   const updateNodeData = useUpdateNodeData();
   const updateComputedData = useUpdateNodeComputedData2();
-  useEffect2(() => {
+  useEffect(() => {
     if (incoming?.length) {
       const module = new RotatePoint(incoming[0].module, xAngle, yAngle, zAngle);
       updateComputedData(id, { module });
@@ -78,7 +73,7 @@ function NoiseRotatePointNode({
     updateNodeData(id, { xAngle, yAngle, zAngle });
   }, [id, updateComputedData, updateNodeData, incoming, xAngle, yAngle, zAngle]);
   return /* @__PURE__ */ jsxs2(NodeContainer2, { id, selected, data, type, children: [
-    /* @__PURE__ */ jsxs2(Stack2, { children: [
+    /* @__PURE__ */ jsxs2(Stack, { children: [
       /* @__PURE__ */ jsxs2(Group, { children: [
         "X Angle:",
         /* @__PURE__ */ jsx2(
@@ -126,13 +121,13 @@ var noise_rotate_point_node_default = NoiseRotatePointNode;
 
 // src/nodes/transformers/noise-scale-point-node.tsx
 import { NodeContainer as NodeContainer3, NodeTrackConnections as NodeTrackConnections3 } from "@awesome-flow/core/layout";
-import { useEffect as useEffect3, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import {
   useIncomingComputedData as useIncomingComputedData2,
   useUpdateNodeComputedData as useUpdateNodeComputedData3,
   useUpdateNodeData as useUpdateNodeData2
 } from "@awesome-flow/core/hooks";
-import { Group as Group2, NumberInput as NumberInput2, Stack as Stack3 } from "@mantine/core";
+import { Group as Group2, NumberInput as NumberInput2, Stack as Stack2 } from "@mantine/core";
 import { ScalePoint } from "libnoise-ts/module/transformer";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function NoiseScalePointNode({
@@ -147,7 +142,7 @@ function NoiseScalePointNode({
   const incoming = useIncomingComputedData2(id);
   const updateNodeData = useUpdateNodeData2();
   const updateComputedData = useUpdateNodeComputedData3();
-  useEffect3(() => {
+  useEffect2(() => {
     if (incoming?.length) {
       const module = new ScalePoint(incoming[0].module, xScale, yScale, zScale);
       updateComputedData(id, { module });
@@ -155,7 +150,7 @@ function NoiseScalePointNode({
     updateNodeData(id, { xScale, yScale, zScale });
   }, [id, incoming, updateComputedData, updateNodeData, xScale, yScale, zScale]);
   return /* @__PURE__ */ jsxs3(NodeContainer3, { id, selected, data, type, children: [
-    /* @__PURE__ */ jsxs3(Stack3, { children: [
+    /* @__PURE__ */ jsxs3(Stack2, { children: [
       /* @__PURE__ */ jsxs3(Group2, { children: [
         "X Scale:",
         /* @__PURE__ */ jsx3(
@@ -203,13 +198,13 @@ var noise_scale_point_node_default = NoiseScalePointNode;
 
 // src/nodes/transformers/noise-translate-point-node.tsx
 import { NodeContainer as NodeContainer4, NodeTrackConnections as NodeTrackConnections4 } from "@awesome-flow/core/layout";
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import {
   useIncomingComputedData as useIncomingComputedData3,
   useUpdateNodeComputedData as useUpdateNodeComputedData4,
   useUpdateNodeData as useUpdateNodeData3
 } from "@awesome-flow/core/hooks";
-import { Group as Group3, NumberInput as NumberInput3, Stack as Stack4 } from "@mantine/core";
+import { Group as Group3, NumberInput as NumberInput3, Stack as Stack3 } from "@mantine/core";
 import { TranslatePoint } from "libnoise-ts/module/transformer";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function NoiseTranslatePointNode({
@@ -224,7 +219,7 @@ function NoiseTranslatePointNode({
   const incoming = useIncomingComputedData3(id);
   const updateNodeData = useUpdateNodeData3();
   const updateComputedData = useUpdateNodeComputedData4();
-  useEffect4(() => {
+  useEffect3(() => {
     if (incoming?.length) {
       const module = new TranslatePoint(incoming[0].module, translateX, translateY, translateZ);
       updateComputedData(id, { module });
@@ -232,7 +227,7 @@ function NoiseTranslatePointNode({
     updateNodeData(id, { translateX, translateY, translateZ });
   }, [id, incoming, translateX, translateY, translateZ, updateComputedData, updateNodeData]);
   return /* @__PURE__ */ jsxs4(NodeContainer4, { id, selected, data, type, children: [
-    /* @__PURE__ */ jsxs4(Stack4, { children: [
+    /* @__PURE__ */ jsxs4(Stack3, { children: [
       /* @__PURE__ */ jsxs4(Group3, { children: [
         "Translate X:",
         /* @__PURE__ */ jsx4(
@@ -280,159 +275,25 @@ var noise_translate_point_node_default = NoiseTranslatePointNode;
 
 // src/nodes/transformers/noise-turbulence-node .tsx
 import { NodeContainer as NodeContainer5, NodeTrackConnections as NodeTrackConnections5 } from "@awesome-flow/core/layout";
-import { useCallback as useCallback2, useEffect as useEffect6, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useState as useState4 } from "react";
 import { useIncomingComputedData as useIncomingComputedData4, useUpdateNodeComputedData as useUpdateNodeComputedData5 } from "@awesome-flow/core/hooks";
 import { Turbulence } from "libnoise-ts/module/transformer";
-
-// src/layout/node-property-variables.tsx
-import { useIncomingNodeData, useUpdateNodeData as useUpdateNodeData4 } from "@awesome-flow/core/hooks";
-import { useCallback, useEffect as useEffect5, useMemo as useMemo2, useState as useState4 } from "react";
-import { Group as Group4, Stack as Stack5 } from "@mantine/core";
-import { getObjectKeys } from "@awesome-flow/core/utils";
-import { nodeDataPropertyExcept } from "@awesome-flow/core/abstract";
-
-// src/layout/node-value-input.tsx
-import { Input, NumberInput as NumberInput4, Switch } from "@mantine/core";
-import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
-function NodeValueInput({ value, disabled, step, onChange }) {
-  if (value === void 0 || value === null) {
-    return /* @__PURE__ */ jsx5(Fragment, {});
-  }
-  switch (typeof value) {
-    case "boolean": {
-      return /* @__PURE__ */ jsx5(
-        Switch,
-        {
-          checked: value,
-          disabled,
-          onChange: (e) => onChange(e.currentTarget.checked)
-        }
-      );
-    }
-    case "number": {
-      return /* @__PURE__ */ jsx5(NumberInput4, { value, disabled, step, onChange: (e) => onChange(e) });
-    }
-    case "string": {
-      return /* @__PURE__ */ jsx5(
-        Input,
-        {
-          value,
-          disabled,
-          onChange: (e) => onChange(e.currentTarget.value)
-        }
-      );
-    }
-    default:
-      throw new Error(`Unknown input node for value of type: ${typeof value} (${value})`);
-  }
-}
-var node_value_input_default = NodeValueInput;
-
-// src/layout/node-property-input.tsx
-import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
-function NodePropertyInput({ property, onChange }) {
-  if (!property) {
-    return /* @__PURE__ */ jsx6(Fragment2, {});
-  }
-  return /* @__PURE__ */ jsx6(
-    node_value_input_default,
-    {
-      value: property.value,
-      disabled: property.disabled,
-      step: property.step,
-      onChange: (value) => onChange(property.name, value)
-    }
-  );
-}
-var node_property_input_default = NodePropertyInput;
-
-// src/layout/node-property-variables.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function NodePropertyVariables({
-  data,
-  nodeId,
-  onPropertiesChange,
-  except = nodeDataPropertyExcept
-}) {
-  const [properties, setProperties] = useState4(() => {
-    const keys = getObjectKeys(data, except);
-    const dataProps = {};
-    for (const key of keys) {
-      dataProps[key] = {
-        name: key,
-        value: data[key]
-      };
-    }
-    return dataProps;
-  });
-  const updateNodeData = useUpdateNodeData4();
-  const incoming = useIncomingNodeData(nodeId);
-  const resetAllDisabled = useCallback(() => {
-    const keys = Object.keys(properties);
-    keys.forEach((k) => {
-      properties[k].disabled = false;
-    });
-    setProperties(properties);
-  }, []);
-  const updatePropertyValue = useCallback((name, value, disabled) => {
-    let property = properties[name];
-    if (property) {
-      property.value = value;
-    } else {
-      property = {
-        name,
-        value
-      };
-    }
-    property.disabled = disabled;
-    setProperties({ ...properties, [name]: property });
-    updateNodeData(nodeId, { [name]: value });
-  }, []);
-  useEffect5(() => {
-    resetAllDisabled();
-    if (incoming?.length) {
-      for (const connection of incoming) {
-        if (connection.property && properties[connection.property.name] !== void 0) {
-          updatePropertyValue(connection.property.name, connection.property.value, true);
-        }
-      }
-    }
-  }, [incoming]);
-  useEffect5(() => {
-    if (onPropertiesChange) {
-      onPropertiesChange(properties);
-    }
-  }, [onPropertiesChange, properties]);
-  const nodes = useMemo2(() => {
-    return Object.keys(properties).map((key) => {
-      const property = properties[key];
-      return /* @__PURE__ */ jsxs5(Group4, { children: [
-        property.name,
-        ":",
-        /* @__PURE__ */ jsx7(node_property_input_default, { property, onChange: updatePropertyValue })
-      ] }, key);
-    });
-  }, [properties, updatePropertyValue]);
-  return /* @__PURE__ */ jsx7(Stack5, { children: nodes });
-}
-var node_property_variables_default = NodePropertyVariables;
-
-// src/nodes/transformers/noise-turbulence-node .tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { NodePropertyVariables } from "@awesome-flow/core/components";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function NoiseTurbulenceNode({
   id,
   selected,
   data,
   type
 }) {
-  const [properties, setProperties] = useState5(null);
+  const [properties, setProperties] = useState4(null);
   const incoming = useIncomingComputedData4(id);
   const updateComputedData = useUpdateNodeComputedData5();
   const onPropertiesChange = useCallback2((props) => {
     setProperties(props);
   }, []);
-  useEffect6(() => {
-    if (incoming?.length) {
+  useEffect4(() => {
+    if (incoming?.length && properties) {
       const module = new Turbulence(
         incoming[0].module,
         properties.frequency.value,
@@ -442,10 +303,10 @@ function NoiseTurbulenceNode({
       );
       updateComputedData(id, { module });
     }
-  }, [id, incoming, properties, updateComputedData]);
-  return /* @__PURE__ */ jsxs6(NodeContainer5, { id, selected, data, type, children: [
-    /* @__PURE__ */ jsx8(node_property_variables_default, { data, nodeId: id, onPropertiesChange }),
-    /* @__PURE__ */ jsx8(NodeTrackConnections5, { handles: data.handles, nodeId: id, type: "target" })
+  }, [id, incoming, properties]);
+  return /* @__PURE__ */ jsxs5(NodeContainer5, { id, selected, data, type, children: [
+    /* @__PURE__ */ jsx5(NodePropertyVariables, { data, nodeId: id, onPropertiesChange }),
+    /* @__PURE__ */ jsx5(NodeTrackConnections5, { handles: data.handles, nodeId: id, type: "target" })
   ] });
 }
 var noise_turbulence_node_default = NoiseTurbulenceNode;
@@ -456,4 +317,3 @@ export {
   noise_translate_point_node_default as NoiseTranslatePointNode,
   noise_turbulence_node_default as NoiseTurbulenceNode
 };
-//# sourceMappingURL=index.js.map