add page preview [need review]

A1Gard · A1Gard · commit 21c964be4a6c · 2021-05-24T13:29:46.000+04:30
diff --git a/src/assets/js/functions.js b/src/assets/js/functions.js
@@ -1,32 +1,16 @@
 let html2canvas = require('html2canvas');
-let getScreenshotOfElement = function (element, posX, posY, width, height, callback) {
+let getScreenshotOfElement = function (element, callback) {
     html2canvas(element, {
-        onrendered: function (canvas) {
-            var context = canvas.getContext('2d');
-            var imageData = context.getImageData(posX, posY, width, height).data;
-            var outputCanvas = document.createElement('canvas');
-            var outputContext = outputCanvas.getContext('2d');
-            outputCanvas.width = width;
-            outputCanvas.height = height;
+    }).then(function (canvas) {
 
-            var idata = outputContext.createImageData(width, height);
-            idata.data.set(imageData);
-            outputContext.putImageData(idata, 0, 0);
-            callback(outputCanvas.toDataURL().replace("data:image/png;base64,", ""));
-        },
-        width: width,
-        height: height,
-        useCORS: true,
-        taintTest: false,
-        allowTaint: false
-    });
+        callback(canvas.toDataURL("image/png").split("data:image/png;base64,").join(''));
+    },);
 }
 
