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) {
tabWidth: 20,
},
style: {
fontSize: 24,
fontSize: 100,
fontFamily: 'Calibri',
bold: false,
italic: false,
......@@ -40,7 +40,7 @@ var ADocEditor = function (customConfig) {
timeout: null,
timeoutDuration: 800,
blink: false,
canvasIndex: 0,
pageIndex: 0,
caretSize: config.style.fontSize,
previousCaret: null,
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) {
scale.setAttribute('style', `position: absolute; display: block; width: 100mm; height: 100mm; z-index: -1; opacity: 0; pointer-events: none;`)
let rect = scale.getBoundingClientRect()
pxMmRatio = rect.width / 100;
return config
}
function reRenderCanvas() {
console.clear()
if (isRendering) return
let pageIndex = 0
if (!pageList.length) {
......@@ -197,40 +197,141 @@ var ADocEditor = function (customConfig) {
renderLines()
renderCaret()
function calculateTextSizeAndPosition(){
// console.log('calculate size and position' )
function calculateTextSizeAndPosition() {
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(){
// console.log('render lines', lines)
function renderLines() {
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)
let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
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;
// Invert the color of the rectangular region
for (let i = 0; i < data.length; i += 4) {
data[i] = data[i]+255; // Red
data[i + 1] = data[i + 1]+255; // Green
data[i + 2] = data[i + 2]+255; // Blue
data[i] = data[i] + 255; // Red
data[i + 1] = data[i + 1] + 255; // Green
data[i + 2] = data[i + 2] + 255; // Blue
// Alpha channel remains unchanged (data[i + 3])
ctx.putImageData(imageData, 100, 200);
}
caretData.previousCaret = null
}
if (!caretData.blink){
const imageData = ctx.getImageData(caretData.style.x, caretData.style.y, caretData.style.fontSize/5, caretData.style.fontSize);
if (!caretData.blink) {
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;
// Invert the color of the rectangular region
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red
......@@ -239,17 +340,27 @@ var ADocEditor = function (customConfig) {
// Alpha channel remains unchanged (data[i + 3])
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
}else{
} else {
caretData.blink = false
}
ctx.restore()
caretData.timeout = setTimeout( ()=>{
caretData.timeout = setTimeout(() => {
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) {
}
function keydownHandler(e) {
console.clear()
if (e.key=='Backspace'){
if (caretData.index==0){
if (e.key == 'Backspace') {
if (caretData.index == 0) {
}else{
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 )
} else {
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.index;
}
}
else if (e.key == 'Enter'){
else if (e.key == 'Enter') {
let dataObj = {
id: ++counter,
type: caretData.activeData.type,
......@@ -307,24 +417,23 @@ var ADocEditor = function (customConfig) {
caretData.activeData = 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()
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.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.index
}
dataList.forEach( (dataSet, s) => console.log(s, dataSet))
caretData.blink = false
caretData.previousCaret = null
reRenderCanvas(dataList)
}
function mousedownHandler(e){
function mousedownHandler(e) {
// console.log('mouse down')
}
function onFocusHandler(e){
function onFocusHandler(e) {
reRenderCanvas()
}
function onBlurHandler(e){
function onBlurHandler(e) {
// console.log('blur')
}
}
......@@ -374,7 +483,7 @@ var ADocEditor = function (customConfig) {
changeFontFamily()
}
function changeFontFamily(){
function changeFontFamily() {
let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
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