From f6981b41b180b441f6e9fb485953e3141ea58727 Mon Sep 17 00:00:00 2001 From: Frank Noirot Date: Tue, 9 Mar 2021 01:44:14 -0500 Subject: [PATCH] added react-mosaic-component to IdeContainer.js --- web/package.json | 1 + web/src/components/IdeConsole/IdeConsole.js | 2 +- .../components/IdeContainer/IdeContainer.js | 37 ++++-- web/src/helpers/hooks/useIdeState.js | 15 +++ yarn.lock | 110 +++++++++++++++++- 5 files changed, 150 insertions(+), 15 deletions(-) diff --git a/web/package.json b/web/package.json index b485efa..e086c74 100644 --- a/web/package.json +++ b/web/package.json @@ -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" diff --git a/web/src/components/IdeConsole/IdeConsole.js b/web/src/components/IdeConsole/IdeConsole.js index a373156..159800e 100644 --- a/web/src/components/IdeConsole/IdeConsole.js +++ b/web/src/components/IdeConsole/IdeConsole.js @@ -4,7 +4,7 @@ import { IdeContext } from 'src/components/IdeToolbarNew' const IdeConsole = () => { const { state } = useContext(IdeContext) return ( -
+
hi I'm console
{state.consoleMessages?.map(({ type, message }, index) => ( diff --git a/web/src/components/IdeContainer/IdeContainer.js b/web/src/components/IdeContainer/IdeContainer.js index 8e57fa4..4db9ab9 100644 --- a/web/src/components/IdeContainer/IdeContainer.js +++ b/web/src/components/IdeContainer/IdeContainer.js @@ -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 ( -
-

hi I'm IDE container

-
- - - -
-
- ) +const ELEMENT_MAP = { + Editor: , + Viewer: , + Console: , } -export default IdeContainer +const IdeContainer = () => { + const { state, dispatch } = useContext(IdeContext) + + return (
+ ( + + { ELEMENT_MAP[id] } + + )} + value={state.layout} + onChange={newLayout => dispatch({ type: 'updateLayout', payload: { message: newLayout } })} + /> +
) +} + +export default IdeContainer \ No newline at end of file diff --git a/web/src/helpers/hooks/useIdeState.js b/web/src/helpers/hooks/useIdeState.js index 21e2728..9f846f5 100644 --- a/web/src/helpers/hooks/useIdeState.js +++ b/web/src/helpers/hooks/useIdeState.js @@ -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, + } } } diff --git a/yarn.lock b/yarn.lock index bf80550..77b7aec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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== -- 2.39.5