Add config option to use grid for global layout

.vscode/settings.json

@@ -15,6 +15,6 @@
   ],
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }

lib/default-config.ts

@@ -227,31 +227,39 @@ const defaultConfig = {
         ],
         lg: [
           {
-            w: 12,
-            h: 3,
+            w: 27,
+            h: 58,
             x: 0,
             y: 0,
+            static: true,
+            i: 'poi-main',
+          },
+          {
+            w: 10,
+            h: 3,
+            x: 0,
+            y: 58,
             minW: 3,
             minH: 2,
             maxW: 20,
             maxH: 50,
             i: 'teitoku-panel',
           },
           {
-            w: 6,
-            h: 8,
+            w: 5,
+            h: 9,
             x: 0,
-            y: 3,
+            y: 61,
             minW: 1,
             minH: 3,
             maxW: 20,
             maxH: 50,
             i: 'resource-panel',
           },
           {
-            w: 8,
-            h: 25,
-            x: 12,
+            w: 12,
+            h: 40,
+            x: 27,
             y: 0,
             minW: 3,
             minH: 9,
@@ -260,43 +268,43 @@ const defaultConfig = {
             i: 'miniship',
           },
           {
-            w: 6,
-            h: 7,
-            x: 6,
-            y: 11,
+            w: 5,
+            h: 12,
+            x: 0,
+            y: 70,
             minW: 2,
             minH: 6,
             maxW: 10,
             maxH: 50,
             i: 'repair-panel',
           },
           {
-            w: 6,
-            h: 7,
+            w: 5,
+            h: 12,
             x: 6,
-            y: 18,
+            y: 70,
             minW: 2,
             minH: 6,
             maxW: 10,
             maxH: 50,
             i: 'construction-panel',
           },
           {
-            w: 6,
-            h: 8,
+            w: 5,
+            h: 9,
             x: 6,
-            y: 3,
+            y: 61,
             minW: 3,
             minH: 5,
             maxW: 20,
             maxH: 50,
             i: 'expedition-panel',
           },
           {
-            w: 6,
-            h: 14,
-            x: 0,
-            y: 11,
+            w: 8,
+            h: 24,
+            x: 11,
+            y: 58,
             minW: 3,
             minH: 5,
             maxW: 20,

views/app.es

@@ -5,10 +5,11 @@ import ReactDOM from 'react-dom'
 import { connect, Provider } from 'react-redux'
 import { webFrame } from 'electron'
 import * as remote from '@electron/remote'
-import { get } from 'lodash'
+import { get, pick, isEqual, entries, fromPairs, map } from 'lodash'
 import { I18nextProvider } from 'react-i18next'
 import { ThemeProvider } from 'styled-components'
 import { ResizeSensor, Popover } from '@blueprintjs/core'
+import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout'
 
 import '../assets/css/app.css'
 import '../assets/css/global.css'
@@ -25,6 +26,14 @@ import i18next from './env-parts/i18next'
 import { darkTheme, lightTheme } from './theme'
 import { POPOVER_MODIFIERS } from './utils/tools'
 
+import { ExpeditionPanel } from './components/main/parts/expedition-panel'
+import { TaskPanel } from './components/main/parts/task-panel'
+import { MiniShip } from './components/main/parts/mini-ship'
+import { ResourcePanel } from './components/main/parts/resource-panel'
+import { AdmiralPanel } from './components/main/parts/admiral-panel'
+import { RepairPanel } from './components/main/parts/repair-panel'
+import { ConstructionPanel } from './components/main/parts/construction-panel'
+
 const config = remote.require('./lib/config')
 
 // Disable OSX zoom
@@ -41,10 +50,70 @@ require('./services/alert')
 Popover.defaultProps.modifiers = POPOVER_MODIFIERS
 Popover.defaultProps.boundary = 'viewport'
 
+// Override maxsize
+const defaultLayout = config.getDefault('poi.mainpanel.layout')
+const configLayout = config.get('poi.mainpanel.layout')
+const keys = ['minW', 'maxW', 'minH', 'maxH']
+const newLayout = fromPairs(
+  map(entries(defaultLayout), ([bp, conf]) => [
+    bp,
+    map(conf, (panelConf, i) => ({
+      ...get(configLayout, [bp, i], panelConf),
+      ...pick(panelConf, keys),
+    })),
+  ]),
+)
+
+if (!isEqual(newLayout, configLayout)) {
+  config.set('poi.mainpanel.layout', newLayout)
+}
+
+// polyfill for old layouts
+function layoutConfigOutdated(layoutConfig) {
+  return (
+    !layoutConfig.sm.find((a) => a.i === 'repair-panel') ||
+    !layoutConfig.lg.find((a) => a.i === 'repair-panel')
+  )
+}
+
+function layoutConfigFix(layoutConfig) {
+  if (layoutConfigOutdated(layoutConfig)) {
+    return defaultLayout
+  }
+  return defaultLayout
+}
+
+if (layoutConfigOutdated(config.get('poi.mainpanel.layout', defaultLayout))) {
+  config.set('poi.mainpanel.layout', defaultLayout)
+}
+
+const configKey = ['x', 'y', 'h', 'w', 'i', 'minW', 'maxW', 'minH', 'maxH']
+
+function isPositionEqual(pos1, pos2) {
+  return isEqual(pick(pos1, configKey), pick(pos2, configKey))
+}
+
+function isLayoutEqual(layout1, layout2) {
+  return Object.keys(layout1)
+    .map((i) => isPositionEqual(layout1[i], layout2[i]))
+    .reduce((a, b) => a && b)
+}
+
+function isLayoutsEqual(layouts1, layouts2) {
+  if (layouts1 == undefined || layouts2 == undefined) {
+    return false
+  }
+  return Object.keys(layouts1)
+    .map((layoutName) => isLayoutEqual(layouts1[layoutName], layouts2[layoutName]))
+    .reduce((a, b) => a && b)
+}
+
 @connect((state) => ({
   isHorizontal: get(state, 'config.poi.layout.mode', 'horizontal') === 'horizontal',
   reversed: get(state, 'config.poi.layout.reverse', false),
   isolateGameWindow: get(state, 'config.poi.layout.isolate', false),
+  grid: get(state, 'config.poi.layout.grid', false),
+  layouts: layoutConfigFix(get(state, 'config.poi.mainpanel.layout', defaultLayout)),
   theme: get(state, 'config.poi.appearance.theme', 'dark'),
 }))
 class Poi extends Component {
@@ -69,8 +138,78 @@ class Poi extends Component {
     })
   }
 
+  onLayoutChange = (layout, layouts) => {
+    if (!isLayoutsEqual(layouts, config.get('poi.mainpanel.layout'))) {
+      config.set('poi.mainpanel.layout', layouts)
+    }
+  }
+
   render() {
-    const { isHorizontal, reversed, theme } = this.props
+    const { isHorizontal, reversed, isolateGameWindow, grid, theme } = this.props
+    if (grid) {
+      return (
+        <ThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}>
+          <>
+            {config.get(
+              'poi.appearance.customtitlebar',
+              process.platform === 'win32' || process.platform === 'linux',
+            ) && (
+              <title-bar>
+                <TitleBarWrapper />
+              </title-bar>
+            )}
+            <ResizeSensor onResize={this.handleResize}>
+              <poi-main
+                style={{
+                  flexFlow: `${isHorizontal ? 'row' : 'column'}${
+                    reversed ? '-reverse' : ''
+                  } nowrap`,
+                  ...(!isHorizontal && { overflow: 'hidden' }),
+                }}
+              >
+                <ResponsiveReactGridLayout
+                  layouts={this.props.layouts}
+                  // onLayoutChange={this.onLayoutChange}
+                  rowHeight={10}
+                  margin={[3, 3]}
+                  cols={{ lg: 40, sm: 10 }}
+                  breakpoints={{ lg: 750, sm: 0 }}
+                  width={1800}
+                  isResizable={true}
+                  isDraggable={true}
+                  compactType="horizontal"
+                >
+                  <div className="teitoku-panel" key="teitoku-panel">
+                    <AdmiralPanel editable={this.props.editable} />
+                  </div>
+                  <div className="resource-panel" key="resource-panel">
+                    <ResourcePanel editable={this.props.editable} />
+                  </div>
+                  <div className="repair-panel panel-col" key="repair-panel">
+                    <RepairPanel editable={this.props.editable} />
+                  </div>
+                  <div className="construction-panel panel-col" key="construction-panel">
+                    <ConstructionPanel editable={this.props.editable} />
+                  </div>
+                  <div className="expedition-panel" key="expedition-panel">
+                    <ExpeditionPanel editable={this.props.editable} />
+                  </div>
+                  <div className="task-panel" key="task-panel">
+                    <TaskPanel editable={this.props.editable} />
+                  </div>
+                  <div className="kan-game-wrapper" key="poi-main">
+                    <KanGameWrapper key="frame" />
+                  </div>
+                </ResponsiveReactGridLayout>
+                <PoiApp />
+              </poi-main>
+            </ResizeSensor>
+            <ModalTrigger />
+            <BasicAuth />
+          </>
+        </ThemeProvider>
+      )
+    }
     return (
       <ThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}>
         <>