Converted cache, commentsReducer, constants, stageReducer

src/Cache.ts

@@ -0,0 +1,12 @@
+import { Connections, PortType } from "./types";
+
+class Cache{
+  ports: { [portType: string]: PortType };
+  connections: {[id: string]: Connections};
+
+  constructor(){
+    this.ports = {};
+    this.connections = {};
+  }
+}
+export default Cache

src/commentsReducer.ts

@@ -0,0 +1,111 @@
+import { nanoid } from "nanoid/non-secure";
+import { Colors, FlumeComment } from "./types";
+
+type CommentMap = { [commentId: string]: FlumeComment };
+
+export enum CommentActionTypes {
+  ADD_COMMENT = "ADD_COMMENT",
+  REMOVE_COMMENT_NEW = "REMOVE_COMMENT_NEW",
+  SET_COMMENT_COORDINATES = "SET_COMMENT_COORDINATES",
+  SET_COMMENT_DIMENSIONS = "SET_COMMENT_DIMENSIONS",
+  SET_COMMENT_TEXT = "SET_COMMENT_TEXT",
+  SET_COMMENT_COLOR = "SET_COMMENT_COLOR",
+  DELETE_COMMENT = "DELETE_COMMENT"
+}
+
+export type CommentAction =
+  | {
+      type: CommentActionTypes.ADD_COMMENT;
+      x: number;
+      y: number;
+    }
+  | {
+      type: CommentActionTypes.REMOVE_COMMENT_NEW;
+      id: string;
+    }
+  | {
+      type: CommentActionTypes.SET_COMMENT_COORDINATES;
+      id: string;
+      x: number;
+      y: number;
+    }
+  | {
+      type: CommentActionTypes.SET_COMMENT_DIMENSIONS;
+      id: string;
+      width: number;
+      height: number;
+    }
+  | {
+      type: CommentActionTypes.SET_COMMENT_TEXT;
+      id: string;
+      text: string;
+    }
+  | {
+      type: CommentActionTypes.SET_COMMENT_COLOR;
+      id: string;
+      color: Colors;
+    }
+  | {
+      type: CommentActionTypes.DELETE_COMMENT;
+      id: string;
+    };
+
+const setComment = (
+  comments: CommentMap,
+  id: string,
+  merge: Partial<FlumeComment>
+): CommentMap => ({
+  ...comments,
+  [id]: {
+    ...comments[id],
+    ...merge
+  }
+});
+
+export default (comments: CommentMap = {}, action) => {
+  switch (action.type) {
+    case CommentActionTypes.ADD_COMMENT: {
+      const comment = {
+        id: nanoid(10),
+        text: "",
+        x: action.x,
+        y: action.y,
+        width: 200,
+        height: 30,
+        color: "blue",
+        isNew: true
+      };
+      return {
+        ...comments,
+        [comment.id]: comment
+      };
+    }
+    case CommentActionTypes.REMOVE_COMMENT_NEW:
+      const { isNew: toDelete, ...comment } = comments[action.id];
+      return {
+        ...comments,
+        [action.id]: comment
+      };
+    case CommentActionTypes.SET_COMMENT_COORDINATES: {
+      return setComment(comments, action.id, { x: action.x, y: action.y });
+    }
+    case CommentActionTypes.SET_COMMENT_DIMENSIONS: {
+      return setComment(comments, action.id, {
+        width: action.width,
+        height: action.height
+      });
+    }
+    case CommentActionTypes.SET_COMMENT_TEXT: {
+      return setComment(comments, action.id, { text: action.text });
+    }
+    case CommentActionTypes.SET_COMMENT_COLOR: {
+      return setComment(comments, action.id, { color: action.color });
+    }
+    case CommentActionTypes.DELETE_COMMENT: {
+      const { [action.id]: toDelete, ...newComments } = comments;
+      return newComments;
+    }
+    default:
+      return comments;
+  }
+};

src/stageReducer.ts

@@ -0,0 +1,47 @@
+import { StageTranslate } from "./types";
+
+type StageState = {
+  translate: StageTranslate;
+  scale: number;
+};
+
+enum StageActionType {
+  SET_SCALE = "SET_SCALE",
+  SET_TRANSLATE = "SET_TRANSLATE",
+  SET_TRANSLATE_SCALE = "SET_TRANSLATE_SCALE"
+}
+
+type StageAction =
+  | {
+      type: StageActionType.SET_SCALE;
+      scale: number;
+    }
+  | {
+      type: StageActionType.SET_TRANSLATE;
+      translate: StageTranslate;
+    }
+  | {
+      type: StageActionType.SET_TRANSLATE_SCALE;
+      translate: StageTranslate;
+      scale: number;
+    };
+
+type StageActionSetter = StageAction | ((state: StageState) => StageAction);
+
+export default (state: StageState, incomingAction: StageActionSetter) => {
+  let action =
+    typeof incomingAction === "function"
+      ? incomingAction(state)
+      : incomingAction;
+
+  switch (action.type) {
+    case StageActionType.SET_SCALE:
+      return { ...state, scale: action.scale };
+    case StageActionType.SET_TRANSLATE:
+      return { ...state, translate: action.translate };
+    case StageActionType.SET_TRANSLATE_SCALE:
+      return { ...state, translate: action.translate, scale: action.scale };
+    default:
+      return state;
+  }
+};

src/types.ts

@@ -142,3 +142,19 @@ export type Toast = {
   height: number;
   exiting: boolean;
 };
+
+export type FlumeComment = {
+  id: string;
+  text: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: Colors;
+  isNew: boolean;
+}
+
+export type StageTranslate = {
+  x: number;
+  y: number;
+}