@nyaruka/temba-components 0.135.9 → 0.136.1

package/src/store/AppState.ts

@@ -18,6 +18,32 @@ import { produce } from 'immer';
 export const FLOW_SPEC_VERSION = '14.3';
 const CANVAS_PADDING = 800;
 
+/**
+ * Sorts nodes by their position - first by y (top), then by x (left)
+ */
+function sortNodesByPosition(
+  nodes: Node[],
+  nodePositions: Record<string, NodeUI>
+): void {
+  nodes.sort((a, b) => {
+    const posA = nodePositions[a.uuid]?.position;
+    const posB = nodePositions[b.uuid]?.position;
+
+    // if either position is missing, maintain current order
+    if (!posA || !posB) {
+      return 0;
+    }
+
+    // sort by y (top) first
+    if (posA.top !== posB.top) {
+      return posA.top - posB.top;
+    }
+
+    // if y is same, sort by x (left)
+    return posA.left - posB.left;
+  });
+}
+
 export interface InfoResult {
   key: string;
   name: string;
@@ -66,6 +92,11 @@ export interface CanvasPositions {
   [uuid: string]: FlowPosition;
 }
 
+export interface Activity {
+  segments: { [exitToDestinationKey: string]: number };
+  nodes: { [nodeUuid: string]: number };
+}
+
 export interface AppState {
   flowDefinition: FlowDefinition;
   flowInfo: FlowInfo;
@@ -78,10 +109,20 @@ export interface AppState {
   dirtyDate: Date | null;
 
   canvasSize: { width: number; height: number };
+  activity: Activity | null;
+  simulatorActivity: Activity | null;
+  activityEndpoint: string | null;
+  simulatorActive: boolean;
 
+  getCurrentActivity: () => Activity | null;
   fetchRevision: (endpoint: string, id?: string) => void;
   fetchWorkspace: (endpoint: string) => Promise<void>;
   fetchAllLanguages: (endpoint: string) => Promise<void>;
+  fetchActivity: (endpoint: string) => Promise<void>;
+  setActivityEndpoint: (endpoint: string) => void;
+  updateActivity: (activity: Activity) => void;
+  updateSimulatorActivity: (activity: Activity) => void;
+  setSimulatorActive: (active: boolean) => void;
 
   getFlowResults: () => InfoResult[];
   getResultByKey(id: any): InfoResult;
@@ -134,6 +175,10 @@ export const zustand = createStore<AppState>()(
       flowInfo: null,
       isTranslating: false,
       dirtyDate: null,
+      activity: null,
+      simulatorActivity: null,
+      activityEndpoint: null,
+      simulatorActive: false,
 
       setDirtyDate: (date: Date) => {
         set((state: AppState) => {
@@ -181,6 +226,40 @@ export const zustand = createStore<AppState>()(
         set({ languageNames: allLanguages });
       },
 
+      setActivityEndpoint: (endpoint: string) => {
+        set({ activityEndpoint: endpoint });
+      },
+
+      fetchActivity: async (endpoint: string) => {
+        try {
+          const response = await fetch(endpoint);
+          if (!response.ok) {
+            return;
+          }
+          const data = await response.json();
+          set({ activity: data });
+        } catch (error) {
+          console.error('Failed to fetch activity:', error);
+        }
+      },
+
+      updateActivity: (activity: Activity) => {
+        set({ activity });
+      },
+
+      updateSimulatorActivity: (activity: Activity) => {
+        set({ simulatorActivity: activity });
+      },
+
+      setSimulatorActive: (active: boolean) => {
+        set({ simulatorActive: active });
+      },
+
+      getCurrentActivity: () => {
+        const state = get();
+        return state.simulatorActive ? state.simulatorActivity : state.activity;
+      },
+
       getFlowResults: () => {
         const state = get();
         return state.flowInfo.results;
@@ -208,6 +287,14 @@ export const zustand = createStore<AppState>()(
           // Reset to the flow's default language when loading a new flow
           state.languageCode = flowLang;
           state.isTranslating = false;
+
+          // Sort nodes by position when loading flow
+          if (state.flowDefinition?.nodes && state.flowDefinition?._ui?.nodes) {
+            sortNodesByPosition(
+              state.flowDefinition.nodes,
+              state.flowDefinition._ui.nodes
+            );
+          }
         });
       },
 
@@ -260,6 +347,13 @@ export const zustand = createStore<AppState>()(
                 positions[uuid];
             }
           }
+
+          // Sort nodes by position since positions may have changed
+          sortNodesByPosition(
+            state.flowDefinition.nodes,
+            state.flowDefinition._ui.nodes
+          );
+
           state.dirtyDate = new Date();
         });
       },
@@ -318,6 +412,9 @@ export const zustand = createStore<AppState>()(
                 }
               });
             });
