From cb25194f545ddaba66c9d365d89a1685d43a0a00 Mon Sep 17 00:00:00 2001 From: dantheman8300 Date: Tue, 20 Jun 2023 21:07:44 -0700 Subject: [PATCH 1/3] set up deployment nodes --- studio-frontend/package.json | 1 + .../src/components/DeployCanvas.tsx | 466 ++++++++++++------ .../src/components/DeployedObjects.tsx | 59 ++- studio-frontend/src/pages/deploy.tsx | 20 + studio-frontend/yarn.lock | 372 ++++++++++++++ 5 files changed, 757 insertions(+), 161 deletions(-) diff --git a/studio-frontend/package.json b/studio-frontend/package.json index 233f7bf..21973d3 100644 --- a/studio-frontend/package.json +++ b/studio-frontend/package.json @@ -30,6 +30,7 @@ "react-loading-overlay-ts": "^2.0.1", "react-scripts": "^5.0.1", "react-spinners": "^0.13.8", + "reactflow": "^11.7.3", "tailwindcss": "3.3.2", "typescript": "5.0.4" } diff --git a/studio-frontend/src/components/DeployCanvas.tsx b/studio-frontend/src/components/DeployCanvas.tsx index b5282fb..1636af5 100644 --- a/studio-frontend/src/components/DeployCanvas.tsx +++ b/studio-frontend/src/components/DeployCanvas.tsx @@ -1,16 +1,50 @@ import axios from 'axios'; -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { DeployedPackageInfo } from '../types/project-types'; // import './DeployCanvas.css' -import {DeployedPackage, DeployedObject} from './DeployedObjects' +import {DeployedPackage, DeployedObject, ObjectNode, PackageNode} from './DeployedObjects' import { ScaleLoader } from 'react-spinners'; import LoadingOverlay from 'react-loading-overlay-ts'; import { useWallet } from '@suiet/wallet-kit'; -// import ScaleLoader from "react-spinners/ScaleLoader"; -// import { SPINNER_COLORS } from '../utils/theme'; + +import ReactFlow, { Background, Controls, MiniMap, applyEdgeChanges, applyNodeChanges } from 'reactflow'; +import 'reactflow/dist/style.css'; const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:80/'; +// const initialNodes = [ +// { +// id: '1', +// data: { label: 'Hello' }, +// position: { x: 0, y: 0 }, +// type: 'input', +// }, +// { +// id: '2', +// data: { +// id: '2', +// address: '0x123', +// modules: {}, +// packageName: 'test', +// refreshHandler: () => {}, +// setPendingTxn: () => {}, +// setSuccessTxn: () => {}, +// setFailTxn: () => {}, +// removeDeployedObject: () => {}, +// dragStartHandler: () => {}, +// dragEnterHandler: () => {}, +// dragLeaveHandler: () => {}, +// dropHandler: () => {}, +// useSuiVision: false +// }, +// position: { x: 100, y: 100 }, +// type: 'package' +// }, +// ]; + +// const initialEdges = [{ id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' }]; + + function DeployCanvas ( props: { // theme: string, @@ -28,10 +62,25 @@ function DeployCanvas ( ) { - const [deployedObjects, setDeployedObjects] = useState<(JSX.Element | undefined)[]>() + // const [deployedObjects, setDeployedObjects] = useState<(JSX.Element | undefined)[]>() const [draggedId, setDraggedId] = useState(undefined) const [draggedOverId, setDraggedOverId] = useState(undefined) + const [loading, setLoading] = useState(false); + + const nodeTypes = useMemo(() => ({ package: PackageNode, Object: ObjectNode }), []); + const [nodes, setNodes] = useState<[]>([]); + // const [edges, setEdges] = useState(initialEdges); + + const onNodesChange = useCallback( + (changes: any) => setNodes((nds) => applyNodeChanges(changes, nds) as any), + [] + ); + // const onEdgesChange = useCallback( + // (changes: any) => setEdges((eds) => applyEdgeChanges(changes, eds) as any), + // [] + // ); + const wallet = useWallet(); // const { // getObject, @@ -46,10 +95,12 @@ function DeployCanvas ( useEffect(() => { props.setIsOverlayActive(false); - }, [deployedObjects]) + setLoading(false); + }, [nodes]) const updateDeployedObjects = async () => { props.setIsOverlayActive(true); + setLoading(true); const objects = props.deployedObjects.map(async (deployedPackageInfo) => { const objectId = deployedPackageInfo.address; @@ -100,22 +151,44 @@ function DeployCanvas ( const packageDetails = res.data; - return ; + // return ; + + return { + id: id, + data: { + id: id, + address: objectId, + modules: packageDetails, + packageName: deployedPackageInfo.name, + refreshHandler: updateDeployedObjects, + setPendingTxn: props.setPendingTxn, + setSuccessTxn: props.setSuccessTxn, + setFailTxn: props.setFailTxn, + removeDeployedObject: props.removeDeployedObject, + // dragStartHandler: handleDragStart, + // dragEnterHandler: handleDragEnter, + // dragLeaveHandler: handleDragLeave, + // dropHandler: handleDrop, + useSuiVision: props.useSuiVision + }, + position: { x: 100, y: 100 }, + type: 'package' + } }); @@ -132,175 +205,248 @@ function DeployCanvas ( structType = undefined } - return ; + // return ; + + return { + id: id, + data: { + address: objectId, + fields: objectData.fields, + packageAddress: splitFullName[0], + moduleName: splitFullName[1], + objectName: splitFullName[2], + typeParameter: structType, + shared: false,//shared} + updateHandler: updateObjectByAddress, + // dragStartHandler: handleDragStart, + // dragEnterHandler: handleDragEnter, + // dragLeaveHandler: handleDragLeave, + // dropHandler: handleDrop, + refreshHandler: updateDeployedObjects, + id: id, + removeDeployedObject: props.removeDeployedObject, + useSuiVision: props.useSuiVision + }, + position: { x: 100, y: 100 }, + type: 'object' + } } }); // }); Promise.all(objects).then(async (objects) => { - await setDeployedObjects(objects); + await setNodes(objects as any); }); // await props.setIsOverlayActive(false); + // props.setLoading(false); } const updateObjectByAddress = async (address: string) => { - console.log('refreshing', address) - await props.setIsOverlayActive(true); - - if (deployedObjects == undefined) { - return - } - for (let object of deployedObjects) { - console.log(object) - if (object?.props.address == address) { - axios.post(`${BACKEND_URL}object-details`, {objectId: address}).then((res) => { - console.log('object details res', res); - if (res == undefined || res.data.status != 'Exists') { - return; - } - - const objectData = res.data.details.data; - // const shared = res.data.details.owner.hasOwnProperty('Shared') - if (objectData.dataType == 'package') { - return; - } else if (objectData.dataType == 'moveObject') { - const fullName = objectData.type; - let structType = fullName.split('<').pop().split('>')[0] - const fullNameWithoutStruct = fullName.split('<')[0] - const splitFullName = fullNameWithoutStruct.split('::'); - console.log("SPLIT FULL NAME", splitFullName) - console.log("STRUCT TYPE", structType) - - if (!(fullName.includes('<') && fullName.includes('>'))) { - structType = undefined - } + // console.log('refreshing', address) + // await props.setIsOverlayActive(true); + + // if (nodes == undefined) { + // return + // } + // for (let object of nodes) { + // console.log(object) + + // if (object.data.address == address) { + // axios.post(`${BACKEND_URL}object-details`, {objectId: address}).then((res) => { + // console.log('object details res', res); + // if (res == undefined || res.data.status != 'Exists') { + // return; + // } + + // const objectData = res.data.details.data; + // // const shared = res.data.details.owner.hasOwnProperty('Shared') + // if (objectData.dataType == 'package') { + // return; + // } else if (objectData.dataType == 'moveObject') { + // const fullName = objectData.type; + // let structType = fullName.split('<').pop().split('>')[0] + // const fullNameWithoutStruct = fullName.split('<')[0] + // const splitFullName = fullNameWithoutStruct.split('::'); + // console.log("SPLIT FULL NAME", splitFullName) + // console.log("STRUCT TYPE", structType) + + // if (!(fullName.includes('<') && fullName.includes('>'))) { + // structType = undefined + // } - object = ; - } - }); - } - } + // object = ; + // } + // }); + // } + // } } - const handleDragStart = (e: React.DragEvent) => { - console.log('drag start', e.currentTarget.id) + // const handleDragStart = (e: React.DragEvent) => { + // console.log('drag start', e.currentTarget.id) - setDraggedId(e.currentTarget.id) - e.dataTransfer.setData('draggedId', e.currentTarget.id) + // setDraggedId(e.currentTarget.id) + // e.dataTransfer.setData('draggedId', e.currentTarget.id) - console.log('dataTransfer', e.dataTransfer.items) + // console.log('dataTransfer', e.dataTransfer.items) - } + // } - const handleDragStop = (e: React.DragEvent) => { - console.log('drag stop', e.currentTarget.id) + // const handleDragStop = (e: React.DragEvent) => { + // console.log('drag stop', e.currentTarget.id) - setDraggedId(undefined) - // e.dataTransfer.clearData() - } + // setDraggedId(undefined) + // // e.dataTransfer.clearData() + // } - const handleDragEnter = (e: React.DragEvent) => { - console.log('drag enter', e.currentTarget.id) + // const handleDragEnter = (e: React.DragEvent) => { + // console.log('drag enter', e.currentTarget.id) - e.preventDefault() + // e.preventDefault() - setDraggedOverId(e.currentTarget.id) - e.dataTransfer.setData('draggedOverId', e.currentTarget.id) + // setDraggedOverId(e.currentTarget.id) + // e.dataTransfer.setData('draggedOverId', e.currentTarget.id) - console.log('dataTransfer', e.dataTransfer.items) + // console.log('dataTransfer', e.dataTransfer.items) - } + // } - const handleDragLeave = (e: React.DragEvent) => { - console.log('drag leave', e.currentTarget.id) + // const handleDragLeave = (e: React.DragEvent) => { + // console.log('drag leave', e.currentTarget.id) - setDraggedOverId(undefined) - // e.dataTransfer.clearData('draggedOverId') - } + // setDraggedOverId(undefined) + // // e.dataTransfer.clearData('draggedOverId') + // } - const handleDrop = (e: React.DragEvent) => { - console.log('drop', e.currentTarget.id) - console.log('dataTransfer', e.dataTransfer.items) - const draggedId = e.dataTransfer.getData('draggedId') - const draggedOverId = e.currentTarget.id; - console.log('draggedId', draggedId) - console.log('draggedOverId', draggedOverId) - if (draggedId == undefined || draggedOverId == undefined) { - return; - } - - props.rearrangeDeployedObjects(draggedId, draggedOverId) - } + // const handleDrop = (e: React.DragEvent) => { + // console.log('drop', e.currentTarget.id) + // console.log('dataTransfer', e.dataTransfer.items) + // const draggedId = e.dataTransfer.getData('draggedId') + // const draggedOverId = e.currentTarget.id; + // console.log('draggedId', draggedId) + // console.log('draggedOverId', draggedOverId) + // if (draggedId == undefined || draggedOverId == undefined) { + // return; + // } + + // props.rearrangeDeployedObjects(draggedId, draggedOverId) + // } return ( - - } - text='Loading objects...' - fadeSpeed={100} - styles={{ - overlay: (base) => ({ - ...base, - background: 'hsl(var(--b3))', - opacity: '0.7', - }), - // wrapper: { - // width: '90%', - // height: '100%', - // } - }} - > - {/* - */} - {deployedObjects} - {/* - */} -
- {props.toasts} + // + // } + // text='Loading objects...' + // fadeSpeed={100} + // styles={{ + // overlay: (base) => ({ + // ...base, + // background: 'hsl(var(--b3))', + // opacity: '0.7', + // }), + // // wrapper: { + // // width: '90%', + // // height: '100%', + // // } + // }} + // > +
+ + + {/* + } + text='Loading objects...' + fadeSpeed={100} + styles={{ + overlay: (base) => ({ + ...base, + background: 'hsl(var(--b3))', + opacity: '0.7', + }), + }} + > */} + + + {/* */} + {/* */} + +
+ { + loading && +
+
+ + Loading +
+
+ } +
+
+ {props.toasts} +
- + + //
+ // {props.toasts} + //
+ // ) } diff --git a/studio-frontend/src/components/DeployedObjects.tsx b/studio-frontend/src/components/DeployedObjects.tsx index cbf5501..65933ac 100644 --- a/studio-frontend/src/components/DeployedObjects.tsx +++ b/studio-frontend/src/components/DeployedObjects.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import PackageFunction from './PackageFunction'; import copyIcon from "../icons/copy-24.png"; import copyIcon2 from "../icons/copy2-24.png"; @@ -6,6 +6,63 @@ import { shortenAddress, shortenWord } from '../utils/address-shortener'; import PackageStruct from './PackageStruct'; import { useWallet } from '@suiet/wallet-kit'; import { network } from '../utils/network'; +import { Position } from 'monaco-editor'; +import { Handle, NodeResizer } from 'reactflow'; + +export function PackageNode({ data }: any) { + const onChange = useCallback((evt) => { + console.log(evt.target.value); + }, []); + + return ( + <> + {/* */} + + + ); +} + +export function ObjectNode({ data }: any) { + const onChange = useCallback((evt) => { + console.log(evt.target.value); + }, []); + + return ( + <> + + + ); +} export function DeployedPackage ( props: { diff --git a/studio-frontend/src/pages/deploy.tsx b/studio-frontend/src/pages/deploy.tsx index 7191480..bb58c70 100644 --- a/studio-frontend/src/pages/deploy.tsx +++ b/studio-frontend/src/pages/deploy.tsx @@ -247,6 +247,25 @@ function DeployPage() { ) } } + + const setLoading = (loading: boolean) => { + if (loading) { + setToasts( +
+
+ + Loading objects +
+
+ ) + } else { + setToasts(undefined); + } + } //---Handlers---// @@ -656,6 +675,7 @@ function DeployPage() { setPendingTxn={setPendingTxn} setSuccessTxn={setSuccessTxn} setFailTxn={setFailTxn} + // setLoading={setLoading} removeDeployedObject={removeDeployedObject} rearrangeDeployedObjects={rearrangeDeployedObjects} setIsOverlayActive={setIsOverlayActive} diff --git a/studio-frontend/yarn.lock b/studio-frontend/yarn.lock index 29436f9..8c1cf83 100644 --- a/studio-frontend/yarn.lock +++ b/studio-frontend/yarn.lock @@ -1944,6 +1944,72 @@ dependencies: "@babel/runtime" "^7.13.10" +"@reactflow/background@11.2.3": + version "11.2.3" + resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.2.3.tgz#d6479d5f7b7aac506781cc001f7b9196b6f6dadc" + integrity sha512-hFoxKt7ZkQclM7CXg7p3EHb+ngUslqFq122Gsrj55N5rFeEdtIkWHuoi+WS0dLRVfX+acuUs6hZl8JuC/JtQ7g== + dependencies: + "@reactflow/core" "11.7.3" + classcat "^5.0.3" + zustand "^4.3.1" + +"@reactflow/controls@11.1.14": + version "11.1.14" + resolved "https://registry.yarnpkg.com/@reactflow/controls/-/controls-11.1.14.tgz#15f991483f58ff4c13e805f3971d02ce78019ca6" + integrity sha512-UHqjuGGLLKL2sere0wOhaMRk5UxRj7S6dCzHQ5p1EOVw0pvl7eztWa+1DxYflqE215LP2LpI7Sloh0erouflUA== + dependencies: + "@reactflow/core" "11.7.3" + classcat "^5.0.3" + zustand "^4.3.1" + +"@reactflow/core@11.7.3", "@reactflow/core@^11.6.0": + version "11.7.3" + resolved "https://registry.yarnpkg.com/@reactflow/core/-/core-11.7.3.tgz#b6066199120d6574a190af76b8996d889ee80c26" + integrity sha512-sqrfB2qu5cF1FOPna/bq9MGHcdLy8b92jBzsAmDhEcdQHS+yg/gMWTnHVseqX4iBj+Ao7nQd9vwMqb5Bn93NUw== + dependencies: + "@types/d3" "^7.4.0" + "@types/d3-drag" "^3.0.1" + "@types/d3-selection" "^3.0.3" + "@types/d3-zoom" "^3.0.1" + classcat "^5.0.3" + d3-drag "^3.0.0" + d3-selection "^3.0.0" + d3-zoom "^3.0.0" + zustand "^4.3.1" + +"@reactflow/minimap@11.5.3": + version "11.5.3" + resolved "https://registry.yarnpkg.com/@reactflow/minimap/-/minimap-11.5.3.tgz#a5cd18acfde1506557c4ff125a119daf8fceeed9" + integrity sha512-Wc/lYM6Ua0qLgeTkpEyLiND9Rl5aAzyE22O2DjZEGgEOviiyxGNCK93Kw5ba2xWIhWc2/1KYhotHw/IdjmXnYQ== + dependencies: + "@reactflow/core" "11.7.3" + "@types/d3-selection" "^3.0.3" + "@types/d3-zoom" "^3.0.1" + classcat "^5.0.3" + d3-selection "^3.0.0" + d3-zoom "^3.0.0" + zustand "^4.3.1" + +"@reactflow/node-resizer@2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@reactflow/node-resizer/-/node-resizer-2.1.1.tgz#8f9b4e362e572dcddb54d43a67b5c5919b25937f" + integrity sha512-5Q+IBmZfpp/bYsw3+KRVJB1nUbj6W3XAp5ycx4uNWH+K98vbssymyQsW0vvKkIhxEPg6tkiMzO4UWRWvwBwt1g== + dependencies: + "@reactflow/core" "^11.6.0" + classcat "^5.0.4" + d3-drag "^3.0.0" + d3-selection "^3.0.0" + zustand "^4.3.1" + +"@reactflow/node-toolbar@1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@reactflow/node-toolbar/-/node-toolbar-1.2.2.tgz#b927101d6ff251730e2ff0b912a448d16e03e8e1" + integrity sha512-YXD/+oPakAM+CiFL5STwo2gzIV5Eb5qi1Hiy0+/rrDyna8w5NFkJ8EEeXVWG3cAJw4FbeGv0DndmPyN4WaNl0A== + dependencies: + "@reactflow/core" "11.7.3" + classcat "^5.0.3" + zustand "^4.3.1" + "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" @@ -2374,6 +2440,216 @@ dependencies: "@types/node" "*" +"@types/d3-array@*": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.5.tgz#857c1afffd3f51319bbc5b301956aca68acaa7b8" + integrity sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A== + +"@types/d3-axis@*": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-3.0.2.tgz#96e11d51256baf5bdb2fa73a17d302993e79df07" + integrity sha512-uGC7DBh0TZrU/LY43Fd8Qr+2ja1FKmH07q2FoZFHo1eYl8aj87GhfVoY1saJVJiq24rp1+wpI6BvQJMKgQm8oA== + dependencies: + "@types/d3-selection" "*" + +"@types/d3-brush@*": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@types/d3-brush/-/d3-brush-3.0.2.tgz#a610aad5a1e76c375be63e11c5eee1ed9fd2fb40" + integrity sha512-2TEm8KzUG3N7z0TrSKPmbxByBx54M+S9lHoP2J55QuLU0VSQ9mE96EJSAOVNEqd1bbynMjeTS9VHmz8/bSw8rA== + dependencies: + "@types/d3-selection" "*" + +"@types/d3-chord@*": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@types/d3-chord/-/d3-chord-3.0.2.tgz#cf6f05ad2d8faaad524e9e6f454b4fd06b200930" + integrity sha512-abT/iLHD3sGZwqMTX1TYCMEulr+wBd0SzyOQnjYNLp7sngdOHYtNkMRI5v3w5thoN+BWtlHVDx2Osvq6fxhZWw== + +"@types/d3-color@*": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4" + integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA== + +"@types/d3-contour@*": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-3.0.2.tgz#d8a0e4d12ec14f7d2bb6e59f3fbc1a527457d0b2" + integrity sha512-k6/bGDoAGJZnZWaKzeB+9glgXCYGvh6YlluxzBREiVo8f/X2vpTEdgPy9DN7Z2i42PZOZ4JDhVdlTSTSkLDPlQ== + dependencies: + "@types/d3-array" "*" + "@types/geojson" "*" + +"@types/d3-delaunay@*": + version "6.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz#006b7bd838baec1511270cb900bf4fc377bbbf41" + integrity sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ== + +"@types/d3-dispatch@*": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.2.tgz#b2fa80bab3bcead68680766e966f59cd6cb9a69f" + integrity sha512-rxN6sHUXEZYCKV05MEh4z4WpPSqIw+aP7n9ZN6WYAAvZoEAghEK1WeVZMZcHRBwyaKflU43PCUAJNjFxCzPDjg== + +"@types/d3-drag@*", "@types/d3-drag@^3.0.1": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.2.tgz#5562da3e7b33d782c2c1f9e65c5e91bb01ee82cf" + integrity sha512-qmODKEDvyKWVHcWWCOVcuVcOwikLVsyc4q4EBJMREsoQnR2Qoc2cZQUyFUPgO9q4S3qdSqJKBsuefv+h0Qy+tw== + dependencies: + "@types/d3-selection" "*" + +"@types/d3-dsv@*": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.1.tgz#c51a3505cee42653454b74a00f8713dc3548c362" + integrity sha512-76pBHCMTvPLt44wFOieouXcGXWOF0AJCceUvaFkxSZEu4VDUdv93JfpMa6VGNFs01FHfuP4a5Ou68eRG1KBfTw== + +"@types/d3-ease@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.0.tgz#c29926f8b596f9dadaeca062a32a45365681eae0" + integrity sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA== + +"@types/d3-fetch@*": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-3.0.2.tgz#fe1f335243e07c9bd520c9a71756fed8330c54b1" + integrity sha512-gllwYWozWfbep16N9fByNBDTkJW/SyhH6SGRlXloR7WdtAaBui4plTP+gbUgiEot7vGw/ZZop1yDZlgXXSuzjA== + dependencies: + "@types/d3-dsv" "*" + +"@types/d3-force@*": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-3.0.4.tgz#2d50bd2b695f709797e1745644f6bc123e6e5f5a" + integrity sha512-q7xbVLrWcXvSBBEoadowIUJ7sRpS1yvgMWnzHJggFy5cUZBq2HZL5k/pBSm0GdYWS1vs5/EDwMjSKF55PDY4Aw== + +"@types/d3-format@*": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.1.tgz#194f1317a499edd7e58766f96735bdc0216bb89d" + integrity sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg== + +"@types/d3-geo@*": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-3.0.3.tgz#535e5f24be13722964c52354301be09b752f5d6e" + integrity sha512-bK9uZJS3vuDCNeeXQ4z3u0E7OeJZXjUgzFdSOtNtMCJCLvDtWDwfpRVWlyt3y8EvRzI0ccOu9xlMVirawolSCw== + dependencies: + "@types/geojson" "*" + +"@types/d3-hierarchy@*": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz#b3a446b5437faededb30ac32b7cc0486559ab1e2" + integrity sha512-9hjRTVoZjRFR6xo8igAJyNXQyPX6Aq++Nhb5ebrUF414dv4jr2MitM2fWiOY475wa3Za7TOS2Gh9fmqEhLTt0A== + +"@types/d3-interpolate@*": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc" + integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw== + dependencies: + "@types/d3-color" "*" + +"@types/d3-path@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b" + integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg== + +"@types/d3-polygon@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-polygon/-/d3-polygon-3.0.0.tgz#5200a3fa793d7736fa104285fa19b0dbc2424b93" + integrity sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw== + +"@types/d3-quadtree@*": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz#433112a178eb7df123aab2ce11c67f51cafe8ff5" + integrity sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw== + +"@types/d3-random@*": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-random/-/d3-random-3.0.1.tgz#5c8d42b36cd4c80b92e5626a252f994ca6bfc953" + integrity sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ== + +"@types/d3-scale-chromatic@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#103124777e8cdec85b20b51fd3397c682ee1e954" + integrity sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw== + +"@types/d3-scale@*": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.3.tgz#7a5780e934e52b6f63ad9c24b105e33dd58102b5" + integrity sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ== + dependencies: + "@types/d3-time" "*" + +"@types/d3-selection@*", "@types/d3-selection@^3.0.3": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.5.tgz#27cd53b7672d405025e2414d98532d7934c16ebd" + integrity sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w== + +"@types/d3-shape@*": + version "3.1.1" + resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.1.tgz#15cc497751dac31192d7aef4e67a8d2c62354b95" + integrity sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A== + dependencies: + "@types/d3-path" "*" + +"@types/d3-time-format@*": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-4.0.0.tgz#ee7b6e798f8deb2d9640675f8811d0253aaa1946" + integrity sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw== + +"@types/d3-time@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819" + integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg== + +"@types/d3-timer@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.0.tgz#e2505f1c21ec08bda8915238e397fb71d2fc54ce" + integrity sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g== + +"@types/d3-transition@*": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.3.tgz#d4ac37d08703fb039c87f92851a598ba77400402" + integrity sha512-/S90Od8Id1wgQNvIA8iFv9jRhCiZcGhPd2qX0bKF/PS+y0W5CrXKgIiELd2CvG1mlQrWK/qlYh3VxicqG1ZvgA== + dependencies: + "@types/d3-selection" "*" + +"@types/d3-zoom@*", "@types/d3-zoom@^3.0.1": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.3.tgz#5c29006a61ff7ca512fe21398c66ad95dd846674" + integrity sha512-OWk1yYIIWcZ07+igN6BeoG6rqhnJ/pYe+R1qWFM2DtW49zsoSjgb9G5xB0ZXA8hh2jAzey1XuRmMSoXdKw8MDA== + dependencies: + "@types/d3-interpolate" "*" + "@types/d3-selection" "*" + +"@types/d3@^7.4.0": + version "7.4.0" + resolved "https://registry.yarnpkg.com/@types/d3/-/d3-7.4.0.tgz#fc5cac5b1756fc592a3cf1f3dc881bf08225f515" + integrity sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA== + dependencies: + "@types/d3-array" "*" + "@types/d3-axis" "*" + "@types/d3-brush" "*" + "@types/d3-chord" "*" + "@types/d3-color" "*" + "@types/d3-contour" "*" + "@types/d3-delaunay" "*" + "@types/d3-dispatch" "*" + "@types/d3-drag" "*" + "@types/d3-dsv" "*" + "@types/d3-ease" "*" + "@types/d3-fetch" "*" + "@types/d3-force" "*" + "@types/d3-format" "*" + "@types/d3-geo" "*" + "@types/d3-hierarchy" "*" + "@types/d3-interpolate" "*" + "@types/d3-path" "*" + "@types/d3-polygon" "*" + "@types/d3-quadtree" "*" + "@types/d3-random" "*" + "@types/d3-scale" "*" + "@types/d3-scale-chromatic" "*" + "@types/d3-selection" "*" + "@types/d3-shape" "*" + "@types/d3-time" "*" + "@types/d3-time-format" "*" + "@types/d3-timer" "*" + "@types/d3-transition" "*" + "@types/d3-zoom" "*" + "@types/eslint-scope@^3.7.3": version "3.7.4" resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16" @@ -2420,6 +2696,11 @@ "@types/qs" "*" "@types/serve-static" "*" +"@types/geojson@*": + version "7946.0.10" + resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249" + integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA== + "@types/graceful-fs@^4.1.2": version "4.1.6" resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.6.tgz#e14b2576a1c25026b7f02ede1de3b84c3a1efeae" @@ -3692,6 +3973,11 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== +classcat@^5.0.3, classcat@^5.0.4: + version "5.0.4" + resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.4.tgz#e12d1dfe6df6427f260f03b80dc63571a5107ba6" + integrity sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g== + classnames@^2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" @@ -4147,6 +4433,68 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== +"d3-color@1 - 3": + version "3.1.0" + resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2" + integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA== + +"d3-dispatch@1 - 3": + version "3.0.1" + resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e" + integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg== + +"d3-drag@2 - 3", d3-drag@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba" + integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg== + dependencies: + d3-dispatch "1 - 3" + d3-selection "3" + +"d3-ease@1 - 3": + version "3.0.1" + resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4" + integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w== + +"d3-interpolate@1 - 3": + version "3.0.1" + resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d" + integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g== + dependencies: + d3-color "1 - 3" + +"d3-selection@2 - 3", d3-selection@3, d3-selection@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31" + integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ== + +"d3-timer@1 - 3": + version "3.0.1" + resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0" + integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA== + +"d3-transition@2 - 3": + version "3.0.1" + resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f" + integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w== + dependencies: + d3-color "1 - 3" + d3-dispatch "1 - 3" + d3-ease "1 - 3" + d3-interpolate "1 - 3" + d3-timer "1 - 3" + +d3-zoom@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3" + integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw== + dependencies: + d3-dispatch "1 - 3" + d3-drag "2 - 3" + d3-interpolate "1 - 3" + d3-selection "2 - 3" + d3-transition "2 - 3" + daisyui@^2.51.6: version "2.51.6" resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-2.51.6.tgz#c91f5a782f2e991b973dfe9d17d7e93cd973b372" @@ -8630,6 +8978,18 @@ react@18.2.0: dependencies: loose-envify "^1.1.0" +reactflow@^11.7.3: + version "11.7.3" + resolved "https://registry.yarnpkg.com/reactflow/-/reactflow-11.7.3.tgz#35ffd7ad5240639c0eaa64072af617c34f1d4cda" + integrity sha512-AgIr0lrzbZnd3GzcKkbJk9+n/eaVii39eMpM3hzvSni3i10sqe7Wg793B0ni3kgYhcCa9FgKkWimIt1j1Lh2qA== + dependencies: + "@reactflow/background" "11.2.3" + "@reactflow/controls" "11.1.14" + "@reactflow/core" "11.7.3" + "@reactflow/minimap" "11.5.3" + "@reactflow/node-resizer" "2.1.1" + "@reactflow/node-toolbar" "1.2.2" + read-cache@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" @@ -9927,6 +10287,11 @@ use-sidecar@^1.1.2: detect-node-es "^1.1.0" tslib "^2.0.0" +use-sync-external-store@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + utf-8-validate@^5.0.2: version "5.0.10" resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.10.tgz#d7d10ea39318171ca982718b6b96a8d2442571a2" @@ -10496,3 +10861,10 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +zustand@^4.3.1: + version "4.3.8" + resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.8.tgz#37113df8e9e1421b0be1b2dca02b49b76210e7c4" + integrity sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg== + dependencies: + use-sync-external-store "1.2.0" From 68e70f07da1e23a29d3f9307527dc5e74ca8f6c3 Mon Sep 17 00:00:00 2001 From: dantheman8300 Date: Tue, 20 Jun 2023 21:14:18 -0700 Subject: [PATCH 2/3] fixed parameter issue --- .../src/components/DeployedObjects.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/studio-frontend/src/components/DeployedObjects.tsx b/studio-frontend/src/components/DeployedObjects.tsx index 65933ac..f0c53e0 100644 --- a/studio-frontend/src/components/DeployedObjects.tsx +++ b/studio-frontend/src/components/DeployedObjects.tsx @@ -10,7 +10,7 @@ import { Position } from 'monaco-editor'; import { Handle, NodeResizer } from 'reactflow'; export function PackageNode({ data }: any) { - const onChange = useCallback((evt) => { + const onChange = useCallback((evt: any) => { console.log(evt.target.value); }, []); @@ -38,7 +38,7 @@ export function PackageNode({ data }: any) { } export function ObjectNode({ data }: any) { - const onChange = useCallback((evt) => { + const onChange = useCallback((evt: any) => { console.log(evt.target.value); }, []); @@ -47,12 +47,14 @@ export function ObjectNode({ data }: any) { Date: Wed, 28 Jun 2023 19:32:40 -0700 Subject: [PATCH 3/3] Also have right click working --- studio-frontend/package.json | 4 +- .../src/components/DeployCanvas.tsx | 101 +++++- .../components/DeployCanvasContextMenu.tsx | 246 +++++++++++++ .../src/components/DeploySidebar.tsx | 328 ++++++++++++++++-- studio-frontend/src/components/Header.tsx | 2 +- .../src/components/SettingToggle.tsx | 2 +- studio-frontend/src/pages/_app.tsx | 7 +- studio-frontend/src/pages/deploy.tsx | 59 +++- studio-frontend/tailwind.config.js | 4 + studio-frontend/yarn.lock | 85 ++--- 10 files changed, 736 insertions(+), 102 deletions(-) create mode 100644 studio-frontend/src/components/DeployCanvasContextMenu.tsx diff --git a/studio-frontend/package.json b/studio-frontend/package.json index 21973d3..ccde06d 100644 --- a/studio-frontend/package.json +++ b/studio-frontend/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@dorbus/flexboard": "^1.1.2", "@monaco-editor/react": "^4.5.0", "@mysten/sui.js": "^0.33.0", "@suiet/wallet-kit": "^0.2.9", @@ -18,7 +19,7 @@ "@vercel/analytics": "^1.0.1", "autoprefixer": "10.4.14", "axios": "^1.4.0", - "daisyui": "^2.51.6", + "daisyui": "^3.1.6", "eslint": "8.39.0", "eslint-config-next": "13.3.4", "idb": "^7.1.1", @@ -28,6 +29,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-loading-overlay-ts": "^2.0.1", + "react-resizable": "^3.0.5", "react-scripts": "^5.0.1", "react-spinners": "^0.13.8", "reactflow": "^11.7.3", diff --git a/studio-frontend/src/components/DeployCanvas.tsx b/studio-frontend/src/components/DeployCanvas.tsx index 1636af5..847b7ed 100644 --- a/studio-frontend/src/components/DeployCanvas.tsx +++ b/studio-frontend/src/components/DeployCanvas.tsx @@ -1,14 +1,15 @@ import axios from 'axios'; -import { useCallback, useEffect, useMemo, useState } from 'react'; -import { DeployedPackageInfo } from '../types/project-types'; +import { useCallback, useEffect, useMemo, useState, useRef } from 'react'; +import { DeployedPackageInfo, Project } from '../types/project-types'; // import './DeployCanvas.css' import {DeployedPackage, DeployedObject, ObjectNode, PackageNode} from './DeployedObjects' import { ScaleLoader } from 'react-spinners'; import LoadingOverlay from 'react-loading-overlay-ts'; import { useWallet } from '@suiet/wallet-kit'; -import ReactFlow, { Background, Controls, MiniMap, applyEdgeChanges, applyNodeChanges } from 'reactflow'; +import ReactFlow, { Background, Controls, MiniMap, applyEdgeChanges, applyNodeChanges, useNodesState, useStore } from 'reactflow'; import 'reactflow/dist/style.css'; +import DeployCanvasContextMenu from './DeployCanvasContextMenu'; const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:80/'; @@ -43,10 +44,18 @@ const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:80/'; // ]; // const initialEdges = [{ id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' }]; - +let id = 0; +const getId = () => `dndnode_${id++}`; function DeployCanvas ( props: { + projectList: string[], + currentProject: Project | null, + changeProject: (project: string) => void, + publishPackage: () => void, + addExistingObject: (objectId: string) => void, + addFromTransactions: (transactionId: string) => void, + compileError: string, // theme: string, deployedObjects: DeployedPackageInfo[], toasts: JSX.Element | undefined, @@ -57,7 +66,8 @@ function DeployCanvas ( setFailTxn: (digest: string) => void, removeDeployedObject: (id: string) => void, rearrangeDeployedObjects: (draggedId: string, draggedOverId: string) => void, - useSuiVision: boolean + useSuiVision: boolean, + dropped: () => void } ) { @@ -66,16 +76,19 @@ function DeployCanvas ( const [draggedId, setDraggedId] = useState(undefined) const [draggedOverId, setDraggedOverId] = useState(undefined) + const reactFlowWrapper = useRef(null); + const [reactFlowInstance, setReactFlowInstance] = useState(null); + const [loading, setLoading] = useState(false); - const nodeTypes = useMemo(() => ({ package: PackageNode, Object: ObjectNode }), []); - const [nodes, setNodes] = useState<[]>([]); + const nodeTypes = useMemo(() => ({ package: PackageNode, object: ObjectNode }), []); + const [nodes, setNodes, onNodesChange] = useNodesState([]); // const [edges, setEdges] = useState(initialEdges); - const onNodesChange = useCallback( - (changes: any) => setNodes((nds) => applyNodeChanges(changes, nds) as any), - [] - ); + // const onNodesChange = useCallback( + // (changes: any) => setNodes((nds) => applyNodeChanges(changes, nds) as any), + // [] + // ); // const onEdgesChange = useCallback( // (changes: any) => setEdges((eds) => applyEdgeChanges(changes, eds) as any), // [] @@ -98,6 +111,55 @@ function DeployCanvas ( setLoading(false); }, [nodes]) + const onDragOver = useCallback((event: any) => { + event.preventDefault(); + event.dataTransfer.dropEffect = 'move'; + }, []); + + // useEffect(() => { + // document.addEventListener('contextmenu',(event) => { + // event.preventDefault(); + // console.log(event.type); + // }); + // }, []); + + const onDrop = () => { + props.dropped() + } + + + // const onDrop = useCallback( + // (event: any) => { + // event.preventDefault(); + + // if (reactFlowInstance === null || reactFlowWrapper.current === null) { + // return; + // } + + // const reactFlowBounds = (reactFlowWrapper.current as any).getBoundingClientRect(); + // const type = event.dataTransfer.getData('application/reactflow'); + + // // check if the dropped element is valid + // if (typeof type === 'undefined' || !type) { + // return; + // } + + // const position = (reactFlowInstance as any).project({ + // x: event.clientX - reactFlowBounds.left, + // y: event.clientY - reactFlowBounds.top, + // }); + // const newNode = { + // id: getId(), + // type, + // position, + // data: { label: `${type} node` }, + // }; + + // setNodes((nds) => nds.concat(newNode)); + // }, + // [reactFlowInstance] + // ); + const updateDeployedObjects = async () => { props.setIsOverlayActive(true); setLoading(true); @@ -391,14 +453,26 @@ function DeployCanvas ( // // } // }} // > -
- +
+ {/* */} + {/* */} {/* */} diff --git a/studio-frontend/src/components/DeployCanvasContextMenu.tsx b/studio-frontend/src/components/DeployCanvasContextMenu.tsx new file mode 100644 index 0000000..e4509cf --- /dev/null +++ b/studio-frontend/src/components/DeployCanvasContextMenu.tsx @@ -0,0 +1,246 @@ +import { isValidTransactionDigest } from "@mysten/sui.js"; +import { useEffect, useLayoutEffect, useRef, useState } from "react"; + + +export default function DeployCanvasContextMenu ( + props: { + projectList: any; + changeProject(value: any): unknown; + addExistingObject(objectId: string): unknown; + addFromTransactions(value: string): unknown; + publishPackage(): unknown; + currentProject: null; + compileError: string; + targetId: string, + }, +) { + + const [contextData, setContextData]= useState({ visible:false, posX: 0, posY: 0}) + const contextRef= useRef(null) + const [isValidObjectId, setIsValidObjectId] = useState(false); + const [isInputValidTransactionDigest, setIsInputValidTransactionDigest] = useState(false); + + useEffect(() => { + const contextMenuEventHandler= (event: any) => { + console.log('contextMenuEventHandler') + const targetElement= document.getElementById(props.targetId) + console.log('targetElement', targetElement) + console.log('event.target', event.target) + console.log('contains', targetElement?.contains(event.target)) + if(targetElement && targetElement.contains(event.target)){ + console.log('here') + event.preventDefault(); + console.log('event.clientX', event.clientX) + console.log('event.clientY', event.clientY) + setContextData({ visible: true, posX: event.clientX, posY: event.clientY }) + }else if(contextRef.current && !(contextRef.current as any).contains(event.target)){ + setContextData({ ...contextData, visible: false }) + } + } + + const offClickHandler= (event: any) => { + if(contextRef.current && !(contextRef.current as any).contains(event.target)){ + setContextData({ ...contextData, visible: false }) + } + } + + document.addEventListener('contextmenu', contextMenuEventHandler) + document.addEventListener('click', offClickHandler) + return () => { + document.removeEventListener('contextmenu', contextMenuEventHandler) + document.removeEventListener('click', offClickHandler) + } + }, [contextData, props.targetId]) + + useLayoutEffect(() => { + if(contextData.posX + (contextRef.current as any)?.offsetWidth > window.innerWidth){ + setContextData({ ...contextData, posX: contextData.posX - (contextRef.current as any)?.offsetWidth}) + } + if(contextData.posY + (contextRef.current as any)?.offsetHeight > window.innerHeight){ + setContextData({ ...contextData, posY: contextData.posY - (contextRef.current as any)?.offsetHeight}) + } + }, [contextData]) + + + const projects = props.projectList.map((project: string) => { + return + }); + + const verifyObjectId = (event: any) => { + const objectId = event.target.value; + + // Make sure object ID starts with 0x + if (objectId.slice(0,2) != '0x') { + setIsValidObjectId(false); + return; + } + + // make sure object id is alphanumeric + const regex = /^[0-9a-fA-F]+$/; + if (!regex.test(objectId.slice(2))) { + setIsValidObjectId(false); + return; + } + + setIsValidObjectId(true); + } + + const verifyTransactionDigest = (event: any) => { + const transactionDigest = event.target.value; + + setIsInputValidTransactionDigest(isValidTransactionDigest(transactionDigest)); + } + + const handleProjectChange = (event: any) => { + console.log('handleProjectChange', event.target.value); + props.changeProject(event.target.value); + + + // Empty the select element if addProject is selected + if (event.target.value === 'addProject') { + event.target.value = 'default'; + // event.target.value = + } + } + + + const handleObjectAdd = () => { + const objectId = (document.getElementById('addObjectInput') as HTMLInputElement).value; + + if (objectId == '' || objectId == undefined) { + return; + } + + // if (objectId.length != 42) { + // alert('Object ID must be 64 characters long'); + // return; + // } + + if (objectId.slice(0,2) != '0x') { + alert('Object ID must start with 0x'); + return; + } + + props.addExistingObject(objectId); + + // clear input field + (document.getElementById('addObjectInput') as HTMLInputElement).value = ''; + } + + const handleSuiPackageAdd = () => { + const addObjectInput = (document.getElementById('addObjectInput') as HTMLInputElement); + addObjectInput.value = "0x2"; + + handleObjectAdd(); + } + + const hanldeTransactionDigestAdd = () => { + const addObjectInput = (document.getElementById('addTransactionInput') as HTMLInputElement); + + if (addObjectInput.value == '' || addObjectInput.value == undefined) { + return; + } + + props.addFromTransactions(addObjectInput.value); + + // clear input field + addObjectInput.value = ''; + } + + + const handlePackagePublish = (event: any) => { + props.publishPackage(); + + // set select back to default + const select = document.getElementById('projectSelector') as HTMLSelectElement; + select.value = '**default'; + } + + return ( +
+
+
+ +
+ + +
+
+
+
+
+ +
+ + +
+
+
+
+ +
+
+
+ +
+ + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/studio-frontend/src/components/DeploySidebar.tsx b/studio-frontend/src/components/DeploySidebar.tsx index 7fd1d38..a0a1bea 100644 --- a/studio-frontend/src/components/DeploySidebar.tsx +++ b/studio-frontend/src/components/DeploySidebar.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; -import { Project } from "../types/project-types" +import { DeployedPackageInfo, Project } from "../types/project-types" import { shortenAddress } from "../utils/address-shortener"; import { useAccountBalance, useWallet } from "@suiet/wallet-kit"; import { decimalify } from "../utils/decimal"; @@ -23,6 +23,7 @@ function DeploySidebar( compileError: string, useSuiVision: boolean, setUseSuiVision: (useSuiVision: boolean) => void, + objects: DeployedPackageInfo[], } ) { @@ -54,6 +55,18 @@ function DeploySidebar( return }); + const objects = props.objects.map((object: DeployedPackageInfo) => { + return ( +
onDragStart(event, 'object')} + draggable + > +
{object.name}
+
+ ) + }); + function WalletSelector() { const { select, // select @@ -195,11 +208,258 @@ function DeploySidebar( props.setUseSuiVision(!props.useSuiVision); } + const onDragStart = (event: any, nodeType: any) => { + event.dataTransfer.setData('application/reactflow', nodeType); + event.dataTransfer.effectAllowed = 'move'; + }; + // console.log('walleticon', walletIcon) return ( -
- {wallet.connected && +
+ { + wallet.connected && +
+
+ +
+ Wallet information +
+
+ +

+ { + walletIcon != '' && + {wallet.name} + } + { + wallet.name == 'Martian Sui Wallet' ? + Martian wallet : + {wallet.name} + } + + + +

+
+

Address:

+

+ {shortenAddress(wallet.address || '', 5)} + +

+
+
+

Gas balance:

+

+ {loading ? "Loading balance..." : `${decimalify(balance?.toString() || '', 9)} Sui`} + {!loading && + + } +

+
+
+

Network:

+

+ {wallet.chain?.name || ''} + +

+
+
+ +
+
+
+ + + + + {/*
+ +
+ Deploy & Interact +
+
+
+
+ +
+ + +
+
+
+
+
+ +
+ + +
+
+
+
+ +
+
+
+ +
+ + +
+
+
+
+

Objects

+
+ {objects} +
onDragStart(event, 'object')} + draggable + > +
Sui
+
+
+
Examples
+
+
+
UpgradeCap
+
+
+
CoinMetadata
+
+
+
TreasuryCap
+
+
+
C
+
+
+
+
+
*/} + + + + + +
+ +
+ Studio Configurations +
+
+ + + +
+
+
+ } + {/* {wallet.connected &&
@@ -207,6 +467,15 @@ function DeploySidebar( +

@@ -349,28 +618,37 @@ function DeploySidebar(

-
- Additional configs: - - - + + +
+ + + Studio configurations: + +
+ + + +
+ +
- } + } */} { !wallet.connected &&
diff --git a/studio-frontend/src/components/Header.tsx b/studio-frontend/src/components/Header.tsx index 1b3643f..87018d8 100644 --- a/studio-frontend/src/components/Header.tsx +++ b/studio-frontend/src/components/Header.tsx @@ -16,7 +16,7 @@ function Header( -
    +
    • Build
      •
    • Deploy
      •
    • Learn
      NEW!
      •  diff --git a/studio-frontend/src/components/SettingToggle.tsx b/studio-frontend/src/components/SettingToggle.tsx index 3869770..49b8f03 100644 --- a/studio-frontend/src/components/SettingToggle.tsx +++ b/studio-frontend/src/components/SettingToggle.tsx @@ -19,7 +19,7 @@ export default function SettingToggle ( { props.tooltip && -
      +
      } diff --git a/studio-frontend/src/pages/_app.tsx b/studio-frontend/src/pages/_app.tsx index 558c53c..c0b9fc1 100644 --- a/studio-frontend/src/pages/_app.tsx +++ b/studio-frontend/src/pages/_app.tsx @@ -5,12 +5,15 @@ import {WalletProvider} from '@suiet/wallet-kit'; import '@suiet/wallet-kit/style.css'; import { Analytics } from '@vercel/analytics/react'; +import { ReactFlowProvider } from 'reactflow'; export default function App({ Component, pageProps }: AppProps) { return ( - - + + + + ) } diff --git a/studio-frontend/src/pages/deploy.tsx b/studio-frontend/src/pages/deploy.tsx index bb58c70..72b5f7a 100644 --- a/studio-frontend/src/pages/deploy.tsx +++ b/studio-frontend/src/pages/deploy.tsx @@ -40,8 +40,12 @@ function DeployPage() { const [projectList, setProjectList] = useState([]); const [currentProject, setCurrentProject] = useState(null); const [compileError, setCompileError] = useState(''); - const [deployedModules, setDeployedModules] = useState([]); + const [deployedObjects, setDeployedObjects] = useState([]); + const [deployedObjectsInQueue, setDeployedObjectsInQueue] = useState([]); + + const [dragged, setDragged] = useState({type: 'empty'}); + const wallet = useWallet() const [toasts, setToasts] = useState(); @@ -269,6 +273,16 @@ function DeployPage() { //---Handlers---// + const newDrag = (dragged: object) => { + console.log('newDrag', dragged); + + setDragged(dragged); + } + + const dropped = () => { + console.log('dropped', dragged); + } + const handleProjectChange = (projectChange: string) => { if (projectChange === '**default') { @@ -519,6 +533,7 @@ function DeployPage() { const packageInfos = publishTxnCreated?.map((object: any) => { return {id: Math.random().toString(36).slice(2), name: currentProject.package, address: object.reference.objectId}; + // return object.reference.objectId }); if (!packageInfos) { @@ -528,9 +543,9 @@ function DeployPage() { console.log('packageInfos', packageInfos) if (publishTxnCreated) { - const newDeployedObjects = deployedObjects.concat(packageInfos); - console.log('newDeployedObjects', newDeployedObjects) - setDeployedObjects(newDeployedObjects); + const newDeployedObjectsInQueue = deployedObjectsInQueue.concat(packageInfos); + console.log('newDeployedObjects', newDeployedObjectsInQueue) + setDeployedObjectsInQueue(newDeployedObjectsInQueue); } @@ -665,22 +680,32 @@ function DeployPage() { compileError={compileError} useSuiVision={useSuiVision} setUseSuiVision={setUseSuiVision} + objects={deployedObjectsInQueue} /> } canvas={ - } + + } /> ); diff --git a/studio-frontend/tailwind.config.js b/studio-frontend/tailwind.config.js index 74da8f8..1ed2d7d 100644 --- a/studio-frontend/tailwind.config.js +++ b/studio-frontend/tailwind.config.js @@ -15,4 +15,8 @@ module.exports = { }, }, plugins: [require("daisyui")], + daisyui: { + themes: ["night"], + }, + } diff --git a/studio-frontend/yarn.lock b/studio-frontend/yarn.lock index 8c1cf83..6cd5de8 100644 --- a/studio-frontend/yarn.lock +++ b/studio-frontend/yarn.lock @@ -1190,6 +1190,14 @@ resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016" integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw== +"@dorbus/flexboard@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@dorbus/flexboard/-/flexboard-1.1.2.tgz#ddf1e2ab7429e605f6b30e05848ff1686e242bf1" + integrity sha512-wBc6hdksvTvExPMHCcYvWxF0eNrv1E+AE6djrS7RUZMjBK5lnmJDtpKF8QAamMza6Bhy63cL6ROU2BB3ymGp7w== + dependencies: + react "^18.2.0" + react-dom "^18.2.0" + "@emotion/babel-plugin@^11.10.6": version "11.10.8" resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.8.tgz#bae325c902937665d00684038fd5294223ef9e1d" @@ -4004,6 +4012,11 @@ cliui@^7.0.2: strip-ansi "^6.0.0" 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== + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -4042,28 +4055,12 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== -color-name@^1.0.0, color-name@~1.1.4: +color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-string@^1.9.0: - version "1.9.1" - resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" - integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== - dependencies: - color-name "^1.0.0" - simple-swizzle "^0.2.2" - -color@^4.2: - version "4.2.3" - resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" - integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== - dependencies: - color-convert "^2.0.1" - color-string "^1.9.0" - -colord@^2.9.1: +colord@^2.9, colord@^2.9.1: version "2.9.3" resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43" integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw== @@ -4311,7 +4308,7 @@ css-select@^4.1.3: domutils "^2.8.0" nth-check "^2.0.1" -css-selector-tokenizer@^0.8.0: +css-selector-tokenizer@^0.8: version "0.8.0" resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd" integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg== @@ -4495,14 +4492,14 @@ d3-zoom@^3.0.0: d3-selection "2 - 3" d3-transition "2 - 3" -daisyui@^2.51.6: - version "2.51.6" - resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-2.51.6.tgz#c91f5a782f2e991b973dfe9d17d7e93cd973b372" - integrity sha512-JRqOKayuFCmWe4X4k6Qvx1y7V/VNao8U5eTSOhusOKIzCsYqf56+TCSe4d7zmqGE0V6JiLDYAT8JeoWUeRKFCw== +daisyui@^3.1.6: + version "3.1.6" + resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-3.1.6.tgz#e6cda37eeddeb8724fc07f11c3e1b2e257cc0e40" + integrity sha512-P/2WUn4ZImEc2IfPSYw3qPCUnnJNju0P6ii0fUqtTURUj0oda6L0tm4EzrUmB2EbqB6grZ9nKHPTSniKaPYp1w== dependencies: - color "^4.2" - css-selector-tokenizer "^0.8.0" - postcss-js "^4.0.0" + colord "^2.9" + css-selector-tokenizer "^0.8" + postcss-js "^4" tailwindcss "^3" damerau-levenshtein@^1.0.8: @@ -6290,11 +6287,6 @@ is-arrayish@^0.2.1: resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg== -is-arrayish@^0.3.1: - version "0.3.2" - resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" - integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== - is-bigint@^1.0.1: version "1.0.4" resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3" @@ -8253,7 +8245,7 @@ postcss-initial@^4.0.1: resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-4.0.1.tgz#529f735f72c5724a0fb30527df6fb7ac54d7de42" integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ== -postcss-js@^4.0.0, postcss-js@^4.0.1: +postcss-js@^4, postcss-js@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2" integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw== @@ -8697,7 +8689,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.2, prop-types@^15.8.1: +prop-types@15.x, prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -8822,7 +8814,7 @@ react-dev-utils@^12.0.1: strip-ansi "^6.0.1" text-table "^0.2.0" -react-dom@18.2.0: +react-dom@18.2.0, react-dom@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== @@ -8830,6 +8822,14 @@ react-dom@18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-draggable@^4.0.3: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c" + integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g== + dependencies: + clsx "^1.1.1" + prop-types "^15.8.1" + react-error-overlay@^6.0.11: version "6.0.11" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" @@ -8892,6 +8892,14 @@ react-remove-scroll@2.5.5: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" +react-resizable@^3.0.5: + version "3.0.5" + resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-3.0.5.tgz#362721f2efbd094976f1780ae13f1ad7739786c1" + integrity sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w== + dependencies: + prop-types "15.x" + react-draggable "^4.0.3" + react-scripts@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003" @@ -8971,7 +8979,7 @@ react-transition-group@4.4.5: loose-envify "^1.4.0" prop-types "^15.6.2" -react@18.2.0: +react@18.2.0, react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== @@ -9462,13 +9470,6 @@ signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9" integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ== -simple-swizzle@^0.2.2: - version "0.2.2" - resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" - integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg== - dependencies: - is-arrayish "^0.3.1" - sisteransi@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"