Skip to content

A
a-doc-editor
Commit a91248d9 by ramdayalmunda
Options

setting up new data

parent 644d57ce
Showing with 62 additions and 145 deletions
dist/assets/a-doc-editor.js
......@@ -3,8 +3,6 @@ var ADocEditor = function (customConfig) {
var counter = 0
var container = null
var mainComponent = null
var headerComponent = null
var footerComponent = null
var scrollingComponent = null
var leftSidebar = null
var rightSidebar = null
......@@ -12,7 +10,7 @@ var ADocEditor = function (customConfig) {
element: "",
pageSetup: {
width: 210,
height: 210,
height: 140,
},
format: {
background: "#fff",
......@@ -25,10 +23,10 @@ var ADocEditor = function (customConfig) {
fontFamily: 'Arial',
bold: false,
italic: false,
fontColor: "#1e1f77"
fontColor: "#0004"
},
}
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
......@@ -43,6 +41,8 @@ var ADocEditor = function (customConfig) {
}
]
var lines = []
var caretData = {
activeData: dataSet[0],
index: 0,
......@@ -51,8 +51,8 @@ var ADocEditor = function (customConfig) {
blink: false,
canvasIndex: 0,
caretSize: config.style.fontSize,
x: config.style.margin,
y: 3*config.style.fontSize/4,
x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4),
}
var renderInProgress = false;
......@@ -128,23 +128,17 @@ 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')
})
// mainComponent = document.createElement('div')
// mainComponent.setAttribute('class', 'a-doc-editor')
// container.append(mainComponent)
reRenderPages(dataSet)
}
function reRenderPages(dataList, blinking = false) {
function reRenderPages(dataList) {
if (renderInProgress) return
renderInProgress = true
......@@ -157,7 +151,7 @@ var ADocEditor = function (customConfig) {
for (let i = 0; i < canvasList.length; i++) {
let ctx = canvasList[i].el.getContext('2d', { willReadFrequently: true })
ctx.save()
ctx.clearRect(0, 0, canvasList[i].el.width, canvasList[i].el.height)
ctx.clearRect(0, 0, canvasList[i].el.width, canvasList[i].el.height); // clears the canvas
ctx.fillStyle = config.format.background
ctx.fillRect(0, 0, canvasList[i].el.width, canvasList[i].el.height)
ctx.restore()
......@@ -167,73 +161,15 @@ var ADocEditor = function (customConfig) {
let canvas = canvasList[canvasIndex].el
canvas.setAttribute("tabIndex", -1)
renderText(canvas, dataList[i])
x = 0;
if (dataList[i].id == caretData.activeData.id) {
caretData.canvasIndex = canvasIndex;
}
}
function renderText(canvas, dataSet) {
function renderText(canvas, dataBlock) {
console.log('to render text', dataBlock)
let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save()
ctx.font = `${config.style.fontSize}px ${config.style.fontFamily}`; ctx.fillStyle = "#0006"; ctx.fillText("A", x,y+config.style.fontSize)
let maxWidth = config.pageSetup.canvasWidth
let wordStartIndex = 0
let wordEndIndex = 0
let wordsLength = 0;
dataSet.formatedText = []
for (let i = 0; i < dataSet.plainContent.length; i++) {
if (/\s+/.test(dataSet.plainContent[i])) {
wordEndIndex = i
}
let style = { ...config.style, ...dataSet?.style?.[i] }
if (i == 0) {
y += style.fontSize
}
ctx.save()
ctx.font = `${style.fontSize}px ${style.fontFamily}`
ctx.fillStyle = style.fontColor
let charWidth = ctx.measureText(dataSet.plainContent[i]).width
ctx.restore()
dataSet.formatedText[i] = {
char: dataSet.plainContent[i],
width: charWidth,
x: x,
y: y,
canvas: canvas,
...style,
}
x += charWidth
if (wordsLength + charWidth <= maxWidth) {
wordsLength += charWidth
} else {
i = wordEndIndex
wordsLength = 0
y += style.fontSize
x = 0;
wordStartIndex = wordEndIndex
}
}
for (let i = 0; i < dataSet.formatedText.length; i++) {
ctx.save()
ctx.font = `${dataSet.formatedText[i].fontSize}px ${dataSet.formatedText[i].fontFamily}`
ctx.fillStyle = dataSet.formatedText[i].fontColor
ctx.fillText(dataSet.formatedText[i].char, dataSet.formatedText[i].x, dataSet.formatedText[i].y)
ctx.restore()
}
// to calculate the lines
ctx.restore()
......@@ -244,15 +180,13 @@ var ADocEditor = function (customConfig) {
// to render caret
function renderCaret() {
let ctx = canvasList[caretData.canvasIndex].el.getContext('2d', { willReadFrequently: true })
let activeTextData = caretData.activeData.formatedText[caretData.index - 1]
if (!activeTextData) activeTextData = caretData.activeData.style
let rectX = activeTextData?.x + activeTextData?.width;
let rectY = activeTextData?.y - activeTextData?.fontSize;
rectX = rectX ? rectX : 0
rectY = rectY ? rectY : 0
let rectWidth = 2;
let rectHeight = caretData.caretSize + activeTextData?.fontSize/3;
ctx.save()
let rectX = 0, rectY = 0, rectWidth = 2, rectHeight = 5*config.style.fontSize/4;
if (caretData.caretIndex == 0) {
// pick style from line
} else {
// pick style for previous character
}
const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight);
const data = imageData.data;
......@@ -264,6 +198,8 @@ var ADocEditor = function (customConfig) {
// Alpha channel remains unchanged (data[i + 3])
ctx.putImageData(imageData, rectX, rectY);
}
ctx.restore()
}
function createCanvas() {
......@@ -283,10 +219,6 @@ var ADocEditor = function (customConfig) {
focusedCanvas = e.target
caretData.blink = false
reRenderPages(dataSet)
caretData.interval = setInterval(() => {
caretData.blink = !caretData.blink
reRenderPages(dataSet, true)
}, caretData.intervalDuration)
}
function onBlurHandler(e) {
focusedCanvas = null
......@@ -315,13 +247,13 @@ 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
if (caretData) {
if (caretData.activeData.type == 0) { // for plain text // just go to next line
let newLineData = {
id: ++counter,
type: 0,
plainContent: "",
style: JSON.parse( JSON.stringify(caretData.activeData.formatedText[caretData.activeData.formatedText.length-1]) )
style: JSON.parse(JSON.stringify(caretData.activeData.formatedText[caretData.activeData.formatedText.length - 1]))
}
newLineData.style.y += newLineData.style.fontSize
newLineData.style.x = 0
......@@ -343,14 +275,14 @@ var ADocEditor = function (customConfig) {
}
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
}
}
......@@ -359,12 +291,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
}
......@@ -378,33 +310,21 @@ var ADocEditor = function (customConfig) {
reRenderPages(dataSet)
clearInterval(caretData.interval)
caretData.interval = setInterval(() => {
caretData.blink = !caretData.blink
reRenderPages(dataSet, true)
}, caretData.intervalDuration)
}
function setCaretPosition(e){
function setCaretPosition(e) {
console.log('to set caret position, on click')
let rect = e.target.getBoundingClientRect()
// console.log('rect', rect)
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
console.log('positionY', position.y, dataSet[canvasData.dataIndex].style.fontSize)
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) ){
console.log('breaked')
break;
}
}
}
}
......@@ -430,8 +350,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
......
dist/assets/idea.js
......@@ -14,7 +14,6 @@ var defaultConfig = {
format: {
background: "#fff",
margin: 20, // mm //
canvasMargin: 20, // px //
border: "", // could be image or anything
},
style: {
......@@ -26,6 +25,16 @@ var defaultConfig = {
},
}
var caretData = {
activeData: dataSet[0], // this holds the active data from the dataSet
index: 0,// this holds the caret index of the character in that activeData
interval: null, // to store the setInterval for the blinking cursor animation
intervalDuration: 800, // ms // to detemine for how long the caret is blinked before reappearing again
blink: false, // this will keep alternating to to show the caret or not
canvasIndex: 0, // to store index of the canvas which isBeing edited right now.
caretSize: config.style.fontSize,
}
var dataType = [
"plainText", // plain text, normal text in a pdf or doc text
"list", // items displayed in a list format
......@@ -40,28 +49,16 @@ var dataSet = [
},
{
type: 1, // type 1, denotes it is a list,
itemType: "",
listType: "",
tabNumber: 0, // tab number by default is zero
items: [
{
plainText: "This is the first item in the list. it can be wrapped around the line if necessary"
},
{
plainText: "Second item is here."
},
{
plainText: "The list can be nested like this",
items: [
{
plainText: "First nested item is here"
},
{
plainText: "This is the second nested item"
}
]
}
]
// this is the second item on the list because the prvious item is also a list and has the same tabNumber
type: 1, // type 1, denotes it is a list,
itemType: "",
tabNumber: 0, // tab number by default is zero
plainText: "The second item on the list is here."
},
{
type: 0, // this is just a blank line that is added
......
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