estilo node nav bar

Piemontez · May 3, 2024 · d5dc7be · d5dc7be
1 parent 3fba521
commit d5dc7be
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 30 deletions.
diff --git a/src/ide/assets/fontawasome.library.ts b/src/ide/assets/fontawasome.library.ts
@@ -2,10 +2,12 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import {
   faAnglesLeft,
   faAnglesRight,
+  faBars,
   faEye,
   faEyeSlash,
   faFile,
   faFolderOpen,
+  faMagnifyingGlass,
   faMoon,
   faPlayCircle,
   faPlus,
@@ -39,4 +41,6 @@ library.add(
   faEye,
   faEyeSlash,
   faSearch,
+  faBars,
+  faMagnifyingGlass,
 );
diff --git a/src/ide/components/NodeComponent/NodeDisplay.tsx b/src/ide/components/NodeComponent/NodeDisplay.tsx
@@ -36,10 +36,11 @@ export const NodeZoom = ({
         marginLeft: 150 + pos.mx * pos.canvasScale,
         top: 20 + pos.my * pos.canvasScale,
         position: 'absolute',
-        border: '1px solid',
       }}
     >
-      <canvas ref={canvasRef} height={NodeSizes.defaultHeight} />
+      <div className="node-body">
+        <canvas ref={canvasRef} height={NodeSizes.defaultHeight} />
+      </div>
     </div>
   );
 };

diff --git a/src/ide/components/NodeComponent/NodeTab.tsx b/src/ide/components/NodeComponent/NodeTab.tsx
@@ -1,44 +1,45 @@
-import { Button, Col, Form, Row } from 'react-bootstrap';
+import { Button, ButtonGroup, Col, Dropdown, DropdownButton, Row } from 'react-bootstrap';
 import { CVFComponent } from '.';
 import { CVFComponentOptions } from './CVFComponentOptions';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useNodeStore } from '../../../core/contexts/NodeStore';
 import { ZoomScale } from '../../types/ZoomScale';
 
 const NodeTab = ({ component }: { component: CVFComponent }) => {
-  const { scale: zoom, options } = component.state;
+  const { options } = component.state;
   const notDisplay = options & CVFComponentOptions.NOT_DISPLAY;
   return (
     <div className="node-header">
       <Row>
         <Col>{component.title}</Col>
         <Col xs={5}>
-          <Button variant="outline-light" size="sm" onClick={() => useNodeStore.getState().removeNode(component.props.id)}>
-            <FontAwesomeIcon icon={'window-close'} />
-          </Button>
-          <Button
-            variant="outline-light"
-            size="sm"
-            onClick={() =>
-              notDisplay ? component.removeOption(CVFComponentOptions.NOT_DISPLAY) : component.addOption(CVFComponentOptions.NOT_DISPLAY)
-            }
-          >
-            <FontAwesomeIcon className={notDisplay ? 'text-danger' : ''} icon={notDisplay ? 'eye-slash' : 'eye'} />
-          </Button>
-          <Form.Select
-            value={(zoom as number).toFixed ? (zoom as number).toFixed(2) : zoom}
-            onChange={(e) => component.changeScale(e.target.value === ZoomScale.PERC_AUTO ? ZoomScale.PERC_AUTO : parseFloat(e.target.value || '1'))}
-          >
-            <option>Zoom</option>
-            <option value={ZoomScale.PERC_025}>25%</option>
-            <option value={ZoomScale.PERC_033}>33%</option>
-            <option value={ZoomScale.PERC_050}>50%</option>
-            <option value={ZoomScale.PERC_075}>75%</option>
-            <option value={ZoomScale.PERC_100}>100%</option>
-            <option value={ZoomScale.PERC_150}>150%</option>
-            <option value={ZoomScale.PERC_200}>200%</option>
-            <option value={ZoomScale.PERC_AUTO}>Auto scale</option>
-          </Form.Select>
+          <ButtonGroup aria-label="Basic example">
+            {/* <DropdownButton size="sm"  title={<FontAwesomeIcon icon={'bars'} />}> */}
+            {/* <Dropdown.Item eventKey="1">Show source</Dropdown.Item> */}
+            {/* </DropdownButton> */}
+            <DropdownButton size="sm" as={ButtonGroup} title={<FontAwesomeIcon icon={'magnifying-glass'} />}>
+              <Dropdown.Item onClick={() => component.changeScale(ZoomScale.PERC_025)}>25%</Dropdown.Item>
+              <Dropdown.Item onClick={() => component.changeScale(ZoomScale.PERC_033)}>33%</Dropdown.Item>
+              <Dropdown.Item onClick={() => component.changeScale(ZoomScale.PERC_050)}>50%</Dropdown.Item>
+              <Dropdown.Item onClick={() => component.changeScale(ZoomScale.PERC_075)}>75%</Dropdown.Item>
+              <Dropdown.Item onClick={() => component.changeScale(ZoomScale.PERC_100)}>100%</Dropdown.Item>
+              <Dropdown.Item onClick={() => component.changeScale(ZoomScale.PERC_150)}>150%</Dropdown.Item>
+              <Dropdown.Item onClick={() => component.changeScale(ZoomScale.PERC_200)}>200%</Dropdown.Item>
+              <Dropdown.Item onClick={() => component.changeScale(ZoomScale.PERC_AUTO)}>Auto scale</Dropdown.Item>
+            </DropdownButton>
+            <Button
+              variant="outline-light"
+              size="sm"
+              onClick={() =>
+                notDisplay ? component.removeOption(CVFComponentOptions.NOT_DISPLAY) : component.addOption(CVFComponentOptions.NOT_DISPLAY)
+              }
+            >
+              <FontAwesomeIcon className={notDisplay ? 'text-danger' : ''} icon={notDisplay ? 'eye-slash' : 'eye'} />
+            </Button>
+            <Button variant="outline-light" size="sm" onClick={() => useNodeStore.getState().removeNode(component.props.id)}>
+              <FontAwesomeIcon icon={'window-close'} />
+            </Button>
+          </ButtonGroup>
         </Col>
       </Row>
     </div>