Save last window size and pos based on component

Author: Andrei Telteu

README.md

@@ -104,9 +104,10 @@ npm start
 
 ## Changelog:
 
-### v1.0.5 [WIP]
+### v1.0.5
 
 - Added minimum size restriction
+- Save last window size and position based on component name
 
 ### v1.0.4
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "solidjs-window-manager",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Create a window based UI that is persistent in localstorage.",
   "type": "module",
   "main": "dist/esm/index.js",

src/store/windowPreferencesStore.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'solidjs-storex';
+
+interface WindowPreferencesState {
+  [key: string | number]: WindowPreferencesProps;
+}
+interface WindowPreferencesProps {
+  pos?: [number, number];
+  size?: [number, number];
+}
+
+export default defineStore({
+  state: {} as WindowPreferencesState,
+  options: {
+    persistance: true,
+    storageKey: 'windows-preferences-state',
+    storageThrottle: 250,
+  },
+  actions: (state, set) => ({
+    save: (key: string, props: WindowPreferencesProps) => {
+      set(key, props);
+    },
+    get: (key: string) => {
+      if (state.hasOwnProperty(key)) {
+        return state[key]; // return does nothing now. i dont capture it. to be fixed in a future release
+      }
+    },
+  }),
+});
+
+export function findWindowPreferences(state, key: string) {
+  if (state.hasOwnProperty(key)) {
+    return state[key];
+  }
+}

src/store/windowState.ts

@@ -1,5 +1,6 @@
 import { produce } from 'solid-js/store';
 import { defineStore } from 'solidjs-storex';
+import windowPreferencesStore, { findWindowPreferences } from './windowPreferencesStore';
 
 type WindowState = {
   windows: WindowsObject;
@@ -21,6 +22,8 @@ interface WindowAttrs {
   key: string;
 }
 
+const [windowPreferencesState, { save: saveWindowPreferences }] = windowPreferencesStore();
+
 export default defineStore({
   state: {
     windows: {},
@@ -53,6 +56,7 @@ export default defineStore({
     },
     moveWindow: (key, pos) => {
       set('windows', key, 'attrs', 'pos', pos);
+      saveWindowPreferences(state.windows[key].component, (attrs) => ({ ...attrs, pos: state.windows[key].attrs.pos }));
     },
     resizeWindow: (key, size) => {
       const minWidth = 300;
@@ -61,6 +65,10 @@ export default defineStore({
         let newSize = [...size(currentSize)];
         return [newSize[0] < minWidth ? minWidth : newSize[0], newSize[1] < minHeight ? minHeight : newSize[1]];
       });
+      saveWindowPreferences(state.windows[key].component, (attrs) => ({
+        ...attrs,
+        size: state.windows[key].attrs.size,
+      }));
     },
     focusWindow: (key) => {
       Object.keys(state?.windows || {}).forEach((item) => {
@@ -72,16 +80,24 @@ export default defineStore({
 });
 
 const getDefaultWindowsAttrs = (props): WindowAttrs => {
-  // TODO: get last window pos based on comp name
-  return {
+  const defaultAttrs: WindowAttrs = {
     minimized: false,
+    // TODO: calculate center of window minus half window size
     // pos: [window.innerWidth / 2 || 200, window.innerHeight / 2 || 200],
     pos: [200, 200],
     size: [500, 400],
     zIndex: 1,
     icon: null,
     key: '',
   };
+  if (props.component) {
+    let preferences = findWindowPreferences(windowPreferencesState, props.component);
+    if (preferences) {
+      if (preferences.pos) defaultAttrs.pos = preferences.pos;
+      if (preferences.size) defaultAttrs.size = preferences.size;
+    }
+  }
+  return defaultAttrs;
 };
 
 const generateWindowKey = (props) => {