renamed tabs; "Click the chart!"

src/charts/chart.js

@@ -111,6 +111,7 @@ export const VerboseCallback = prototype(ShapeCallback, {
     onDelete: (shapeId)=>{console.log('onDelete')},
 })
 
+let drawingTool = null
 
 export function drawShape(shapeType, ...callbacks) {
     // puts the chart into a line-drawing mode for a new shape
@@ -119,6 +120,7 @@ export function drawShape(shapeType, ...callbacks) {
     if( co.drawingCallbacks )
         invokeCallbacks(co.drawingCallbacks, 'onUndraw')
     co.drawingCallbacks = callbacks
+    drawingTool = null
     co.drawing = true
     widget.selectLineTool(shapeType.code)
     invokeCallbacks(callbacks, 'onDraw')
@@ -162,8 +164,10 @@ const shapeCallbacks = {}
 
 function onSelectedLineToolChanged() {
     const tool = widget.selectedLineTool();
-    // console.log('line tool changed', tool)
+    console.log('line tool changed', tool)
-    if( tool !== 'cursor' ) // 'cursor' cannot be selected manually and only happens just before the 'create' event is issued
+    if (drawingTool===null)
+        drawingTool = tool
+    else if (tool!==drawingTool && useChartOrderStore().drawing)
         cancelDrawing();
 }
 
@@ -246,7 +250,7 @@ function drawingEventWorker() {
 }
 
 function doHandleDrawingEvent(id, event) {
-    // console.log('drawing event', id, event)
+    console.log('drawing event', id, event)
     const shape = event === 'remove' ? null : chart.getShapeById(id);
     if (event === 'create') {
         const co = useChartOrderStore();

src/components/Order.vue

@@ -45,7 +45,7 @@ function placeOrder() {
   const ts = props.tranches()
   const order = newOrder(tokenIn, tokenOut, route.exchange, route.fee, amt, os.amountIsInput, ts) // todo: minAmount, outputToOwner, chainOrder
   pendOrder(order)
-  router.push('/orders')
+  router.push('/status')
 }
 
 </script>

src/components/SplitPane.vue

@@ -1,4 +1,4 @@
-<!-- Adapted from https://phuoc.ng/collection/html-dom/create-resizable-split-views/ -->
+<!-- Adapted from https://phuoc.ng/collection/html-dom/order-resizable-split-views/ -->
 
 <template>
   <div class="container">

src/components/chart/ChartPlaceOrder.vue

@@ -1,5 +1,5 @@
 <template>
-    <toolbar-pane title="Create">
+    <toolbar-pane title="Order">
       <template v-slot:toolbar>
 <!--        <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>-->
         <v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder"
@@ -83,7 +83,7 @@ async function placeOrder() {
   else {
     await pendOrder(built[0])
     co.resetOrders()
-    router.push('/orders')
+    router.push('/status')
   }
 }
 

src/components/chart/ChartStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <toolbar-pane title="Orders" icon="mdi-format-list-bulleted-square">
+  <toolbar-pane title="Status" icon="mdi-format-list-bulleted-square">
     <needs-provider>
       <needs-signer>
         <orders/>

src/components/chart/LimitBuilder.vue

@@ -29,6 +29,7 @@
                       style="flex: 6em"
         />
       </div>
+      <div v-if="co.drawing" class="d-flex align-center pl-3"><v-icon icon="mdi-chat-alert-outline" color="grey" class="mr-1"/>Click the chart!</div>
       <div v-if="rungs>1" class="mx-2 d-flex align-center">
         <v-slider v-if="rungs>1" direction="vertical" min="-100" max="100" v-model="skew100" class="no-slider-bg ml-2 mr-4" hide-details/>
         <v-text-field type="number" v-model="skew100" min="-100" max="100"

src/components/chart/MarketBuilder.vue

@@ -1,8 +1,8 @@
 <template>
+<!-- todo slippage
     <row-bar :color="builder.color">
       <div class="bg-grey-lighten-1" style="width:1em">&nbsp;</div>
       <div style="min-width: 3em; font-size: larger" class="align-self-start ma-3">Market Order</div>
-<!-- todo slippage
       <div>
         <v-text-field type="number" v-model="builder.slippage"
                       density="compact" hide-details class="mx-1 my-2" variant="outlined"
@@ -13,8 +13,8 @@
           <template v-slot:append-inner>%</template>
         </v-text-field>
       </div>
--->
     </row-bar>
+-->
 </template>
 
 <script setup>

src/components/chart/Toolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex mb-1 align-center w-100">
-    <div class="d-flex align-end clickable" @click="$router.push('/create')">
+    <div class="d-flex align-end clickable" @click="$router.push('/order')">
       <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
       <span class="logo">dexorder</span>
       <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
@@ -13,11 +13,11 @@
     <div class="ml-auto d-flex align-center">
 <!--      <v-icon :icon="icon" size="small"/>&nbsp;-->
       <span class="title mr-4">{{title}}</span>
-      <toolbar-button tooltip="Create" icon="mdi-chart-timeline-variant" path="/create"/>
+      <toolbar-button tooltip="Order" icon="mdi-chart-timeline-variant" path="/order"/>
       <!-- mdi-currency-btc mdi-currency-eth mdi-bank-outline mdi-safe-square-outline -->
       <toolbar-button tooltip="Assets" icon="mdi-currency-btc" path="/assets"/>
       <!-- mdi-format-list-checks mdi-format-list-bulleted-square -->
-      <toolbar-button tooltip="Orders" icon="mdi-format-list-checks" path="/orders"/>
+      <toolbar-button tooltip="Status" icon="mdi-format-list-checks" path="/status"/>
       <v-btn variant="text" icon="mdi-help-circle-outline" text="Info" @click="showCorp" disabled></v-btn>
     </div>
   </div>

src/layouts/default/AppBar.vue

@@ -10,7 +10,7 @@
     </v-app-bar-title>
 
     <v-btn icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/assets')"></v-btn>
-    <v-btn icon="mdi-information-outline" text="Order Status" @click="$router.push('/orders')"></v-btn>
+    <v-btn icon="mdi-information-outline" text="Order Status" @click="$router.push('/status')"></v-btn>
 
   </v-app-bar>
 </template>

src/router/index.js

@@ -14,7 +14,7 @@ const routes = [
         component: () => import(/* webpackChunkName: "chartorder" */ '@/components/chart/ChartPlaceOrder.vue'),
       },
       {
-        path: '/create',
+        path: '/order',
         name: 'Edit',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
@@ -30,16 +30,16 @@ const routes = [
         component: () => import(/* webpackChunkName: "vaultview" */ '@/components/chart/ChartVault.vue'),
       },
       {
-        path: '/orders',
+        path: '/status',
         name: 'Orders',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "ordersview" */ '@/components/chart/ChartOrders.vue'),
+        component: () => import(/* webpackChunkName: "ordersview" */ '@/components/chart/ChartStatus.vue'),
       },
 /*
       {
-        path: '/create',
+        path: '/order',
         name: 'Create',
         component: () => import(/!* webpackChunkName: "chartorder" *!/ '@/components/chart/ChartPlaceOrder.vue'),
       },