From 0e7d05d9a497576f69ea14631ace1b6897c1ba80 Mon Sep 17 00:00:00 2001 From: mozzie Date: Fri, 13 Sep 2024 22:42:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20react-grid=E5=B0=9D=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/desktop/package.json | 6 +- .../components/base/SideBarLeft/constant.tsx | 2 +- .../src/components/base/SideBarLeft/index.tsx | 9 +-- .../src/pages/Viewer/MprViewer/Crosshair.tsx | 30 +++++--- apps/desktop/src/pages/Viewer/index.tsx | 12 +-- pnpm-lock.yaml | 74 +++++++++++++++++-- 6 files changed, 102 insertions(+), 31 deletions(-) diff --git a/apps/desktop/package.json b/apps/desktop/package.json index 166ca56..af1f9b8 100644 --- a/apps/desktop/package.json +++ b/apps/desktop/package.json @@ -72,7 +72,9 @@ "@cornerstonejs/streaming-image-volume-loader": "1.84.4", "dicomweb-client": "0.10.4", "@cornerstonejs/calculate-suv": "1.1.0", - "dcmjs": "0.34.1" + "dcmjs": "0.34.1", + "react-grid-layout": "1.4.4", + "react-resizable": "3.0.5" }, "devDependencies": { "@radix-ui/react-icons": "^1.3.0", @@ -97,4 +99,4 @@ "@types/lodash": "4.17.7", "vite-plugin-node-polyfills": "0.22.0" } -} +} \ No newline at end of file diff --git a/apps/desktop/src/components/base/SideBarLeft/constant.tsx b/apps/desktop/src/components/base/SideBarLeft/constant.tsx index abaebfc..f7215dd 100644 --- a/apps/desktop/src/components/base/SideBarLeft/constant.tsx +++ b/apps/desktop/src/components/base/SideBarLeft/constant.tsx @@ -10,7 +10,7 @@ import { export const menuItems: MenuItem[] = [ { to: "/", name: "自动分析", icon: }, { to: "/datasource", name: "数据列表", icon: }, - { to: "/viewer", name: "MPR阅片", icon: }, + // { to: "/viewer", name: "MPR阅片", icon: }, { to: "/models", name: "模型管理", icon: }, { to: "/tools", name: "小工具", icon: }, // { to: "/setting", name: "设置", icon: }, diff --git a/apps/desktop/src/components/base/SideBarLeft/index.tsx b/apps/desktop/src/components/base/SideBarLeft/index.tsx index 5826168..51c902f 100644 --- a/apps/desktop/src/components/base/SideBarLeft/index.tsx +++ b/apps/desktop/src/components/base/SideBarLeft/index.tsx @@ -15,11 +15,10 @@ export const SideBarLeft = () => { {menuItems.map((item) => (
  • handleClick(item)} > { + const containerRef = useRef(null); const viewportRef_AXIAL = useRef(null); const viewportRef_SAGITTAL = useRef(null); const viewportRef_CORONAL = useRef(null); @@ -68,6 +75,7 @@ export const CrosshairMpr = (props: CrosshairMprProps) => { const imageIds = useRef(); const ts = "-" + Date.now(); + useEffect(() => { cornerstoneTools.addTool(StackScrollMouseWheelTool); cornerstoneTools.addTool(CrosshairsTool); @@ -219,7 +227,7 @@ export const CrosshairMpr = (props: CrosshairMprProps) => { }, [props, ts]); useEffect(() => { - const resize = () => renderingEngine.current?.resize(); + const resize = () => renderingEngine.current?.resize() window.addEventListener("resize", resize); return () => { window.removeEventListener("resize", resize); @@ -231,14 +239,16 @@ export const CrosshairMpr = (props: CrosshairMprProps) => { }; return ( -
    -
    onDBClickViewport(viewportRef_AXIAL)} - className="h-1/3 border rounded-md" - ref={viewportRef_AXIAL} - >
    -
    -
    +
    + +
    onDBClickViewport(viewportRef_AXIAL)} ref={viewportRef_AXIAL}>
    +     + +
    +     + +
    +
    ); }; diff --git a/apps/desktop/src/pages/Viewer/index.tsx b/apps/desktop/src/pages/Viewer/index.tsx index 8a15f58..d7f5407 100644 --- a/apps/desktop/src/pages/Viewer/index.tsx +++ b/apps/desktop/src/pages/Viewer/index.tsx @@ -3,6 +3,7 @@ import { initCornerstone } from "./MprViewer/CornerstoneDicomLoader/init"; import { CrosshairMpr } from "./MprViewer/Crosshair"; import { useEffect, useState } from "react"; + export interface CurrentDicom { SeriesInstanceUID: string | null; StudyInstanceUID: string | null; @@ -26,14 +27,16 @@ export const Viewer = () => { }, [currentDicom]); useEffect(() => { + console.log(window.location.href) initCornerstone(() => { setCornerstoneLoaded(true); }); }, []); useEffect(() => { - console.log(currentDicom, cornerstoneLoaded); - }, [cornerstoneLoaded, currentDicom]); + console.log(cornerstoneLoaded); + }, [cornerstoneLoaded]); + return (
    @@ -46,10 +49,7 @@ export const Viewer = () => { StudyInstanceUID={currentDicom.StudyInstanceUID} SeriesInstanceUID={currentDicom.SeriesInstanceUID} /> - )} -
    - - {Object.values(currentDicom).some((i) => !i) && "导入dicom"} + )}
    ); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1123cd5..9518ae8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -175,12 +175,18 @@ importers: react-dropzone: specifier: 14.2.3 version: 14.2.3(react@18.3.1) + react-grid-layout: + specifier: 1.4.4 + version: 1.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-hook-form: specifier: 7.53.0 version: 7.53.0(react@18.3.1) react-icons: specifier: ^5.2.1 version: 5.3.0(react@18.3.1) + react-resizable: + specifier: 3.0.5 + version: 3.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-resizable-panels: specifier: ^2.1.1 version: 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -2740,6 +2746,10 @@ packages: clone-response@1.0.3: resolution: {integrity: sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==} + clsx@1.2.1: + resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} + engines: {node: '>=6'} + clsx@2.0.0: resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} engines: {node: '>=6'} @@ -3255,6 +3265,9 @@ packages: fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + fast-equals@4.0.3: + resolution: {integrity: sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==} + fast-fifo@1.3.2: resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==} @@ -4632,12 +4645,24 @@ packages: peerDependencies: react: ^18.3.1 + react-draggable@4.4.6: + resolution: {integrity: sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==} + peerDependencies: + react: '>= 16.3.0' + react-dom: '>= 16.3.0' + react-dropzone@14.2.3: resolution: {integrity: sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==} engines: {node: '>= 10.13'} peerDependencies: react: '>= 16.8 || 18.0.0' + react-grid-layout@1.4.4: + resolution: {integrity: sha512-7+Lg8E8O8HfOH5FrY80GCIR1SHTn2QnAYKh27/5spoz+OHhMmEhU/14gIkRzJOtympDPaXcVRX/nT1FjmeOUmQ==} + peerDependencies: + react: '>= 16.3.0' + react-dom: '>= 16.3.0' + react-hook-form@7.53.0: resolution: {integrity: sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==} engines: {node: '>=18.0.0'} @@ -4695,6 +4720,11 @@ packages: react: ^16.14.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 + react-resizable@3.0.5: + resolution: {integrity: sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==} + peerDependencies: + react: '>= 16.3' + react-router-dom@6.26.1: resolution: {integrity: sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==} engines: {node: '>=14.0.0'} @@ -7958,7 +7988,7 @@ snapshots: app-builder-bin@4.0.0: {} - app-builder-lib@24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)): + app-builder-lib@24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)): dependencies: '@develar/schema-utils': 2.6.5 '@electron/notarize': 2.2.1 @@ -7972,7 +8002,7 @@ snapshots: builder-util-runtime: 9.2.4 chromium-pickle-js: 0.2.0 debug: 4.3.6 - dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) + dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3) ejs: 3.1.10 electron-builder-squirrel-windows: 24.13.3(dmg-builder@24.13.3) electron-publish: 24.13.1 @@ -8406,6 +8436,8 @@ snapshots: dependencies: mimic-response: 1.0.1 + clsx@1.2.1: {} + clsx@2.0.0: {} clsx@2.1.1: {} @@ -8686,9 +8718,9 @@ snapshots: dlv@1.1.3: {} - dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)): + dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3): dependencies: - app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) + app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) builder-util: 24.13.1 builder-util-runtime: 9.2.4 fs-extra: 10.1.0 @@ -8758,7 +8790,7 @@ snapshots: electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3): dependencies: - app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) + app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) archiver: 5.3.2 builder-util: 24.13.1 fs-extra: 10.1.0 @@ -8768,11 +8800,11 @@ snapshots: electron-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)): dependencies: - app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) + app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) builder-util: 24.13.1 builder-util-runtime: 9.2.4 chalk: 4.1.2 - dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)) + dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3) fs-extra: 10.1.0 is-ci: 3.0.1 lazy-val: 1.0.5 @@ -9019,6 +9051,8 @@ snapshots: fast-deep-equal@3.1.3: {} + fast-equals@4.0.3: {} + fast-fifo@1.3.2: {} fast-glob@3.3.2: @@ -10534,6 +10568,13 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-draggable@4.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + clsx: 1.2.1 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-dropzone@14.2.3(react@18.3.1): dependencies: attr-accept: 2.2.2 @@ -10541,6 +10582,17 @@ snapshots: prop-types: 15.8.1 react: 18.3.1 + react-grid-layout@1.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + clsx: 2.1.1 + fast-equals: 4.0.3 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-draggable: 4.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-resizable: 3.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + resize-observer-polyfill: 1.5.1 + react-hook-form@7.53.0(react@18.3.1): dependencies: react: 18.3.1 @@ -10590,6 +10642,14 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + react-resizable@3.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + prop-types: 15.8.1 + react: 18.3.1 + react-draggable: 4.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + transitivePeerDependencies: + - react-dom + react-router-dom@6.26.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@remix-run/router': 1.19.1