fix

2023-10-25 08:32:02 +07:00 · 2023-10-25 08:32:02 +07:00 · 5f1ec15f0d
parent 66a0f7036f
commit 5f1ec15f0d
9 changed files with 148 additions and 48 deletions
--- a/app/web/package.json
+++ b/app/web/package.json
@ -7,20 +7,20 @@
  },
  "dependencies": {
    "@babel/parser": "^7.23.0",
-    "@floating-ui/react": "^0.26.0",
+    "@floating-ui/react": "^0.26.1",
    "@leeoniya/ufuzzy": "^1.0.11",
    "@minoru/react-dnd-treeview": "^3.4.4",
    "@monaco-editor/react": "^4.6.0",
    "@paralleldrive/cuid2": "2.2.2",
-    "@parcel/packager-wasm": "^2.10.0",
-    "@parcel/service-worker": "^2.10.0",
+    "@parcel/packager-wasm": "^2.10.1",
+    "@parcel/service-worker": "^2.10.1",
    "@qiwi/deep-proxy": "^2.0.3",
-    "@swc/wasm-web": "1.3.94-nightly-20231014.1",
+    "@swc/wasm-web": "1.3.96-nightly-20231025.1",
    "algoliasearch": "^4.20.0",
    "date-fns": "^2.30.0",
    "dbgen": "workspace:*",
    "downshift": "^8.2.2",
-    "esbuild-wasm": "^0.19.4",
+    "esbuild-wasm": "^0.19.5",
    "hash-wasm": "^4.10.0",
    "idb-keyval": "^6.2.1",
    "immer": "^10.0.3",
@ -53,10 +53,10 @@
    "react-dom": "18.2.0",
    "react-is": "^18.2.0",
    "react-use-error-boundary": "^3.0.0",
-    "react-virtuoso": "^4.6.1",
+    "react-virtuoso": "^4.6.2",
    "safe-stable-stringify": "^2.4.3",
    "svgo": "^3.0.2",
-    "textdiff-create": "^1.1.9",
+    "textdiff-create": "^1.1.10",
    "tinycolor2": "^1.6.0",
    "ua-parser-js": "^1.0.36",
    "uuid": "9.0.1",
@ -67,39 +67,38 @@
    "yjs-types": "^0.0.1"
  },
  "devDependencies": {
-    "@types/lodash.concat": "^4.5.7",
-    "@types/lodash.find": "^4.6.7",
-    "@types/lodash.findindex": "^4.6.7",
-    "@types/lodash.indexof": "^4.0.7",
-    "@types/lodash.orderby": "^4.6.7",
-    "@types/lodash.slice": "^4.2.7",
-    "@types/lodash.throttle": "^4.1.7",
-    "@types/lodash.transform": "^4.6.7",
-    "@types/lodash.uniq": "^4.5.7",
-    "@types/lodash.uniqby": "^4.7.7",
-    "@types/react-is": "^18.2.2",
-    "@types/textdiff-create": "^1.0.0",
-    "@types/ua-parser-js": "^0.7.37",
-    "@parcel/config-default": "2.10.0",
-    "@parcel/core": "2.10.0",
-    "@parcel/reporter-bundle-analyzer": "^2.10.0",
-    "@parcel/transformer-raw": "^2.10.0",
+    "@types/lodash.concat": "^4.5.8",
+    "@types/lodash.find": "^4.6.8",
+    "@types/lodash.findindex": "^4.6.8",
+    "@types/lodash.indexof": "^4.0.8",
+    "@types/lodash.orderby": "^4.6.8",
+    "@types/lodash.slice": "^4.2.8",
+    "@types/lodash.throttle": "^4.1.8",
+    "@types/lodash.transform": "^4.6.8",
+    "@types/lodash.uniq": "^4.5.8",
+    "@types/lodash.uniqby": "^4.7.8",
+    "@types/react-is": "^18.2.3",
+    "@types/textdiff-create": "^1.0.1",
+    "@types/ua-parser-js": "^0.7.38",
+    "@parcel/config-default": "2.10.1",
+    "@parcel/core": "2.10.1",
+    "@parcel/transformer-raw": "^2.10.1",
    "@tinijs/parcel-reporter-copy-public": "0.0.2",
-    "@types/lodash.capitalize": "4.2.7",
-    "@types/lodash.debounce": "^4.0.7",
-    "@types/lodash.get": "^4.4.7",
-    "@types/lodash.set": "^4.3.7",
-    "@types/lodash.trim": "4.5.7",
+    "@types/lodash.capitalize": "4.2.8",
+    "@types/lodash.debounce": "^4.0.8",
+    "@types/lodash.get": "^4.4.8",
+    "@types/lodash.set": "^4.3.8",
+    "@types/lodash.trim": "4.5.8",
    "@types/prettier": "3.0.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@types/tinycolor2": "^1.4.4",
-    "@types/uuid": "9.0.5",
-    "@types/vscode": "^1.83.0",
-    "parcel": "2.10.0",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
+    "@types/tinycolor2": "^1.4.5",
+    "@types/uuid": "9.0.6",
+    "@types/vscode": "^1.83.1",
+    "parcel": "2.10.1",
    "parcel-bundler-splitable": "0.0.4",
    "postcss": "8.4.31",
-    "tailwindcss": "3.3.3"
+    "tailwindcss": "3.3.4"
  },
  "staticFiles": {
    "staticPath": "public"
--- a/app/web/src/render/ed/ed-base.tsx
+++ b/app/web/src/render/ed/ed-base.tsx
@ -7,6 +7,7 @@ import { EdMain } from "./panel/main/main";
 import { EdTree } from "./panel/tree/tree";
 import { edUndoManager } from "./logic/ed-undo";
 import { EdPopCompGroup } from "./panel/popup/comp-group";
+import { EdPaneResize } from "./panel/main/pane-resize";

 export const EdBase = () => {
  const p = useGlobal(EDGlobal, "EDITOR");
@ -34,6 +35,20 @@ export const EdBase = () => {
      <div className="flex justify-between"></div>
      <div className="flex flex-1 items-stretch">
        <EdTree />
+        <EdPaneResize
+          size={p.ui.layout.left}
+          onResize={(size) => {
+            if (size > 100) {
+              p.ui.layout.left = size;
+              p.render();
+            }
+          }}
+          onDone={(size) => {
+            if (size > 100) {
+              localStorage.setItem("prasi-layout-left", size.toString());
+            }
+          }}
+        />
        <EdMain />
      </div>

--- a/app/web/src/render/ed/logic/ed-global.ts
+++ b/app/web/src/render/ed/logic/ed-global.ts
@ -87,6 +87,10 @@ export const EDGlobal = {
    group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,
  },
  ui: {
+    layout: {
+      left: parseInt(localStorage.getItem("prasi-layout-left") || "250"),
+      right: parseInt(localStorage.getItem("prasi-layout-right") || "250"),
+    },
    prevent_indent_hook: false,
    syncing: false,
    tree: {
--- a/app/web/src/render/ed/panel/main/main.tsx
+++ b/app/web/src/render/ed/panel/main/main.tsx
@ -1,3 +1,3 @@
 export const EdMain = () => {
-  return <div className="flex flex-1"></div>;
+  return <div className="flex flex-1 bg-red-500"></div>;
 };
--- a/app/web/src/render/ed/panel/main/pane-resize.tsx
+++ b/app/web/src/render/ed/panel/main/pane-resize.tsx
@ -0,0 +1,72 @@
+import { useLocal } from "web-utils";
+
+export const EdPaneResize = (arg: {
+  size: number;
+  onResize: (size: number) => void;
+  onDone: (size: number) => void;
+}) => {
+  const local = useLocal({
+    default: arg.size,
+    dragging: false,
+    sx: 0,
+    size: 0,
+    result: 0,
+    inzone: false,
+  });
+
+  const stopDrag = () => {
+    local.dragging = false;
+    local.render();
+    arg.onDone(arg.size);
+  };
+
+  return (
+    <>
+      {local.dragging && (
+        <div
+          className="absolute inset-0 cursor-ew-resize"
+          onPointerOver={() => {
+            local.inzone = true;
+          }}
+          onPointerMove={(e) => {
+            local.result = Math.max(0, local.size + e.clientX - local.sx);
+            arg.onResize(local.result);
+          }}
+          onPointerUp={stopDrag}
+          onPointerDown={stopDrag}
+        ></div>
+      )}
+      <div className={cx("relative")}>
+        <div
+          className={cx(
+            "w-[4px] absolute inset-0 -mx-[2px] cursor-ew-resize hover:bg-blue-400 transition-all duration-700",
+            local.dragging && "bg-blue-400"
+          )}
+          onDoubleClick={() => {
+            arg.onResize(local.default);
+          }}
+          onPointerUp={stopDrag}
+          onPointerLeave={() => {
+            setTimeout(() => {
+              if (!local.inzone) {
+                stopDrag();
+              }
+            }, 300);
+          }}
+          onPointerDown={(e) => {
+            window.removeEventListener("blur", stopDrag);
+            window.addEventListener("blur", stopDrag);
+
+            e.preventDefault();
+            e.stopPropagation();
+            local.dragging = true;
+            local.sx = e.clientX;
+            local.size = arg.size;
+            local.result = arg.size;
+            local.render();
+          }}
+        ></div>
+      </div>
+    </>
+  );
+};
--- a/app/web/src/render/ed/panel/tree/node/item/ctx-menu.tsx
+++ b/app/web/src/render/ed/panel/tree/node/item/ctx-menu.tsx
@ -100,7 +100,7 @@ export const EdTreeCtxMenu = ({
      )}
      <MenuItem
        label="Cut"
-        hotKey={<HotKey shortcut={"X"} />}
+        // hotKey={<HotKey shortcut={"X"} />}
        onClick={() => edActionCut(p, item)}
      />
      <MenuItem
--- a/app/web/src/render/ed/panel/tree/tree.tsx
+++ b/app/web/src/render/ed/panel/tree/tree.tsx
@ -1,19 +1,29 @@
 import { MultiBackend, getBackendOptions } from "@minoru/react-dnd-treeview";
 import { DndProvider } from "react-dnd";
-import { useGlobal } from "web-utils";
-import { EDGlobal } from "../../logic/ed-global";
 import { EdTreeBody } from "./body";
 import { EdTreeSearch } from "./search";
+import { useGlobal } from "web-utils";
+import { EDGlobal } from "../../logic/ed-global";

 export const EdTree = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
  return (
-    <div className="flex flex-col min-w-[300px] relative border-r">
-      <EdTreeSearch />
-      <div className="tree-body flex relative flex-1 overflow-y-auto overflow-x-hidden">
-        <div className="absolute inset-0 flex">
-          <DndProvider backend={MultiBackend} options={getBackendOptions()}>
-            <EdTreeBody />
-          </DndProvider>
+    <div
+      className={cx(
+        "flex flex-col relative border-r",
+        css`
+          min-width: ${p.ui.layout.left}px;
+        `
+      )}
+    >
+      <div className="absolute inset-0 flex flex-col overflow-hidden">
+        <EdTreeSearch />
+        <div className="tree-body flex relative flex-1 overflow-y-auto overflow-x-hidden">
+          <div className="absolute inset-0 flex">
+            <DndProvider backend={MultiBackend} options={getBackendOptions()}>
+              <EdTreeBody />
+            </DndProvider>
+          </div>
        </div>
      </div>
    </div>
--- a/app/web/src/utils/sync/ws-client.ts
+++ b/app/web/src/utils/sync/ws-client.ts
@ -16,7 +16,7 @@ import { initIDB } from "./idb";
 const packr = new Packr({ structuredClone: true });

 /** CONSTANT */
-const WS_DEBUG = false;
+const WS_DEBUG = true;
 const RECONNECT_TIMEOUT = 1000;

 const conf = {
--- a/bun.lockb
+++ b/bun.lockb