+
+            // Sort nodes by position
+            sortNodesByPosition(draft.nodes, draft._ui.nodes);
           });
 
           state.dirtyDate = new Date();
@@ -452,6 +549,12 @@ export const zustand = createStore<AppState>()(
             config: {}
           };
 
+          // Sort nodes by position
+          sortNodesByPosition(
+            state.flowDefinition.nodes,
+            state.flowDefinition._ui.nodes
+          );
+
           state.dirtyDate = new Date();
         });
 
@@ -470,6 +573,12 @@ export const zustand = createStore<AppState>()(
 
           state.flowDefinition._ui.nodes[node.uuid] = nodeUI;
 
+          // Sort nodes by position
+          sortNodesByPosition(
+            state.flowDefinition.nodes,
+            state.flowDefinition._ui.nodes
+          );
+
           state.dirtyDate = new Date();
         });
       },

package/src/utils.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { html, TemplateResult } from 'lit-html';
+import { property } from 'lit/decorators.js';
 import { Button } from './display/Button';
 import { Dialog } from './layout/Dialog';
 import { Attachment, ContactField, Shortcut, Ticket, User } from './interfaces';
@@ -700,6 +701,58 @@ export const getCookieBoolean = (name: string) => {
   return (getCookie(name) || '') === 'true';
 };
 
+/**
+ * Custom Lit property decorator that binds a property to a cookie.
+ * The property value is loaded from the cookie on component connection
+ * and automatically saved to the cookie whenever it changes.
+ *
+ * @param cookieName - The name of the cookie to use for storage.
+ * @param defaultValue - Optional default value if cookie doesn't exist.
+ */
+export function fromCookie<T = unknown>(
+  cookieName: string,
+  defaultValue?: T
+): PropertyDecorator {
+  return (proto: any, propertyName: string | symbol) => {
+    // register as a reactive property
+    property()(proto, propertyName as string);
+
+    const connectedKey = 'connectedCallback';
+    const updatedKey = 'updated';
+
+    const userConnected = proto[connectedKey];
+    const userUpdated = proto[updatedKey];
+
+    // on connect, load value from cookie
+    proto[connectedKey] = function () {
+      const cookieValue = getCookie(cookieName);
+      if (cookieValue !== null) {
+        // parse boolean values
+        if (cookieValue === 'true') {
+          this[propertyName] = true;
+        } else if (cookieValue === 'false') {
+          this[propertyName] = false;
+        } else {
+          this[propertyName] = cookieValue;
+        }
+      } else if (defaultValue !== undefined) {
+        this[propertyName] = defaultValue;
+      }
+
+      if (userConnected) userConnected.call(this);
+    };
+
+    // on property change, save to cookie
+    proto[updatedKey] = function (changedProperties: Map<string, any>) {
+      if (changedProperties.has(propertyName as string)) {
+        setCookie(cookieName, this[propertyName]);
+      }
+
+      if (userUpdated) userUpdated.call(this, changedProperties);
+    };
+  };
+}
+
 export enum COOKIE_KEYS {
   SETTINGS = 'settings',
   MENU_COLLAPSED = 'menu-collapsed',