Merge pull request #929 from vorth/measure-tab

Added Measure tab to online classic
vZome · Oct 31, 2024 · 80d3c7b · 80d3c7b
2 parents 06a7e2c + 875f505
commit 80d3c7b
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 24 deletions.
diff --git a/desktop/src/main/java/org/vorthmann/zome/ui/MeasurePanel.java b/desktop/src/main/java/org/vorthmann/zome/ui/MeasurePanel.java
@@ -118,9 +118,9 @@ public void run()
             	measures = controller .getCommandList( "measures" );
             	values = new String[ measures.length ];
             	for ( int i = 0; i < measures.length; i++ ) {
-					String measure = measures[i];
-					values[ i ] = controller .getProperty( measure );
-				}
+                String measure = measures[i];
+                values[ i ] = controller .getProperty( measure );
+              }
             	fireTableDataChanged();
             }
         }

diff --git a/online/serve/app/classic/classic.css b/online/serve/app/classic/classic.css
@@ -208,6 +208,7 @@ button:disabled > .toolbar-image {
 
 .editor-drawer {
   width: 320px;
+  border-inline-start: 1px solid darkgray;
 }
 
 .grid-rows-min-1 {
@@ -252,6 +253,21 @@ button:disabled > .toolbar-image {
   margin: 3px;
 }
 
+.tabs__content {
+  padding: 6px;
+}
+
+#camera-controls {
+  display: grid;
+  grid-template-rows: min-content min-content;
+}
+
+#ball-and-slider {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  border-block: 1px solid darkgray;
+}
+
 .scale-slider {
   margin: 9px;
   margin: auto;

diff --git a/online/serve/app/kobalte.css b/online/serve/app/kobalte.css
@@ -26,7 +26,7 @@
 }
 .tabs__indicator[data-orientation="horizontal"] {
   bottom: -1px;
-  height: 2px;
+  height: 3px;
 }
 .tabs__indicator[data-orientation="vertical"] {
   right: -1px;
@@ -37,9 +37,8 @@
   padding: 8px 16px;
   outline: none;
   border: none;
-  font-size: large;
+  font-size: medium;
   text-transform: capitalize;
-  color: mediumblue;
 }
 .tabs__trigger:hover {
   background-color: hsl(0 0% 98%);

diff --git a/online/src/app/classic/classic.jsx b/online/src/app/classic/classic.jsx
@@ -1,12 +1,16 @@
 
+import { createSignal } from 'solid-js';
+
 import { subController, useEditor } from '../framework/context/editor.jsx';
+import { Tab, Tabs } from '../framework/tabs.jsx';
 
 import { CameraControls } from './components/camera.jsx';
 import { StrutBuildPanel } from './components/strutbuilder.jsx';
 import { BookmarkBar, ToolBar, ToolFactoryBar } from './components/toolbars.jsx';
 import { SceneEditor } from './components/editor.jsx';
 import { ErrorAlert } from "./components/alert.jsx";
 import { SceneControls } from './components/scenecontrols.jsx';
+import { MeasurePanel } from './components/measure.jsx';
 
 export const ClassicEditor = () =>
 {
@@ -17,6 +21,9 @@ export const ClassicEditor = () =>
   const strutBuilder       = () => subController( rootController(), 'strutBuilder' );
   const toolsController    = () => subController( strutBuilder(), 'tools' );
 
+  const [ tab, setTab ] = createSignal( "Build" );
+  const changeTab = (event, newValue) => setTab( newValue );
+
   let alertRoot;
   return (
     <div id='classic' ref={alertRoot} style={{ display: 'grid', 'grid-template-rows': '1fr' }} class='whitesmoke-bkgd'>
@@ -37,9 +44,19 @@ export const ClassicEditor = () =>
 
         <div id='editor-drawer' class='grid-rows-min-1 editor-drawer'>
           <CameraControls/>
-          <div id="build-parts-measure" style={{ height: '100%' }}>
-            <StrutBuildPanel/>
-          </div>
+          <Tabs values={ [ 'Build', 'Parts', 'Measure'] } value={tab()} onChange={changeTab}>
+            <Tab value='Build'>
+              <div id="build-parts-measure" style={{ height: '100%' }}>
+                <StrutBuildPanel/>
+              </div>
+            </Tab>
+            <Tab value='Parts'>
+
+            </Tab>
+            <Tab value='Measure'>
+              <MeasurePanel/>
+            </Tab>
+          </Tabs>
         </div>
 
       </div>

diff --git a/online/src/app/classic/components/camera.jsx b/online/src/app/classic/components/camera.jsx
@@ -84,7 +84,7 @@ export const CameraControls = (props) =>
     <InteractionToolProvider>
       {/* provider and CameraTool just to get the desired cursor */}
       <SnapCameraTool/>
-      <div id='camera-controls' style={{ display: 'grid', 'grid-template-rows': 'min-content min-content' }}>
+      <div id='camera-controls'>
         <Stack spacing={1} direction="row" style={{ padding: '8px' }}>
           <FormControlLabel label="perspective" style={{ 'margin-right': '0' }}
             control={
@@ -100,8 +100,8 @@ export const CameraControls = (props) =>
           }/>
         </Stack>
 
-        <div id="ball-and-slider" style={{ display: 'grid', 'grid-template-columns': 'min-content 1fr' }}>
-          <div id="camera-trackball" style={{ border: '1px solid' }}>
+        <div id="ball-and-slider">
+          <div id="camera-trackball">
             <CameraProvider name='trackball' outlines={false} context={context}>
               <SceneCanvas scene={scene} height="200px" width="240px" rotationOnly={true} rotateSpeed={0.7}/>
             </CameraProvider>

diff --git a/online/src/app/classic/components/measure.jsx b/online/src/app/classic/components/measure.jsx
@@ -0,0 +1,41 @@
+
+import TableContainer from "@suid/material/TableContainer";
+import Table          from "@suid/material/Table";
+import TableBody      from "@suid/material/TableBody";
+import TableHead      from "@suid/material/TableHead";
+import TableRow       from "@suid/material/TableRow";
+import TableCell      from "@suid/material/TableCell";
+import Paper          from "@suid/material/Paper";
+
+import { controllerProperty, subController, useEditor } from '../../framework/context/editor.jsx';
+
+export const MeasurePanel = () =>
+{
+  const { rootController } = useEditor();
+  const measureController = () => subController( rootController(), 'measure' );
+  const measures = () => controllerProperty( measureController(), 'measures', 'measures', true );
+  const value = measure => controllerProperty( measureController(), measure );
+
+  const cellStyle = { padding: '6px 0px', border: '0px' };
+  const headerStyle = { ...cellStyle, borderBlockEnd: '1px solid darkgray', fontWeight: 'bold' };
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="measurements table" size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell align="left" component="th" sx={headerStyle}>Measurement</TableCell>
+            <TableCell align="left" component="th" sx={headerStyle}>Value</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <For each={measures()}>{ ( measure ) =>
+            <TableRow>
+              <TableCell align="left" component="th" scope="row" sx={cellStyle} >{ measure }</TableCell>
+              <TableCell align="left" component="th" scope="row" sx={cellStyle} >{ value( measure ) }</TableCell>
+            </TableRow>
+          }</For>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );  
+}
diff --git a/online/src/app/classic/tools/unified.jsx b/online/src/app/classic/tools/unified.jsx
@@ -36,7 +36,6 @@ const UnifiedTool = props =>
     },
 
     onClick: ( id, position, type, selected ) => {
-      console.log( 'UnifiedTool onClick' );
       controllerAction( pickingController(), 'SelectManifestation', { id } )
     },
 
@@ -48,7 +47,6 @@ const UnifiedTool = props =>
     onDragStart: ( evt, id, position, type, selected ) => {
       if ( type !== 'ball' )
         return;
-      console.log( 'UnifiedTool onDragStart' );
       setPosition( position );
       const { x, y, z } = new Vector3() .copy( eye() ) .sub( new Vector3( ...position ) ) .normalize();
       setLine( [ x, y, z ] );
@@ -57,7 +55,6 @@ const UnifiedTool = props =>
     },
     onDrag: () => {},
     onDragEnd: () => {
-      console.log( 'UnifiedTool onDragEnd' );
       if ( operating() ) {
         setOperating( null );
         endPreviewStrut();

diff --git a/online/src/wc/zometool/parts-list.jsx b/online/src/wc/zometool/parts-list.jsx
@@ -1,13 +1,11 @@
 import { render } from "solid-js/web";
-import {
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-} from "@suid/material";
+import TableContainer from "@suid/material/TableContainer";
+import Table          from "@suid/material/Table";
+import TableHead      from "@suid/material/TableHead";
+import TableRow       from "@suid/material/TableRow";
+import TableCell      from "@suid/material/TableCell";
+import TableBody      from "@suid/material/TableBody";
+import Paper          from "@suid/material/Paper";
 
 import { instructionsCSS } from "./zometool.css.js";
 

diff --git a/online/src/worker/legacy/controllers/editor.js b/online/src/worker/legacy/controllers/editor.js
@@ -60,6 +60,9 @@ export class EditorController extends com.vzome.desktop.controller.DefaultContro
     const quaternionController = new com.vzome.desktop.controller.VectorController( legacyField .basisVector( 4, com.vzome.core.algebra.AlgebraicVector.W4 ) );
     this .addSubController( "quaternion", quaternionController );
 
+    const measureController = new com.vzome.desktop.controller.MeasureController( editor, renderedModel );
+    this .addSubController( "measure", measureController );
+
     const strutBuilder = new com.vzome.desktop.controller.StrutBuilderController( editContext, legacyField )
       .withGraphicalViews( true )   // TODO use preset
       .withShowStrutScales( true ); // TODO use preset