diagonals working

src/components/chart/RungBuilder.vue

@@ -24,7 +24,7 @@
                 class="no-slider-bg ml-2 mr-4" hide-details/>
       <v-text-field type="number" v-model="skew100" min="-100" max="100"
                     density="compact" hide-details variant="outlined" label="Skew" step="5"
-                    :color="color" :base-color="color">
+                    :color="color" :base-color="color" class="skew">
         <template v-slot:prepend>
           <v-btn icon="mdi-scale-balance" variant="plain" @click="builder.skew=0" :color="color"/>
         </template>
@@ -68,6 +68,7 @@ const props = defineProps({
   setModelValue: Function,  // setModelValue(model,value) -> void
   setValues: Function,  // setValues(values:Array) -> void
   setWeights: Function,  // setWeights(values:Array) -> void
+  setShapes: Function,  // setShapes([shapeA, innerShape, ..., shapeB]) -> void
 })
 
 const flippedSign = computed(()=>props.flip?-1:1)
@@ -329,6 +330,7 @@ function adjustShapes() {
     for( const shape of interiorShapes )
       shape.delete()
     interiorShapes = []
+    props.setShapes([])
   }
   else if (vs.length === 1) {
     //
@@ -341,6 +343,7 @@ function adjustShapes() {
         shape.delete()
       interiorShapes = []
     }
+    props.setShapes([shapeA])
   }
   else {
     //
@@ -359,9 +362,11 @@ function adjustShapes() {
       else
         interiorShapes[i-1].setModel(makeModel(i))
     }
+    props.setShapes([shapeA, ...interiorShapes, shapeB])
   }
 }
 
+
 function deleteSelf() {
   if (endpoints.value[0]===null)
     cancelDrawing()
@@ -375,6 +380,7 @@ function deleteShapes() {
   for (const shape of interiorShapes)
     shape.delete()
   interiorShapes = []
+  props.setShapes([])
 }
 
 
@@ -393,4 +399,8 @@ if (!endpoints.value[0])
 :deep(.v-slider.no-slider-bg .v-slider-track__fill) {
   background-color: inherit !important;
 }
+.skew {
+  min-width: 9em;
+  max-width: 12em;
+}
 </style>