Skip to content

A
a-doc-editor
Commit aeefff86 by ramdayalmunda
Options

displaying text on UI

parent 3269008f
Showing with 147 additions and 38 deletions
dist/assets/a-doc-editor2.js
...@@ -14,7 +14,7 @@ var ADocEditor = function (customConfig) { ...@@ -14,7 +14,7 @@ var ADocEditor = function (customConfig) {
tabWidth: 20, tabWidth: 20,
}, },
style: { style: {
fontSize: 24, fontSize: 100,
fontFamily: 'Calibri', fontFamily: 'Calibri',
bold: false, bold: false,
italic: false, italic: false,
...@@ -40,7 +40,7 @@ var ADocEditor = function (customConfig) { ...@@ -40,7 +40,7 @@ var ADocEditor = function (customConfig) {
timeout: null, timeout: null,
timeoutDuration: 800, timeoutDuration: 800,
blink: false, blink: false,
canvasIndex: 0, pageIndex: 0,
caretSize: config.style.fontSize, caretSize: config.style.fontSize,
previousCaret: null, previousCaret: null,
style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) }, style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) },
...@@ -167,11 +167,11 @@ var ADocEditor = function (customConfig) { ...@@ -167,11 +167,11 @@ var ADocEditor = function (customConfig) {
scale.setAttribute('style', `position: absolute; display: block; width: 100mm; height: 100mm; z-index: -1; opacity: 0; pointer-events: none;`) scale.setAttribute('style', `position: absolute; display: block; width: 100mm; height: 100mm; z-index: -1; opacity: 0; pointer-events: none;`)
let rect = scale.getBoundingClientRect() let rect = scale.getBoundingClientRect()
pxMmRatio = rect.width / 100; pxMmRatio = rect.width / 100;
return config return config
} }
function reRenderCanvas() { function reRenderCanvas() {
console.clear()
if (isRendering) return if (isRendering) return
let pageIndex = 0 let pageIndex = 0
if (!pageList.length) { if (!pageList.length) {
...@@ -197,40 +197,141 @@ var ADocEditor = function (customConfig) { ...@@ -197,40 +197,141 @@ var ADocEditor = function (customConfig) {
renderLines() renderLines()
renderCaret() renderCaret()
function calculateTextSizeAndPosition(){ function calculateTextSizeAndPosition() {
// console.log('calculate size and position' )
let d = 0, c=0;
function getLineObj() {
let newLineObj = {
...config.style,
x: 0, // this is the starting point x; it will change based on the tabNumber
y: 0, // this is the starting y coordinate; it will change based on the max font size
plainContent: "",
dataIndex: d,
charStartIndex: 0, // index from where to check
charEndIndex: 0, // index till where to check// not including this index.
}
newLineObj.maxFontSize = newLineObj.fontSize
return newLineObj
}
for (d = 0; d < dataList.length; d++) {
let lineObj = getLineObj()
let dataBlock = dataList[d]
let canvas = pageList[pageIndex].el
let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save()
// to calculate the lines
let tempLineWidth = 0;
let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * config.pageSetup.pxWidth*2)/100
let wordEndIndex = 0; // this stores the index of the word which can fit in the line;
for (c = 0; c < dataBlock.plainContent.length; c++) {
let style = dataBlock?.formatedText?.[d]
if (/\s/.test(dataBlock.plainContent[c])) {
wordEndIndex = c
lineObj.charEndIndex = c
}
let charWidth = getCharacterWidth(d, dataBlock.plainContent[c], style )
dataBlock.formatedText[c] = {
...config.style,
...style,
width: charWidth
}
tempLineWidth += charWidth
if (tempLineWidth > maxLineWidth){
// cannot add this// new line should be added//
i = wordEndIndex;
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1)
lines.push(lineObj)
lineObj = new getLineObj()
lineObj.listIndex = dataBlock.listIndex
lineObj.maxLineWidth = maxLineWidth
lineObj.tabCount = dataBlock.tabCount
lineObj.charStartIndex = i
lineObj.charEndIndex = i
tempLineWidth = 0
}
}
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1)
// there is chance that the last line is not at the width// so we need to handle the last line separately
if (lineObj.charEndIndex <= dataBlock.plainContent.length) {
lineObj.charEndIndex = dataBlock.plainContent.length - 1
}
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex)
lines.push(lineObj)
ctx.restore()
}
} }
function renderLines(){ function renderLines() {
// console.log('render lines', lines) console.log('render lines', lines)
let x = 0, y=0;
for ( let l=0; l<lines.length; l++){
let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
console.log(lines[l])
x = 0
y = y+lines[l].maxFontSize
ctx.save()
let setData = dataList[lines[l].dataIndex]
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
let char = setData?.plainContent[c]
if (char) {
let style = setData.formatedText[c]
ctx.save()
ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize}px ${style.fontFamily}`
ctx.fillStyle = `${style?.fontColor}`
ctx.fillText(char, x, y)
setData.formatedText[c].x = x
setData.formatedText[c].y = y
ctx.restore()
if (setData.formatedText[c]?.width) {
x += setData.formatedText[c]?.width
}
}
}
ctx.restore()
}
} }
function renderCaret(){ function renderCaret() {
clearTimeout(caretData.timeout) clearTimeout(caretData.timeout)
let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true }) let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
ctx.save() ctx.save()
if ( caretData.previousCaret ){ if (caretData.previousCaret) {
const imageData = ctx.getImageData(caretData.style.x, caretData.style.y, caretData.style.fontSize / 5, caretData.style.fontSize);
const imageData = ctx.getImageData(caretData.style.x, caretData.style.y, caretData.style.fontSize/5, caretData.style.fontSize);
const data = imageData.data; const data = imageData.data;
// Invert the color of the rectangular region // Invert the color of the rectangular region
for (let i = 0; i < data.length; i += 4) { for (let i = 0; i < data.length; i += 4) {
data[i] = data[i]+255; // Red data[i] = data[i] + 255; // Red
data[i + 1] = data[i + 1]+255; // Green data[i + 1] = data[i + 1] + 255; // Green
data[i + 2] = data[i + 2]+255; // Blue data[i + 2] = data[i + 2] + 255; // Blue
// Alpha channel remains unchanged (data[i + 3]) // Alpha channel remains unchanged (data[i + 3])
ctx.putImageData(imageData, 100, 200); ctx.putImageData(imageData, 100, 200);
} }
caretData.previousCaret = null caretData.previousCaret = null
} }
if (!caretData.blink){ if (!caretData.blink) {
const imageData = ctx.getImageData(caretData.style.x, caretData.style.y, caretData.style.fontSize/5, caretData.style.fontSize); console.log(caretData.style.x, caretData.style.y, caretData.style.fontSize / 5, caretData.style.fontSize)
const imageData = ctx.getImageData(caretData.style.x, caretData.style.y, caretData.style.fontSize / 5, caretData.style.fontSize);
const data = imageData.data; const data = imageData.data;
// Invert the color of the rectangular region // Invert the color of the rectangular region
for (let i = 0; i < data.length; i += 4) { for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red data[i] = 255 - data[i]; // Red
...@@ -239,17 +340,27 @@ var ADocEditor = function (customConfig) { ...@@ -239,17 +340,27 @@ var ADocEditor = function (customConfig) {
// Alpha channel remains unchanged (data[i + 3]) // Alpha channel remains unchanged (data[i + 3])
ctx.putImageData(imageData, 100, 200); ctx.putImageData(imageData, 100, 200);
} }
caretData.previousCaret = [caretData.style.x, caretData.style.y, caretData.style.fontSize/5, caretData.style.fontSize] caretData.previousCaret = [caretData.style.x, caretData.style.y, caretData.style.fontSize / 5, caretData.style.fontSize]
caretData.blink = true caretData.blink = true
}else{ } else {
caretData.blink = false caretData.blink = false
} }
ctx.restore() ctx.restore()
caretData.timeout = setTimeout( ()=>{ caretData.timeout = setTimeout(() => {
renderCaret() renderCaret()
}, caretData.timeoutDuration ) }, caretData.timeoutDuration)
}
function getCharacterWidth(canvasIndex, char, style) {
let canvas = pageList[canvasIndex].el
let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save()
ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize * config.pageSetup.multipler}px ${style.fontFamily}`
ctx.fillStyle = `${style?.fontColor}`
let width = ctx.measureText(char).width
ctx.restore()
return width
} }
...@@ -283,17 +394,16 @@ var ADocEditor = function (customConfig) { ...@@ -283,17 +394,16 @@ var ADocEditor = function (customConfig) {
} }
function keydownHandler(e) { function keydownHandler(e) {
console.clear() if (e.key == 'Backspace') {
if (e.key=='Backspace'){ if (caretData.index == 0) {
if (caretData.index==0){
}else{ } else {
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index-1)+ caretData.activeData.plainContent.slice(caretData.index) caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index - 1) + caretData.activeData.plainContent.slice(caretData.index)
caretData.activeData.formatedText.splice( caretData.index-1, 1 ) caretData.activeData.formatedText.splice(caretData.index - 1, 1)
--caretData.index; --caretData.index;
} }
} }
else if (e.key == 'Enter'){ else if (e.key == 'Enter') {
let dataObj = { let dataObj = {
id: ++counter, id: ++counter,
type: caretData.activeData.type, type: caretData.activeData.type,
...@@ -307,24 +417,23 @@ var ADocEditor = function (customConfig) { ...@@ -307,24 +417,23 @@ var ADocEditor = function (customConfig) {
caretData.activeData = dataObj caretData.activeData = dataObj
dataList.push(dataObj) dataList.push(dataObj)
} }
else if ( e.key.length==1 && !e.ctrlKey && !e.metaKey){ else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) {
e.preventDefault() e.preventDefault()
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) +e.key+ caretData.activeData.plainContent.slice(caretData.index+1) caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index + 1)
caretData.activeData.formatedText.splice( caretData.index, 0, caretData.style ) caretData.activeData.formatedText.splice(caretData.index, 0, caretData.style)
++caretData.index ++caretData.index
} }
dataList.forEach( (dataSet, s) => console.log(s, dataSet))
caretData.blink = false caretData.blink = false
caretData.previousCaret = null caretData.previousCaret = null
reRenderCanvas(dataList) reRenderCanvas(dataList)
} }
function mousedownHandler(e){ function mousedownHandler(e) {
// console.log('mouse down') // console.log('mouse down')
} }
function onFocusHandler(e){ function onFocusHandler(e) {
reRenderCanvas() reRenderCanvas()
} }
function onBlurHandler(e){ function onBlurHandler(e) {
// console.log('blur') // console.log('blur')
} }
} }
...@@ -374,7 +483,7 @@ var ADocEditor = function (customConfig) { ...@@ -374,7 +483,7 @@ var ADocEditor = function (customConfig) {
changeFontFamily() changeFontFamily()
} }
function changeFontFamily(){ function changeFontFamily() {
let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select') let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
if (fontFamilyDropdown) fontFamilyDropdown.value = caretData.style.fontFamily if (fontFamilyDropdown) fontFamilyDropdown.value = caretData.style.fontFamily
} }
......
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