@rkmodules/rules 0.0.160 → 0.0.161

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rkmodules/rules",
-    "version": "0.0.160",
+    "version": "0.0.161",
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.mjs",
     "types": "./dist/index.d.ts",

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,54 @@ 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,
+    }}
+/>
+```
+
 TODO:
 
 - [ ] filtering of lists