-let takeScreenShot = function (id, w, h, x = 0, y = 0) {
-    getScreenshotOfElement(document.querySelector(id), x, y, w, h, function (data) {
-        // in the data variable there is the base64 image
-        // exmaple for displaying the image in an <img>
-        return "data:image/png;base64," + data;
+let takeScreenShot = function (id, cl) {
+    getScreenshotOfElement(document.querySelector(id), function (data) {
+        let back = "data:image/png;base64," + data;
+        cl(back);
     });
 };
 
@@ -44,10 +28,10 @@ let clone = function (obj) {
  * @returns {string|*}
  */
 let getColor = function (color) {
-    for( const clr of window.colors) {
-      if (clr.value === color){
-          return clr.color;
-      }
+    for (const clr of window.colors) {
+        if (clr.value === color) {
+            return clr.color;
+        }
     }
     return '#000000';
 
@@ -58,28 +42,28 @@ let getColor = function (color) {
  * @param isActiveWidget
  * @returns {string|*}
  */
-let color2web = function (color,isActiveWidget = true) {
-  if( color === 'default' ){
-      if ( isActiveWidget){
-          return getColor(window.appData.project.xColor);
-      } else {
-          if (window.appData.project.isDark){
-              return "#222222";
-          }
-      }
-      return getColor(window.appData.project.xColor);
-  }else{
-      return getColor(color);
-  }
+let color2web = function (color, isActiveWidget = true) {
+    if (color === 'default') {
+        if (isActiveWidget) {
+            return getColor(window.appData.project.xColor);
+        } else {
+            if (window.appData.project.isDark) {
+                return "#222222";
+            }
+        }
+        return getColor(window.appData.project.xColor);
+    } else {
+        return getColor(color);
+    }
 };
 
-let calcPadding = function (paddingValue,scale = 1,invert = false) {
-  let calced = paddingValue.split(',');
-  let result ='';
-  for( const c of calced) {
-    result += (parseFloat(c)*scale*(invert?-1:1)).toString()+'px ';
-  }
-  return result;
+let calcPadding = function (paddingValue, scale = 1, invert = false) {
+    let calced = paddingValue.split(',');
+    let result = '';
+    for (const c of calced) {
+        result += (parseFloat(c) * scale * (invert ? -1 : 1)).toString() + 'px ';
+    }
+    return result;
 }
 
 /**
diff --git a/src/assets/json/defaults/defPage.json b/src/assets/json/defaults/defPage.json
@@ -6,6 +6,7 @@
   "bgColor": "Colors.transparent",
   "padding": "15",
   "align": "center",
+  "image":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==",
   "children": {
     "visual": [],
     "nonvisual": []
diff --git a/src/components/elements/PageElement.vue b/src/components/elements/PageElement.vue
@@ -2,7 +2,7 @@
 <template>
   <div id="page" :class="active?'active':''">
     <div id="page-content">
-      <slot></slot>
+      <img :src="image !== undefined ? image:''" alt="no preview">
     </div>
     <h3 id="page-title">
       <span :class="{main:isMain}">
@@ -18,7 +18,8 @@ export default {
   props: [
     'title',
     'active',
-    'isMain'
+    'isMain',
+    'image'
   ]
 }
 </script>
@@ -50,6 +51,11 @@ export default {
   margin: auto;
   margin-bottom: 5px;
   cursor: pointer;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+#page-content img{
+  max-width: 100%;
 }
 
 #page-title {
diff --git a/src/components/elements/PropertyElement.vue b/src/components/elements/PropertyElement.vue
@@ -87,10 +87,23 @@
 </template>
 
 <script>
+import {fnc} from '@/assets/js/functions';
 export default {
   name: "PropertyElement",
   mounted() {
-    // var $ = window.jQuery;
+    var $ = window.jQuery;
+    let updatePreview=function () {
+      setTimeout(function () {
+        fnc.takeScreenShot("#preview",function (e) {
+          self.page.image = e;
+        });
+      },300);
+    };
+    var self = this;
+    $(document).on('change',"#property select",updatePreview)
+    $(document).on('keyup',"#property input",updatePreview)
+    $(document).on('keyup',"#property change",updatePreview)
+
   },
   data: function () {
     return {
@@ -103,6 +116,12 @@ export default {
         return {}
       },
       type: Object
+    },
+    page: {
+      default: function () {
+        return {}
+      },
+      type: Object
     }
   }, methods: {
     nameCheck: function (e, isBlur) {
diff --git a/src/components/pages/MainAppPage.vue b/src/components/pages/MainAppPage.vue
@@ -70,29 +70,30 @@
           <!-- inactive when has not page -->
           <!-- make device size and scale -->
           <!-- bgcolor and text color apply -->
-          <div id="mobile" :class="(data.pages.length < 1?'inactive':'')"
-               :style="'width:'+(display.landscape?display.height:display.width  )* display.scale
-               +'px;height:'+(display.landscape?display.width:display.height  ) * display.scale+'px'+
-               ';background-color:'+(data.project.isDark?'#2e2e2e':data.project.bgColor)
+          <div id="mobile" :style="'width:'+(display.landscape?display.height:display.width  )* display.scale
+               +'px;height:'+(display.landscape?display.width:display.height  ) * display.scale+'px'" :class="(data.pages.length < 1?'inactive':'')">
+            <div id="preview" :style="';background-color:'+(data.project.isDark?'#2e2e2e':data.project.bgColor)
                +';color:'+(data.project.isDark?'white':data.project.textColor)+' !important' ">
-            <!-- direction of project and page padding -->
-            <div id="dir"
-                 :style="'direction:'+(data.project.isRTL?'rtl':'ltr')+';padding:'+calcPadding(data.pages[currentPage].padding,this.display.scale)">
-              <!-- visual components of page -->
-              <div
-                  v-if="data.pages[currentPage] !== undefined && data.pages[currentPage].children.visual !== undefined">
+
+              <!-- direction of project and page padding -->
+              <div id="dir"
+                   :style="'direction:'+(data.project.isRTL?'rtl':'ltr')+';padding:'+calcPadding(data.pages[currentPage].padding,this.display.scale)">
+                <!-- visual components of page -->
+                <div
+                    v-if="data.pages[currentPage] !== undefined && data.pages[currentPage].children.visual !== undefined">
                 <span v-for="(comp,i) in data.pages[currentPage].children.visual"
                       :key="i">
                   <simulator @dblclick.native="removeVisual(i)" @click.native="currentProperties = comp;"
                              :type="comp.type" :properties="comp" :scale="display.scale"
                              :page="data.pages[currentPage]"></simulator>
                 </span>
-              </div>
+                </div>
 
-              <drop class="drop visual" @drop="onVisualDrop" :accepts-data="(n) => isVisual(n)"></drop>
-              <!--              <drop class="drop any" @drop="onAnyDrop" mode="cut">-->
-              <!--                <span v-for="(n, index) in anyDropped" :key="index">Dropped : {{n}},&nbsp;</span>-->
-              <!--              </drop>-->
+                <drop class="drop visual" @drop="onVisualDrop" :accepts-data="(n) => isVisual(n)"></drop>
+                <!--              <drop class="drop any" @drop="onAnyDrop" mode="cut">-->
+                <!--                <span v-for="(n, index) in anyDropped" :key="index">Dropped : {{n}},&nbsp;</span>-->
+                <!--              </drop>-->
+              </div>
             </div>
           </div>
         </div>
@@ -125,7 +126,7 @@
         </h2>
         <!-- if project init sho properties-->
         <div v-if="isInitProject">
-          <property :properties="currentProperties"></property>
+          <property :properties="currentProperties" :page="data.pages[currentPage]"></property>
         </div>
         <div v-else class="text-center">
           <img src="../../assets/img/logo.svg" class="logo-sm" alt="">
@@ -137,12 +138,10 @@
         <!-- if project init can pages -->
         <div v-if="isInitProject">
           <!-- list of pages -->
-          <page v-for="(page,i) in data.pages" :isMain="data.project.mainPage === i"   @click.native="changePage(i)" :key="i" :title="page.name"
+          <page v-for="(page,i) in data.pages" :image="page.image!= undefined? page.image: null"
+                :isMain="data.project.mainPage === i" @click.native="changePage(i)" :key="i" :title="page.name"
                 :active="currentPage === i">
             <i class="fa fa-times" @click="removePage(i)"></i>
-            hello {{ i }}
-            {{ page.name }}
-            <!--  ***!*** need screenshot-->
           </page>
           <i class="fa fa-plus-circle" id="page-add" @click="newPage"></i>
         </div>
@@ -254,16 +253,23 @@ export default {
     removePage: function (i) { // remove page form project
       var self = this;
       // confirm before remove
-      window.alertify.confirm('Are you sure to remove page?', 'Remove confirm', function () {
+      window.alertify.confirm('Are you sure to element page?', 'Remove confirm', function () {
             self.data.pages.splice(i, 1);
             self.changePage(0);
-            window.alertify.success('Page removed');
+            window.alertify.success('element removed');
+            setTimeout(function () {
+              fnc.takeScreenShot("#preview", function (e) {
+                self.data.pages[self.currentPage].image = e;
+                self.$forceUpdate();
+              });
+            }, 300);
           }
           , function () {
             window.alertify.error('Cancel')
           });
     },
     visualValidator: function (component, visuals) {
+      var self = this;
       if (component.type === 'appbar') {
         // check non duplicate app bar
         for (const comp of visuals) {
@@ -289,11 +295,17 @@ export default {
       do {
         nextName = false;
         i++;
-        if (names.indexOf(component.type +i.toString()) > -1) {
+        if (names.indexOf(component.type + i.toString()) > -1) {
           nextName = true;
         }
       } while (nextName);
-      visuals[visuals.length -1 ].name = component.type +i.toString();
+      visuals[visuals.length - 1].name = component.type + i.toString();
+
+      setTimeout(function () {
+        fnc.takeScreenShot("#preview", function (e) {
+          self.data.pages[self.currentPage].image = e;
+        });
+      }, 1000);
       return true;
     },
     onVisualDrop(event) { // on add a viusal component to page
@@ -415,6 +427,9 @@ export default {
   height: 20vh;
   border: 1px solid rgba(0, 0, 0, .1);
   border-right: 0;
+  overflow-y: scroll;
+  overflow-x: hidden;
+
 }
 
 #pages .container {
