"breakdown" language for breakout sells

src/charts/shape.js

@@ -173,7 +173,7 @@ export class Shape {
         // text label
         let text = allocationText(this.model.buy, this.model.allocation, this.model.amount, this.model.baseSymbol, this.model.amountSymbol)
         if (this.model.breakout)
-            text += ' ' + (this.model.textLocation==='above' ? '▲Breakout▲' : '▼Breakout▼')
+            text += ' ' + (this.model.textLocation==='above' ? '▲Breakout▲' : '▼Breakdown▼')
         if (this.model.extraText)
             text += ' '+this.model.extraText
         if (this.debug) text = `${this.id} ` + text

src/common.js

@@ -153,4 +153,8 @@ export function timestamp(date = null) {
 
 export function dateString(datetime) {
     return datetime.toLocaleString({dateStyle: 'medium', timeStyle: 'short'})
-}
+}
+
+export function logicalXOR(a, b) {
+    return (a || b) && !(a && b)
+}

src/components/chart/DiagonalBuilder.vue

@@ -405,12 +405,12 @@ function dirtyLine(a, b) {
   return result
 }
 
-const name = computed(()=>props.builder.breakout?'Breakout':'Limit')
+const name = computed(()=>props.builder.breakout?(props.order.buy?'Breakout':'Breakdown'):'Limit')
 
 const description = computed(()=>{
   const buy = props.order.buy
   const above = buy === props.builder.breakout
-  const plural = props.builder
+  const plural = props.builder.rungs > 1 ? 's' : ''
   return (buy?'Buy ':'Sell ')+(above?'above':'below')+' the line'+(plural?'s':'')
 })
 

src/components/chart/LimitBuilder.vue

@@ -1,5 +1,5 @@
 <template>
-  <rung-builder :name="(builder.breakout?'Breakout':'Limit')+(builder.rungs>1?' Ladder':'')"
+  <rung-builder :name="(builder.breakout?(order.buy?'Breakout':'Breakdown'):'Limit')+(builder.rungs>1?' Ladder':'')"
                 :description="description"
                 :order="order" :builder="builder"
                 v-model="priceEndpoints" :mode="0" :flip="flipped"
@@ -200,7 +200,8 @@ const stdWidth = computed(()=>co.meanRange)
 const description = computed(()=>{
   const buy = props.order.buy
   const above = buy === props.builder.breakout
-  return (buy?'Buy ':'Sell ')+(above?'above':'below')+' the line'
+  const plural = props.builder.rungs > 1 ? 's' : ''
+  return (buy?'Buy ':'Sell ')+(above?'above':'below')+' the line'+plural
 })
 
 function getModelValue(model) {

src/components/chart/RungBuilder.vue

@@ -18,9 +18,12 @@
                     :disabled="rungsDisabled"
                     style="width: 6.6em; max-height: 2.5em; height: 2.5em"
       />
-      <v-switch v-model="builder.breakout" label="Breakout" persistent-hint :color="color" hide-details/>
+      <v-switch v-model="breakout" :label="order.buy?'Breakout':'Breakdown'"
+                persistent-hint :color="switchColor" :base-color="switchColor" hide-details direction="vertical"
+                density="compact"
+      />
       <div class="mx-auto"><span style="font-size: .7em; vertical-align: top"
-                                 :style="builder.breakout?{color:color}:null">
+                                 :style="builder.breakout?{color:new Color(color).lighten(0.5).string()}:null">
         {{description}}
       </span></div>
     </div>
@@ -66,6 +69,7 @@ import {
   vectorNeg,
   vectorSub
 } from "@/vector.js";
+import {logicalXOR} from "@/common.js";
 
 const co = useChartOrderStore()
 const endpoints = defineModel('modelValue')  // 2-item list of points/values
@@ -111,6 +115,11 @@ watchEffect(()=>{
   }
 })
 
+const breakout = computed({
+  get() {return !logicalXOR(props.builder.breakout, props.order.buy)},
+  set(v) {props.builder.breakout = !logicalXOR(v, props.order.buy)},
+})
+
 function setEndpoints(a, b) {
   endpoints.value = [devectorize(a), devectorize(b)]
 }
@@ -235,6 +244,7 @@ const color = computed({
     props.builder.color = c.saturation <= maxLightness ? v : c.lightness(maxLightness).rgb().string()
   }
 })
+const switchColor = computed(()=>props.builder.breakout ? color.value : null)
 const colorStyle = computed(() => {
   // return {'color': color.value}
   return {}