zoom feature added

dist/assets/a-doc-editor2.css

@@ -15,14 +15,14 @@
     width: 100%;
     background-color: red;
 }
-.header .toolbar{
+.toolbar{
     position: relative;
     width: 100%;
     background: pink;
     display: flex;
     gap: 10px;
 }
-.header .toolbar .item {
+.toolbar .item {
     position: relative;
     background: green;
     border: 1px solid yelow;
@@ -44,3 +44,9 @@
     display: block;
     position: relative;
 }
+.footer{
+    position: relative;
+    display: block;
+    width: 100%;
+    background-color: red;
+}
\ No newline at end of file

dist/assets/a-doc-editor2.js

@@ -6,14 +6,13 @@ var ADocEditor = function (customConfig) {
         "A4": { mmWidth: 210, mmHeight: 297 },
     }
     var defaultConfig = {
-        pageSetup: { size: "A4" }
+        pageSetup: { size: "A4" }, zoom: 1,
     }
     var pageList = []
     function initialize(){
         configuration = JSON.parse( JSON.stringify(defaultConfig) )
         container = customConfig.container
         shadow = container.attachShadow({ mode: "open" })
-        console.log('configuration', configuration)
 
         htmlStr = /*html*/`
 <div class="scale"></div>
@@ -28,8 +27,24 @@ var ADocEditor = function (customConfig) {
         </select>
     </div>
 </div>
-<div class="page-list">
+<div class="page-list"></div>
+<div class="footer">
 
+    <div class="toolbar">
+        <select class="item" title="Select zoom" adc="zoom">
+            <option value="" disabled>Select Zoom</option>
+            <option value="0.1">10%</option>
+            <option value="0.2">20%</option>
+            <option value="0.3">30%</option>
+            <option value="0.4">40%</option>
+            <option value="0.5">50%</option>
+            <option value="0.6">60%</option>
+            <option value="0.7">70%</option>
+            <option value="0.8">80%</option>
+            <option value="0.9">90%</option>
+            <option value="1" selected>100%</option>
+        </select>
+    </div>
 </div>
         `;
 
@@ -53,13 +68,21 @@ var ADocEditor = function (customConfig) {
             pageList: shadow.querySelector('page-list')
         }
 
-        console.log('htmlObj', htmlObj)
+
+        !( function zoomHandles(){
+            let zoomSelect = shadow.querySelector('[adc="zoom"]')
+            zoomSelect.addEventListener( 'change', (e)=>{
+                configuration.zoom = Number(e.target.value)
+                reConfigure(configuration)
+            } )
+        } )()
+
         reConfigure( customConfig )
         createNewPage(0)
     }
     function reConfigure(newConfig){
-        if (newConfig.size && paperSizes[ newConfig.size ]){ configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
-        else if ( newConfig.width && newConfig.height ){
+        if (newConfig?.size && paperSizes[ newConfig?.size ]){ configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
+        else if ( newConfig?.width && newConfig?.height ){
             configuration.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height }
         }
         else { configuration.pageSetup = { size: "A4", ...paperSizes['A4'] } }
@@ -70,7 +93,16 @@ var ADocEditor = function (customConfig) {
             configuration.pageSetup.pxHeight = Math.ceil(configuration.pageSetup.pxWidth*configuration.pageSetup.multipler)
         }else{
             configuration.pageSetup.pxHeight = configuration.pageSetup.mmHeight
-            configuration.pageSetup.pxWidth = configuration.pageSetup.mmWipxWidth
+            configuration.pageSetup.pxWidth = configuration.pageSetup.mmWidth
+        }
+        
+        if (configuration.zoom){
+            configuration.pageSetup.uiWidth = configuration.pageSetup.mmWidth*configuration.zoom
+            configuration.pageSetup.uiHeight = configuration.pageSetup.mmHeight*configuration.zoom
+        }
+        
+        for ( let p=0; p<pageList.length; p++ ){
+            pageList[p].canvas.style.width = `${configuration.pageSetup.uiWidth}mm`
         }
 
         let scale = shadow.querySelector('.scale')
@@ -82,7 +114,6 @@ var ADocEditor = function (customConfig) {
     }
 
     function createNewPage(index){
-        console.log('to create new page on', index)
         let pageObj = {
             canvas: null,
             firstDataIndex: null,
@@ -95,7 +126,7 @@ var ADocEditor = function (customConfig) {
             pageObj.canvas.width = configuration.pageSetup.pxWidth
             pageObj.canvas.height = configuration.pageSetup.pxHeight
             pageList.push( pageObj )
-            pageObj.canvas.style.width = `${configuration.pageSetup.mmWidth}mm`
+            pageObj.canvas.style.width = `${configuration.pageSetup.uiWidth}mm`
             shadow.querySelector('.page-list').append( pageObj.canvas )
         }
     }