diff --git a/client/package-lock.json b/client/package-lock.json index 66744ec..3490467 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -13,16 +13,18 @@ "@fluentui/react-icons": "^2.0.222", "next": "14.0.0", "react": "^18", + "react-color": "^2.19.3", "react-dom": "^18", "react-moveable": "^0.55.0", "react-select": "^5.8.0", "react-tooltip": "^5.24.0", - "rsuite": "^5.44.0", - "react-xarrows": "^2.0.2" + "react-xarrows": "^2.0.2", + "rsuite": "^5.44.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", + "@types/react-color": "^3.0.10", "@types/react-dom": "^18", "autoprefixer": "^10", "eslint": "^8", @@ -595,6 +597,14 @@ "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "dev": true }, + "node_modules/@icons/material": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -643,6 +653,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "node_modules/@next/env": { "version": "14.0.0", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.0.tgz", @@ -827,6 +842,27 @@ "node": ">= 8" } }, + "node_modules/@rsuite/icon-font": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@rsuite/icon-font/-/icon-font-4.0.0.tgz", + "integrity": "sha512-rZTgpTH3H3HLczCA2rnkWfoMKm0ZXoRzsrkVujfP/FfslnKUMvO6w56pa8pCvhWGpNEPUsLS2ULnFGpTEcup/Q==" + }, + "node_modules/@rsuite/icons": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@rsuite/icons/-/icons-1.0.3.tgz", + "integrity": "sha512-qkjYFn1v5YV9eH57Q4AJ8CwsQYfILun2wdoxhQg5+xYxkIu6UyF8vTMmpOzLvcybTE7D8STm4dH7vhpyhPOC7g==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "@rsuite/icon-font": "^4.0.0", + "classnames": "^2.2.5", + "insert-css": "^2.0.0", + "lodash": "^4.17.20" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz", @@ -866,12 +902,22 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/chai": { + "version": "4.3.11", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.11.tgz", + "integrity": "sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==" + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.14.202", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz", + "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==" + }, "node_modules/@types/node": { "version": "20.8.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.9.tgz", @@ -901,6 +947,16 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-color": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.10.tgz", + "integrity": "sha512-6K5BAn3zyd8lW8UbckIAVeXGxR82Za9jyGD2DBEynsa7fKaguLDVtjfypzs7fgEV7bULgs7uhds8A8v1wABTvQ==", + "dev": true, + "dependencies": { + "@types/react": "*", + "@types/reactcss": "*" + } + }, "node_modules/@types/react-dom": { "version": "18.2.14", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz", @@ -918,6 +974,23 @@ "@types/react": "*" } }, + "node_modules/@types/react-window": { + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz", + "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/reactcss": { + "version": "1.2.10", + "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.10.tgz", + "integrity": "sha512-gf5qJ1wOYP8N5q9H8/5c3QZHQzu8ltPClhM0vEWuBu9SGg4KSzgpJd2TShEsQDwsYn+mtnJ1xHUdJyzj/r9WrA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.5", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz", @@ -1668,6 +1741,21 @@ "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==", "dev": true }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1776,6 +1864,14 @@ "csstype": "^3.0.2" } }, + "node_modules/dom-lib": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/dom-lib/-/dom-lib-3.1.6.tgz", + "integrity": "sha512-xXEhStHDoAyfhnz8mqDwZ9rnqdqz/9BcrKd1UEw6BlA/l17emFb2dK7q8IX8ArU31pScSU9otEnL6wzvpoT5aw==", + "dependencies": { + "@babel/runtime": "^7.20.0" + } + }, "node_modules/electron-to-chromium": { "version": "1.4.569", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.569.tgz", @@ -2859,6 +2955,11 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "node_modules/insert-css": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", + "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==" + }, "node_modules/internal-slot": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz", @@ -3391,6 +3492,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3420,6 +3526,11 @@ "node": ">=10" } }, + "node_modules/material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "node_modules/memoize-one": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", @@ -4059,6 +4170,23 @@ "node": ">=0.10.0" } }, + "node_modules/react-color": { + "version": "2.19.3", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", + "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", + "dependencies": { + "@icons/material": "^0.2.4", + "lodash": "^4.17.15", + "lodash-es": "^4.17.15", + "material-colors": "^1.2.1", + "prop-types": "^15.5.10", + "reactcss": "^1.2.0", + "tinycolor2": "^1.4.1" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-css-styled": { "version": "1.1.9", "resolved": "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.1.9.tgz", @@ -4161,6 +4289,35 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-use-set": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-use-set/-/react-use-set-1.0.0.tgz", + "integrity": "sha512-6BBbOcWc/tOKuwd9gDtdunvOr/g40S0SkCBYvrSJvpI0upzNlHmLoeDvylnoP8PrjQXItClAFxseVGGhEkk7kw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/react-window": { + "version": "1.8.10", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", + "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==", + "dependencies": { + "@babel/runtime": "^7.0.0", + "memoize-one": ">=3.1.1 <6" + }, + "engines": { + "node": ">8.0.0" + }, + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-window/node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/react-xarrows": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/react-xarrows/-/react-xarrows-2.0.2.tgz", @@ -4178,6 +4335,14 @@ "react": ">=16.8.0" } }, + "node_modules/reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "dependencies": { + "lodash": "^4.0.1" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -4299,6 +4464,57 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/rsuite": { + "version": "5.46.1", + "resolved": "https://registry.npmjs.org/rsuite/-/rsuite-5.46.1.tgz", + "integrity": "sha512-ZCMfKWWIDB4PeG7ejKe5MpJy66qrLsSL8wXmmP6vOIQz5VU2y0fG3LtSrYKd8eGRER23iZzK5EphkRIp8WXADA==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@juggle/resize-observer": "^3.4.0", + "@rsuite/icons": "^1.0.2", + "@types/chai": "^4.3.3", + "@types/lodash": "^4.14.184", + "@types/prop-types": "^15.7.5", + "@types/react-window": "^1.8.5", + "classnames": "^2.3.1", + "date-fns": "^2.29.3", + "dom-lib": "^3.1.3", + "lodash": "^4.17.11", + "prop-types": "^15.8.1", + "react-use-set": "^1.0.0", + "react-window": "^1.8.8", + "rsuite-table": "^5.18.2", + "schema-typed": "^2.1.3" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/rsuite-table": { + "version": "5.18.2", + "resolved": "https://registry.npmjs.org/rsuite-table/-/rsuite-table-5.18.2.tgz", + "integrity": "sha512-IelmlHraExYgrkT13WWVENhCywWjBxPkpF2zpsqvMcwzaNAg9lHaVVyajcOKczqGB24NGRE6WgBF5n1RC6XAww==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@juggle/resize-observer": "^3.3.1", + "@rsuite/icons": "^1.0.0", + "classnames": "^2.3.1", + "dom-lib": "^3.1.3", + "lodash": "^4.17.21", + "react-is": "^17.0.2" + }, + "peerDependencies": { + "prop-types": "^15.7.2", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/rsuite-table/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + }, "node_modules/rtl-css-js": { "version": "1.16.1", "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz", @@ -4370,6 +4586,11 @@ "loose-envify": "^1.1.0" } }, + "node_modules/schema-typed": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/schema-typed/-/schema-typed-2.1.3.tgz", + "integrity": "sha512-Nk0LLOq0L64HaQsXQGAZ8Z176tDE4jewsxyWe+6QvidNiC33DMaWFg+LaLWJ85uPPBtqBBJlCq9W4c1KEA88WA==" + }, "node_modules/selecto": { "version": "1.26.0", "resolved": "https://registry.npmjs.org/selecto/-/selecto-1.26.0.tgz", @@ -4762,6 +4983,11 @@ "node": ">=0.8" } }, + "node_modules/tinycolor2": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" + }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -5591,6 +5817,12 @@ "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "dev": true }, + "@icons/material": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", + "requires": {} + }, "@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -5630,6 +5862,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "@next/env": { "version": "14.0.0", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.0.tgz", @@ -5724,6 +5961,23 @@ "fastq": "^1.6.0" } }, + "@rsuite/icon-font": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@rsuite/icon-font/-/icon-font-4.0.0.tgz", + "integrity": "sha512-rZTgpTH3H3HLczCA2rnkWfoMKm0ZXoRzsrkVujfP/FfslnKUMvO6w56pa8pCvhWGpNEPUsLS2ULnFGpTEcup/Q==" + }, + "@rsuite/icons": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@rsuite/icons/-/icons-1.0.3.tgz", + "integrity": "sha512-qkjYFn1v5YV9eH57Q4AJ8CwsQYfILun2wdoxhQg5+xYxkIu6UyF8vTMmpOzLvcybTE7D8STm4dH7vhpyhPOC7g==", + "requires": { + "@babel/runtime": "^7.12.1", + "@rsuite/icon-font": "^4.0.0", + "classnames": "^2.2.5", + "insert-css": "^2.0.0", + "lodash": "^4.17.20" + } + }, "@rushstack/eslint-patch": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz", @@ -5763,12 +6017,22 @@ "tslib": "^2.4.0" } }, + "@types/chai": { + "version": "4.3.11", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.11.tgz", + "integrity": "sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==" + }, "@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "@types/lodash": { + "version": "4.14.202", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz", + "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==" + }, "@types/node": { "version": "20.8.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.9.tgz", @@ -5798,6 +6062,16 @@ "csstype": "^3.0.2" } }, + "@types/react-color": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.10.tgz", + "integrity": "sha512-6K5BAn3zyd8lW8UbckIAVeXGxR82Za9jyGD2DBEynsa7fKaguLDVtjfypzs7fgEV7bULgs7uhds8A8v1wABTvQ==", + "dev": true, + "requires": { + "@types/react": "*", + "@types/reactcss": "*" + } + }, "@types/react-dom": { "version": "18.2.14", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz", @@ -5815,6 +6089,23 @@ "@types/react": "*" } }, + "@types/react-window": { + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz", + "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==", + "requires": { + "@types/react": "*" + } + }, + "@types/reactcss": { + "version": "1.2.10", + "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.10.tgz", + "integrity": "sha512-gf5qJ1wOYP8N5q9H8/5c3QZHQzu8ltPClhM0vEWuBu9SGg4KSzgpJd2TShEsQDwsYn+mtnJ1xHUdJyzj/r9WrA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/scheduler": { "version": "0.16.5", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz", @@ -6332,6 +6623,14 @@ "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==", "dev": true }, + "date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "requires": { + "@babel/runtime": "^7.21.0" + } + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -6414,6 +6713,14 @@ "csstype": "^3.0.2" } }, + "dom-lib": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/dom-lib/-/dom-lib-3.1.6.tgz", + "integrity": "sha512-xXEhStHDoAyfhnz8mqDwZ9rnqdqz/9BcrKd1UEw6BlA/l17emFb2dK7q8IX8ArU31pScSU9otEnL6wzvpoT5aw==", + "requires": { + "@babel/runtime": "^7.20.0" + } + }, "electron-to-chromium": { "version": "1.4.569", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.569.tgz", @@ -7245,6 +7552,11 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "insert-css": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", + "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==" + }, "internal-slot": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz", @@ -7639,6 +7951,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -7662,6 +7979,11 @@ "yallist": "^4.0.0" } }, + "material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "memoize-one": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", @@ -8077,6 +8399,20 @@ "loose-envify": "^1.1.0" } }, + "react-color": { + "version": "2.19.3", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", + "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", + "requires": { + "@icons/material": "^0.2.4", + "lodash": "^4.17.15", + "lodash-es": "^4.17.15", + "material-colors": "^1.2.1", + "prop-types": "^15.5.10", + "reactcss": "^1.2.0", + "tinycolor2": "^1.4.1" + } + }, "react-css-styled": { "version": "1.1.9", "resolved": "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.1.9.tgz", @@ -8164,6 +8500,28 @@ "prop-types": "^15.6.2" } }, + "react-use-set": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-use-set/-/react-use-set-1.0.0.tgz", + "integrity": "sha512-6BBbOcWc/tOKuwd9gDtdunvOr/g40S0SkCBYvrSJvpI0upzNlHmLoeDvylnoP8PrjQXItClAFxseVGGhEkk7kw==", + "requires": {} + }, + "react-window": { + "version": "1.8.10", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", + "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==", + "requires": { + "@babel/runtime": "^7.0.0", + "memoize-one": ">=3.1.1 <6" + }, + "dependencies": { + "memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + } + } + }, "react-xarrows": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/react-xarrows/-/react-xarrows-2.0.2.tgz", @@ -8174,6 +8532,14 @@ "prop-types": "^15.7.2" } }, + "reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "requires": { + "lodash": "^4.0.1" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -8258,6 +8624,50 @@ "glob": "^7.1.3" } }, + "rsuite": { + "version": "5.46.1", + "resolved": "https://registry.npmjs.org/rsuite/-/rsuite-5.46.1.tgz", + "integrity": "sha512-ZCMfKWWIDB4PeG7ejKe5MpJy66qrLsSL8wXmmP6vOIQz5VU2y0fG3LtSrYKd8eGRER23iZzK5EphkRIp8WXADA==", + "requires": { + "@babel/runtime": "^7.20.1", + "@juggle/resize-observer": "^3.4.0", + "@rsuite/icons": "^1.0.2", + "@types/chai": "^4.3.3", + "@types/lodash": "^4.14.184", + "@types/prop-types": "^15.7.5", + "@types/react-window": "^1.8.5", + "classnames": "^2.3.1", + "date-fns": "^2.29.3", + "dom-lib": "^3.1.3", + "lodash": "^4.17.11", + "prop-types": "^15.8.1", + "react-use-set": "^1.0.0", + "react-window": "^1.8.8", + "rsuite-table": "^5.18.2", + "schema-typed": "^2.1.3" + } + }, + "rsuite-table": { + "version": "5.18.2", + "resolved": "https://registry.npmjs.org/rsuite-table/-/rsuite-table-5.18.2.tgz", + "integrity": "sha512-IelmlHraExYgrkT13WWVENhCywWjBxPkpF2zpsqvMcwzaNAg9lHaVVyajcOKczqGB24NGRE6WgBF5n1RC6XAww==", + "requires": { + "@babel/runtime": "^7.12.5", + "@juggle/resize-observer": "^3.3.1", + "@rsuite/icons": "^1.0.0", + "classnames": "^2.3.1", + "dom-lib": "^3.1.3", + "lodash": "^4.17.21", + "react-is": "^17.0.2" + }, + "dependencies": { + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + } + } + }, "rtl-css-js": { "version": "1.16.1", "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz", @@ -8306,6 +8716,11 @@ "loose-envify": "^1.1.0" } }, + "schema-typed": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/schema-typed/-/schema-typed-2.1.3.tgz", + "integrity": "sha512-Nk0LLOq0L64HaQsXQGAZ8Z176tDE4jewsxyWe+6QvidNiC33DMaWFg+LaLWJ85uPPBtqBBJlCq9W4c1KEA88WA==" + }, "selecto": { "version": "1.26.0", "resolved": "https://registry.npmjs.org/selecto/-/selecto-1.26.0.tgz", @@ -8591,6 +9006,11 @@ "thenify": ">= 3.1.0 < 4" } }, + "tinycolor2": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", diff --git a/client/package.json b/client/package.json index 400f29d..6302f99 100644 --- a/client/package.json +++ b/client/package.json @@ -14,16 +14,18 @@ "@fluentui/react-icons": "^2.0.222", "next": "14.0.0", "react": "^18", + "react-color": "^2.19.3", "react-dom": "^18", "react-moveable": "^0.55.0", "react-select": "^5.8.0", "react-tooltip": "^5.24.0", - "rsuite": "^5.44.0", - "react-xarrows": "^2.0.2" + "react-xarrows": "^2.0.2", + "rsuite": "^5.44.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", + "@types/react-color": "^3.0.10", "@types/react-dom": "^18", "autoprefixer": "^10", "eslint": "^8", diff --git a/client/src/components/Board/index.tsx b/client/src/components/Board/index.tsx index cf3bfcc..07d0b11 100644 --- a/client/src/components/Board/index.tsx +++ b/client/src/components/Board/index.tsx @@ -5,6 +5,7 @@ import Navbar from '@/components/Navbar'; import Task from '@/components/Task'; import TaskDetailsPane from '@/components/TaskDetailsPane'; import Toolbar from '@/components/Toolbar'; +import ToolDetails from '../ToolDetails'; import './styles.css'; @@ -136,6 +137,7 @@ export default function Board() { const [pointerToolState, setPointerToolState] = useState({ _selected_task: null }); + const [taskToolState, setTaskToolState] = useState({color: "#faedcb"}); const [arrowToolState, setArrowToolState] = useState({ color: "#0000ff", _firstId: -1 @@ -164,6 +166,14 @@ export default function Board() { }; }; + const handleSetTaskToolColor = (c: string) => { + setTaskToolState({color: c}); + } + + const handleSetArrowToolColor = (c: string) => { + setArrowToolState({...arrowToolState, color: c}); + } + const handleTaskClick = (id: number) => { switch (selectedTool) { case Tool.Pointer: @@ -206,7 +216,7 @@ export default function Board() { height: 100, posX: clientX, posY: clientY, - color: "#faedcb" + color: taskToolState.color }; setTasks([...board.tasks, newTask]); setSelectedTool(Tool.Pointer); @@ -320,6 +330,13 @@ export default function Board() { setSelectedTool={handleSetTool} /> +
+ +
{pointerToolState._selected_task ? ( void; + setArrowColor: (arg: string) => void; +}; + +interface Details { + title: string; + description: string; + picker: boolean; + setComponentColor: (arg: string) => void; +} + +interface ColorPicker { + opened: boolean; + color: string; +} + +export default function ToolDetails({ selectedTool, setTaskColor, setArrowColor }: Props) { + const [details, setDetails] = useState
({ + title: 'default', + description: 'default', + picker: false, + setComponentColor: setTaskColor + }); + switch (selectedTool) { + case Tool.Pointer: + setDetails({ + ...details, + title: 'Select', + description: 'Select an element on the canvas to view and edit its details.' + }); + break; + case Tool.Move: + setDetails({ + ...details, + title: 'Move/Resize', + description: 'Arrange the position and size of elements on the canvas.' + }); + break; + case Tool.Task: + setDetails({ + ...details, + title: 'Add Task', + description: 'Add a task element of the specified color to the canvas.', + picker: true + }); + break; + case Tool.Arrow: + setDetails({ + title: 'Add Arrow', + description: 'Add an arrow element of the specified color to the canvas.', + picker: true, + setComponentColor: setArrowColor + }); + break; + } + const [colorPicker, setColorPicker] = useState({ + opened: false, + color: '#bbb' + }); + const changeColors = (color: ColorResult) => { + details.setComponentColor(color.hex); + setColorPicker({...colorPicker, color: color.hex}); + } + return ( +
+
+ {selectedTool === Tool.Pointer && } + {selectedTool === Tool.Move && } + {selectedTool === Tool.Task && } + {selectedTool === Tool.Arrow && } +
{details.title}
+
+
{details.description}
+ {details.picker && +
+
Color:
+
setColorPicker({...colorPicker, opened: true})}> +
+
} + {colorPicker.opened && +
+
setColorPicker({...colorPicker, opened: false})}> +
+ +
} +
+ // reference: https://casesandberg.github.io/react-color/ + ) +} \ No newline at end of file diff --git a/client/src/components/ToolDetails/styles.css b/client/src/components/ToolDetails/styles.css new file mode 100644 index 0000000..21b022e --- /dev/null +++ b/client/src/components/ToolDetails/styles.css @@ -0,0 +1,36 @@ +.titleRow { + display: flex; + flex-direction: row; +} + +.title { + font-size: large; + padding-left: 12px; +} + +.description { + font-size: medium; + margin-top: 12px; +} + +.colorRow { + display: flex; + flex-direction: row; +} + +.colorPreview { + height: 12px; + width: 12px; +} + +.popup { + position: fixed; + z-index: 3000; +} + +.overlay { + top: 0; + left: 0; + right: 0; + bottom: 0; +} \ No newline at end of file diff --git a/client/src/components/Toolbar.tsx b/client/src/components/Toolbar.tsx index 6dfa0ea..50b07f1 100644 --- a/client/src/components/Toolbar.tsx +++ b/client/src/components/Toolbar.tsx @@ -4,7 +4,6 @@ import { ArrowFlowUpRight24Regular, ArrowMove24Filled, ArrowMove24Regular, - CalendarAdd24Regular, Cursor24Regular, Cursor24Filled, SlideAdd24Regular,