h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

added react-mosaic-component to IdeContainer.js #230

Merged
franknoirot merged 2 commits from franknoirot/218 into main 2021-03-09 09:44:40 +01:00
Conversation 2 Commits 2 Files Changed 5 +150 -15
5 changed files with 150 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

@@ -35,6 +35,7 @@
"react-ga": "^3.3.0",
"react-helmet": "^6.1.0",
"react-image-crop": "^8.6.6",
"react-mosaic-component": "^4.1.1",
"rich-markdown-editor": "^11.0.2",
"styled-components": "^5.2.0",
"three": "^0.118.3"

2
web/src/components/IdeConsole/IdeConsole.js
View File

@@ -4,7 +4,7 @@ import { IdeContext } from 'src/components/IdeToolbarNew'
const IdeConsole = () => {
const { state } = useContext(IdeContext)
return (
<div className="p-8 border-2 m-2">
<div className="p-8 border-2 m-2 overflow-y-auto">
<div className="pb-4">hi I'm console</div>
<div>
{state.consoleMessages?.map(({ type, message }, index) => (

37
web/src/components/IdeContainer/IdeContainer.js
View File

@@ -1,18 +1,31 @@
import { useContext } from 'react'
import { Mosaic, MosaicWindow } from 'react-mosaic-component'
import { IdeContext } from 'src/components/IdeToolbarNew'
import IdeEditor from 'src/components/IdeEditor'
import IdeViewer from 'src/components/IdeViewer'
import IdeConsole from 'src/components/IdeConsole'
import 'react-mosaic-component/react-mosaic-component.css'
const IdeContainer = () => {
return (
<div className="p-8 border-2">
<h2>hi I'm IDE container</h2>
<div className="flex">
<IdeEditor />
<IdeViewer />
<IdeConsole />
</div>
</div>
)
const ELEMENT_MAP = {
Editor: <IdeEditor/>,
Viewer: <IdeViewer/>,
Console: <IdeConsole/>,
}
export default IdeContainer
const IdeContainer = () => {
const { state, dispatch } = useContext(IdeContext)
return (<div className='h-screen'>
<Mosaic
renderTile={ (id, path) => (
<MosaicWindow path={path} title={id}>
{ ELEMENT_MAP[id] }
</MosaicWindow>
)}
value={state.layout}
onChange={newLayout => dispatch({ type: 'updateLayout', payload: { message: newLayout } })}
/>
</div>)
}
export default IdeContainer

15
web/src/helpers/hooks/useIdeState.js
View File

@@ -13,6 +13,16 @@ export const useIdeState = () => {
type: 'stl',
data: 'some binary',
},
layout: {
direction: 'row',
first: 'Editor',
second: {
direction: 'column',
first: 'Viewer',
second: 'Console',
splitPercentage: 70,
},
}
}
const reducer = (state, { type, payload }) => {
switch (type) {
@@ -41,6 +51,11 @@ export const useIdeState = () => {
...state,
ideType: payload.message,
}
case 'updateLayout':
return {
...state,
layout: payload.message,
}
}
}

110
yarn.lock
View File

@@ -2347,6 +2347,21 @@
prop-types "^15.6.1"
react-lifecycles-compat "^3.0.4"
"@react-dnd/asap@^4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-4.0.0.tgz#b300eeed83e9801f51bd66b0337c9a6f04548651"
integrity sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==
"@react-dnd/invariant@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-2.0.0.tgz#09d2e81cd39e0e767d7da62df9325860f24e517e"
integrity sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==
"@react-dnd/shallowequal@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz#a3031eb54129f2c66b2753f8404266ec7bf67f0a"
integrity sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==
"@redwoodjs/api@^0.26.2":
version "0.26.2"
resolved "https://registry.yarnpkg.com/@redwoodjs/api/-/api-0.26.2.tgz#c5cf5f0f90fb15c2231bb9358ae57e1c9e050cce"
@@ -3303,6 +3318,14 @@
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.7.tgz#613957d900fab9ff84c8dfb24fa3eef0c2a40896"
integrity sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==
"@types/hoist-non-react-statics@^3.3.1":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
"@types/html-minifier-terser@^5.0.0":
version "5.1.0"
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
@@ -5925,7 +5948,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.5:
classnames@^2.2.5, classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -7183,6 +7206,20 @@ dir-glob@^3.0.1:
dependencies:
path-type "^4.0.0"
dnd-core@^10.0.2:
version "10.0.2"
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-10.0.2.tgz#051dc119682ea1185622f954667670d3d5f6a574"
integrity sha512-PrxEjxF0+6Y1n1n1Z9hSWZ1tvnDXv9syL+BccV1r1RC08uWNsyetf8AnWmUF3NgYPwy0HKQJwTqGkZK+1NlaFA==
dependencies:
"@react-dnd/asap" "^4.0.0"
"@react-dnd/invariant" "^2.0.0"
redux "^4.0.4"
dnd-multi-backend@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/dnd-multi-backend/-/dnd-multi-backend-5.1.1.tgz#0032761795c3df6a479989f002d8a7d92ad58094"
integrity sha512-+bdMsGAC1wlne4+AwTvr6eQ6Bp3St6hn0wp0BcpUMOMVTNM0S+n0Ha8S/qbpYK7XY+i0j439v+yaKO9g9aFvQg==
dns-equal@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -9550,6 +9587,11 @@ immer@1.10.0:
resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
immutability-helper@^3.0.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-3.1.1.tgz#2b86b2286ed3b1241c9e23b7b21e0444f52f77b7"
integrity sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ==
immutable@~3.7.6:
version "3.7.6"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
@@ -13935,6 +13977,47 @@ react-dev-utils@^9.0.0, react-dev-utils@^9.0.3:
strip-ansi "5.2.0"
text-table "0.2.0"
react-dnd-html5-backend@^10.0.2:
version "10.0.2"
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-10.0.2.tgz#15cb9d2b923f43576a136df854e288cb5969784c"
integrity sha512-ny17gUdInZ6PIGXdzfwPhoztRdNVVvjoJMdG80hkDBamJBeUPuNF2Wv4D3uoQJLjXssX1+i9PhBqc7EpogClwQ==
dependencies:
dnd-core "^10.0.2"
react-dnd-multi-backend@^5.0.0:
version "5.1.1"
resolved "https://registry.yarnpkg.com/react-dnd-multi-backend/-/react-dnd-multi-backend-5.1.1.tgz#1ddb243cea74e41efa3932e6403bb84d0a8cd11b"
integrity sha512-u085U6tIAfkFzaBhe0AhZZIhs9Ta1sRcp+S/A7JR81B1TjtPVLYIoTyqCO91wG1Iz5+MEVL88aYuRPayMY4HXQ==
dependencies:
dnd-multi-backend "^5.1.1"
prop-types "^15.7.2"
react-dnd-preview "^5.1.1"
react-dnd-preview@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/react-dnd-preview/-/react-dnd-preview-5.1.1.tgz#90c4ad49e90d9abe39728b762d72132b8589b784"
integrity sha512-RryrwRRfF22kL8CQcYqDHt4WLbytRbVNXYnjPkyZKfGsXfQnY0j8OtxokTee4Ba3OkcSiSYQbLhDRFw9wiJj5g==
dependencies:
prop-types "^15.7.2"
react-dnd-touch-backend@^10.0.2:
version "10.0.2"
resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-10.0.2.tgz#90cb916655539b838d49b8895e1813f8b874b3b4"
integrity sha512-+lW/Ern0dKyHToD0oP+Wc/ZD6l7qJazosLqbjzL7OnPlig6WxdlrHkJylOLkeAdZj41fIJJ551Lb57pIL0CcPw==
dependencies:
"@react-dnd/invariant" "^2.0.0"
dnd-core "^10.0.2"
react-dnd@^10.0.2:
version "10.0.2"
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-10.0.2.tgz#a6ad8eb3d9f2c573031f7ce05012e5c767a0b1fc"
integrity sha512-SC2Ymvntynhoqtf5zaFhZscm9xenCoMofilxPdlwUlaelAzmbl9fw82C4ZJ//+lNm3kWAKXjGDZg2/aWjKEAtg==
dependencies:
"@react-dnd/shallowequal" "^2.0.0"
"@types/hoist-non-react-statics" "^3.3.1"
dnd-core "^10.0.2"
hoist-non-react-statics "^3.3.0"
react-docgen@^5.0.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.3.0.tgz#9aabde5e69f1993c8ba839fd9a86696504654589"
@@ -14065,6 +14148,21 @@ react-medium-image-zoom@^3.0.16:
resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-3.1.2.tgz#5ac4441f1d424bd9680a25bfc2591be3d7704a42"
integrity sha512-werjufn5o4ytdyvJNzfqXCilovDhMyREH0qeJhCjV5brNAyfV7anZmvpFc3FApbuVXwBkzHMuQkV2z/GyEQatg==
react-mosaic-component@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/react-mosaic-component/-/react-mosaic-component-4.1.1.tgz#48a34e5e5c16654075212666c2aebeb488bab9f2"
integrity sha512-HVlLvfYQ/AKmoKvw95Orx3Qyc7SNuS/QlAy+SkAVit1g9ipzXBGYoBg7RMXP5sF5w47CgYxA+1gT+fYRVf73jA==
dependencies:
classnames "^2.2.6"
immutability-helper "^3.0.1"
lodash "^4.17.11"
prop-types "^15.7.2"
react-dnd "^10.0.2"
react-dnd-html5-backend "^10.0.2"
react-dnd-multi-backend "^5.0.0"
react-dnd-touch-backend "^10.0.2"
uuid "^3.3.2"
react-popper-tooltip@^2.8.3:
version "2.11.1"
resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"
@@ -14281,6 +14379,14 @@ reduce-css-calc@^2.1.6:
css-unit-converter "^1.1.1"
postcss-value-parser "^3.3.0"
redux@^4.0.4:
version "4.0.5"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
dependencies:
loose-envify "^1.4.0"
symbol-observable "^1.2.0"
refractor@^2.4.1:
version "2.10.1"
resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
@@ -15740,7 +15846,7 @@ svgo@^1.0.0, svgo@^1.2.2:
unquote "~1.1.1"
util.promisify "~1.0.0"
symbol-observable@^1.0.4, symbol-observable@^1.1.0:
symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==