Merge remote-tracking branch 'origin/main'

assets/js/hooks/Mapper/components/map/Map.tsx

@@ -33,6 +33,7 @@ import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import clsx from 'clsx';
 import { useBackgroundVars } from './hooks/useBackgroundVars';
+import { ResizableAreaNode } from '@/hooks/Mapper/components/map/components/ResizableAreaNode';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -59,6 +60,20 @@ const initialNodes: Node<SolarSystemRawType>[] = [
   //   },
   //   type: 'custom',
   // },
+  {
+    id: '1231213',
+    type: 'resizableAreaNode',
+    width: 200,
+    height: 100,
+    position: { x: 100, y: 100 },
+    data: {
+      width: 200,
+      height: 100,
+      bgColor: 'rgba(255, 0, 0, 0.2)',
+      // этот коллбэк переопределим позже
+      onResize: () => {},
+    },
+  },
 ];
 
 const initialEdges = [
@@ -128,6 +143,7 @@ const MapComp = ({
   const nodeTypes = useMemo(() => {
     return {
       custom: nodeComponent,
+      resizableAreaNode: ResizableAreaNode,
     };
   }, [nodeComponent]);
 
@@ -192,6 +208,9 @@ const MapComp = ({
         changes[0].selected = getNodes().filter(node => node.selected).length === 1;
       }
 
+      // eslint-disable-next-line no-console
+      console.log('JOipP', `changes`, changes);
+
       const nextChanges = changes.reduce((acc, change) => {
         return [...acc, change];
       }, [] as NodeChange[]);

assets/js/hooks/Mapper/components/map/components/ResizableAreaNode/ResizableAreaNode.tsx

@@ -0,0 +1,54 @@
+import { NodeProps } from 'reactflow';
+import { Rnd } from 'react-rnd';
+
+export type ResizableAreaData = {
+  width: number;
+  height: number;
+  bgColor: string;
+  onResize: (nodeId: string, newWidth: number, newHeight: number) => void;
+};
+
+export const ResizableAreaNode = ({ id, data, selected, dragging, ...rest }: NodeProps<ResizableAreaData>) => {
+  const { width = 200, height = 100, bgColor = 'rgba(255, 0, 0, 0.2)', onResize } = data;
+  // eslint-disable-next-line no-console
+  // console.log('JOipP', `ResizableAreaNode`, data);
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width,
+        height,
+        border: selected ? '2px solid red' : '2px dashed #999',
+        backgroundColor: bgColor,
+        pointerEvents: dragging ? 'none' : 'auto',
+      }}
+      {...rest}
+    >
+      <Rnd
+        enableUserSelectHack={false}
+        disableDragging={true}
+        style={{ width: '100%', height: '100%' }}
+        size={{ width, height }}
+        onResizeStop={(e, direction, ref, delta, position) => {
+          const newWidth = parseFloat(ref.style.width);
+          const newHeight = parseFloat(ref.style.height);
+          onResize?.(id, newWidth, newHeight);
+        }}
+        enableResizing={{
+          top: true,
+          right: true,
+          bottom: true,
+          left: true,
+          topRight: true,
+          bottomRight: true,
+          bottomLeft: true,
+          topLeft: true,
+        }}
+      >
+        <div style={{ width: '100%', height: '100%', padding: 8 }}>
+          Resizable Area: {width} x {height}
+        </div>
+      </Rnd>
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/map/components/ResizableAreaNode/index.ts

@@ -0,0 +1 @@
+export * from './ResizableAreaNode';

assets/js/hooks/Mapper/components/map/hooks/api/useMapInit.ts

@@ -58,7 +58,11 @@ export const useMapInit = () => {
       update(updateData);
 
       if (systems) {
-        rf.setNodes(systems.map(convertSystem2Node));
+        // rf.setNod7es(systems.map(convertSystem2Node));
+        const prev = rf.getNodes();
+        const areaNodes = prev.filter(x => x.type !== 'resizableAreaNode');
+
+        rf.setNodes([...areaNodes, ...systems.map(convertSystem2Node)]);
       }
 
       if (connections) {

assets/package.json

@@ -32,6 +32,7 @@
     "react-event-hook": "^3.1.2",
     "react-flow-renderer": "^10.3.17",
     "react-hook-form": "^7.53.1",
+    "react-rnd": "^10.5.2",
     "react-usestateref": "^1.0.9",
     "reactflow": "^11.11.4",
     "tailwindcss": "^3.3.6",

assets/yarn.lock

@@ -1568,6 +1568,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
@@ -2844,7 +2849,7 @@ lines-and-columns@^1.1.6:
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 "live_select@file:../deps/live_select":
-  version "1.4.2"
+  version "1.5.4"
 
 locate-path@^6.0.0:
   version "6.0.0"
@@ -3139,10 +3144,10 @@ path-type@^5.0.0:
   integrity sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==
 
 "phoenix@file:../deps/phoenix":
-  version "1.7.14"
+  version "1.7.20"
 
 "phoenix_html@file:../deps/phoenix_html":
-  version "4.1.0"
+  version "4.2.1"
 
 "phoenix_live_view@file:../deps/phoenix_live_view":
   version "0.20.17"
@@ -3340,6 +3345,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+re-resizable@6.11.2:
+  version "6.11.2"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.11.2.tgz#2e8f7119ca3881d5b5aea0ffa014a80e5c1252b3"
+  integrity sha512-2xI2P3OHs5qw7K0Ud1aLILK6MQxW50TcO+DetD9eIV58j84TqYeHoZcL9H4GXFXXIh7afhH8mv5iUCXII7OW7A==
+
 react-dom@18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
@@ -3356,6 +3366,14 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-draggable@4.4.6:
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
+  integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==
+  dependencies:
+    clsx "^1.1.1"
+    prop-types "^15.8.1"
+
 react-error-boundary@^4.0.13:
   version "4.0.13"
   resolved "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz"
@@ -3402,6 +3420,15 @@ react-refresh@^0.14.2:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
+react-rnd@^10.5.2:
+  version "10.5.2"
+  resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.5.2.tgz#47a22c104fb640dae71f149e2c005c879de833bd"
+  integrity sha512-0Tm4x7k7pfHf2snewJA8x7Nwgt3LV+58MVEWOVsFjk51eYruFEa6Wy7BNdxt4/lH0wIRsu7Gm3KjSXY2w7YaNw==
+  dependencies:
+    re-resizable "6.11.2"
+    react-draggable "4.4.6"
+    tslib "2.6.2"
+
 react-transition-group@^4.4.1:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
@@ -3878,7 +3905,7 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tslib@^2.6.2:
+tslib@2.6.2, tslib@^2.6.2:
   version "2.6.2"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==