Commit d811b5b2 by ramdayalmunda

new change

parent eb8354a1
let isModule = (typeof module != 'undefined') ? true : false
if (!isModule) console.log('Browser Environment')
var ADocEditor = function (customConfig) {
var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag, htmlObj = {}, fontList=[], headerToolbar=[];
var container, counter = 0, shadow, pxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = [], headerToolbar = [];
var paperSizes = {
"A4": { mmWidth: 210, mmHeight: 297 },
}
var defaultConfig = {
pageSetup: { size: "A4" }, zoom: 1,
format: {
background: "#fff",
margin: 20,
border: "",
tabWidth: 20,
},
style: {
fontSize: 16,
fontFamily: 'Calibri',
bold: false,
italic: false,
fontColor: "#001"
},
}
var pageList = []
var isRendering = false
function initialize() {
configuration = JSON.parse(JSON.stringify(defaultConfig))
config = JSON.parse(JSON.stringify(defaultConfig))
container = customConfig.container
shadow = container.attachShadow({ mode: "open" })
......@@ -70,15 +84,15 @@ var ADocEditor = function (customConfig) {
!(function zoomHandles() {
let zoomSelect = shadow.querySelector('[adc="zoom"]')
zoomSelect.addEventListener('change', (e) => {
configuration.zoom = Number(e.target.value)
reConfigure(configuration)
config.zoom = Number(e.target.value)
reConfigure(config)
})
})()
!(function fontSelectHandle() {
let fontSelect = shadow.querySelector('[adc="font-select"]')
headerToolbar.push(fontSelect)
fontSelect.addEventListener('change', (e)=>{
fontSelect.addEventListener('change', (e) => {
console.log('font', e.target.value)
})
addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
......@@ -122,31 +136,31 @@ var ADocEditor = function (customConfig) {
})()
reConfigure(customConfig)
createNewPage(0)
reRenderCanvas()
}
function reConfigure(newConfig) {
if (newConfig?.size && paperSizes[newConfig?.size]) { configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
if (newConfig?.size && paperSizes[newConfig?.size]) { config.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
else if (newConfig?.width && newConfig?.height) {
configuration.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height }
config.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height }
}
else { configuration.pageSetup = { size: "A4", ...paperSizes['A4'] } }
else { config.pageSetup = { size: "A4", ...paperSizes['A4'] } }
if (typeof window == 'object') {
configuration.pageSetup.multipler = configuration.pageSetup.mmHeight / configuration.pageSetup.mmWidth
configuration.pageSetup.pxWidth = 2480
configuration.pageSetup.pxHeight = Math.ceil(configuration.pageSetup.pxWidth * configuration.pageSetup.multipler)
config.pageSetup.multipler = config.pageSetup.mmHeight / config.pageSetup.mmWidth
config.pageSetup.pxWidth = 2480
config.pageSetup.pxHeight = Math.ceil(config.pageSetup.pxWidth * config.pageSetup.multipler)
} else {
configuration.pageSetup.pxHeight = configuration.pageSetup.mmHeight
configuration.pageSetup.pxWidth = configuration.pageSetup.mmWidth
config.pageSetup.pxHeight = config.pageSetup.mmHeight
config.pageSetup.pxWidth = config.pageSetup.mmWidth
}
if (configuration.zoom) {
configuration.pageSetup.uiWidth = configuration.pageSetup.mmWidth * configuration.zoom
configuration.pageSetup.uiHeight = configuration.pageSetup.mmHeight * configuration.zoom
if (config.zoom) {
config.pageSetup.uiWidth = config.pageSetup.mmWidth * config.zoom
config.pageSetup.uiHeight = config.pageSetup.mmHeight * config.zoom
}
for (let p = 0; p < pageList.length; p++) {
pageList[p].canvas.style.width = `${configuration.pageSetup.uiWidth}mm`
pageList[p].canvas.style.width = `${config.pageSetup.uiWidth}mm`
}
let scale = shadow.querySelector('.scale')
......@@ -154,26 +168,64 @@ var ADocEditor = function (customConfig) {
let rect = scale.getBoundingClientRect()
pxMmRatio = rect.width / 100;
return configuration
return config
}
function createNewPage(index) {
let pageObj = {
canvas: null,
firstDataIndex: null,
firstCharIndex: null,
lastDataIndex: null,
lastCharIndex: null
function reRenderCanvas() {
console.log('to rerender the page')
if (isRendering) return
let pageIndex = 0
if (!pageList.length) {
pageList[pageIndex] = { id: ++counter, el: createNewPage(), dataIndex: 0 }
shadow.querySelector('.page-list').append(pageList[pageIndex].el)
}
if (!isModule) {
pageObj.canvas = document.createElement('canvas')
pageObj.canvas.setAttribute('tabIndex', '-1')
pageObj.canvas.width = configuration.pageSetup.pxWidth
pageObj.canvas.height = configuration.pageSetup.pxHeight
pageList.push(pageObj)
pageObj.canvas.style.width = `${configuration.pageSetup.uiWidth}mm`
shadow.querySelector('.page-list').append(pageObj.canvas)
// to clear the canvases
for (let i = 0; i < pageList.length; i++) {
let ctx = pageList[i].el.getContext('2d', { willReadFrequently: true })
ctx.save()
ctx.clearRect(0, 0, pageList[i].el.width, pageList[i].el.height); // clears the canvas
ctx.fillStyle = config.format.background
ctx.fillRect(0, 0, pageList[i].el.width, pageList[i].el.height)
ctx.restore()
}
}
function createNewPage() {
let canvas;
if (isModule) {
const { createCanvas } = require('canvas')
canvas = createCanvas(config.pageSetup.canvasWidth, config.pageSetup.canvasHeight)
} else {
canvas = document.createElement('canvas')
canvas.setAttribute('class', 'page')
canvas.width = config.pageSetup.canvasWidth
canvas.height = config.pageSetup.canvasHeight
canvas.setAttribute("tabIndex", -1)
canvas.setAttribute('tabIndex', '-1')
canvas.width = config.pageSetup.pxWidth
canvas.height = config.pageSetup.pxHeight
canvas.style.width = `${config.pageSetup.uiWidth}mm`
let ctx = canvas.getContext('2d', { willReadFrequently: true })
console.log('conf', config)
ctx.fillStyle = config.format.background
ctx.fillRect(0, 0, canvas.width, canvas.height)
canvas.addEventListener('keydown', keydownHandler)
// canvas.addEventListener('mousedown', mousedownHandler)
// canvas.addEventListener("focus", onFocusHandler)
// canvas.addEventListener("blur", onBlurHandler)
}
return canvas
}
function keydownHandler(e) {
console.log(`${(e.shiftKey && e.key != 'Shift') ? 'Shift+' : ''}${(e.ctrlKey && e.key != 'Ctrl') ? 'Ctrl+' : ''}${e.key}`)
}
......@@ -205,7 +257,7 @@ var ADocEditor = function (customConfig) {
}
function reRenderFontDropdown() {
let fontFamilyDropdown = headerToolbar.find( item => item.getAttribute('adc')=='font-select' )
let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
if (fontFamilyDropdown) {
fontFamilyDropdown.innerHTML = ""
fontList.forEach((font, i) => {
......@@ -217,7 +269,7 @@ var ADocEditor = function (customConfig) {
})
}
// changeFontFamily()
}
}
......@@ -225,10 +277,10 @@ var ADocEditor = function (customConfig) {
var returnObj = {
addFonts,
getConfiguration(){ return JSON.parse( JSON.stringify(configuration) ) },
getPages(){
let pagesToReturn = JSON.parse( JSON.stringify( pageList ) )
for ( let i=0; i<pagesToReturn.length; i++ ) pagesToReturn[i].canvas = pageList[i].canvas
getConfiguration() { return JSON.parse(JSON.stringify(config)) },
getPages() {
let pagesToReturn = JSON.parse(JSON.stringify(pageList))
for (let i = 0; i < pagesToReturn.length; i++) pagesToReturn[i].canvas = pageList[i].canvas
return pagesToReturn
},
}
......
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