diff --git a/src/charts/shape.js b/src/charts/shape.js
index 4545337..3962a56 100644
--- a/src/charts/shape.js
+++ b/src/charts/shape.js
@@ -31,10 +31,10 @@ export const ShapeType = {
     */
     Segment: {name: 'Trend Line', code: 'trend_line'},
     Ray: {name: 'Ray', code: 'ray'},
-    Line: {name: 'Extended Line', code: 'extended'},
+    Line: {name: 'Extended Line', code: 'extended', drawingProp: 'linetoolextended'},
     HRay: {name: 'Horizontal Ray', code: 'horizontal_ray'},
     HLine: {name: 'Horizontal Line', code: 'horizontal_line', drawingProp: 'linetoolhorzline'},
-    VLine: {name: 'Vertical Line', code: 'vertical_line'},
+    VLine: {name: 'Vertical Line', code: 'vertical_line', drawingProp: 'linetoolvertline'},
     PriceRange: {name: 'Price Range', code: 'price_range'},
 }
 
@@ -95,7 +95,7 @@ export class Shape {
     //
 
     setModel(model) {
-        // console.log('shape setModel', model)
+        console.log('shape setModel', model)
 
         if (model.color)
             this.model.color = model.color
@@ -327,9 +327,9 @@ export class Shape {
 let lineChangeInfo = null
 
 function dirtyPoints(pointsA, pointsB) {
-    if (pointsB===null)
-        return pointsA !== null
-    if (pointsA===null)
+    if (pointsB===null || pointsB===undefined)
+        return pointsA !== null && pointsA !== undefined
+    if (pointsA===null || pointsA===undefined)
         return pointsB.length > 0
     if (pointsA.length!==pointsB.length)
         return true
@@ -543,10 +543,8 @@ export class DLine extends Line {
         this.model.pointA = null  // {time:..., price:...}
         this.model.pointB = null
 
-        // since VLines must be on the start of an OHLC boundry, we track those value separately
-        this.shapeTimes = null
-
         this.setModel(model) // call setModel at the end
+        console.log('initial shape model', {...model})
     }
 
 
@@ -557,10 +555,14 @@ export class DLine extends Line {
     }
 
     setModel(model) {
+        console.log('DLine setModel', {...this.model}, {...model})
         super.setModel(model)
         if (model.pointA === null || model.pointB === null)
             this.delete()
-        else if (dirtyPoints(this.model.pointA, model.pointA) || dirtyPoints(this.model.pointB, model.pointB)) {
+        else if (
+            dirtyPoints(this.model.pointA, model.pointA) ||
+            dirtyPoints(this.model.pointB, model.pointB)
+        ) {
             this.model.pointA = model.pointA
             this.model.pointB = model.pointB
             this.setPoints([model.pointA, model.pointB])
@@ -575,7 +577,7 @@ export class DLine extends Line {
         }
         if (dirty) {
             super.onPoints(points);
-            this.updateModel({pointA: points[0], pointB: points[0]})
+            this.updateModel({pointA: points[0], pointB: points[1]})
         }
     }
 }
diff --git a/src/components/Vault.vue b/src/components/Vault.vue
index 88a9284..44ad2e8 100644
--- a/src/components/Vault.vue
+++ b/src/components/Vault.vue
@@ -23,7 +23,7 @@
     </PhoneCard>
   -->
   <div>
-    <div v-if="s.vaults.length<=num">
+    <div v-if="!hasVault">
       <v-card-title>
         Creating Your Dexorder Vault
         <v-icon icon="mdi-safe-square" size="small" color="grey-darken-1" style="vertical-align: baseline"/>
@@ -48,7 +48,7 @@
         Please wait while your vault is being created. This should only take a few seconds...
       </v-card-text>
     </div>
-    <div v-if="s.vaults.length>num" :class="empty?'maxw':''">
+    <div v-if="hasVault" :class="empty?'maxw':''">
 <!--      <v-card-title>-->
 <!--        Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }}-->
 <!--      </v-card-title> &lt;!&ndash; todo vault nicknames &ndash;&gt;-->
@@ -116,7 +116,7 @@ const balances = computed(()=>{
   return bs || {}
 })
 const empty = computed(()=>Object.values(balances.value).length===0)
-const exists = computed(()=>s.vaults.length>0)
+const hasVault = computed(()=>s.vault!==null)
 
 const withdrawToken = ref(null)
 const withdrawShow = ref(false)
diff --git a/src/components/chart/BuilderFactory.vue b/src/components/chart/BuilderFactory.vue
index e417074..fd84d9d 100644
--- a/src/components/chart/BuilderFactory.vue
+++ b/src/components/chart/BuilderFactory.vue
@@ -7,6 +7,7 @@ import {computed} from "vue";
 import DCABuilder from "@/components/chart/DCABuilder.vue";
 import LimitBuilder from "@/components/chart/LimitBuilder.vue";
 import MarketBuilder from "@/components/chart/MarketBuilder.vue";
+import DiagonalBuilder from "@/components/chart/DiagonalBuilder.vue";
 
 const props = defineProps(['order', 'builder'])
 
@@ -18,6 +19,8 @@ const component = computed(()=>{
       return DCABuilder
     case 'LimitBuilder':
       return LimitBuilder
+    case 'DiagonalBuilder':
+      return DiagonalBuilder
     default:
       console.error('Unknown builder component '+props.builder.component)
       return null
diff --git a/src/components/chart/ChartOrder.vue b/src/components/chart/ChartOrder.vue
index 811fe5e..d4169e4 100644
--- a/src/components/chart/ChartOrder.vue
+++ b/src/components/chart/ChartOrder.vue
@@ -32,13 +32,16 @@
           <span :style="colorStyle" class="ma-3">Add condition:</span>
           <v-btn :color="color" variant="text" prepend-icon="mdi-clock-outline" @click="build(order,'DCABuilder')">DCA</v-btn>
           <v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
+          <v-btn :color="color" variant="text" prepend-icon="mdi-vector-line" @click="build(order,'DiagonalBuilder')">Diagonal</v-btn>
+<!--
           <v-tooltip text="Coming Soon!" location="top">
             <template v-slot:activator="{ props }">
               <span v-bind="props">
-                <v-btn :color="color" variant="text" prepend-icon="mdi-vector-line" disabled>Diagonal</v-btn>
+                <v-btn :color="color" variant="text" prepend-icon="mdi-information-outline">New Thing!</v-btn>
               </span>
             </template>
           </v-tooltip>
+-->
           <!-- mdi-ray-start-end mdi-vector-polyline -->
         </div>
       </div>
diff --git a/src/components/chart/DiagonalBuilder.vue b/src/components/chart/DiagonalBuilder.vue
index c0a0a09..c242d57 100644
--- a/src/components/chart/DiagonalBuilder.vue
+++ b/src/components/chart/DiagonalBuilder.vue
@@ -2,9 +2,10 @@
   <rung-builder name="Diagonal" :order="order" :builder="builder" v-model="endpoints"
                 :shape="DLine" :mode="0"
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
-                :get-points-value="getPointsValue"
                 :set-values="setLines" :set-weights="setWeights"
                 :std-width="stdWidth" :build-tranches="buildTranches">
+    <span>(Diagonals)</span>
+<!--
     <table>
       <tbody>
       <template v-if="prices.length>1">
@@ -37,12 +38,13 @@
       </tr>
       </tbody>
     </table>
+-->
   </rung-builder>
 </template>
 
 <script setup>
-import {allocationText, applyLine, applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
-import {interpolate, sideColor} from "@/misc.js";
+import {applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
+import {sideColor} from "@/misc.js";
 import {useOrderStore, useStore} from "@/store/store.js";
 import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 import RungBuilder from "@/components/chart/RungBuilder.vue";
@@ -65,8 +67,8 @@ const defaultColor = computeDefaultColor()
 
 // Fields must be defined in order to be reactive
 builderDefaults(props.builder, {
-  lineA: [null, null], // [{time, price}, {time, price}]
-  lineB: [null, null],
+  lineA: null, // [{time, price}, {time, price}]
+  lineB: null,
   rungs: 1,
   skew: 0,
   color: defaultColor,
@@ -97,12 +99,13 @@ function buildTranches() {
 
 
 function flattenLine(l) {
-  return l === null ? [null, null, null, null] : [l[0].time, l[0].price, l[1].time, l[1].price]
+  return l === null ? null : [l[0].time, l[0].price, l[1].time, l[1].price]
 }
 
 
 function buildLine(f) {
-  return f[0] === null ? null : [{time: f[0], price: f[1]}, {time: f[2], price: f[3]}]
+  console.log('buildLine', f)
+  return f === null ? null : [{time: f[0], price: f[1]}, {time: f[2], price: f[3]}]
 }
 
 const _endpoints = ref([flattenLine(props.builder.lineA), flattenLine(props.builder.lineB)])
@@ -111,13 +114,16 @@ const endpoints = computed({
     return _endpoints.value
   },
   set(v) {
-    const [a, b] = v
+    let [a, b] = v
+    a = buildLine(a)
+    b = buildLine(b)
+    // noinspection JSValidateTypes
+    _endpoints.value = v
     update(a, b)
   }
 })
 
 function update(a, b) { // a and b are lines of two points
-  _endpoints.value = [flattenLine(a), flattenLine(b)]
   const newBuilder = {...props.builder}
   newBuilder.lineA = a
   newBuilder.lineB = b
@@ -134,6 +140,7 @@ const innerIndexes = computed(() => {
 })
 
 
+// these are set by the RungBuilder
 const flatLines = ref([])
 const weights = ref([])
 
@@ -146,25 +153,43 @@ function setWeights(ws) {
 }
 
 
-const color = computed(() => props.builder.color ? props.builder.color : defaultColor)
-
-const stdWidth = [2 * co.meanRange, 2 * co.meanRange]
+const stdWidth = computed(()=>[0, 2 * co.meanRange, 0, 2 * co.meanRange])
 
 
 function getModelValue(model) {
-  if (!model)
+  // model is the DLine shape's model object
+  if (!model.pointA || !model.pointB)
     return null
-  return [flattenLine(model.lineA), flattenLine(model.lineB)]
+  const result = flattenLine([model.pointA, model.pointB]);
+  console.log('getModelValue', {...model}, result)
+  return result // this is the vector the RungBuilder will interpolate
 }
 
-function getPointsValue(points) {
-  return points[0].price
-}
 
 function setModelValue(model, value) {
-  // console.log('setModelValue->', model.price, value)
-  if (model.price !== value)
-    model.price = value
+  const oldModel = {...model};
+  console.log('setModelValue', oldModel, value)
+  const oldLine = !model.pointA || !model.pointB ? null : [model.pointA, model.pointB]
+  const line = buildLine(value)
+  if (dirtyLine(oldLine, line)) {
+    if (line===null) {
+      model.pointA = null
+      model.pointB = null
+    }
+    else {
+      model.pointA = line[0]
+      model.pointB = line[1]
+    }
+  }
+  console.log('setModelValue end', oldModel, value, model)
+}
+
+
+function dirtyLine(a, b) {
+  console.log('dirtyLine', a, b)
+  return a === b ? false :
+      a === null && b !== null || a !== null && b === null ||
+      a[0].time !== b[0].time || a[0].price !== b[0].price || a[1].time !== b[1].time || a[1].price !== b[1].price
 }
 
 
@@ -178,4 +203,3 @@ td.weight {
   text-align: right;
 }
 </style>
-
diff --git a/src/components/chart/LimitBuilder.vue b/src/components/chart/LimitBuilder.vue
index d4c05d0..b8cfa6b 100644
--- a/src/components/chart/LimitBuilder.vue
+++ b/src/components/chart/LimitBuilder.vue
@@ -3,7 +3,6 @@
                 v-model="priceEndpoints" :mode="0" :flip="flipped"
                 :shape="HLine"
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
-                :get-points-value="getPointsValue"
                 :set-values="setPrices" :set-weights="setWeights"
                 :std-width="stdWidth" :build-tranches="buildTranches">
     <table>
@@ -193,7 +192,7 @@ function setWeights(ws) { weights.value = ws }
 
 const color = computed(()=>props.builder.color ? props.builder.color : defaultColor)
 
-const stdWidth = 2*co.meanRange
+const stdWidth = computed(()=>2*co.meanRange)
 
 
 function getModelValue(model) {
@@ -202,9 +201,6 @@ function getModelValue(model) {
   return model.price
 }
 
-function getPointsValue(points) {
-  return points[0].price
-}
 
 function setModelValue(model, value) {
   // console.log('setModelValue->', model.price, value)
diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue
index 9d3fe7d..d0e0aef 100644
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -35,7 +35,6 @@
 
 <script setup>
 import BuilderPanel from "@/components/chart/BuilderPanel.vue";
-import {useOrderStore} from "@/store/store.js";
 import {deleteBuilder, linearWeights, useChartOrderStore} from "@/orderbuild.js";
 import {linspace, sideColor} from "@/misc.js";
 import {computed, watchEffect} from "vue";
@@ -44,15 +43,14 @@ import {cancelDrawing} from "@/charts/chart.js";
 import {
   devectorize,
   vectorAdd,
-  vectorDiv,
-  vectorMul,
-  vectorSub,
+  vectorDiv, vectorEquals,
   vectorIsNull,
+  vectorIsZero,
   vectorize,
-  vectorIsZero
+  vectorMul,
+  vectorSub
 } from "@/vector.js";
 
-const os = useOrderStore()
 const co = useChartOrderStore()
 const endpoints = defineModel('modelValue')  // 2-item list of points/values
 const props = defineProps({
@@ -60,7 +58,7 @@ const props = defineProps({
   order: Object,
   builder: Object,
   buildTranches: Function,
-  stdWidth: Number,
+  stdWidth: [Number, Array],
   shape: Function,  // shape() -> Shape
   mode: { type: Number, default: 0 }, // rung addition mode: 0 = split, 1 = extend
   flip: { type: Boolean, default: false }, // if true, the skew slider is flipped upside-down
@@ -89,6 +87,7 @@ watchEffect(()=>{
 
 
 function setEndpoints(a, b) {
+  console.log('rb setting endpoints', devectorize(a), devectorize(b))
   endpoints.value = [devectorize(a), devectorize(b)]
 }
 
@@ -234,7 +233,7 @@ function translateOnModel(shape) {
     const prev = getModelValue(oldModel)
     const cur = vectorize(getModelValue(this.model))
     const delta = vectorSub(cur, prev)
-    // console.log('delta', shape.id, prev, cur, delta)
+    console.log('delta', shape.id, prev, cur, delta)
     let [a, b] = endpoints.value
     a = vectorize(a)
     if (!vectorIsZero(delta)) {
@@ -254,7 +253,8 @@ function setModelColor(model) {
 const shapeA = createShape(endpoints.value[0], {color: defaultColor},
     function (model) {
       const value = getModelValue(model);
-      if (value !== endpoints.value[0])
+      console.log('gotModelValue', model, value)
+      if ( !vectorEquals(value, endpoints.value[0]) )
         setEndpoints(value, endpoints.value[1])
       setModelColor(model)
     },
@@ -266,7 +266,7 @@ if (props.mode===1)
 const shapeB = createShape(endpoints.value[1], {color:defaultColor},
     function (model) {
       const value = getModelValue(model);
-      if (value !== endpoints.value[1])
+      if ( !vectorEquals(value, endpoints.value[1]) )
         setEndpoints(endpoints.value[0], value)
       setModelColor(model)
     },
diff --git a/src/vector.js b/src/vector.js
index 2bdd1ff..104b92f 100644
--- a/src/vector.js
+++ b/src/vector.js
@@ -28,6 +28,19 @@ export function vectorIsZero(value) {
 }
 
 
+export function vectorEquals(a, b) {
+    if (a === b) return true
+    if (a === null && b !== null || a !== null && b === null) return false
+    // noinspection JSObjectNullOrUndefined
+    if (a.length !== b.length )
+        return false
+    for (let i = 0; i < a.length; i++)
+        if (a[i] !== b[i])
+            return false
+    return true
+}
+
+
 export function vectorAdd(a, b) {
     const result = []
     const scalarB = b.length === undefined