Skip to content

A
a-doc-editor
Commit e042810a by ramdayalmunda
Options

handling new page on enter

parent 668fae9e
Showing with 79 additions and 61 deletions
dist/assets/a-doc-editor.css
......@@ -5,8 +5,8 @@
}
.a-doc-editor canvas:focus-visible {
/* outline: auto rgb(0, 68, 255, 50%); */
outline: none;
outline: auto rgb(0, 68, 255, 50%);
/* outline: none; */
background: #fff;
}
......@@ -109,7 +109,7 @@
}
.a-doc-editor .body .scrolling-area canvas.page {
background: #f3f3f3;
background: #dd8181;
margin-bottom: 10px;
width: 100%;
box-shadow: 4px 0px 10px 4px rgba(0, 0, 0, 0.4);
......
dist/assets/a-doc-editor.js
......@@ -31,7 +31,7 @@ var ADocEditor = function (customConfig) {
},
}
defaultConfig.style.y = defaultConfig.style.fontSize
var config = JSON.parse( JSON.stringify( defaultConfig ) );
var config = JSON.parse(JSON.stringify(defaultConfig));
var canvasList = []
const dataTypes = [
"paragraph", // simple text filled line by line
......@@ -55,7 +55,7 @@ var ADocEditor = function (customConfig) {
canvasIndex: 0,
caretSize: config.style.fontSize,
x: config.style.margin,
y: 3*config.style.fontSize/4,
y: 3 * config.style.fontSize / 4,
}
var renderInProgress = false;
......@@ -131,10 +131,10 @@ var ADocEditor = function (customConfig) {
footerComponent = document.getElementById(footerComponentId)
leftSidebar = document.getElementById(leftSidebarId)
rightSidebar = document.getElementById(rightSidebarId)
mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click',(e)=>{
mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click', (e) => {
leftSidebar.classList.toggle('hide')
})
mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click',(e)=>{
mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click', (e) => {
rightSidebar.classList.toggle('hide')
})
......@@ -152,7 +152,7 @@ var ADocEditor = function (customConfig) {
renderInProgress = true
let canvasIndex = 0
if (!canvasList.length) canvasList[0] = { el: createCanvas(), dataIndex: 0 }
if (!canvasList.length) canvasList[0] = { id: ++counter, el: createCanvas(), dataIndex: 0 }
var x = 0, y = 0;
......@@ -167,24 +167,24 @@ var ADocEditor = function (customConfig) {
}
for (let i = 0; i < dataList.length; i++) {
if (dataList[i].plainContent.length ==0 ){
y += ( dataList?.[i].style.fontSize )
if (dataList[i].plainContent.length == 0) {
y += (dataList?.[i].style.fontSize)
}
let canvas = canvasList[canvasIndex].el
canvas.setAttribute("tabIndex", -1)
renderText(canvas, dataList[i])
calculateTextPositions(canvas, dataList[i])
x = 0;
if (dataList[i].id == caretData.activeData.id) {
caretData.canvasIndex = canvasIndex;
}
}
renderFormattedData()
function renderText(canvas, dataBlock) {
function calculateTextPositions(canvas, dataBlock) {
let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save()
let maxWidth = config.pageSetup.canvasWidth
let wordStartIndex = 0
let wordEndIndex = 0
let wordsLength = 0;
dataBlock.formatedText = []
......@@ -222,27 +222,39 @@ var ADocEditor = function (customConfig) {
wordsLength = 0
y += style.fontSize
x = 0;
wordStartIndex = wordEndIndex
}
}
for (let i = 0; i < dataBlock.formatedText.length; i++) {
ctx.save()
ctx.font = `${dataBlock.formatedText[i].fontSize}px ${dataBlock.formatedText[i].fontFamily}`
ctx.fillStyle = dataBlock.formatedText[i].fontColor
ctx.fillText(dataBlock.formatedText[i].char, dataBlock.formatedText[i].x, dataBlock.formatedText[i].y)
ctx.restore()
}
ctx.restore()
return true
}
function renderFormattedData() {
let canvasIndex = 0;
let pageYOffset = 0;
for (let j = 0; j < dataSet.length; j++) {
let dataBlock = dataSet[j]
if ( dataBlock.style.y - pageYOffset>= config.pageSetup.canvasHeight ){
pageYOffset = dataBlock.style.y - dataBlock.style.fontSize
canvasIndex++;
if (!canvasList[canvasIndex]) canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: j }
}
ctx.restore()
return true
let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
ctx.save()
for (let i = 0; i < dataBlock.formatedText.length; i++) {
ctx.font = `${dataBlock.formatedText[i].fontSize}px ${dataBlock.formatedText[i].fontFamily}`
ctx.fillStyle = dataBlock.formatedText[i].fontColor
ctx.fillText(dataBlock.formatedText[i].char, dataBlock.formatedText[i].x, (dataBlock.formatedText[i].y-pageYOffset))
}
ctx.restore()
}
}
if (!caretData.blink && caretData.activeData) renderCaret()
......@@ -256,7 +268,7 @@ var ADocEditor = function (customConfig) {
rectX = rectX ? rectX : 0
rectY = rectY ? rectY : 0
let rectWidth = 2;
let rectHeight = caretData.caretSize + activeTextData?.fontSize/3;
let rectHeight = caretData.caretSize + activeTextData?.fontSize / 3;
const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight);
const data = imageData.data;
......@@ -274,13 +286,19 @@ var ADocEditor = function (customConfig) {
function createCanvas() {
let canvas = document.createElement('canvas')
canvas.setAttribute('class', 'page')
canvas.setAttribute('id', `canvas_${++counter}`)
canvas.width = config.pageSetup.canvasWidth
canvas.height = config.pageSetup.canvasHeight
canvas.addEventListener('keydown', keydownHandler)
canvas.addEventListener('mousedown', mousedownHandler)
canvas.addEventListener("focus", onFocusHandler)
canvas.addEventListener("blur", onBlurHandler)
// canvas.addEventListener("focus", onFocusHandler)
// canvas.addEventListener("blur", onBlurHandler)
scrollingComponent.append(canvas)
let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.fillStyle = config.format.background
ctx.fillRect(0, 0, canvas.width, canvas.height)
return canvas
}
......@@ -308,7 +326,7 @@ var ADocEditor = function (customConfig) {
caretData.blink = false
if (e.shiftKey && e.ctrlKey) { } // ctr+shift combination
if (e.keyCode == 16 || e.keyCode==18 || e.keyCode==20) {
if (e.keyCode == 16 || e.keyCode == 18 || e.keyCode == 20) {
return
}
else if (e.ctrlKey) {
......@@ -324,16 +342,16 @@ var ADocEditor = function (customConfig) {
e.preventDefault()
}
else if (e.keyCode == 13) { // Enter Key
if (caretData){
if (caretData.activeData.type == 0){ // for plain text // just go to next line
let style = caretData?.activeData?.formatedText?.[caretData.activeData.formatedText.length-1]
if (caretData) {
if (caretData.activeData.type == 0) { // for plain text // just go to next line
let style = caretData?.activeData?.formatedText?.[caretData.activeData.formatedText.length - 1]
if (!style) style = caretData?.activeData?.style
if (!style) style = config.style
let newLineData = {
id: ++counter,
type: 0,
plainContent: "",
style: JSON.parse( JSON.stringify(style) )
style: JSON.parse(JSON.stringify(style))
}
newLineData.style.y += newLineData.style.fontSize
newLineData.style.x = 0
......@@ -350,32 +368,32 @@ var ADocEditor = function (customConfig) {
++caretData.index
}
else if (e.keyCode == 8) { // backspace
if (caretData.index <= 0){
let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
if (currentIndex>0){
caretData.activeData = dataSet[currentIndex-1]
caretData.index = dataSet[currentIndex-1].plainContent.length
if (dataSet[currentIndex].plainContent.length!=0){
if (caretData.index <= 0) {
let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
if (currentIndex > 0) {
caretData.activeData = dataSet[currentIndex - 1]
caretData.index = dataSet[currentIndex - 1].plainContent.length
if (dataSet[currentIndex].plainContent.length != 0) {
caretData.activeData.plainContent += dataSet[currentIndex].plainContent
caretData.activeData.formatedText.push( ...dataSet[currentIndex].formatedText )
caretData.activeData.formatedText.push(...dataSet[currentIndex].formatedText)
}
dataSet.splice(currentIndex, 1)
}
}else{
} else {
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index - 1) + caretData.activeData.plainContent.slice(caretData.index)
caretData.index = caretData.index - 1
}
}
else if (e.keyCode == 37) { // left key
e.preventDefault()
if (caretData.index<=0){
let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
let previousData = dataSet[currentIndex-1]
if (previousData){
if (caretData.index <= 0) {
let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
let previousData = dataSet[currentIndex - 1]
if (previousData) {
caretData.activeData = previousData
caretData.index = previousData.plainContent.length
}
}else{
} else {
caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1
}
}
......@@ -384,12 +402,12 @@ var ADocEditor = function (customConfig) {
}
else if (e.keyCode == 39) { // right key
e.preventDefault()
if (caretData.index <= caretData.activeData.plainContent.length-1){
if (caretData.index <= caretData.activeData.plainContent.length - 1) {
caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index + 1
}else{
let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
let nextData = dataSet[currentIndex+1]
if (nextData){
} else {
let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
let nextData = dataSet[currentIndex + 1]
if (nextData) {
caretData.index = 0
caretData.activeData = nextData
}
......@@ -410,20 +428,20 @@ var ADocEditor = function (customConfig) {
// }, caretData.intervalDuration)
}
function setCaretPosition(e){
function setCaretPosition(e) {
let rect = e.target.getBoundingClientRect()
let position = {
xP: e.offsetX/rect.width,
yP: e.offsetY/rect.height,
xP: e.offsetX / rect.width,
yP: e.offsetY / rect.height,
}
let canvasData = canvasList.find( item => item.el == e.target )
position.x = position.xP*config.pageSetup.canvasWidth
position.y = position.yP*config.pageSetup.canvasHeight
let canvasData = canvasList.find(item => item.el == e.target)
position.x = position.xP * config.pageSetup.canvasWidth
position.y = position.yP * config.pageSetup.canvasHeight
let lineY = dataSet[canvasData.dataIndex].style.y
for (let i=canvasData.dataIndex; i<dataSet.length; i++){
for ( let j=0; j< dataSet[i].formatedText.length; j++ ){
if ( Math.floor( dataSet[i].formatedText[j].x ) == Math.floor(position.x) ){
for (let i = canvasData.dataIndex; i < dataSet.length; i++) {
for (let j = 0; j < dataSet[i].formatedText.length; j++) {
if (Math.floor(dataSet[i].formatedText[j].x) == Math.floor(position.x)) {
break;
}
}
......@@ -453,8 +471,8 @@ var ADocEditor = function (customConfig) {
caretData.activeData = null
caretData.activeData = dataSet[0]
},
getContent: function (){
return JSON.parse( JSON.stringify( dataSet ) )
getContent: function () {
return JSON.parse(JSON.stringify(dataSet))
}
}
return returnObj
......
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