feat: type safety in build; add react-grid drag-n-drop

dragonrealms-phoenix · Oct 20, 2023 · a805c7e · a805c7e
1 parent 4f86f3f
commit a805c7e
Show file tree

Hide file tree

Showing 10 changed files with 480 additions and 21 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,7 +9,10 @@
 # next.js
 /electron/build
 /electron/renderer/.next
-/electron/renderer/public/themes
+
+# source maps
+*.js.map
+*.css.map
 
 # production
 /build

diff --git a/electron/renderer/pages/dnd.tsx b/electron/renderer/pages/dnd.tsx
@@ -0,0 +1,153 @@
+import Head from 'next/head';
+import { useMemo, useState } from 'react';
+import { Responsive, WidthProvider } from 'react-grid-layout';
+import { useLogger } from '../components/logger';
+
+const DragDropPage: React.FC = (): JSX.Element => {
+  const { logger } = useLogger('page:dnd');
+
+  logger.info('rendering');
+
+  // https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#react-hooks-performance
+  const ResponsiveGridLayout = useMemo(() => {
+    return WidthProvider(Responsive);
+  }, []);
+
+  const [layout, setLayout] = useState([
+    { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true },
+    { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
+    { i: 'c', x: 4, y: 0, w: 1, h: 2 },
+  ]);
+
+  // https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#performance
+  const children = useMemo(() => {
+    logger.debug('generating children');
+    return layout.map((item) => <div key={item.i}>{item.i}</div>);
+  }, [layout.length]);
+
+  return (
+    <>
+      <Head>
+        <link rel="stylesheet" href={`/react-grid/layout.min.css`} />
+        <link rel="stylesheet" href={`/react-grid/resizable.min.css`} />
+        <style>
+          {`
+            body {
+              padding: 20px;
+            }
+            #content {
+              width: 100%;
+            }
+            .react-grid-layout {
+              background: #eee;
+              margin-top: 10px;
+            }
+            .layoutJSON {
+              background: #ddd;
+              border: 1px solid black;
+              margin-top: 10px;
+              padding: 10px;
+            }
+            .columns {
+              -moz-columns: 120px;
+              -webkit-columns: 120px;
+              columns: 120px;
+            }
+            .react-grid-item {
+              box-sizing: border-box;
+            }
+            .react-grid-item:not(.react-grid-placeholder) {
+              background: #ccc;
+              border: 1px solid black;
+            }
+            .react-grid-item.resizing {
+              opacity: 0.9;
+            }
+            .react-grid-item.static {
+              background: #cce;
+            }
+            .react-grid-item .text {
+              font-size: 24px;
+              text-align: center;
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              margin: auto;
+              height: 24px;
+            }
+            .react-grid-item .minMax {
+              font-size: 12px;
+            }
+            .react-grid-item .add {
+              cursor: pointer;
+            }
+            .react-grid-dragHandleExample {
+              cursor: move; /* fallback if grab cursor is unsupported */
+              cursor: grab;
+              cursor: -moz-grab;
+              cursor: -webkit-grab;
+            }
+            .toolbox {
+              background-color: #dfd;
+              width: 100%;
+              height: 120px;
+              overflow: scroll;
+            }
+            .hide-button {
+              cursor: pointer;
+              position: absolute;
+              font-size: 20px;
+              top: 0px;
+              right: 5px;
+            }
+            .toolbox__title {
+              font-size: 24px;
+              margin-bottom: 5px;
+            }
+            .toolbox__items {
+              display: block;
+            }
+            .toolbox__items__item {
+              display: inline-block;
+              text-align: center;
+              line-height: 40px;
+              cursor: pointer;
+              width: 40px;
+              height: 40px;
+              padding: 10px;
+              margin: 5px;
+              border: 1px solid black;
+              background-color: #ddd;
+            }
+            .droppable-element {
+              width: 150px;
+              text-align: center;
+              background: #fdd;
+              border: 1px solid black;
+              margin: 10px 0;
+              padding: 10px;
+            }
+          `}
+        </style>
+      </Head>
+      <div id="doug">Hello World</div>
+      <ResponsiveGridLayout
+        className="layout"
+        layouts={{ lg: layout }}
+        breakpoints={{ lg: 1200 }}
+        cols={{ lg: 12 }}
+        isBounded={true}
+        isDraggable={true}
+        isDroppable={true}
+        isResizable={true}
+        resizeHandles={['nw', 'ne', 'se', 'sw']}
+      >
+        {children}
+      </ResponsiveGridLayout>
+    </>
+  );
+};
+
+export default DragDropPage;
diff --git a/electron/renderer/pages/home.tsx b/electron/renderer/pages/home.tsx
@@ -22,6 +22,10 @@ const HomePage: React.FC = (): JSX.Element => {
         <Link href="/about">About</Link>
       </p>
 
+      <p>
+        <Link href="/dnd">Drag-n-Drop</Link>
+      </p>
+
       <p>
         <Link href="http://play.net/dr">DragonRealms</Link>
       </p>
@@ -30,7 +34,7 @@ const HomePage: React.FC = (): JSX.Element => {
         <p>Hello World!</p>
       </EuiText>
 
-      <EuiIcon type="apps" size="xxl" />
+      <EuiIcon type="apps" size="l" />
     </div>
   );
 };

diff --git a/electron/renderer/public/react-grid/layout.min.css b/electron/renderer/public/react-grid/layout.min.css
@@ -0,0 +1,111 @@
+.react-grid-layout {
+  position: relative;
+  transition: height 0.2s ease;
+}
+.react-grid-item {
+  transition: all 0.2s ease;
+  transition-property: left, top, width, height;
+}
+.react-grid-item img {
+  pointer-events: none;
+  user-select: none;
+}
+.react-grid-item.cssTransforms {
+  transition-property: transform, width, height;
+}
+.react-grid-item.resizing {
+  transition: none;
+  z-index: 1;
+  will-change: width, height;
+}
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 3;
+  will-change: transform;
+}
+.react-grid-item.dropping {
+  visibility: hidden;
+}
+.react-grid-item.react-grid-placeholder {
+  background: red;
+  opacity: 0.2;
+  transition-duration: 0.1s;
+  z-index: 2;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+.react-grid-item.react-grid-placeholder.placeholder-resizing {
+  transition: none;
+}
+.react-grid-item > .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
+.react-grid-item > .react-resizable-handle:after {
+  content: '';
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 5px;
+  height: 5px;
+  border-right: 2px solid rgba(0, 0, 0, 0.4);
+  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+}
+.react-resizable-hide > .react-resizable-handle {
+  display: none;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+  transform: rotate(90deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+  transform: rotate(180deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+  transform: rotate(270deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+  top: 50%;
+  margin-top: -10px;
+  cursor: ew-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+  left: 50%;
+  margin-left: -10px;
+  cursor: ns-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+}
diff --git a/electron/renderer/public/react-grid/resizable.min.css b/electron/renderer/public/react-grid/resizable.min.css
@@ -0,0 +1,65 @@
+.react-resizable {
+  position: relative;
+}
+.react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+  background-position: 100% 100%;
+  padding: 0 3px 3px 0;
+}
+.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+  transform: rotate(90deg);
+}
+.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+  transform: rotate(180deg);
+}
+.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+  transform: rotate(270deg);
+}
+.react-resizable-handle-e,
+.react-resizable-handle-w {
+  top: 50%;
+  margin-top: -10px;
+  cursor: ew-resize;
+}
+.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+  left: 50%;
+  margin-left: -10px;
+  cursor: ns-resize;
+}
+.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+}
diff --git a/electron/renderer/public/themes/eui_theme_dark.a4d7d6f7ac8b7e49d90e.min.css b/electron/renderer/public/themes/eui_theme_dark.a4d7d6f7ac8b7e49d90e.min.css
diff --git a/electron/renderer/public/themes/eui_theme_light.b125febb29de3cc5fb0b.min.css b/electron/renderer/public/themes/eui_theme_light.b125febb29de3cc5fb0b.min.css