Skip to content

A
a-doc-editor
Commit 76cb7969 by ramdayalmunda
Options

setting up caret position on mouse click

parent 75128050
Showing with 125 additions and 16 deletions
dist/assets/a-doc-editor.js
...@@ -43,6 +43,24 @@ var ADocEditor = function (customConfig) { ...@@ -43,6 +43,24 @@ var ADocEditor = function (customConfig) {
type: 0, type: 0,
plainContent: "", plainContent: "",
style: { ...config.style } style: { ...config.style }
},
{
id: ++counter,
type: 0,
plainContent: "Her hand was balled into a fist with her keys protruding out from between her fingers.",
style: { ...config.style }
},
{
id: ++counter,
type: 0,
plainContent: "",
style: { ...config.style }
},
{
id: ++counter,
type: 0,
plainContent: "She wished that she had something a little more potent than keys between her fingers. It would have been nice to have some mace or pepper spray. He had been meaning to buy some but had never gotten around to it.",
style: { ...config.style }
} }
] ]
...@@ -147,7 +165,7 @@ var ADocEditor = function (customConfig) { ...@@ -147,7 +165,7 @@ var ADocEditor = function (customConfig) {
reRenderPages(dataSet) reRenderPages(dataSet)
} }
function reRenderPages(dataList, blinking = false) { function reRenderPages(dataList, usingClick=false) {
if (renderInProgress) return if (renderInProgress) return
renderInProgress = true renderInProgress = true
...@@ -169,7 +187,11 @@ var ADocEditor = function (customConfig) { ...@@ -169,7 +187,11 @@ var ADocEditor = function (customConfig) {
for (let i = 0; i < dataList.length; i++) { for (let i = 0; i < dataList.length; i++) {
if (dataList[i].plainContent.length == 0) { if (dataList[i].plainContent.length == 0) {
y += (dataList?.[i].style.fontSize) y += (dataList?.[i].style.fontSize)
dataList[i].style.y = y
}else{
dataList[i].style.y = y+(dataList?.[i].style.fontSize)
} }
dataList[i].style.canvasX = x
let canvas = canvasList[canvasIndex].el let canvas = canvasList[canvasIndex].el
canvas.setAttribute("tabIndex", -1) canvas.setAttribute("tabIndex", -1)
calculateTextPositions(canvas, dataList[i]) calculateTextPositions(canvas, dataList[i])
...@@ -179,6 +201,7 @@ var ADocEditor = function (customConfig) { ...@@ -179,6 +201,7 @@ var ADocEditor = function (customConfig) {
} }
} }
renderFormattedData() renderFormattedData()
if (!caretData.blink && caretData.activeData) renderCaret()
function calculateTextPositions(canvas, dataBlock) { function calculateTextPositions(canvas, dataBlock) {
let ctx = canvas.getContext('2d', { willReadFrequently: true }) let ctx = canvas.getContext('2d', { willReadFrequently: true })
...@@ -248,15 +271,21 @@ var ADocEditor = function (customConfig) { ...@@ -248,15 +271,21 @@ var ADocEditor = function (customConfig) {
function renderFormattedData() { function renderFormattedData() {
let canvasIndex = 0; let canvasIndex = 0;
let pageYOffset = 0; let pageYOffset = 0;
canvasList[canvasIndex].startDataIndex = 0;
canvasList[canvasIndex].startCharacterIndex = 0
for (let j = 0; j < dataSet.length; j++) { for (let j = 0; j < dataSet.length; j++) {
let dataBlock = dataSet[j] let dataBlock = dataSet[j]
dataBlock.style.maxFontSize = dataBlock.style.fontSize
if ( dataBlock.style.y - pageYOffset>= config.pageSetup.canvasHeight ){ if ( dataBlock.style.y - pageYOffset>= config.pageSetup.canvasHeight ){
pageYOffset = dataBlock.style.y - dataBlock.style.fontSize; ; // calculate and use the max Font size on the current line in the formattedText array pageYOffset = dataBlock.style.y - dataBlock.style.fontSize; ; // calculate and use the max Font size on the current line in the formattedText array
canvasIndex++; canvasIndex++;
if (!canvasList[canvasIndex]) canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: j } if (!canvasList[canvasIndex]) canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: j }
}
canvasList[canvasIndex].startDataIndex = j;
canvasList[canvasIndex].startCharacterIndex = 0
}
dataBlock.style.canvasY = dataBlock.style.y - pageYOffset
let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true }) let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
ctx.save() ctx.save()
dataBlock.style.canvasIndex = canvasIndex dataBlock.style.canvasIndex = canvasIndex
...@@ -269,6 +298,10 @@ var ADocEditor = function (customConfig) { ...@@ -269,6 +298,10 @@ var ADocEditor = function (customConfig) {
if (!canvasList[canvasIndex]) canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: j } if (!canvasList[canvasIndex]) canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: j }
ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true }) ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
ctx.save() ctx.save()
canvasList[canvasIndex].startDataIndex = j;
canvasList[canvasIndex].startCharacterIndex = i
} }
ctx.font = `${dataBlock.formatedText[i].fontSize}px ${dataBlock.formatedText[i].fontFamily}` ctx.font = `${dataBlock.formatedText[i].fontSize}px ${dataBlock.formatedText[i].fontFamily}`
...@@ -276,7 +309,10 @@ var ADocEditor = function (customConfig) { ...@@ -276,7 +309,10 @@ var ADocEditor = function (customConfig) {
dataBlock.formatedText[i].canvasX = dataBlock.formatedText[i].x dataBlock.formatedText[i].canvasX = dataBlock.formatedText[i].x
dataBlock.formatedText[i].canvasY = (dataBlock.formatedText[i].y-pageYOffset) dataBlock.formatedText[i].canvasY = (dataBlock.formatedText[i].y-pageYOffset)
ctx.fillText(dataBlock.formatedText[i].char, dataBlock.formatedText[i].canvasX, dataBlock.formatedText[i].canvasY) ctx.fillText(dataBlock.formatedText[i].char, dataBlock.formatedText[i].canvasX, dataBlock.formatedText[i].canvasY)
dataBlock.formatedText[i].canvasIndex = canvasIndex dataBlock.formatedText[i].canvasIndex = canvasIndex;
// these will be required when rendering caret and locating its positon on the page
if (!(dataBlock.formatedText[i].fontSize<dataBlock.style?.maxFontSize)) dataBlock.style.maxFontSize = dataBlock.formatedText[i].fontSize
} }
ctx.restore() ctx.restore()
} }
...@@ -286,14 +322,14 @@ var ADocEditor = function (customConfig) { ...@@ -286,14 +322,14 @@ var ADocEditor = function (customConfig) {
for (let i=0; i<canvasDeleted.length; i++) canvasDeleted[i].el.remove(); for (let i=0; i<canvasDeleted.length; i++) canvasDeleted[i].el.remove();
} }
if (!caretData.blink && caretData.activeData) renderCaret()
// to render caret // to render caret
function renderCaret() { function renderCaret() {
console.log('caretCanvas',caretData.canvasIndex)
let ctx = canvasList[caretData.canvasIndex].el.getContext('2d', { willReadFrequently: true }) let ctx = canvasList[caretData.canvasIndex].el.getContext('2d', { willReadFrequently: true })
let activeTextData = caretData.activeData.formatedText[caretData.index - 1] let activeTextData = caretData.activeData.formatedText[caretData.index - 1]
if (!activeTextData) activeTextData = caretData.activeData.style if (!activeTextData) activeTextData = caretData.activeData.style
let rectX = activeTextData?.x + activeTextData?.width; let rectX = activeTextData?.canvasX + activeTextData?.width;
let rectY = activeTextData?.y - activeTextData?.fontSize; let rectY = activeTextData?.canvasY - activeTextData?.fontSize;
rectX = rectX ? rectX : 0 rectX = rectX ? rectX : 0
rectY = rectY ? rectY : 0 rectY = rectY ? rectY : 0
let rectWidth = 2; let rectWidth = 2;
...@@ -458,29 +494,102 @@ var ADocEditor = function (customConfig) { ...@@ -458,29 +494,102 @@ var ADocEditor = function (customConfig) {
} }
function setCaretPosition(e) { function setCaretPosition(e) {
console.clear()
let rect = e.target.getBoundingClientRect() let rect = e.target.getBoundingClientRect()
let canvasIndex = canvasList.findIndex( item => item.el == e.target )
let position = { let position = {
xP: e.offsetX / rect.width, x: Math.round((e.offsetX / rect.width)*config.pageSetup.canvasWidth),
yP: e.offsetY / rect.height, y: Math.round((e.offsetY / rect.height)*config.pageSetup.canvasHeight),
} }
let canvasData = canvasList.find(item => item.el == e.target)
position.x = position.xP * config.pageSetup.canvasWidth let currentPage = canvasList[canvasIndex]
position.y = position.yP * config.pageSetup.canvasHeight
let lineY = dataSet[canvasData.dataIndex].style.y // to get the last character dataIndex and char Index
for (let i = canvasData.dataIndex; i < dataSet.length; i++) { if ( canvasList[canvasIndex+1] ){ // if theree is a next canvas
for (let j = 0; j < dataSet[i].formatedText.length; j++) {
if (Math.floor(dataSet[i].formatedText[j].x) == Math.floor(position.x)) { if (canvasList[canvasIndex+1].startCharacterIndex == 0){
break; currentPage.endDataIndex = canvasList[canvasIndex+1].startDataIndex -1
currentPage.endCharacterIndex = dataSet [ currentPage.endDataIndex ].plainContent.length
}else{
currentPage.endDataIndex = canvasList[canvasIndex+1].startDataIndex
currentPage.endCharacterIndex = canvasList[canvasIndex+1].startCharacterIndex-1
}
}else{ // if THIS is the last canvas
currentPage.endDataIndex = dataSet.length-1;
currentPage.endCharacterIndex = dataSet [ currentPage.endDataIndex ].plainContent.length
}
let firstCharacterY = (dataSet[currentPage.startDataIndex].formatedText[currentPage.startCharacterIndex]?.canvasY || dataSet[currentPage.startDataIndex].style.canvasY)
let lastCharacterY = (dataSet[currentPage.endDataIndex].formatedText[currentPage.endCharacterIndex]?.canvasY || dataSet[currentPage.endDataIndex].style.canvasY)
let setIndex=currentPage.startDataIndex, charIndex=currentPage.startCharacterIndex;
let lineY = firstCharacterY;
while( setIndex<currentPage.endDataIndex || (setIndex==currentPage.endDataIndex && charIndex<=currentPage.endCharacterIndex) ){
let thisLineY = (dataSet[setIndex].formatedText[charIndex]?.canvasY || dataSet[setIndex].style.canvasY)
let thisLineX = (dataSet[setIndex].formatedText[charIndex]?.canvasX || dataSet[setIndex].style.canvasX)
// // check if this is the character
if (thisLineY >= position.y){
lineY = thisLineY
if (!dataSet[setIndex].plainContent.length){
charIndex = 0
}else{
console.log('after loop, ', dataSet[setIndex].formatedText[86])
for(let i=charIndex; (dataSet[setIndex].formatedText[i]?.canvasY && dataSet[setIndex].formatedText[i].canvasY == lineY);i++){
console.log('i', i)
if(dataSet[setIndex].formatedText[i]?.canvasX >= position.x){
charIndex = i;
break;
}
}
console.log('after loop')
} }
caretData.activeData = dataSet[setIndex];
caretData.index = charIndex;
caretData.canvasIndex = canvasIndex;
console.log("caretDatacanvasIndex:", caretData.canvasIndex)
caretData.blink = false
break;
}
if (!dataSet[setIndex].plainContent.length){
charIndex = 0
setIndex++
continue;
}
if (charIndex >= dataSet[setIndex].plainContent.length-1){
charIndex = 0
setIndex++
}else{
charIndex++
} }
console.log("final careCanvasIndex:", caretData.canvasIndex)
} }
console.log('full break;')
} }
function mousedownHandler(e) { function mousedownHandler(e) {
e.target.focus({ preventScroll: true }); e.target.focus({ preventScroll: true });
setCaretPosition(e) setCaretPosition(e)
reRenderPages(dataSet)
} }
renderInProgress = false renderInProgress = false
} }
......
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