feat: accepts an array of textboxes as part of initialData

src/Isoflow.tsx

@@ -44,9 +44,12 @@ const App = ({
   const previnitialData = useRef<SceneInput>(EMPTY_SCENE);
   const [isReady, setIsReady] = useState(false);
   useWindowUtils();
-  const scene = useSceneStore(({ nodes, connectors, rectangles, icons }) => {
-    return { nodes, connectors, rectangles, icons };
-  }, shallow);
+  const scene = useSceneStore(
+    ({ nodes, connectors, textBoxes, rectangles, icons }) => {
+      return { nodes, connectors, textBoxes, rectangles, icons };
+    },
+    shallow
+  );
   const sceneActions = useSceneStore((state) => {
     return state.actions;
   });

src/examples/initialData.ts

@@ -52,6 +52,7 @@ export const initialData: InitialData = {
       ]
     }
   ],
+  textBoxes: [],
   rectangles: [
     {
       id: 'rect1',

src/stores/sceneStore.tsx

@@ -17,6 +17,7 @@ const initialState = () => {
     return {
       nodes: [],
       connectors: [],
+      textBoxes: [],
       rectangles: [],
       icons: [],
       actions: {

src/types/inputs.ts

@@ -4,6 +4,7 @@ import {
   nodeInput,
   connectorAnchorInput,
   connectorInput,
+  textBoxInput,
   rectangleInput
 } from 'src/validation/sceneItems';
 import { sceneInput } from 'src/validation/scene';
@@ -13,5 +14,6 @@ export type IconInput = z.infer<typeof iconInput>;
 export type NodeInput = z.infer<typeof nodeInput>;
 export type ConnectorAnchorInput = z.infer<typeof connectorAnchorInput>;
 export type ConnectorInput = z.infer<typeof connectorInput>;
+export type TextBoxInput = z.infer<typeof textBoxInput>;
 export type RectangleInput = z.infer<typeof rectangleInput>;
 export type SceneInput = z.infer<typeof sceneInput>;

src/types/scene.ts

@@ -19,6 +19,7 @@ export enum TileOriginEnum {
 export enum SceneItemTypeEnum {
   NODE = 'NODE',
   CONNECTOR = 'CONNECTOR',
+  TEXTBOX = 'TEXTBOX',
   RECTANGLE = 'RECTANGLE'
 }
 
@@ -57,6 +58,12 @@ export interface Connector {
   };
 }
 
+export interface TextBox {
+  type: SceneItemTypeEnum.TEXTBOX;
+  id: string;
+  text: string;
+}
+
 export interface Rectangle {
   type: SceneItemTypeEnum.RECTANGLE;
   id: string;
@@ -90,6 +97,7 @@ export interface SceneActions {
 export type Scene = {
   nodes: Node[];
   connectors: Connector[];
+  textBoxes: TextBox[];
   rectangles: Rectangle[];
   icons: IconInput[];
 };

src/utils/inputs.ts

@@ -2,16 +2,17 @@ import {
   SceneInput,
   NodeInput,
   ConnectorInput,
+  TextBoxInput,
   RectangleInput,
   SceneItemTypeEnum,
   Scene,
   Node,
   Connector,
+  TextBox,
   Rectangle,
   ConnectorAnchorInput,
   ConnectorAnchor,
-  Coords,
-  ConnectorStyleEnum
+  Coords
 } from 'src/types';
 import { NODE_DEFAULTS, DEFAULT_COLOR, CONNECTOR_DEFAULTS } from 'src/config';
 import { getConnectorPath } from './renderer';
@@ -80,6 +81,14 @@ export const connectorInputToConnector = (
   };
 };
 
+export const textBoxInputToTextBox = (textBoxInput: TextBoxInput): TextBox => {
+  return {
+    type: SceneItemTypeEnum.TEXTBOX,
+    id: textBoxInput.id,
+    text: textBoxInput.text
+  };
+};
+
 export const sceneInputToScene = (sceneInput: SceneInput): Scene => {
   const nodes = sceneInput.nodes.map((nodeInput) => {
     return nodeInputToNode(nodeInput);

src/validation/scene.ts

@@ -4,7 +4,8 @@ import {
   iconInput,
   nodeInput,
   connectorInput,
-  rectangleInput
+  rectangleInput,
+  textBoxInput
 } from './sceneItems';
 import { findInvalidConnector, findInvalidNode } from './utils';
 
@@ -13,6 +14,7 @@ export const sceneInput = z
     icons: z.array(iconInput),
     nodes: z.array(nodeInput),
     connectors: z.array(connectorInput),
+    textBoxes: z.array(textBoxInput),
     rectangles: z.array(rectangleInput)
   })
   .superRefine((scene, ctx) => {

src/validation/sceneItems.ts

@@ -58,6 +58,11 @@ export const connectorInput = z.object({
   anchors: z.array(connectorAnchorInput)
 });
 
+export const textBoxInput = z.object({
+  id: z.string(),
+  text: z.string()
+});
+
 export const rectangleInput = z.object({
   id: z.string(),
   color: z.string().optional(),