diff --git a/apis/nucleus/src/hooks/usePropertiesById.js b/apis/nucleus/src/hooks/usePropertiesById.js deleted file mode 100644 index 5a247a25f..000000000 --- a/apis/nucleus/src/hooks/usePropertiesById.js +++ /dev/null @@ -1,9 +0,0 @@ -import useRpc from './useRpc'; -import { useModelStore } from './useModelStore'; - -export default function usePropertiesById(id) { - const [modelStore] = useModelStore(); - const model = modelStore.get(id); - const [properties, ...rest] = useRpc(model, 'getProperties'); - return [properties, (p) => model.setProperties(p), ...rest]; -} diff --git a/commands/serve/lib/webpack.build.js b/commands/serve/lib/webpack.build.js index d93074c80..b9ce93678 100644 --- a/commands/serve/lib/webpack.build.js +++ b/commands/serve/lib/webpack.build.js @@ -23,7 +23,7 @@ const cfg = ({ srcDir, distDir, dev = false, serveConfig = {} }) => { eHub: [path.resolve(srcDir, 'eHub')], fixtures: [path.resolve(__dirname, './fixtures.js')], }, - devtool: dev ? 'source-map' : false, + devtool: 'source-map', output: { path: distDir, filename: '[name].js', diff --git a/commands/serve/web/components/Visualize/Cell.jsx b/commands/serve/web/components/Visualize/Cell.jsx index 47f7870d3..baa7ffffc 100644 --- a/commands/serve/web/components/Visualize/Cell.jsx +++ b/commands/serve/web/components/Visualize/Cell.jsx @@ -6,6 +6,7 @@ import { styled } from '@mui/material/styles'; import { Grid, Toolbar, IconButton, CircularProgress } from '@mui/material'; import SvgIcon from '@nebula.js/ui/icons/SvgIcon'; +import { useModelStore } from '@nebula.js/nucleus/src/hooks/useModelStore'; import PropsDialog from './PropertiesDialog'; @@ -35,6 +36,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ export default function ({ id, expandable, minHeight }) { const language = 'en-US'; // TODO - useLocale const app = useContext(AppContext); + const [modelStore] = useModelStore(); const [model, setModel] = useState(null); const [exporting, setExporting] = useState(false); const [localViz, setLocalViz] = useState(null); @@ -47,6 +49,7 @@ export default function ({ id, expandable, minHeight }) { useEffect(() => { const v = app.getObject(id).then((m) => { setModel(m); + modelStore.set(`${id}`, m); return m; }); diff --git a/commands/serve/web/components/Visualize/Properties.jsx b/commands/serve/web/components/Visualize/Properties.jsx index bdf237286..93896060c 100644 --- a/commands/serve/web/components/Visualize/Properties.jsx +++ b/commands/serve/web/components/Visualize/Properties.jsx @@ -2,14 +2,14 @@ import React, { useCallback, useState, useContext } from 'react'; import { Divider, Grid, Checkbox, FormControlLabel } from '@mui/material'; -import usePropertiesById from '@nebula.js/nucleus/src/hooks/usePropertiesById'; +import useProperties from './useProperties'; import AppContext from '../../contexts/AppContext'; import Data from './property-panel/Data'; import generateComponents from './AutoComponents'; export default function Properties({ viz, sn, isTemp, storage, flags }) { - const [properties, setProperties] = usePropertiesById(viz.id); + const [properties, setProperties] = useProperties(viz?.model); const app = useContext(AppContext); const [isReadCacheEnabled, setReadCacheEnabled] = useState(storage.get('readFromCache') !== false); diff --git a/commands/serve/web/components/Visualize/Stage.jsx b/commands/serve/web/components/Visualize/Stage.jsx index 8dca9fb84..3c0d973e9 100644 --- a/commands/serve/web/components/Visualize/Stage.jsx +++ b/commands/serve/web/components/Visualize/Stage.jsx @@ -2,7 +2,7 @@ import React, { useEffect, useContext } from 'react'; import { Grid } from '@mui/material'; -import usePropertiesById from '@nebula.js/nucleus/src/hooks/usePropertiesById'; +import useProperties from './useProperties'; import Cell from './Cell'; import NebulaContext from '../../contexts/NebulaContext'; @@ -11,7 +11,7 @@ import VizContext from '../../contexts/VizContext'; export default function Stage({ info, storage, uid }) { const nebbie = useContext(NebulaContext); const { activeViz, setActiveViz } = useContext(VizContext); - const [properties] = usePropertiesById(uid); + const [properties] = useProperties(activeViz?.model); useEffect(() => { if (!uid) { diff --git a/commands/serve/web/components/Visualize/Visualize.jsx b/commands/serve/web/components/Visualize/Visualize.jsx index bcd085fd8..6022e2764 100644 --- a/commands/serve/web/components/Visualize/Visualize.jsx +++ b/commands/serve/web/components/Visualize/Visualize.jsx @@ -4,6 +4,9 @@ import { useNavigate } from 'react-router-dom'; import { embed } from '@nebula.js/stardust'; import { createTheme, ThemeProvider, StyledEngineProvider } from '@nebula.js/ui/theme'; import { WbSunny, Brightness3, ColorLens, Language, Home } from '@nebula.js/ui/icons'; +import InstanceContext from '@nebula.js/nucleus/src/contexts/InstanceContext'; +import initModelStore from '@nebula.js/nucleus/src/stores/new-model-store'; +import initSelectionStore from '@nebula.js/nucleus/src/stores/new-selections-store'; import { Grid, @@ -84,6 +87,7 @@ export default function Visualize() { const [initialized, setInit] = useState(false); const [nebbie, setNebbie] = useState(null); const customThemes = Array.isArray(info?.themes) && info.themes.length ? ['light', 'dark', ...info.themes] : []; + const [context, setContext] = useState(); const theme = useMemo(() => createTheme(currentMuiThemeName), [currentMuiThemeName]); @@ -183,6 +187,17 @@ export default function Visualize() { if (app) app.destroySessionObject(uid.current); }; window.addEventListener('beforeunload', unload); + + if (app) { + const modelStore = initModelStore(app.id); + const selectionStore = initSelectionStore(app.id); + setContext({ + modelStore, + selectionStore, + myKey: 'this is the key here', + }); + } + return () => { window.removeEventListener('beforeunload', unload); }; @@ -221,183 +236,189 @@ export default function Visualize() { } setObjectListMode(listMode); }; - + // For another time: refactor away the usage of internal Nebula hooks so we don't need the InstanceContext here. return ( - - - - - - - - - - - - nebula.js logo - - - - - navigate('/')} size="large"> - - - - - - Create} value={0} /> - Edit} value={1} /> - - - - - State: - - - - Select - Active - Passive - Edit - - - - {customThemes.length ? ( - <> - setThemeChooserAnchorEl(e.currentTarget)} - size="large" - > - - - setThemeChooserAnchorEl(null)} - > - {customThemes.map((t) => ( - handleThemeChange(t)} - > - {t} - - ))} - - - ) : ( - - {currentThemeName === 'dark' ? ( - - ) : ( - - )} - - )} - - - - setLanguageChooserAnchorEl(null)} - > - {languages.map((t) => ( - handleLanguageChange(t)}> - {t} - - ))} - - - - - - - -
- + + + + + - - {sn ? ( - + + + + + + + nebula.js logo + + + + + navigate('/')} size="large"> + + + - {objectListMode ? ( - - ) : ( - + + Create} value={0} /> + Edit} value={1} /> + + + + + State: + + + + Select + Active + Passive + Edit + + + + {customThemes.length ? ( + <> + setThemeChooserAnchorEl(e.currentTarget)} + size="large" + > + + + setThemeChooserAnchorEl(null)} + > + {customThemes.map((t) => ( + handleThemeChange(t)} + > + {t} + + ))} + + + ) : ( + + {currentThemeName === 'dark' ? ( + + ) : ( + + )} + + )} + + + + setLanguageChooserAnchorEl(null)} + > + {languages.map((t) => ( + handleLanguageChange(t)} + > + {t} + + ))} + + + + + + + +
+ + + + {sn ? ( + + + {objectListMode ? ( + + ) : ( + + )} + + {activeViz && ( + + + )} - {activeViz && ( - - + ) : ( + + + - )} - - ) : ( - - - - - )} - + )} + + - - - - - + + + + + ); } diff --git a/commands/serve/web/components/Visualize/useProperties.js b/commands/serve/web/components/Visualize/useProperties.js new file mode 100644 index 000000000..bbeee7688 --- /dev/null +++ b/commands/serve/web/components/Visualize/useProperties.js @@ -0,0 +1,22 @@ +import { useEffect, useState } from 'react'; + +export default function useProperties(model) { + const [properties, setProps] = useState(); + + useEffect(() => { + if (model) { + const onChanged = () => { + model.getProperties().then((props) => { + setProps(props); + }); + }; + model.on('changed', onChanged); + onChanged(); + return () => { + model.removeListener('changed', onChanged); + }; + } + return () => {}; + }, [model]); + return [properties, (p) => model.setProperties(p)]; +}