Commit 11d8f2b4 by ramdayalmunda

paragraph wrapping

parent cfd2e36d
...@@ -13,6 +13,7 @@ var ADocEditor = function (customConfig) { ...@@ -13,6 +13,7 @@ var ADocEditor = function (customConfig) {
background: "#fff", background: "#fff",
margin: 20, margin: 20,
border: "", border: "",
fontSize: 28,
} }
} }
var config = null; var config = null;
...@@ -21,8 +22,13 @@ var ADocEditor = function (customConfig) { ...@@ -21,8 +22,13 @@ var ADocEditor = function (customConfig) {
{ {
id: `${++counter}`, id: `${++counter}`,
type: "text", type: "text",
plainContent: "Hello World" plainContent: "Since they are still preserved in the rocks for us to see, they must have been formed quite recently, that is, geologically speaking. What can explain these striations and their common orientation?"
} },
// {
// id: `${++counter}`,
// type: "text",
// plainContent: "Did you ever hear about the Great Ice Age or the Pleistocene Epoch? Less than one million years ago, in fact, some 12,000 years ago, an ice sheet many thousands of feet thick rode over Burke Mountain in a southeastward direction."
// }
] ]
var caretData = { var caretData = {
...@@ -56,10 +62,10 @@ var ADocEditor = function (customConfig) { ...@@ -56,10 +62,10 @@ var ADocEditor = function (customConfig) {
container.append(mainComponent) container.append(mainComponent)
reRenderPages(dataSet) reRenderPages(dataSet)
caretData.interval = setInterval(() => { // caretData.interval = setInterval(() => {
caretData.blink = !caretData.blink // caretData.blink = !caretData.blink
reRenderPages(dataSet, true) // reRenderPages(dataSet, true)
}, caretData.intervalDuration) // }, caretData.intervalDuration)
} }
function reRenderPages(dataList, blinking = false) { function reRenderPages(dataList, blinking = false) {
...@@ -68,6 +74,7 @@ var ADocEditor = function (customConfig) { ...@@ -68,6 +74,7 @@ var ADocEditor = function (customConfig) {
let canvasIndex = 0 let canvasIndex = 0
if (!canvasList.length) canvasList[0] = createCanvas() if (!canvasList.length) canvasList[0] = createCanvas()
var x = 0, y = config.format.fontSize;
// to clear the canvases // to clear the canvases
...@@ -84,8 +91,57 @@ var ADocEditor = function (customConfig) { ...@@ -84,8 +91,57 @@ var ADocEditor = function (customConfig) {
renderText(canvas, dataList[i]) renderText(canvas, dataList[i])
if (dataList[i].id == caretData.activeData.id) { if (dataList[i].id == caretData.activeData.id) {
caretData.canvasIndex = canvasIndex caretData.canvasIndex = canvasIndex;
}
}
function renderText(canvas, dataSet) {
let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save()
// make list of each word(separated withblank spaces)
// loop through every word.
// Check if those words can fit in the writable width
// if yes draw those words, on x, y
// else add increase y, reset x, letting the indentation level same
// repeat
let wordsList = dataSet.plainContent.split(/\s+/)
let textToDraw = "";
let textToDrawWidth = 0;
for (let i = 0; i < wordsList.length; i++) {
let fontSize = 28;
let fontFamily = "Arial"
// let writableWidth = config.pageSetup.canvasWidth
ctx.font = `${fontSize}px ${fontFamily}`
ctx.fillStyle = `#0005`
let nextText = (textToDraw ? (textToDraw + ' ') : '') + wordsList[i]
let drawWidth = ctx.measureText(nextText).width
if (drawWidth <= config.pageSetup.canvasWidth) {
textToDraw = nextText
textToDrawWidth = drawWidth
} else {
ctx.fillText(textToDraw, x, y+config.format.fontSize)
y+=config.format.fontSize
textToDraw = wordsList[i]
textToDrawWidth = ctx.measureText(wordsList[i]).width
}
} }
if (textToDraw){
ctx.fillText(textToDraw, x, y+config.format.fontSize)
}
ctx.restore()
return true
} }
if (!caretData.blink && focusedCanvas) renderCaret() if (!caretData.blink && focusedCanvas) renderCaret()
...@@ -122,50 +178,39 @@ var ADocEditor = function (customConfig) { ...@@ -122,50 +178,39 @@ var ADocEditor = function (customConfig) {
return canvas return canvas
} }
function onFocusHandler(e){ function onFocusHandler(e) {
focusedCanvas = e.target focusedCanvas = e.target
caretData.blink = false caretData.blink = false
reRenderPages(dataList) reRenderPages(dataList)
} }
function onBlurHandler(e){ function onBlurHandler(e) {
focusedCanvas = null focusedCanvas = null
caretData.blink = true caretData.blink = true
reRenderPages(dataList) reRenderPages(dataList)
} }
function renderText(canvas, dataSet) {
let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save()
let fontSize = 28;
let fontFamily = "Arial"
ctx.font = `${fontSize}px ${fontFamily}`
ctx.fillStyle = `#000`
caretData.x = ctx.measureText(dataSet.plainContent).width
ctx.fillText(dataSet.plainContent, 0, fontSize * (3 / 4))
ctx.restore()
return true
}
function keydownHandler(e) { function keydownHandler(e) {
caretData.blink = false caretData.blink = false
if (e.shiftKey && e.ctrlKey){} // ctr+shift combination if (e.shiftKey && e.ctrlKey) { } // ctr+shift combination
else if (e.ctrlKey){ else if (e.ctrlKey) {
if (e.keyCode == 8) { // ctrl+backspace: delete the entrite word if (e.keyCode == 8) { // ctrl+backspace: delete the entrite word
let separatedSentence = caretData.activeData.plainContent.slice(0, caretData.index) let separatedSentence = caretData.activeData.plainContent.slice(0, caretData.index)
let indexOfpreviousBlankChar = separatedSentence.search(/[^a-zA-Z0-9](?=[a-zA-Z0-9]*$)/) let indexOfpreviousBlankChar = separatedSentence.search(/[^a-zA-Z0-9](?=[a-zA-Z0-9]*$)/)
if (indexOfpreviousBlankChar<=0) caretData.activeData.plainContent = "" if (indexOfpreviousBlankChar <= 0) caretData.activeData.plainContent = ""
else caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, indexOfpreviousBlankChar) + caretData.activeData.plainContent.slice(caretData.index) else caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, indexOfpreviousBlankChar) + caretData.activeData.plainContent.slice(caretData.index)
caretData.index = indexOfpreviousBlankChar <= 0 ? 0 : indexOfpreviousBlankChar caretData.index = indexOfpreviousBlankChar <= 0 ? 0 : indexOfpreviousBlankChar
} }
} }
else if (e.keyCode==9){// tab input // no need to add case for casesensitivity else if (e.keyCode == 9) {// tab input // no need to add case for casesensitivity
e.preventDefault() e.preventDefault()
} }
else if (e.keyCode == 13) { // Enter Key
console.log('Enter')
}
else if (e.key.length == 1 || e.keyCode == 32) { else if (e.key.length == 1 || e.keyCode == 32) {
e.preventDefault() e.preventDefault()
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index) caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
...@@ -178,12 +223,12 @@ var ADocEditor = function (customConfig) { ...@@ -178,12 +223,12 @@ var ADocEditor = function (customConfig) {
else if (e.keyCode == 37) { else if (e.keyCode == 37) {
caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1 caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1
} }
else if (e.keyCode == 38) {}// up key else if (e.keyCode == 38) { }// up key
else if (e.keyCode == 39) { else if (e.keyCode == 39) {
caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index +1 caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index + 1
} }
else if (e.keyCode == 40) {}// down key else if (e.keyCode == 40) { }// down key
else{ } // unhandled cases else { } // unhandled cases
reRenderPages(dataList) reRenderPages(dataList)
clearInterval(caretData.interval) clearInterval(caretData.interval)
......
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