fix issues with texture editor on restored model

packages/svg-widget-studio/src/models/WorkspaceModel.tsx

@@ -185,6 +185,11 @@ export class WorkspaceModel extends Model({
   @modelAction
   applySpecSnapshot(persistedSpecSnapshot: SnapshotInOfModel<any>) {
     assertNotNullish(this.selectedStore);
+    // here to support legacy format with cruft data on property
+    // TODO: remove
+    if (persistedSpecSnapshot?.textureEditor) {
+      delete persistedSpecSnapshot.textureEditor;
+    }
     applySnapshot(this.selectedStore, persistedSpecSnapshot);
   }
 

packages/widgets/src/App.tsx

@@ -4,13 +4,11 @@ import { WidgetRoute } from 'svg-widget-studio/src/components/WidgetRoute';
 import { POLYHEDRAL_NET_MODEL_TYPE } from '@/widgets/PyramidNet/models/PyramidNetWidgetStore';
 import { FileInputs } from '@/widgets/PyramidNet/components/FileInputs';
 import { TextureEditorDrawer } from '@/widgets/PyramidNet/components/TextureEditorDrawer/index';
-import { JoyrideTour } from '@/widgets/index';
 
 export function App() {
   return (
     <WidgetWorkspaceProvider>
       <WidgetRoute widgetName={POLYHEDRAL_NET_MODEL_TYPE}>
-        <JoyrideTour />
         <FileInputs />
         <TextureEditorDrawer />
       </WidgetRoute>

packages/widgets/src/widgets/PyramidNet/components/DielinesLayer.tsx

@@ -30,7 +30,7 @@ export const DielinesLayer = observer(({
     return null;
   }
   const {
-    textureEditor: { faceDecoration },
+    textureEditor: { faceDecoration } = {},
     boundingBox,
     faceLengthAdjustRatio,
     masterBaseTabCut,

packages/widgets/src/widgets/PyramidNet/components/JoyrideTour.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react';
-import { useSelectedStore } from 'svg-widget-studio';
+import { assertNotNullish, useSelectedStore } from 'svg-widget-studio';
 import { useTheme } from '@mui/styles';
 import React, { useMemo, useState } from 'react';
 import Joyride, { ACTIONS, EVENTS } from 'react-joyride';
@@ -21,6 +21,7 @@ export const JoyrideTour = observer(() => {
     textureEditor,
     history,
   } = pyramidNetPluginStore;
+  assertNotNullish(textureEditor);
   const { tourIsActive } = preferences ?? {};
   const theme = useTheme();
   const [stepIndex, setStepIndex] = useState<number>(0);

packages/widgets/src/widgets/PyramidNet/components/TextureEditorDrawer/components/FileInputs.tsx

@@ -25,7 +25,7 @@ export const FileInputs = observer(() => {
     <InvisibleTextFileInput
       ref={openTextureInputRef}
       changeHandler={(fileString) => {
-        textureEditor.deactivateImportTextureArrangementDialog();
+        textureEditor?.deactivateImportTextureArrangementDialog();
         const currentShapeName = widgetStore.pyramid.shapeName.value;
 
         const fileData = JSON.parse(fileString);

packages/widgets/src/widgets/PyramidNet/components/TextureEditorDrawer/components/TextureEditor/components/ShapePreview.tsx

@@ -6,7 +6,7 @@ import { IconButton } from '@mui/material';
 import { styled } from '@mui/styles';
 import clsx from 'clsx';
 import ReactDOMServer from 'react-dom/server';
-import { boundingBoxAttrsToViewBoxStr, useWorkspaceMst } from 'svg-widget-studio';
+import { assertNotNullish, boundingBoxAttrsToViewBoxStr, useWorkspaceMst } from 'svg-widget-studio';
 import type { PyramidNetWidgetModel } from '../../../../../models/PyramidNetWidgetStore';
 import { TOUR_ELEMENT_CLASSES } from '../../../../../../../common/util/tour';
 import { PathFaceDecorationPatternModel } from '@/widgets/PyramidNet/models/PathFaceDecorationPatternModel';
@@ -35,6 +35,7 @@ export const ShapePreview = observer(() => {
   const workspaceStore = useWorkspaceMst();
 
   const { textureEditor } = workspaceStore.selectedStore as unknown as PyramidNetWidgetModel;
+  assertNotNullish(textureEditor);
   const { shapePreview } = textureEditor;
   const decorationPattern = textureEditor.faceDecoration?.pattern;
   const shapeNameVal = textureEditor.shapeName.value;
@@ -83,6 +84,7 @@ export const ShapePreview = observer(() => {
     );
     shapePreview?.applyTextureToMesh(svgStr, boundingBoxAttrs);
   }, (() => {
+    // TODO: fix warnings about this array size changing
     const { faceDecoration, faceBoundary } = textureEditor;
     const listenProps:any[] = [shapePreview?.shapeMesh, faceBoundary];
     if (!faceDecoration || faceDecoration instanceof RawFaceDecorationModel) { return listenProps; }

packages/widgets/src/widgets/PyramidNet/components/TextureEditorDrawer/components/TextureEditor/components/TextureArrangement/components/TexturePathNodes.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import clsx from 'clsx';
 import { styled } from '@mui/styles';
 import { getDestinationPoints, PathData } from 'fluent-svg-path-ts';
-import { useSelectedStore } from 'svg-widget-studio';
+import { assertNotNullish, useSelectedStore } from 'svg-widget-studio';
 import type { PyramidNetWidgetModel } from '../../../../../../../models/PyramidNetWidgetStore';
 import { ImageFaceDecorationPatternModel } from '../../../../../../../models/ImageFaceDecorationPatternModel';
 import { RawFaceDecorationModel } from '../../../../../../../models/RawFaceDecorationModel';
@@ -30,6 +30,7 @@ const NodesGroup = styled('g')({
 export const TexturePathNodes = observer(() => {
   const selectedStore = useSelectedStore<PyramidNetWidgetModel>();
   const { textureEditor } = selectedStore;
+  assertNotNullish(textureEditor);
   const {
     faceDecoration, selectedTextureNodeIndex, showNodes, imageCoverScale, viewerModel,
   } = textureEditor;

packages/widgets/src/widgets/PyramidNet/components/TextureEditorDrawer/components/TextureEditor/components/TextureArrangement/components/TextureSvg.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 
 import { HookReturnType, UseDragConfig } from 'react-use-gesture/dist/types';
 import { RawPoint } from 'fluent-svg-path-ts';
-import { useSelectedStore } from 'svg-widget-studio';
+import { assertNotNullish, useSelectedStore } from 'svg-widget-studio';
 import { scalePoint } from '../../../../../../../../../common/util/geom';
 import { TexturePathNodes } from './TexturePathNodes';
 import type { PyramidNetWidgetModel } from '../../../../../../../models/PyramidNetWidgetStore';
@@ -29,13 +29,21 @@ export function TextureSvgUnobserved({
   store?: TextureEditorModel,
 }) {
   // must avoid calling useMst (hooks) when using server-side rendering (results in errors about useLayoutEffect)
+  const selectedTextureEditor = (useSelectedStore<PyramidNetWidgetModel>()).textureEditor;
+  let targetStore;
+  if (store) {
+    targetStore = store;
+  } else {
+    assertNotNullish(selectedTextureEditor);
+    targetStore = selectedTextureEditor;
+  }
   const {
     decorationBoundary: { pathD: decorationBoundaryPathD = '' } = {},
     faceDecoration,
     faceBoundary,
     faceFittingScale,
     placementAreaDimensions,
-  } = store || (useSelectedStore<PyramidNetWidgetModel>()).textureEditor;
+  } = targetStore;
   if (
     !decorationBoundaryPathD || faceDecoration instanceof RawFaceDecorationModel
     || !faceBoundary || !decorationBoundaryPathD || !placementAreaDimensions || !faceFittingScale

packages/widgets/src/widgets/PyramidNet/components/TextureEditorDrawer/components/TextureEditor/components/TextureArrangement/index.tsx

@@ -18,6 +18,7 @@ export const TextureArrangement = observer(() => {
   const workspaceStore = useWorkspaceMst();
   const pyramidNetPluginStore = workspaceStore.selectedStore as unknown as PyramidNetWidgetModel;
   const { textureEditor } = pyramidNetPluginStore;
+  assertNotNullish(textureEditor);
   const {
     faceDecoration,
     placementAreaDimensions,

packages/widgets/src/widgets/PyramidNet/components/TextureEditorDrawer/components/TextureEditor/components/TextureControls/components/SnapMenu.tsx

@@ -5,7 +5,7 @@ import {
 } from '@mui/material';
 import { observer } from 'mobx-react';
 import { range } from 'lodash-es';
-import { useSelectedStore } from 'svg-widget-studio';
+import { assertNotNullish, useSelectedStore } from 'svg-widget-studio';
 import type { PyramidNetWidgetModel } from '../../../../../../../models/PyramidNetWidgetStore';
 import { TOUR_ELEMENT_CLASSES } from '../../../../../../../../../common/util/tour';
 
@@ -15,7 +15,7 @@ export const SnapMenu = observer(() => {
 
   const widgetModel = useSelectedStore<PyramidNetWidgetModel>();
   const { textureEditor } = widgetModel;
-
+  assertNotNullish(textureEditor);
   const {
     faceDecoration, decorationBoundary,
     selectedTextureNodeIndex, showNodes,

packages/widgets/src/widgets/PyramidNet/components/TextureEditorDrawer/components/TextureEditor/components/TextureControls/index.tsx

@@ -29,7 +29,9 @@ import NumberFormat from 'react-number-format';
 import clsx from 'clsx';
 
 import { styled } from '@mui/styles';
-import { HistoryButtons, TweakableInput, useSelectedStore } from 'svg-widget-studio';
+import {
+  assertNotNullish, HistoryButtons, TweakableInput, useSelectedStore,
+} from 'svg-widget-studio';
 import { SnapMenu } from './components/SnapMenu';
 import { resolveImageDimensionsFromBase64, toBase64 } from '../../../../../../../../common/util/data';
 import { TOUR_ELEMENT_CLASSES } from '../../../../../../../../common/util/tour';
@@ -39,6 +41,7 @@ import { ImageFaceDecorationPatternModel } from '../../../../../../models/ImageF
 import { ShapeSelect } from '../../../../../ShapeSelect';
 import { PathFaceDecorationPatternModel } from '../../../../../../models/PathFaceDecorationPatternModel';
 import { PositionableFaceDecorationModel } from '../../../../../../models/PositionableFaceDecorationModel';
+import { JoyrideTour } from '@/widgets/index';
 
 // @ts-ignore
 const NumberFormatDecimalDegrees = forwardRef(({ onChange, ...other }, ref) => (
@@ -126,6 +129,7 @@ const OpenTextureArrangementMenuItem = forwardRef<any, OpenTextureArrangementMen
 export const TextureControls = observer(() => {
   const widgetModel = useSelectedStore<PyramidNetWidgetModel>();
   const { textureEditor, preferences, history } = widgetModel;
+  assertNotNullish(textureEditor);
   const {
     faceDecoration,
     showNodes,
@@ -158,6 +162,7 @@ export const TextureControls = observer(() => {
   // TODO: add whitespace, improve button definition and input alignment
   return (
     <TextureEditorAppBar position="relative">
+      <JoyrideTour />
       <Toolbar
         className={clsx(classes.toolbar, faceDecoration && classes.toolbarWithTexture)}
         variant="dense"
@@ -167,7 +172,7 @@ export const TextureControls = observer(() => {
           component="span"
           size="large"
           onClick={() => {
-            window.history.back();
+            widgetModel.setTextureEditorOpen(false);
           }}
         >
           <ArrowForwardIcon fontSize="large" />
@@ -303,7 +308,7 @@ export const TextureControls = observer(() => {
                   label="Node selection"
                 />
                 <TweakableInput
-                  node={widgetModel.textureEditor.viewerModel.nodeScaleMux}
+                  node={textureEditor.viewerModel.nodeScaleMux}
                   className={classes.nodeScaleMuxSlider}
                 />
               </span>

packages/widgets/src/widgets/PyramidNet/components/TextureEditorDrawer/components/TextureEditor/index.tsx

@@ -27,12 +27,13 @@ const TextureEditorRoot = styled(FullPageDiv)(({ theme }) => ({
 export const TextureEditor = observer(() => {
   const pyramidNetPluginStore = useSelectedStore<PyramidNetWidgetModel>();
   const { textureEditor, history } = pyramidNetPluginStore;
-  const { faceDecoration } = textureEditor ?? {};
+
+  const { faceDecoration } = textureEditor || {};
 
   const { width, height, ref } = useResizeDetector();
   useEffect(() => {
     if (width && height) {
-      textureEditor.setPlacementAreaDimensions({
+      textureEditor?.setPlacementAreaDimensions({
         width: width / 2,
         height,
       });

packages/widgets/src/widgets/PyramidNet/components/TextureEditorDrawer/index.tsx

@@ -15,17 +15,18 @@ const DrawerStyled = styled(Drawer)({
     zIndex: 101,
   },
 });
-
+export const TEXTURE_EDITOR_DRAWER_TRANSITION_MS = 500;
 export const TextureEditorDrawer = observer(() => {
   const workspaceStore = useWorkspaceMst();
   const pyramidNetPluginStore = workspaceStore.selectedStore as unknown as PyramidNetWidgetModel;
   if (!pyramidNetPluginStore) { return null; }
+
   return (
     <DrawerStyled
       anchor="right"
       variant="persistent"
       open={pyramidNetPluginStore.textureEditorOpen}
-      transitionDuration={500}
+      transitionDuration={TEXTURE_EDITOR_DRAWER_TRANSITION_MS}
     >
       <TextureEditor />
     </DrawerStyled>

packages/widgets/src/widgets/PyramidNet/models/PyramidNetWidgetStore.tsx

@@ -62,6 +62,7 @@ import { getBoundedTexturePathD } from '../../../common/util/path-boolean';
 import { additionalFileMenuItemsFactory } from '../components/additionalFileMenuItemsFactory';
 import previewIcon from '../static/widget-preview.png';
 import { DEFAULT_SLIDER_STEP } from '@/common/constants';
+import { TEXTURE_EDITOR_DRAWER_TRANSITION_MS } from '@/widgets/PyramidNet/components/TextureEditorDrawer/index';
 
 const PREFERENCES_LOCALSTORE_NAME = 'PyramidNetPreferencesModel';
 
@@ -121,7 +122,7 @@ export class PyramidNetWidgetModel extends WidgetModel({
     preferences = new PyramidNetPreferencesModel({});
 
   @observable
-    textureEditor = new TextureEditorModel(this);
+    textureEditor?: TextureEditorModel;
 
   testTabHandleFlapDepth = 2;
 
@@ -525,7 +526,16 @@ export class PyramidNetWidgetModel extends WidgetModel({
         // all geometries have 1 as option, but different shapes have different divisors > 1
         this.pyramid.netsPerPyramid.setValue(1);
         this.applyShapeBasedDefaults();
-        this.textureEditor.refitTextureToFace();
+        this?.textureEditor?.refitTextureToFace();
+      }),
+      reaction(() => [this.textureEditorOpen], () => {
+        if (this.textureEditorOpen) {
+          this.textureEditor = new TextureEditorModel(this);
+        } else {
+          setTimeout(() => {
+            this.textureEditor = undefined;
+          }, TEXTURE_EDITOR_DRAWER_TRANSITION_MS);
+        }
       }),
     ];
 
@@ -592,7 +602,7 @@ export class PyramidNetWidgetModel extends WidgetModel({
 
   @action
   setTextureEditorOpen(isOpen) {
-    if (this.faceDecoration instanceof RawFaceDecorationModel) {
+    if (isOpen && this.faceDecoration instanceof RawFaceDecorationModel) {
       // texture editor directly references faceDecoration and will not render TextureSvg if it is Raw
       this.resetFaceDecoration();
     }