FIX: Move model out of te nameManager

webapp/src/components/NameManagerDialog/NameManagerDialog.tsx

@@ -1,4 +1,4 @@
-import type { Model } from "@ironcalc/wasm";
+import type { DefinedName, WorksheetProperties } from "@ironcalc/wasm";
 import {
   Box,
   Button,
@@ -13,58 +13,48 @@ import {
 import { t } from "i18next";
 import { BookOpen, Plus, X } from "lucide-react";
 import { useEffect, useState } from "react";
-import { getFullRangeToString } from "../util";
 import NamedRangeActive from "./NamedRangeActive";
 import NamedRangeInactive from "./NamedRangeInactive";
 
-interface NameManagerDialogProperties {
+export interface NameManagerProperties {
-  open: boolean;
+  newDefinedName: (
-  model: Model;
-  onClose: () => void;
-  onNamesChanged: () => void;
-}
-
-function NameManagerDialog(properties: NameManagerDialogProperties) {
-  const { open, model, onClose, onNamesChanged } = properties;
-  // If editingNameIndex is -1, then we are adding a new name
-  // If editingNameIndex is -2, then we are not editing any name
-  // If editingNameIndex is a positive number, then we are editing that index
-  const [editingNameIndex, setEditingNameIndex] = useState(-2);
-
-  useEffect(() => {
-    if (open) {
-      setEditingNameIndex(-2);
-    }
-  }, [open]);
-
-  // Model stuff:
-  const worksheets = model.getWorksheetsProperties();
-  const definedNameList = model.getDefinedNameList();
-  const formatFormula = (): string => {
-    const worksheetNames = worksheets.map((s) => s.name);
-    const selectedView = model.getSelectedView();
-
-    return getFullRangeToString(selectedView, worksheetNames);
-  };
-  const newDefinedName = (
     name: string,
     scope: number | undefined,
-    formula: string
+    formula: string,
-  ) => {
+  ) => void;
-    model.newDefinedName(name, scope, formula);
+  updateDefinedName: (
-  };
-  const updateDefinedName = (
     name: string,
     scope: number | undefined,
     newName: string,
     newScope: number | undefined,
-    newFormula: string
+    newFormula: string,
-  ) => {
+  ) => void;
-    model.updateDefinedName(name, scope, newName, newScope, newFormula);
+  deleteDefinedName: (name: string, scope: number | undefined) => void;
-  };
+  selectedArea: () => string;
-  const deleteDefinedName = (name: string, scope: number | undefined) => {
+  worksheets: WorksheetProperties[];
-    model.deleteDefinedName(name, scope);
+  definedNameList: DefinedName[];
-  };
+}
+
+interface NameManagerDialogProperties {
+  open: boolean;
+  onClose: () => void;
+  model: NameManagerProperties;
+}
+
+function NameManagerDialog(properties: NameManagerDialogProperties) {
+  const { open, model, onClose } = properties;
+  const {
+    newDefinedName,
+    updateDefinedName,
+    deleteDefinedName,
+    selectedArea,
+    worksheets,
+    definedNameList,
+  } = model;
+  // If editingNameIndex is -1, then we are adding a new name
+  // If editingNameIndex is -2, then we are not editing any name
+  // If editingNameIndex is a positive number, then we are editing that index
+  const [editingNameIndex, setEditingNameIndex] = useState(-2);
 
   useEffect(() => {
     if (open) {
@@ -102,10 +92,10 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
                   onSave={(
                     newName,
                     newScope,
-                    newFormula
+                    newFormula,
                   ): string | undefined => {
                     const scope_index = worksheets.findIndex(
-                      (s) => s.name === newScope
+                      (s) => s.name === newScope,
                     );
                     const scope = scope_index > 0 ? scope_index : undefined;
                     try {
@@ -114,10 +104,9 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
                         definedName.scope,
                         newName,
                         scope,
-                        newFormula
+                        newFormula,
                       );
                       setEditingNameIndex(-2);
-                      onNamesChanged();
                     } catch (e) {
                       return `${e}`;
                     }
@@ -136,7 +125,6 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
                 onEdit={() => setEditingNameIndex(index)}
                 onDelete={() => {
                   deleteDefinedName(definedName.name, definedName.scope);
-                  onNamesChanged();
                 }}
               />
             );
@@ -146,7 +134,7 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
           <NamedRangeActive
             worksheets={worksheets}
             name={""}
-            formula={formatFormula()}
+            formula={selectedArea()}
             scope={"[global]"}
             onSave={(name, scope, formula): string | undefined => {
               const scope_index = worksheets.findIndex((s) => s.name === scope);
@@ -154,7 +142,6 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
               try {
                 newDefinedName(name, scope_value, formula);
                 setEditingNameIndex(-2);
-                onNamesChanged();
               } catch (e) {
                 return `${e}`;
               }

webapp/src/components/toolbar.tsx

@@ -1,7 +1,6 @@
 import type {
   BorderOptions,
   HorizontalAlignment,
-  Model,
   VerticalAlignment,
 } from "@ironcalc/wasm";
 import { styled } from "@mui/material/styles";
@@ -37,6 +36,7 @@ import {
 } from "../icons";
 import { theme } from "../theme";
 import NameManagerDialog from "./NameManagerDialog";
+import type { NameManagerProperties } from "./NameManagerDialog/NameManagerDialog";
 import BorderPicker from "./borderPicker";
 import ColorPicker from "./colorPicker";
 import { TOOLBAR_HEIGHT } from "./constants";
@@ -63,7 +63,6 @@ type ToolbarProperties = {
   onFillColorPicked: (hex: string) => void;
   onNumberFormatPicked: (numberFmt: string) => void;
   onBorderChanged: (border: BorderOptions) => void;
-  onNamesChanged: () => void;
   fillColor: string;
   fontColor: string;
   bold: boolean;
@@ -76,7 +75,7 @@ type ToolbarProperties = {
   numFmt: string;
   showGridLines: boolean;
   onToggleShowGridLines: (show: boolean) => void;
-  model: Model;
+  nameManagerProperties: NameManagerProperties;
 };
 
 function Toolbar(properties: ToolbarProperties) {
@@ -398,8 +397,7 @@ function Toolbar(properties: ToolbarProperties) {
         onClose={() => {
           setNameManagerDialogOpen(false);
         }}
-        onNamesChanged={properties.onNamesChanged}
+        model={properties.nameManagerProperties}
-        model={properties.model}
       />
     </ToolbarContainer>
   );

webapp/src/components/workbook.tsx

@@ -21,7 +21,11 @@ import {
 import FormulaBar from "./formulabar";
 import Toolbar from "./toolbar";
 import useKeyboardNavigation from "./useKeyboardNavigation";
-import { type NavigationKey, getCellAddress } from "./util";
+import {
+  type NavigationKey,
+  getCellAddress,
+  getFullRangeToString,
+} from "./util";
 import type { WorkbookState } from "./workbookState";
 import Worksheet from "./worksheet";
 
@@ -32,11 +36,13 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
   // Calling `setRedrawId((id) => id + 1);` forces a redraw
   // This is needed because `model` or `workbookState` can change without React being aware of it
   const setRedrawId = useState(0)[1];
-  const info = model
+
-    .getWorksheetsProperties()
+  const worksheets = model.getWorksheetsProperties();
-    .map(({ name, color, sheet_id, state }: WorksheetProperties) => {
+  const info = worksheets.map(
+    ({ name, color, sheet_id, state }: WorksheetProperties) => {
       return { name, color: color ? color : "#FFF", sheetId: sheet_id, state };
-    });
+    },
+  );
   const focusWorkbook = useCallback(() => {
     if (rootRef.current) {
       rootRef.current.focus();
@@ -569,8 +575,38 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           model.setShowGridLines(sheet, show);
           setRedrawId((id) => id + 1);
         }}
-        onNamesChanged={() => setRedrawId((id) => id + 1)}
+        nameManagerProperties={{
-        model={model}
+          newDefinedName: (
+            name: string,
+            scope: number | undefined,
+            formula: string,
+          ) => {
+            model.newDefinedName(name, scope, formula);
+            setRedrawId((id) => id + 1);
+          },
+          updateDefinedName: (
+            name: string,
+            scope: number | undefined,
+            newName: string,
+            newScope: number | undefined,
+            newFormula: string,
+          ) => {
+            model.updateDefinedName(name, scope, newName, newScope, newFormula);
+            setRedrawId((id) => id + 1);
+          },
+          deleteDefinedName: (name: string, scope: number | undefined) => {
+            model.deleteDefinedName(name, scope);
+            setRedrawId((id) => id + 1);
+          },
+          selectedArea: () => {
+            const worksheetNames = worksheets.map((s) => s.name);
+            const selectedView = model.getSelectedView();
+
+            return getFullRangeToString(selectedView, worksheetNames);
+          },
+          worksheets,
+          definedNameList: model.getDefinedNameList(),
+        }}
       />
       <FormulaBar
         cellAddress={cellAddress()}