Add config option to use grid for global layout

lib/default-config.ts

@@ -306,6 +306,175 @@ const defaultConfig = {
         ],
       },
     },
+    grid: {
+      layout: {
+        sm: [
+          {
+            w: 10,
+            h: 3,
+            x: 0,
+            y: 0,
+            minW: 3,
+            minH: 2,
+            maxW: 10,
+            maxH: 50,
+            i: 'teitoku-panel',
+          },
+          {
+            w: 5,
+            h: 8,
+            x: 0,
+            y: 3,
+            minW: 1,
+            minH: 3,
+            maxW: 10,
+            maxH: 50,
+            i: 'resource-panel',
+          },
+          {
+            w: 5,
+            h: 36,
+            x: 0,
+            y: 11,
+            minW: 3,
+            minH: 9,
+            maxW: 10,
+            maxH: 50,
+            i: 'miniship',
+          },
+          {
+            w: 5,
+            h: 6,
+            x: 5,
+            y: 3,
+            minW: 2,
+            minH: 6,
+            maxW: 10,
+            maxH: 50,
+            i: 'repair-panel',
+          },
+          {
+            w: 5,
+            h: 6,
+            x: 5,
+            y: 9,
+            minW: 2,
+            minH: 6,
+            maxW: 10,
+            maxH: 50,
+            i: 'construction-panel',
+          },
+          {
+            w: 5,
+            h: 7,
+            x: 5,
+            y: 15,
+            minW: 3,
+            minH: 5,
+            maxW: 10,
+            maxH: 50,
+            i: 'expedition-panel',
+          },
+          {
+            w: 5,
+            h: 13,
+            x: 5,
+            y: 23,
+            minW: 3,
+            minH: 5,
+            maxW: 10,
+            maxH: 50,
+            i: 'task-panel',
+          },
+        ],
+        lg: [
+          {
+            w: 27,
+            h: 58,
+            x: 0,
+            y: 0,
+            i: 'kan-game-wrapper',
+          },
+          {
+            w: 10,
+            h: 3,
+            x: 0,
+            y: 58,
+            minW: 3,
+            minH: 2,
+            maxW: 20,
+            maxH: 50,
+            i: 'teitoku-panel',
+          },
+          {
+            w: 5,
+            h: 9,
+            x: 0,
+            y: 61,
+            minW: 1,
+            minH: 3,
+            maxW: 20,
+            maxH: 50,
+            i: 'resource-panel',
+          },
+          {
+            w: 12,
+            h: 60,
+            x: 27,
+            y: 0,
+            minW: 3,
+            minH: 9,
+            maxW: 40,
+            maxH: 120,
+            i: 'poi-main',
+          },
+          {
+            w: 5,
+            h: 12,
+            x: 0,
+            y: 70,
+            minW: 2,
+            minH: 6,
+            maxW: 10,
+            maxH: 50,
+            i: 'repair-panel',
+          },
+          {
+            w: 5,
+            h: 12,
+            x: 6,
+            y: 70,
+            minW: 2,
+            minH: 6,
+            maxW: 10,
+            maxH: 50,
+            i: 'construction-panel',
+          },
+          {
+            w: 5,
+            h: 9,
+            x: 6,
+            y: 61,
+            minW: 3,
+            minH: 5,
+            maxW: 20,
+            maxH: 50,
+            i: 'expedition-panel',
+          },
+          {
+            w: 8,
+            h: 24,
+            x: 11,
+            y: 58,
+            minW: 3,
+            minH: 5,
+            maxW: 20,
+            maxH: 50,
+            i: 'task-panel',
+          },
+        ],
+      },
+    },
   },
   proxy: {
     socks5: {

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 } 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,13 @@ 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 { 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 +49,28 @@ require('./services/alert')
 Popover.defaultProps.modifiers = POPOVER_MODIFIERS
 Popover.defaultProps.boundary = 'viewport'
 
+// Override maxsize
+const defaultGridLayout = config.getDefault('poi.grid.layout')
+
+function isPositionEqual(pos1, pos2) {
+  const configKey = ['x', 'y', 'h', 'w', 'i', 'minW', 'maxW', 'minH', 'maxH']
+
+  return isEqual(pick(pos1, configKey), pick(pos2, configKey))
+}
+
+function isLayoutsEqual(layout1, layout2) {
+  return Object.keys(layout1)
+    .map((i) => isPositionEqual(layout1[i], layout2[i]))
+    .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),
+  gridLayouts: get(state, 'config.poi.grid.layout', defaultGridLayout),
+  editable: get(state, 'config.poi.layout.editable', false),
   theme: get(state, 'config.poi.appearance.theme', 'dark'),
 }))
 class Poi extends Component {
@@ -69,8 +95,84 @@ class Poi extends Component {
     })
   }
 
+  onGridLayoutChange = (layout, layouts) => {
+    if (!isLayoutsEqual(layouts, config.get('poi.grid.layout'))) {
+      config.set('poi.grid.layout', layouts)
+    }
+  }
+
   render() {
-    const { isHorizontal, reversed, theme } = this.props
+    const { isHorizontal, reversed, theme, grid } = 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>
+            )}
+            <ResponsiveReactGridLayout
+              layouts={this.props.gridLayouts}
+              onLayoutChange={this.onGridLayoutChange}
+              rowHeight={10}
+              margin={[3, 3]}
+              cols={{ lg: 40, sm: 10 }}
+              breakpoints={{ lg: 750, sm: 0 }}
+              width={1800}
+              compactType="horizontal"
+              isResizable={this.props.editable}
+              isDraggable={this.props.editable}
+            >
+              <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="kan-game-wrapper"
+                isResizable={false}
+                isDraggable={this.props.editable}
+              >
+                <KanGameWrapper key="frame" />
+              </div>
+              <div className="poi-main" key="poi-main">
+                <poi-main
+                  style={{
+                    flexFlow: `${isHorizontal ? 'row' : 'column'}${
+                      reversed ? '-reverse' : ''
+                    } nowrap`,
+                    height: `100%`,
+                    ...(!isHorizontal && { overflow: 'hidden' }),
+                  }}
+                >
+                  <PoiApp />
+                </poi-main>
+              </div>
+            </ResponsiveReactGridLayout>
+            <ModalTrigger />
+            <BasicAuth />
+          </>
+        </ThemeProvider>
+      )
+    }
     return (
       <ThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}>
         <>