Skip to content

A
a-doc-editor
Commit cd8e544e by ramdayalmunda
Options

left right handle on multiple pages

parent 06b575de
Showing with 40 additions and 10 deletions
dist/assets/a-doc-editor.css
......@@ -99,8 +99,8 @@
.a-doc-editor .body .scrolling-area {
position: absolute;
padding: 8px;
left: 20%;
right: 20%;
left: 5%;
right: 5%;
top: 0;
bottom: 0;
text-align: center;
......
dist/assets/a-doc-editor.js
let isModule = (typeof module != 'undefined') ? true : false
var ADocEditor = function (customConfig) {
var counter = 0
var counter = 7
var container = null
var mainComponent = null
var scrollingComponent = null
......@@ -41,7 +41,6 @@ var ADocEditor = function (customConfig) {
style: { ...config.style }
},
]
// // these lines are added only for testing please remove this on completion
// // paragraphs
dataSet = JSON.parse( '[{"id":1,"type":0,"formatedText":[],"plainContent":"Rendering text in HTML canvas involves using the CanvasRenderingContext2D interface to display text content within a canvas element. This process allows for dynamic text display, enabling the creation of custom text effects, labels, captions, or textual elements within the canvas.","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":2,"type":0,"plainContent":"To render text on a canvas, developers typically use the fillText() method provided by the Canvas API. This method allows the specification of text content, font styles, position, and color. Additionally, the measureText() method helps in determining the width of text, facilitating accurate positioning and layout arrangements.","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":3,"type":0,"plainContent":"Text in canvas can be customized by setting various font properties like font family, font size, style (bold, italic), alignment, and color. However, canvas text rendering lacks the text reflow and responsive layout capabilities inherent in HTML and CSS.","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":4,"type":0,"plainContent":"Despite its intricacies, canvas text rendering offers unparalleled creative freedom, enabling the development of immersive graphical experiences, custom typography, and visually stunning representations that enhance user engagement and interactivity within web-based applications and games.","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":5,"type":0,"plainContent":"Developers often use canvas text rendering to create graphical representations of text-based information, such as game interfaces, data visualizations, charts, and diagrams. Despite its flexibility in text manipulation and artistic possibilities, rendering text in canvas may require additional manual adjustments for formatting, spacing, and alignment compared to traditional HTML text rendering.","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}}]')
......@@ -134,6 +133,8 @@ var ADocEditor = function (customConfig) {
footerComponent = document.getElementById(footerComponentId)
leftSidebar = document.getElementById(leftSidebarId)
rightSidebar = document.getElementById(rightSidebarId)
leftSidebar.classList.add('hide')
rightSidebar.classList.add('hide')
mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click', (e) => {
leftSidebar.classList.toggle('hide')
})
......@@ -145,6 +146,7 @@ var ADocEditor = function (customConfig) {
}
function reRenderPages(dataList, option) {
console.clear()
if (renderInProgress) return
renderInProgress = true
......@@ -168,6 +170,7 @@ var ADocEditor = function (customConfig) {
calculateTextSizeAndPosition(canvasIndex, i)
}
renderTheLines()
console.log('render lines:', lines[0])
if (!caretData.blink && caretData.activeData) renderCaret()
......@@ -186,8 +189,8 @@ var ADocEditor = function (customConfig) {
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: "",
fontSize: 0,
maxFontSize: 0,
fontSize: 30,
maxFontSize: 30,
dataSetIndex: dataSetIndex,
charStartIndex: 0, // index from where to check
......@@ -279,7 +282,7 @@ var ADocEditor = function (customConfig) {
lines[l].canvasIndex = canvasIndex
let setData = dataSet[lines[l].dataSetIndex]
for (let c = lines[l].charStartIndex; c < lines[l].charEndIndex; c++) {
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
let char = setData?.plainContent[c]
if (char) {
let style = setData.formatedText[c]
......@@ -303,16 +306,42 @@ var ADocEditor = function (customConfig) {
function renderCaret() {
let ctx = canvasList[caretData.canvasIndex].el.getContext('2d', { willReadFrequently: true })
ctx.save()
console.log( 'lines', lines)
console.log( 'dataSet', dataSet)
let activeDataIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
let activeLine = lines.find( item => item.dataSetIndex == activeDataIndex && item.charEndIndex>caretData.index )
let activeLine = lines.find( (item, i) => {
console.log(i, 'line', item.dataSetIndex, activeDataIndex, '--',item.charEndIndex , caretData.index )
console.log(i+1, 'line+1', lines[i+1]?.dataSetIndex, activeDataIndex, '--',lines[i+1]?.charEndIndex , caretData.index )
if (item.dataSetIndex == activeDataIndex){
if (item.charEndIndex == -1) return true
if (item.charEndIndex>=caretData.index) return true
if ( !(lines[i+1]?.dataSetIndex==activeDataIndex) ) return true
else false
}else return false
})
console.log('activeLine', activeLine)
let characterData = dataSet[activeDataIndex].formatedText[ caretData.index ]
let rectX = characterData?characterData.x:activeLine.x,
let rectX = characterData?.x,
rectY = activeLine.y-activeLine.maxFontSize,
rectWidth = 2,
rectHeight = 5 * activeLine.maxFontSize / 4;
if (!characterData && dataSet[activeDataIndex].formatedText?.[ caretData.index-1 ]){
console.log('handle X on the last char of the parapgraph')
rectX = dataSet[activeDataIndex].formatedText?.[ caretData.index-1 ]?.x+dataSet[activeDataIndex].formatedText?.[ caretData.index-1 ]?.width
}
if ( activeLine.charEndIndex == caretData.index ){
console.log('handle X on last char of the line')
rectX = dataSet[activeDataIndex].formatedText?.[ caretData.index-1 ]?.x+dataSet[activeDataIndex].formatedText?.[ caretData.index-1 ]?.width
}
if (!(rectX>0 || rectX==0)){ rectX = activeLine.x }
console.log('rectX:', rectX)
console.log('rectY:', rectY)
const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight);
const data = imageData.data;
......@@ -325,6 +354,7 @@ var ADocEditor = function (customConfig) {
// Alpha channel remains unchanged (data[i + 3])
ctx.putImageData(imageData, rectX, rectY);
}
console.log('caretData', caretData)
ctx.restore()
}
......
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