@rkmodules/rules 0.0.160 → 0.0.162

package/dist/lib/Engine/types.d.ts

@@ -30,7 +30,10 @@ export type RecOfTrees = Record<string, Tree<any>>;
 export type PrimitiveFunction = {
     name: string;
     label?: string;
-    nodeType?: string;
+    nodeType?: string | {
+        name: string;
+        props: Record<string, any>;
+    };
     description?: string;
     params?: Record<string, VarDef>;
     inputs?: Record<string, VarDef>;

package/dist/lib/Flow/index.d.ts

@@ -21,6 +21,7 @@ interface FlowProps {
     fitView?: boolean;
     onChange?: (updater: Updater<GraphedFunction>) => void;
     onClick?: (event: React.MouseEvent, position: XYPosition) => void;
+    onContextMenu?: (event: React.MouseEvent, position: XYPosition) => void;
     onSelect?: (ids: string[]) => void;
     customControls?: Record<string, React.ComponentType<WidgetProps<any>>>;
     customNodes?: Record<string, React.ComponentType<NodeProps<FunctionNode>>>;

package/dist/lib/Flow/types.d.ts

@@ -11,6 +11,7 @@ export type FunctionNode = Node<{
     outputDefs: Record<string, VarDef>;
     onChange: (newData: Partial<FunctionNode["data"]>) => void;
     onIOChange?: (callback: (fn: GraphedFunction) => Partial<GraphedFunction>) => void;
+    nodeProps?: Record<string, any>;
 }>;
 export type NodeDropItem = {
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rkmodules/rules",
-    "version": "0.0.160",
+    "version": "0.0.162",
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.mjs",
     "types": "./dist/index.d.ts",
@@ -41,6 +41,7 @@
         "react-dom": ">=17.0.1"
     },
     "dependencies": {
+        "@rkmodules/stringtemplate": "^0.1.3",
         "@rkmodules/use-inner": "^1.0.3",
         "@xyflow/react": "^12.8.3",
         "classnames": "^2.5.1",

package/readme.md

@@ -8,6 +8,47 @@ An engine creates a namespace for functions, so create an engine to start with:
 
 `const engine = new Engine()`
 
+## editor
+
+- Create an instance of the rules engine
+- import the css
+- create a function to work with
+- use the `<Flow>` component to create the editor
+- use the `<DDContext>` component around the flow
+
+```tsx
+import "@rkmodules/rules/index.css";
+import {
+    DDContext,
+    Engine,
+    Flow,
+    GraphedFunction,
+} from "@rkmodules/rules";
+
+const engine = new Engine({
+    // map of custom rules
+});
+
+const emptyFunction: GraphedFunction = {
+    name: "test",
+    body: {},
+    outputs: {
+        documents: "",
+    },
+};
+
+export default function MyComponent() {
+    const [fn, setFn] = React.useState(emptyFunction);
+    return (
+        <div>
+            <DDContext>
+                <Flow function={fn} engine={engine} onChange={setFn} />
+            </DDContext>
+        <div>
+    );
+}
+```
+
 ## Specifying a function
 
 A function definition is just a json object. It can be assembled together via code or just hardcoded. It is of type `GraphedFunction` and at least has to have a `name` and `body` field. The latter defines a graph with calls to primitives or other graphed functions:
@@ -53,35 +94,158 @@ We get back to function definitions later
 
 `useFunction`
 
-## editor
+# custom styling
 
-- Create an instance of the rules engine
-- create a function to work with
-- use the `<Flow>` component to create the editor
+import the css for basic styling:
 
-```tsx
-const engine = new Engine({
-    // map of custom rules
-});
+```ts
+import "@rkmodules/rules/index.css";
+```
 
-const emptyFunction: GraphedFunction = {
-    name: "test",
-    body: {},
-    outputs: {
-        documents: "",
-    },
-};
+The following css variables are defined on root, overwrite if needed
+
+```css
+:root {
+    --node-line: #ccc;
+    --node-select-line: #007bff;
+    --node-active-line: crimson;
+    --node-background: #f9f9f9;
+    --node-connection: #007bff;
+    --node-shadow: none;
+    --node-radius: 4px;
+}
+```
 
-export default function MyComponent() {
-    const [fn, setFn] = React.useState(emptyFunction);
-    return (
-        <div>
-            <Flow function={fn} engine={engine} onChange={setFn} />
-        <div>
-    );
+# custom controls
+
+node inputs and params have a particular type. There are standard controls for `string`, `number` and `boolean`. Additional controls can be created using a component with the following props signature:
+
+```ts
+export interface WidgetProps<T> {
+    value: T;
+    vardef: NormalizedVarDef;
+    data: FunctionNode["data"];
+    onChange?: (value: T) => void;
 }
 ```
 
+custom contols can be passed into the `<Flow>` component with the `customControls` prop. It should be a map from type to component:
+
+```tsx
+<Flow
+    engine={engine}
+    function={fn}
+    onChange={setFn}
+    customControls={{
+        color: ColorControl,
+    }}
+/>
+```
+
+# custom nodes
+
+alternatively, the entire node can be customized. There are the following standard nodes `Default`, `Calc`, and
+
+- `Default`: the default node
+- `Calc`: specialized node for the Calc function that renders the expression and creates input ports based on variables in the expression
+- `DynamicInput`: creates additional input ports, useful for allowing a dynamic number of inputs
+- `DynamicOutput`: creates output ports on the fly based on the function result
+- `NamedInput`: allows adding and renaming input ports by the user
+- `Input` and `Output`: used for rule input and output
+
+# Components / functions reference
+
+## List
+
+- List Input: creates a list of strings or numbers based on textfield input
+- List Item: selects items from a list based on their indices
+- List Length: returns the length of a list
+- Relative Item
+- Relative Items
+- Unique Items: removes duplicates from a list
+
+## Logic
+
+- And: returns true if both inputs are true
+- Or: returns true if one or both of the inputs are true
+- Not: negates all elements in the list
+- Group And: returns true if all elements in the list are true
+- Group Or: returns true if some elements in the list are true
+- Group stats: returns min, max, avg, std, sum and count of a list of numbers
+
+## Math
+
+- Add
+- Subtract
+- Multiply
+- Divide
+- Modulo
+- Pow
+- Sqrt
+- Round
+- Floor
+- Ceil
+- Sin
+- Cos
+- Tan
+- Sum
+- Less Than
+- Greater Than
+
+## String
+
+- Join Strings
+- String Equal To
+- String Template
+- To String
+
+## Date
+
+- Duration
+- Format Date
+- Iso Date
+- Parse Date
+- Today
+
+## Util
+
+- Get Type
+- Get Value
+- Log
+- Value
+
+## Sequence
+
+- Series
+
+## JSON
+
+- Array To List
+- Destructure Object
+- Explode Object
+- List To Array
+- Merge Object
+- Object
+- Entries
+- Set Field
+
+## Group
+
+- Cartesian Groups
+- Filter Tree
+- Group All
+- Merge Group
+- Merge Tree
+- Normalize Tree
+- SimplifyTree
+- Split Group
+- Tree Item
+
+## IO
+
+- Input
+- Output
+
 TODO:
 
 - [ ] filtering of lists
@@ -93,20 +257,6 @@ TODO:
     - running flag
     - intermediate results
 
-Components / functions
-
-List
-
-- [x] listItem
-- [x] listLength
-- [x] graftTree
-- [x] trimTree
-
-Math
-
-- [x] lessThan
-- [x] greaterThan
-
 Text
 
 - formatting