import and waypoints actions

Author: NomadRazor

README.md

@@ -28,6 +28,9 @@ An Open Source alternative to dbdiagram.io, aiming to have the same basic featur
 + 14. Shifts of header color bug repaired
 + 15. Added touch screen support (hover table header = hold touch) (without gestures)
 + 16. Added PNG resolution change in export form (default is better quality)
++ 17. Added import json files
++ 18. Added actions for refs control points (add, reset, delete)
+
 
 ## Architecture - Solution
 

web/src/components/DbmlGraph.vue

@@ -61,6 +61,7 @@
   import VDbChart from './VDbChart/VDbChart'
   import { useChartStore } from '../store/chart'
   import VDbStructure from './VDbStructure'
+import { store } from 'quasar/wrappers'
 
   const props = defineProps({
     schema: {
@@ -84,6 +85,7 @@
     console.log
     chart.hideTooltip();
     if ((Date.now() - chart.panel.datetime) > 500) chart.hidePanel();
+    if ((Date.now() - chart.panel.datetime) > 500) chart.hideRefPanel();
   }
 
   const scale = computed({
@@ -202,7 +204,37 @@
       return cross_vector;
   }
 
+  function getBounds(bounds, objects,isRef = false){
+    for (let item in objects){
+        if (objects[item].x < bounds.l) {
+           bounds.l = objects[item].x
+        }
+        if (objects[item].y < bounds.t) {
+          bounds.t = objects[item].y
+        }
+        if (!isRef){
+          if (objects[item].x+objects[item].width > bounds.r) {
+          bounds.r = objects[item].x+objects[item].width 
+          }
+          if (objects[item].y+objects[item].height > bounds.b) {
+            bounds.b = objects[item].y+objects[item].height 
+          }
+        }
+       
+    }
+    return bounds;
+}
+
   const applyScaleToFit = () => {
+    let bounds = getBounds({l:0, r:0, t:0, b:0},chart.getTables);
+    let zoom = chart.getZoom;
+    let curPan = chart.getPan;
+    let newPan = {
+      x: zoom*((bounds.r-bounds.l)/2),
+      y: zoom*((bounds.t-bounds.b)/2)
+    }
+    console.log(newPan,bounds,chart.getPan)
+    chart.updatePan(newPan)
     // do nothing
   }
 

web/src/components/VDbChart/VDbChart.vue

@@ -64,9 +64,11 @@
                   :key="ref.id"
                   v-bind="ref"
                   :container-ref="root"
+                  @click:ref="dblclickHelper(onRefDblClick, $event, ref)"
                   @click.passive="dblclickHelper(onRefDblClick, $event, ref)"
                   @mouseenter.passive="onRefMouseEnter"
                   @mouseleave.passive="onRefMouseLeave"
+                  
         />
       </g>
       <g id="tables-layer"
@@ -90,7 +92,15 @@
       <g id="panel-overlays-layer"
          v-if="store.loaded">
         <v-db-panel 
-          @click:color="onColorClick" @touchend.passive="onColorClick"/>
+          @click:color="onColorClick" 
+          @touchend.passive="onColorClick"/>
+      
+      </g>
+      <g id="panel-ref-overlays-layer"
+         v-if="store.loaded">
+        <v-db-ref-panel 
+          @click:cp="onCpClick"
+          @touchend.passive="onCpClick"/>
       </g>
 
     </g>
@@ -132,10 +142,11 @@
   import { computed, nextTick, onMounted, reactive, ref, watch, watchEffect } from 'vue'
   import VDbTable from './VDbTable'
   import VDbRef from './VDbRef'
-  import svgPanZoom from 'svg-pan-zoom'
+  import svgPanZoom, { pan } from 'svg-pan-zoom'
   import { useChartStore } from '../../store/chart'
   import VDbTooltip from './VDbTooltip'
   import VDbPanel from './VDbPanel.vue'
+  import VDbRefPanel from './VDbRefPanel.vue'
   import VDbTableGroup from './VDbTableGroup'
 
   const store = useChartStore()
@@ -339,11 +350,34 @@
     panZoom.value.zoom(newZoom)
   })
 
+   
+  
+
   function onRefDblClick (e, ref) {
     console.log("onRefDblClick", e, ref);
     emit('dblclick:ref', e, ref);
   }
 
+  function onCpClick (e,operation,points,wpid,refid) {
+
+   let rl = store.getRef(refid);
+   if (operation == 'RESET'){
+    rl.vertices = [];
+   }
+   if (operation == 'ADD'){
+    rl.vertices.splice(rl.vertices.length-1,0,{x:points.x, y:points.y});
+    //rl.vertices.push({x:points.x, y:points.y});
+   }
+   if (operation == 'DEL'){
+    if (rl.vertices.length > 2){
+      rl.vertices.splice(Number(wpid),1);
+    }
+   
+   }
+   store.updateRef(refid,rl)
+   store.hideRefPanel();
+ }
+
   function onColorClick (e, id,name, color) {
    
     store.updateTableColor(name,id,color);

web/src/components/VDbChart/VDbPanel.vue

@@ -2,7 +2,7 @@
   <svg v-if="panel.show"
        :x="panel.x"
        :y="panel.y"
-       class="db-tooltip"
+       class="db-tooltip db-tooltip_panel"
   >
     <foreignObject x="0" y="0" width="100%" height="100%" class="db-tooltip__content">
       <q-card  class="db-tooltip__content-card" >
@@ -18,7 +18,7 @@
 
   const store = useChartStore()
   const emit = defineEmits([
-    'click:color'
+    'click:color',
   ])
 
   function onClick(e, ...args){

web/src/components/VDbChart/VDbRef.vue

@@ -51,6 +51,7 @@
               @mousedown.passive="controlPoint_startDrag"
               @mouseenter.passive="controlPoint_onMouseEnter"
               @mouseleave.passive="controlPoint_onMouseLeave"
+              @contextmenu.prevent="showTooltip"
       />
     </g>
 
@@ -61,6 +62,7 @@
   import { computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch, watchEffect } from 'vue'
   import { useChartStore } from '../../store/chart'
   import { snap } from '../../utils/MathUtil'
+  import VDbRefActions from './VDbRefActions.vue'
 
   const props = defineProps({
     id: Number,
@@ -75,6 +77,9 @@
     containerRef: Object
   })
 
+  const emit = defineEmits([
+    'click:ref',
+  ])
   const store = useChartStore()
   let s = store.getRef(props.id)
 
@@ -204,7 +209,7 @@
     const directions = getDirection(startAnchors.value,endAnchors.value);
     const cpstart_direction = getDirection(startAnchors.value,controlPoints.value[0]);
     const cpend_direction = getDirection(endAnchors.value,controlPoints.value[1]);
-    console.log('direction',directions);
+    //console.log('direction',directions);
     let corelations = {
       x0: 0, 
       y0: 0,
@@ -357,6 +362,22 @@
     v.y = snap((p.y - controlPoint_dragOffset.y), gridSnap)
 
   }
+
+  const showTooltip = (e) => {
+    const p = store.inverseCtm.transformPoint({
+      x: e.offsetX,
+      y: e.offsetY
+    })
+    const tooltipPosition = {
+      x: p.x + 10,
+      y: p.y,
+    }
+   // console.log(e.target)
+   store.showRefPanel(tooltipPosition, VDbRefActions, {click:p, wpid:e.target.dataset.id, data:props})
+   emit('click:ref', e, s);
+    
+  }
+
   const controlPoint_drop = (e) => {
     controlPoint_dragOffset.x = 0
     controlPoint_dragOffset.y = 0

web/src/components/VDbChart/VDbRefActions.vue

@@ -0,0 +1,52 @@
+<template>
+  
+    <q-card-section style="padding: 8px 8px;">
+      <div class="text-subtitle2">Ref actions</div>
+      <div class="row">
+            <q-list dense class="db-tooltip_panel__list">
+                <q-item clickable v-ripple @click.passive="act($event,'RESET')">
+                    <q-item-section avatar>
+                        <q-icon color="primary" name="refresh" />
+                    </q-item-section>
+
+                    <q-item-section>Reset waypoints</q-item-section>
+                </q-item>
+                <q-item clickable v-ripple @click.passive="act($event,'ADD')">
+                    <q-item-section avatar>
+                        <q-icon color="primary" name="add" />
+                    </q-item-section>
+
+                    <q-item-section>Add waypoint</q-item-section>
+                </q-item>
+                <q-item clickable v-ripple @click.passive="act($event,'DEL')">
+                    <q-item-section avatar>
+                        <q-icon color="primary" name="delete" />
+                    </q-item-section>
+
+                    <q-item-section>Remove waypoint</q-item-section>
+                </q-item>
+            </q-list>
+      </div>      
+    </q-card-section>
+  </template>
+  
+  <script setup>
+      
+    const props = defineProps({
+      data: Object,
+      wpid: Number, 
+      click:Object
+    });
+  
+    function act(e,option) {
+        console.log(e,option,props)
+        emit('click:ref-cp',e,option,props.click,props.wpid,props.data.id)
+    }
+
+    const emit = defineEmits([
+      'click:ref-cp'
+    ])
+     
+  </script>
+  
+  

web/src/components/VDbChart/VDbRefPanel.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg v-if="refspanel.show"
+       :x="refspanel.x"
+       :y="refspanel.y"
+       class="db-tooltip db-tooltip_panel"
+  >
+    <foreignObject x="0" y="0" width="100%" height="100%" class="db-tooltip__content">
+      <q-card  class="db-tooltip__content-card" >
+        <component :is="refspanel.component" v-bind="refspanel.binds" @click:ref-cp="onClickRefCp"/>
+      </q-card>
+    </foreignObject>
+  </svg>
+</template>
+
+<script setup>
+  import { useChartStore } from '../../store/chart'
+  import { computed } from 'vue'
+
+  const store = useChartStore()
+  const emit = defineEmits([
+    'click:cp'
+  ])
+
+  function onClickRefCp(e, ...args){
+    
+    emit("click:cp",e, ...args)
+  }
+
+  
+  const refspanel = computed(() => store.refspanel)
+</script>

web/src/components/VDbExportDialog.vue

@@ -72,23 +72,41 @@ const props = defineProps({
   a.setAttribute('download',props.file_name);
   a.click();
   URL.revokeObjectURL(url);
+  document.removeChild(a);
 
 }
 
   const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
 
   function onOKClick () {
-    const fstore = useFilesStore();
+
+    $q.notify({
+      caption:"Export",
+      message:`Saving file...`,
+      multiLine:true,
+      timeout:2000,
+      color: 'indigo-7',
+      spinner:true,
+      position: "center"})
+  
+      saveFile();
+    
+      onDialogOK()
+}
+
+function saveFile(){
+  const fstore = useFilesStore();
     const filesfs = localforage.createInstance({
     name: "dbdiagram-oss",
     storeName: "files"
   });
+  
     
 
     if (props.id == 'json'){
         filesfs.getItem(fstore.getCurrentFile).then(
             (file) => {
-                saveAs(new Blob([JSON.stringify(file)], {type:"image/svg+xml"}));
+                saveAs(new Blob([JSON.stringify(file)], {type:"application/json"}));
             }
         )
        
@@ -132,7 +150,6 @@ const props = defineProps({
                 icon: 'task',
                 position: 'bottom-right'
             })
-      onDialogOK()
 }
 
 function saveSvg(){