Merge pull request #6 from wilgaboury/flip2

Support Browser Layout (Flexbox and Grid)
wilgaboury · Oct 17, 2024 · 4ca4fa8 · 4ca4fa8
2 parents 427eb19 + 5fe0143
commit 4ca4fa8
Show file tree

Hide file tree

Showing 16 changed files with 5,627 additions and 5,995 deletions.
diff --git a/dev/App.module.css b/dev/App.module.css
diff --git a/dev/App.tsx b/dev/App.tsx
diff --git a/dev/Grid.tsx b/dev/Grid.tsx
@@ -0,0 +1,199 @@
+import { Component, createSignal } from "solid-js";
+
+import {
+  createSortableGroupContext,
+  easeOutQuad,
+  defaultMutationEventListeners,
+  Sortable,
+  SortableGroupContext,
+} from "../src";
+
+export function randomColor() {
+  var letters = "0123456789ABCDEF";
+  var color = "#";
+  for (var i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+const ExampleGroupContext = createSortableGroupContext<number>();
+
+const N = 5;
+
+export const GridPage: Component = () => {
+  const [elements, setElements] = createSignal<ReadonlyArray<number>>(
+    Array.from(Array(N).keys()),
+  );
+  const [elements2, setElements2] = createSignal<ReadonlyArray<number>>(
+    Array.from(Array(N).keys()).map((i) => i + N),
+  );
+  const [elements3, setElements3] = createSignal<ReadonlyArray<number>>(
+    Array.from(Array(N).keys()).map((i) => i + N * 2),
+  );
+
+  const [largeGap, setLargeGap] = createSignal(false);
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          setElements((arr) => [
+            arr[arr.length - 1]!,
+            ...arr.slice(0, arr.length - 1),
+          ]);
+        }}
+      >
+        Rotate
+      </button>
+      <button
+        onClick={() => {
+          setElements((arr) => [...arr.slice(1), arr[0]!]);
+        }}
+      >
+        Rotate Back
+      </button>
+      <button
+        onClick={() => {
+          setElements((arr) => [
+            ...arr,
+            [...arr, ...elements2()].reduce((v1, v2) => Math.max(v1, v2), 0) +
+              1,
+          ]);
+        }}
+      >
+        Add
+      </button>
+      <button
+        onClick={() => {
+          setElements((arr) => arr.slice(0, arr.length - 1));
+        }}
+      >
+        Remove
+      </button>
+      <button onClick={() => setLargeGap((v) => !v)}>Gap</button>
+
+      <div
+        style={{
+          display: "flex",
+          gap: "40px",
+        }}
+      >
+        <SortableGroupContext
+          context={ExampleGroupContext}
+          render={({ item, isMouseDown }) => {
+            const color = randomColor();
+            return (
+              <div
+                draggable={false}
+                style={{
+                  height: "100px",
+                  "background-color": color,
+                  color: "black",
+                  border: isMouseDown()
+                    ? "2px solid blue"
+                    : "2px solid transparent",
+                }}
+              >
+                {item}
+              </div>
+            );
+          }}
+        >
+          <div
+            draggable={false}
+            style={{
+              padding: "20px",
+              display: "grid",
+              gap: largeGap() ? "50px" : "20px",
+              "grid-template-columns": "repeat(auto-fill, 150px)",
+              "justify-content": "center",
+              "user-select": "none",
+              "flex-grow": "1",
+              "min-width": "100px",
+              "min-height": "100px",
+              "background-color": "lightblue",
+            }}
+          >
+            <Sortable
+              group={ExampleGroupContext}
+              each={elements()}
+              {...defaultMutationEventListeners(setElements)}
+              onClick={(idx) => console.log("clicked: ", elements()[idx])}
+              animated={elements2().length <= 200}
+              animationDurationMs={250}
+              timingFunction={easeOutQuad}
+            />
+          </div>
+          <div
+            draggable={false}
+            style={{
+              padding: "20px",
+              display: "grid",
+              gap: largeGap() ? "50px" : "20px",
+              "grid-template-columns": "repeat(auto-fill, 150px)",
+              "justify-content": "center",
+              "user-select": "none",
+              "flex-grow": "1",
+              "min-width": "100px",
+              "min-height": "100px",
+              "background-color": "lightblue",
+            }}
+          >
+            <Sortable
+              group={ExampleGroupContext}
+              each={elements2()}
+              {...defaultMutationEventListeners(setElements2)}
+              animated={elements().length <= 200}
+              animationDurationMs={250}
+              timingFunction={easeOutQuad}
+            />
+          </div>
+          <div
+            draggable={false}
+            style={{
+              padding: "20px",
+              display: "grid",
+              gap: largeGap() ? "50px" : "20px",
+              "grid-template-columns": "repeat(auto-fill, 150px)",
+              "justify-content": "center",
+              "user-select": "none",
+              "flex-grow": "1",
+              "min-width": "100px",
+              "min-height": "100px",
+              "background-color": "lightblue",
+            }}
+          >
+            <Sortable
+              group={ExampleGroupContext}
+              each={elements3()}
+              {...defaultMutationEventListeners(setElements3)}
+              animated={elements().length <= 200}
+              animationDurationMs={250}
+              timingFunction={easeOutQuad}
+            >
+              {({ item, isMouseDown }) => {
+                const color = randomColor();
+                return (
+                  <div
+                    draggable={false}
+                    style={{
+                      height: "100px",
+                      "background-color": color,
+                      color: "black",
+                      border: isMouseDown()
+                        ? "2px solid blue"
+                        : "2px solid transparent",
+                    }}
+                  >
+                    {item}
+                  </div>
+                );
+              }}
+            </Sortable>
+          </div>
+        </SortableGroupContext>
+      </div>
+    </div>
+  );
+};
diff --git a/dev/Pages.tsx b/dev/Pages.tsx
@@ -0,0 +1,28 @@
+import { A, Route, Router } from "@solidjs/router";
+import { TransformMeasureTest } from "./TransformMeasureTest";
+import { GridPage } from "./Grid";
+
+export function Pages() {
+  return (
+    <Router>
+      <Route
+        path="/"
+        component={() => (
+          <ul>
+            <li>
+              <A href="/layout-explorer">Layout Explorer</A>
+            </li>
+            <li>
+              <A href="/transform-measure-test">Transform Measure Test</A>
+            </li>
+            <li>
+              <A href="/grid-test">Grid Test</A>
+            </li>
+          </ul>
+        )}
+      />
+      <Route path="/transform-measure-test" component={TransformMeasureTest} />
+      <Route path="/grid-test" component={GridPage} />
+    </Router>
+  );
+}