Skip to content

A
a-doc-editor
Commit 08459ade by ramdayalmunda
Options

added numbering in list system

parent 5cc0cc1b
Showing with 119 additions and 61 deletions
dist/assets/a-doc-editor2.js
...@@ -5,6 +5,8 @@ var ADocEditor = function (customConfig) { ...@@ -5,6 +5,8 @@ var ADocEditor = function (customConfig) {
var paperSizes = { var paperSizes = {
"A4": { mmWidth: 210, mmHeight: 297 }, "A4": { mmWidth: 210, mmHeight: 297 },
} }
const letters = { "0": "a","1": "b","2": "c","3": "d","4": "e","5": "f","6": "g","7": "h","8": "i","9": "j","a": "k","b": "l","c": "m","d": "n","e": "o","f": "p","g": "q","h": "r","i": "s","j": "t","k": "u","l": "v","m": "w","n": "x","o": "y","p": "z" }
const romanNumerals = [ ["I", "IV", "V", "IX"], ["X", "XL", "L", "XC"], ["C", "CD", "D", "CM"], ["M"] ];
var defaultConfig = { var defaultConfig = {
pageSetup: { size: "A4" }, zoom: 1, pageSetup: { size: "A4" }, zoom: 1,
format: { format: {
...@@ -145,24 +147,26 @@ var ADocEditor = function (customConfig) { ...@@ -145,24 +147,26 @@ var ADocEditor = function (customConfig) {
})() })()
!(function handleList(){ !(function handleList() {
let toggleNumber = shadow.querySelector('[adc-toggle="list-number"]') let toggleNumber = shadow.querySelector('[adc-toggle="list-number"]')
let toggleBullet = shadow.querySelector('[adc-toggle="list-bullet"]') let toggleBullet = shadow.querySelector('[adc-toggle="list-bullet"]')
let popover = shadow.querySelector('[adc-type="popover"]') let popover = shadow.querySelector('[adc-type="popover"]')
toggleNumber.addEventListener('click', (e)=>{ toggleNumber.addEventListener('click', (e) => {
if (caretData.activeData){ if (caretData.activeData) {
caretData.activeData.type = caretData.activeData.type==1?0:1 caretData.activeData.type = caretData.activeData.type == 1 ? 0 : 1
caretData.blink=false caretData.activeData.listStyle = 0
caretData.blink = false
reRenderCanvas() reRenderCanvas()
popover.classList.remove('show') popover.classList.remove('show')
focusOnPage() focusOnPage()
} }
}) })
toggleBullet.addEventListener('click', (e)=>{ toggleBullet.addEventListener('click', (e) => {
if (caretData.activeData){ if (caretData.activeData) {
caretData.activeData.type = caretData.activeData.type==1?0:1 caretData.activeData.type = caretData.activeData.type == 1 ? 0 : 1
caretData.blink=false caretData.activeData.listStyle = 1
caretData.blink = false
reRenderCanvas() reRenderCanvas()
popover.classList.remove('show') popover.classList.remove('show')
focusOnPage() focusOnPage()
...@@ -257,23 +261,23 @@ var ADocEditor = function (customConfig) { ...@@ -257,23 +261,23 @@ var ADocEditor = function (customConfig) {
// to calculate the lines // to calculate the lines
let tempLineWidth = 0; let tempLineWidth = 0;
let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2) let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2)
let tabWidth = ( (dataBlock.type==1?1:0)+ dataBlock.tabCount)*config.format.tabWidth*pxMmRatio let tabWidth = ((dataBlock.type == 1 ? 1 : 0) + dataBlock.tabCount) * config.format.tabWidth * pxMmRatio
lineObj.tabWidth = tabWidth lineObj.tabWidth = tabWidth
maxLineWidth -= tabWidth maxLineWidth -= tabWidth
lineObj.dataType = dataBlock.type lineObj.dataType = dataBlock.type
let wordEndIndex = 0; // this stores the index of the word which can fit in the line; let wordEndIndex = 0; // this stores the index of the word which can fit in the line;
let tempWordWidth = 0 let tempWordWidth = 0
if (dataBlock.type==1){ if (dataBlock.type == 1) {
let previousBlock = dataList[d-1] let previousBlock = dataList[d - 1]
if (!previousBlock || previousBlock?.type!=1) dataBlock.listItemNumber = 1 if (!previousBlock || previousBlock?.type != 1) dataBlock.listItemNumber = 1
else if (previousBlock.tabCount == dataBlock.tabCount) { else if (previousBlock.tabCount == dataBlock.tabCount) {
dataBlock.listItemNumber = previousBlock.listItemNumber+1 dataBlock.listItemNumber = previousBlock.listItemNumber + 1
} else{ } else {
dataBlock.listItemNumber = 1 dataBlock.listItemNumber = 1
let olderBlockIndex = d-1 let olderBlockIndex = d - 1
while(dataList?.[olderBlockIndex]?.type==1 && dataList?.[olderBlockIndex]?.tabCount>=dataBlock.tabCount){ while (dataList?.[olderBlockIndex]?.type == 1 && dataList?.[olderBlockIndex]?.tabCount >= dataBlock.tabCount) {
if ( dataList?.[olderBlockIndex]?.tabCount==dataBlock.tabCount ){ if (dataList?.[olderBlockIndex]?.tabCount == dataBlock.tabCount) {
dataBlock.listItemNumber = dataList?.[olderBlockIndex].listItemNumber+1 dataBlock.listItemNumber = dataList?.[olderBlockIndex].listItemNumber + 1
break; break;
} }
--olderBlockIndex; --olderBlockIndex;
...@@ -290,7 +294,7 @@ var ADocEditor = function (customConfig) { ...@@ -290,7 +294,7 @@ var ADocEditor = function (customConfig) {
tempWordWidth = 0 tempWordWidth = 0
} }
let charWidth = getCharacterWidth(dataBlock.plainContent[c], style) let charWidth = getCharacterWidth(dataBlock.plainContent[c], style)
dataBlock.formatedText[c] = { dataBlock.formatedText[c] = {
...config.style, ...config.style,
...style, ...style,
...@@ -298,10 +302,10 @@ var ADocEditor = function (customConfig) { ...@@ -298,10 +302,10 @@ var ADocEditor = function (customConfig) {
} }
// // if with the current char the string could not fit on one line // // if with the current char the string could not fit on one line
if (tempLineWidth + charWidth > maxLineWidth){ if (tempLineWidth + charWidth > maxLineWidth) {
// cannot add this// new line should be added// // cannot add this// new line should be added//
if (tempWordWidth+charWidth>=maxLineWidth){ if (tempWordWidth + charWidth >= maxLineWidth) {
// this is to manage the casse where there is a set of long string without any blank space. In that case the text is broken and moved to next line. // this is to manage the casse where there is a set of long string without any blank space. In that case the text is broken and moved to next line.
wordEndIndex = c wordEndIndex = c
...@@ -314,15 +318,15 @@ var ADocEditor = function (customConfig) { ...@@ -314,15 +318,15 @@ var ADocEditor = function (customConfig) {
lineObj = new getLineObj() lineObj = new getLineObj()
maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2) maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2)
lineObj.maxLineWidth = maxLineWidth lineObj.maxLineWidth = maxLineWidth
if (dataBlock.type==1) lineObj.tabWidth = tabWidth if (dataBlock.type == 1) lineObj.tabWidth = tabWidth
else lineObj.tabWidth = 0 else lineObj.tabWidth = 0
if (dataBlock.type==1) lineObj.tabCount = dataBlock.tabCount if (dataBlock.type == 1) lineObj.tabCount = dataBlock.tabCount
else lineObj.tabCount = 0 else lineObj.tabCount = 0
lineObj.charStartIndex = wordEndIndex + 1 lineObj.charStartIndex = wordEndIndex + 1
lineObj.charEndIndex = wordEndIndex + 1 lineObj.charEndIndex = wordEndIndex + 1
tempLineWidth = tempWordWidth tempLineWidth = tempWordWidth
} }
else{ else {
// if the char can fit in the same line. then it is well and good // if the char can fit in the same line. then it is well and good
tempLineWidth += charWidth tempLineWidth += charWidth
tempWordWidth += charWidth tempWordWidth += charWidth
...@@ -347,6 +351,7 @@ var ADocEditor = function (customConfig) { ...@@ -347,6 +351,7 @@ var ADocEditor = function (customConfig) {
} }
function renderLines() { function renderLines() {
console.clear()
let x = 0, y = config.format.margin * pxMmRatio; let x = 0, y = config.format.margin * pxMmRatio;
for (let l = 0; l < lines.length; l++) { for (let l = 0; l < lines.length; l++) {
let setData = dataList[lines[l].dataIndex] let setData = dataList[lines[l].dataIndex]
...@@ -358,14 +363,14 @@ var ADocEditor = function (customConfig) { ...@@ -358,14 +363,14 @@ var ADocEditor = function (customConfig) {
ctx.save() ctx.save()
// this is to render the numbering and bullets etc // this is to render the numbering and bullets etc
if (lines[l].dataType==1){ if (lines[l].dataType == 1) {
ctx.save() ctx.save()
ctx.font = `${setData.style.fontSize * pxMmRatio}px ${setData.style.fontFamily}` ctx.font = `${setData.style.fontSize * pxMmRatio}px ${setData.style.fontFamily}`
ctx.fillStyle = `${setData.style.fontColor}` ctx.fillStyle = `${setData.style.fontColor}`
let label = `${setData.listItemNumber?setData.listItemNumber:'X'}.` let label = getLabel(lines[l].dataIndex)
let labelWidth = ctx.measureText(label).width let labelWidth = ctx.measureText(label).width
labelWidth+=pxMmRatio*5 labelWidth += pxMmRatio * 5
ctx.fillText(label, x-labelWidth, y) ctx.fillText(label, x - labelWidth, y)
ctx.restore() ctx.restore()
} }
...@@ -393,6 +398,58 @@ var ADocEditor = function (customConfig) { ...@@ -393,6 +398,58 @@ var ADocEditor = function (customConfig) {
return return
} }
function getLabel(dataIndex) {
let label = "x."
if (dataList[dataIndex].listStyle == 0) { // 1. a. i.
let tabCount = dataList[dataIndex].tabCount
tabCount = tabCount ? tabCount : 0
if (tabCount % 3 == 0) label = `${dataList[dataIndex].listItemNumber}.`
else if (tabCount % 3 == 1) label = `${convertToLetter(dataList[dataIndex].listItemNumber)}.`
else label = `${convertToRoman(dataList[dataIndex].listItemNumber).toLowerCase()}.`
}
else if (dataList[dataIndex].listStyle == 0) { // >
label = `>`
}
function convertToLetter(num) {
num = (num-1).toString(26)
let label = ""
for(let i=0;i<num.length;i++) label+= letters[num[i]]
return label
}
function convertToRoman(num) {
let result = '';
let divisor = 1000;
for (let i = 3; i >= 0; i--) {
const digit = Math.floor(num / divisor);
num %= divisor;
divisor /= 10;
if (digit > 0) {
if (digit === 9) {
result += romanNumerals[i][3];
} else if (digit >= 5) {
result += romanNumerals[i][2];
result += romanNumerals[i][0].repeat(digit - 5);
} else if (digit === 4) {
result += romanNumerals[i][1];
} else {
result += romanNumerals[i][0].repeat(digit);
}
}
}
return result;
}
return label
}
function getCharacterWidth(char, style) { function getCharacterWidth(char, style) {
let canvas = pageList[0].el let canvas = pageList[0].el
let ctx = canvas.getContext('2d', { willReadFrequently: true }) let ctx = canvas.getContext('2d', { willReadFrequently: true })
...@@ -437,24 +494,24 @@ var ADocEditor = function (customConfig) { ...@@ -437,24 +494,24 @@ var ADocEditor = function (customConfig) {
function keydownHandler(e) { function keydownHandler(e) {
if (e.altKey) return if (e.altKey) return
else if (e.key=='Tab'){ else if (e.key == 'Tab') {
e.preventDefault() e.preventDefault()
manageIndentation(e.shiftKey?-1:1) manageIndentation(e.shiftKey ? -1 : 1)
}else if ([']','['].includes(e.key) && e.ctrlKey){ } else if ([']', '['].includes(e.key) && e.ctrlKey) {
manageIndentation( e.key=='['?-1:1 ) manageIndentation(e.key == '[' ? -1 : 1)
} }
else if (e.key == 'Backspace') { else if (e.key == 'Backspace') {
if (caretData.index == 0) { if (caretData.index == 0) {
let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id) let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
if (caretData.activeData.tabCount){ if (caretData.activeData.tabCount) {
caretData.activeData.tabCount-- caretData.activeData.tabCount--
} }
else if (activeDataIndex > 0) { else if (activeDataIndex > 0) {
if ( caretData.activeData.type == 0 ){ if (caretData.activeData.type == 0) {
if (!caretData.activeData.plainContent.length){ dataList.splice( activeDataIndex, 1 ) } if (!caretData.activeData.plainContent.length) { dataList.splice(activeDataIndex, 1) }
caretData.activeData = dataList[activeDataIndex - 1] caretData.activeData = dataList[activeDataIndex - 1]
caretData.index = caretData.activeData.plainContent.length caretData.index = caretData.activeData.plainContent.length
}else if ( caretData.activeData.type==1 ){ } else if (caretData.activeData.type == 1) {
caretData.activeData.type = 0 caretData.activeData.type = 0
} }
} }
...@@ -470,13 +527,14 @@ var ADocEditor = function (customConfig) { ...@@ -470,13 +527,14 @@ var ADocEditor = function (customConfig) {
type: caretData.activeData.type, type: caretData.activeData.type,
formatedText: [], formatedText: [],
plainContent: "", plainContent: "",
listStyle: caretData.activeData.listStyle,
tabCount: caretData.activeData.tabCount, tabCount: caretData.activeData.tabCount,
style: { ...caretData.activeData.style } style: { ...caretData.activeData.style }
} }
if (e.ctrlKey || e.metaKey) dataObj.newPage = true if (e.ctrlKey || e.metaKey) dataObj.newPage = true
caretData.index = 0 caretData.index = 0
caretData.activeData = dataObj caretData.activeData = dataObj
if (dataObj.type==0) dataObj.tabCount = 0 if (dataObj.type == 0) dataObj.tabCount = 0
dataList.push(dataObj) dataList.push(dataObj)
} }
else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) { // displayable text else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) { // displayable text
...@@ -489,10 +547,10 @@ var ADocEditor = function (customConfig) { ...@@ -489,10 +547,10 @@ var ADocEditor = function (customConfig) {
else if (e.key == 'ArrowLeft') { else if (e.key == 'ArrowLeft') {
if (caretData.index) { if (caretData.index) {
--caretData.index --caretData.index
}else{ } else {
let dataIndex = dataList.findIndex( item => item.id == caretData.activeData.id ) let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
if (dataIndex>0){ if (dataIndex > 0) {
caretData.activeData = dataList[dataIndex-1] caretData.activeData = dataList[dataIndex - 1]
caretData.index = caretData.activeData.plainContent.length caretData.index = caretData.activeData.plainContent.length
} }
} }
...@@ -500,10 +558,10 @@ var ADocEditor = function (customConfig) { ...@@ -500,10 +558,10 @@ var ADocEditor = function (customConfig) {
else if (e.key == 'ArrowRight') { else if (e.key == 'ArrowRight') {
if (caretData.index < caretData.activeData.plainContent.length) { if (caretData.index < caretData.activeData.plainContent.length) {
++caretData.index ++caretData.index
}else{ } else {
let dataIndex = dataList.findIndex( item => item.id == caretData.activeData.id ) let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
if (dataList[dataIndex+1]){ if (dataList[dataIndex + 1]) {
caretData.activeData = dataList[dataIndex+1] caretData.activeData = dataList[dataIndex + 1]
caretData.index = 0 caretData.index = 0
} }
} }
...@@ -515,10 +573,10 @@ var ADocEditor = function (customConfig) { ...@@ -515,10 +573,10 @@ var ADocEditor = function (customConfig) {
console.log('Down') console.log('Down')
} }
function manageIndentation(value){ function manageIndentation(value) {
caretData.activeData.tabCount += value caretData.activeData.tabCount += value
if (caretData.activeData.tabCount<0) caretData.activeData.tabCount = 0 if (caretData.activeData.tabCount < 0) caretData.activeData.tabCount = 0
else if (caretData.activeData.tabCount>5 ) caretData.activeData.tabCount = 5 else if (caretData.activeData.tabCount > 5) caretData.activeData.tabCount = 5
return true return true
} }
...@@ -644,20 +702,20 @@ var ADocEditor = function (customConfig) { ...@@ -644,20 +702,20 @@ var ADocEditor = function (customConfig) {
shadow.querySelector('.page-list').addEventListener('wheel', onMouseWheelHandler) shadow.querySelector('.page-list').addEventListener('wheel', onMouseWheelHandler)
shadow.addEventListener('mousedown', globalMouseDownHandler) shadow.addEventListener('mousedown', globalMouseDownHandler)
} }
function globalMouseDownHandler(e){ function globalMouseDownHandler(e) {
var elem = e.target var elem = e.target
var targetId = elem.getAttribute('adc-target') var targetId = elem.getAttribute('adc-target')
if (elem.getAttribute('adc-type')=='popover'){ return } if (elem.getAttribute('adc-type') == 'popover') { return }
while(!targetId && elem){ while (!targetId && elem) {
elem = elem.parentNode elem = elem.parentNode
if (elem?.getAttribute?.('adc-type')=='popover') return if (elem?.getAttribute?.('adc-type') == 'popover') return
targetId = elem?.getAttribute?.('adc-target') targetId = elem?.getAttribute?.('adc-target')
} }
let allPopovers = shadow.querySelectorAll('[adc-type="popover"]') let allPopovers = shadow.querySelectorAll('[adc-type="popover"]')
allPopovers.forEach( item=> { allPopovers.forEach(item => {
if ( item.getAttribute('adc')==targetId ) item.classList.toggle('show') if (item.getAttribute('adc') == targetId) item.classList.toggle('show')
else item.classList.remove('show') else item.classList.remove('show')
} ) })
} }
...@@ -712,10 +770,10 @@ var ADocEditor = function (customConfig) { ...@@ -712,10 +770,10 @@ var ADocEditor = function (customConfig) {
} }
return return
} }
function focusOnPage(){ function focusOnPage() {
caretData.blink = false caretData.blink = false
if (!lastFocussedPage) lastFocussedPage = pageList[0].el if (!lastFocussedPage) lastFocussedPage = pageList[0].el
if (lastFocussedPage){ if (lastFocussedPage) {
const scrollTop = pageScrollingDiv.scrollTop const scrollTop = pageScrollingDiv.scrollTop
lastFocussedPage.focus() lastFocussedPage.focus()
pageScrollingDiv.scrollTop = scrollTop pageScrollingDiv.scrollTop = scrollTop
...@@ -730,7 +788,7 @@ var ADocEditor = function (customConfig) { ...@@ -730,7 +788,7 @@ var ADocEditor = function (customConfig) {
for (let i = 0; i < pagesToReturn.length; i++) pagesToReturn[i].canvas = pageList[i].canvas for (let i = 0; i < pagesToReturn.length; i++) pagesToReturn[i].canvas = pageList[i].canvas
return pagesToReturn return pagesToReturn
}, },
log(){ log() {
console.log('dataList', dataList) console.log('dataList', dataList)
console.log('lines', lines) console.log('lines', lines)
console.log('caretData', caretData) console.log('caretData', caretData)
......
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