Commit 12418c04 by ramdayalmunda

zoom feature added

parent d9793b11
...@@ -15,14 +15,14 @@ ...@@ -15,14 +15,14 @@
width: 100%; width: 100%;
background-color: red; background-color: red;
} }
.header .toolbar{ .toolbar{
position: relative; position: relative;
width: 100%; width: 100%;
background: pink; background: pink;
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
.header .toolbar .item { .toolbar .item {
position: relative; position: relative;
background: green; background: green;
border: 1px solid yelow; border: 1px solid yelow;
...@@ -44,3 +44,9 @@ ...@@ -44,3 +44,9 @@
display: block; display: block;
position: relative; position: relative;
} }
.footer{
position: relative;
display: block;
width: 100%;
background-color: red;
}
\ No newline at end of file
...@@ -6,14 +6,13 @@ var ADocEditor = function (customConfig) { ...@@ -6,14 +6,13 @@ var ADocEditor = function (customConfig) {
"A4": { mmWidth: 210, mmHeight: 297 }, "A4": { mmWidth: 210, mmHeight: 297 },
} }
var defaultConfig = { var defaultConfig = {
pageSetup: { size: "A4" } pageSetup: { size: "A4" }, zoom: 1,
} }
var pageList = [] var pageList = []
function initialize(){ function initialize(){
configuration = JSON.parse( JSON.stringify(defaultConfig) ) configuration = JSON.parse( JSON.stringify(defaultConfig) )
container = customConfig.container container = customConfig.container
shadow = container.attachShadow({ mode: "open" }) shadow = container.attachShadow({ mode: "open" })
console.log('configuration', configuration)
htmlStr = /*html*/` htmlStr = /*html*/`
<div class="scale"></div> <div class="scale"></div>
...@@ -28,8 +27,24 @@ var ADocEditor = function (customConfig) { ...@@ -28,8 +27,24 @@ var ADocEditor = function (customConfig) {
</select> </select>
</div> </div>
</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> </div>
`; `;
...@@ -53,13 +68,21 @@ var ADocEditor = function (customConfig) { ...@@ -53,13 +68,21 @@ var ADocEditor = function (customConfig) {
pageList: shadow.querySelector('page-list') 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 ) reConfigure( customConfig )
createNewPage(0) createNewPage(0)
} }
function reConfigure(newConfig){ function reConfigure(newConfig){
if (newConfig.size && paperSizes[ newConfig.size ]){ configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } } if (newConfig?.size && paperSizes[ newConfig?.size ]){ configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
else if ( newConfig.width && newConfig.height ){ else if ( newConfig?.width && newConfig?.height ){
configuration.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height } configuration.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height }
} }
else { configuration.pageSetup = { size: "A4", ...paperSizes['A4'] } } else { configuration.pageSetup = { size: "A4", ...paperSizes['A4'] } }
...@@ -70,7 +93,16 @@ var ADocEditor = function (customConfig) { ...@@ -70,7 +93,16 @@ var ADocEditor = function (customConfig) {
configuration.pageSetup.pxHeight = Math.ceil(configuration.pageSetup.pxWidth*configuration.pageSetup.multipler) configuration.pageSetup.pxHeight = Math.ceil(configuration.pageSetup.pxWidth*configuration.pageSetup.multipler)
}else{ }else{
configuration.pageSetup.pxHeight = configuration.pageSetup.mmHeight 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') let scale = shadow.querySelector('.scale')
...@@ -82,7 +114,6 @@ var ADocEditor = function (customConfig) { ...@@ -82,7 +114,6 @@ var ADocEditor = function (customConfig) {
} }
function createNewPage(index){ function createNewPage(index){
console.log('to create new page on', index)
let pageObj = { let pageObj = {
canvas: null, canvas: null,
firstDataIndex: null, firstDataIndex: null,
...@@ -95,7 +126,7 @@ var ADocEditor = function (customConfig) { ...@@ -95,7 +126,7 @@ var ADocEditor = function (customConfig) {
pageObj.canvas.width = configuration.pageSetup.pxWidth pageObj.canvas.width = configuration.pageSetup.pxWidth
pageObj.canvas.height = configuration.pageSetup.pxHeight pageObj.canvas.height = configuration.pageSetup.pxHeight
pageList.push( pageObj ) 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 ) shadow.querySelector('.page-list').append( pageObj.canvas )
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment