diff --git a/packages/app/src/components/Layout/toolsBar/index.jsx b/packages/app/src/components/Layout/toolsBar/index.jsx index 0e42075b..fda7f3a5 100644 --- a/packages/app/src/components/Layout/toolsBar/index.jsx +++ b/packages/app/src/components/Layout/toolsBar/index.jsx @@ -13,6 +13,7 @@ import "./index.less" export default class ToolsBar extends React.Component { state = { visible: false, + renders: [], } componentDidMount() { @@ -35,6 +36,24 @@ export default class ToolsBar extends React.Component { visible: to ?? !this.state.visible, }) }, + attachRender: (id, component, props) => { + this.setState({ + renders: [...this.state.renders, { + id: id, + component: component, + props: props, + }], + }) + + return component + }, + detachRender: (id) => { + this.setState({ + renders: this.state.renders.filter((render) => render.id !== id), + }) + + return true + } } render() { @@ -59,8 +78,6 @@ export default class ToolsBar extends React.Component { } )} > - -

@@ -83,7 +100,17 @@ export default class ToolsBar extends React.Component {

+ + + +
+ { + this.state.renders.map((render) => { + return React.createElement(render.component, render.props) + }) + } +
}} diff --git a/packages/app/src/components/Layout/toolsBar/index.less b/packages/app/src/components/Layout/toolsBar/index.less index 06678ef2..6be16664 100644 --- a/packages/app/src/components/Layout/toolsBar/index.less +++ b/packages/app/src/components/Layout/toolsBar/index.less @@ -7,6 +7,7 @@ right: 0; max-width: 20vw; + min-width: 320px; height: 100vh; height: 100dvh; @@ -80,4 +81,23 @@ z-index: 45; } } + + .attached_renders { + position: sticky; + + bottom: 0; + right: 0; + + display: flex; + flex-direction: column; + + align-items: center; + justify-content: flex-end; + + width: 100%; + + height: 100%; + + gap: 10px; + } } \ No newline at end of file