Skip to content

A
a-doc-editor
Commit a368b0e6 by ramdayalmunda
Options

focus when adding list or bullets

parent 5ce24a3b
Showing with 89 additions and 57 deletions
dist/assets/a-doc-editor2.css
......@@ -52,6 +52,9 @@
.toolbar .item:hover {
background: #5fad5f;
}
[adc-type="popover"] {
pointer-events: none;
}
.option {
border: 1px solid black;
padding: 5px;
......
dist/assets/a-doc-editor2.js
......@@ -46,6 +46,7 @@ var ADocEditor = function (customConfig) {
style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) },
}
var pageList = []
var pageScrollingDiv = null
var focussedPage = null
var lastFocussedPage = null
var isRendering = false
......@@ -67,7 +68,7 @@ var ADocEditor = function (customConfig) {
</div>
</div>
</div>
<div class="page-list"></div>
<div class="page-list" adc="page-list"></div>
<div class="footer">
<div class="toolbar">
......@@ -114,6 +115,7 @@ var ADocEditor = function (customConfig) {
header: shadow.querySelector('.header'),
pageList: shadow.querySelector('page-list')
}
pageScrollingDiv = shadow.querySelector('[adc="page-list"]')
!(function zoomHandles() {
......@@ -132,10 +134,7 @@ var ADocEditor = function (customConfig) {
...caretData.style,
fontFamily: e.target.value,
}
if (lastFocussedPage) {
lastFocussedPage.focus()
lastFocussedPage.scrollIntoView({ behavior: 'manual' })
}
focusOnPage()
})
addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
addFonts(["./assets/fonts/ArchitectsDaughter-Regular.woff2", "./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter')
......@@ -148,11 +147,15 @@ var ADocEditor = function (customConfig) {
!(function handleList(){
let toggleNumber = shadow.querySelector('[adc-toggle="list-number"]')
let toggleBullet = shadow.querySelector('[adc-toggle="list-bullet"]')
let popover = shadow.querySelector('[adc-type="popover"]')
toggleNumber.addEventListener('click', (e)=>{
if (caretData.activeData){
caretData.activeData.type = caretData.activeData.type==1?0:1
caretData.blink=false
reRenderCanvas()
popover.classList.remove('show')
focusOnPage()
}
})
toggleBullet.addEventListener('click', (e)=>{
......@@ -160,6 +163,8 @@ var ADocEditor = function (customConfig) {
caretData.activeData.type = caretData.activeData.type==1?0:1
caretData.blink=false
reRenderCanvas()
popover.classList.remove('show')
focusOnPage()
}
})
})()
......@@ -259,7 +264,9 @@ var ADocEditor = function (customConfig) {
let tempWordWidth = 0
for (c = 0; c < dataBlock.plainContent.length; c++) {
let style = dataBlock?.formatedText?.[c]
if (/\s/.test(dataBlock.plainContent[c])) {
// condition to check if a blank character is found.
wordEndIndex = c
lineObj.charEndIndex = c
tempWordWidth = 0
......@@ -271,13 +278,19 @@ var ADocEditor = function (customConfig) {
...style,
width: charWidth
}
// // if with the current char the string could not fit on one line
if (tempLineWidth + charWidth > maxLineWidth){
// cannot add this// new line should be added//
if (tempWordWidth+charWidth>=maxLineWidth){
// this is to manage the casse where there is a set of long string without any blank space. In that case the text is broken and moved to next line.
wordEndIndex = c
lineObj.charEndIndex = c
tempWordWidth = 0
}
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1)
lines.push(lineObj)
lineObj = new getLineObj()
......@@ -293,6 +306,7 @@ var ADocEditor = function (customConfig) {
tempLineWidth = tempWordWidth
}
else{
// if the char can fit in the same line. then it is well and good
tempLineWidth += charWidth
tempWordWidth += charWidth
}
......@@ -325,6 +339,10 @@ var ADocEditor = function (customConfig) {
lines[l].y = y
ctx.save()
// this is to render the numbering and bullets etc
let setData = dataList[lines[l].dataIndex]
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
let char = setData?.plainContent[c]
......@@ -348,57 +366,6 @@ var ADocEditor = function (customConfig) {
return
}
function renderCaret(toLoop) {
clearTimeout(caretData.timeout)
let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
ctx.save()
if (caretData.previousCaret) {
ctx.putImageData(caretData.previousCaret.imageData, caretData.previousCaret.x, caretData.previousCaret.y);
caretData.previousCaret = null
}
if (!caretData.blink) {
let x = config.format.margin * pxMmRatio
let y = (config.format.margin) * pxMmRatio
let height = config.style.fontSize * pxMmRatio * 5 / 4
let charData = caretData.activeData.formatedText[caretData.index - 1]
if (charData) {
x = charData.x + charData.width
y = charData.y - charData.fontSize * pxMmRatio
} else {
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.charStartIndex)
if (lineObj) {
x += lineObj.tabWidth
y = lineObj.y - lineObj.maxFontSize * pxMmRatio
}
}
let width = height / 10
const imageData = ctx.getImageData(x, y, width, height);
const data = imageData.data;
caretData.previousCaret = { imageData: structuredClone(imageData), x, y }
// Invert the color of the rectangular region
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
// Alpha channel remains unchanged (data[i + 3])
}
ctx.putImageData(imageData, x, y);
caretData.blink = true
} else {
caretData.blink = false
}
ctx.restore()
if (toLoop) {
caretData.timeout = setTimeout(() => {
renderCaret(true)
}, caretData.timeoutDuration)
}
return
}
function getCharacterWidth(char, style) {
let canvas = pageList[0].el
let ctx = canvas.getContext('2d', { willReadFrequently: true })
......@@ -653,7 +620,7 @@ var ADocEditor = function (customConfig) {
function globalMouseDownHandler(e){
var elem = e.target
var targetId = elem.getAttribute('adc-target')
if (elem.getAttribute('adc-type')=='popover') return
if (elem.getAttribute('adc-type')=='popover'){ return }
while(!targetId && elem){
elem = elem.parentNode
if (elem?.getAttribute?.('adc-type')=='popover') return
......@@ -666,6 +633,67 @@ var ADocEditor = function (customConfig) {
} )
}
function renderCaret(toLoop) {
clearTimeout(caretData.timeout)
let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
ctx.save()
if (caretData.previousCaret) {
ctx.putImageData(caretData.previousCaret.imageData, caretData.previousCaret.x, caretData.previousCaret.y);
caretData.previousCaret = null
}
if (!caretData.blink) {
let x = config.format.margin * pxMmRatio
let y = (config.format.margin) * pxMmRatio
let height = config.style.fontSize * pxMmRatio * 5 / 4
let charData = caretData.activeData.formatedText[caretData.index - 1]
if (charData) {
x = charData.x + charData.width
y = charData.y - charData.fontSize * pxMmRatio
} else {
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.charStartIndex)
if (lineObj) {
x += lineObj.tabWidth
y = lineObj.y - lineObj.maxFontSize * pxMmRatio
}
}
let width = height / 10
const imageData = ctx.getImageData(x, y, width, height);
const data = imageData.data;
caretData.previousCaret = { imageData: structuredClone(imageData), x, y }
// Invert the color of the rectangular region
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
// Alpha channel remains unchanged (data[i + 3])
}
ctx.putImageData(imageData, x, y);
caretData.blink = true
} else {
caretData.blink = false
}
ctx.restore()
if (toLoop) {
caretData.timeout = setTimeout(() => {
renderCaret(true)
}, caretData.timeoutDuration)
}
return
}
function focusOnPage(){
caretData.blink = false
if (lastFocussedPage){
const scrollTop = pageScrollingDiv.scrollTop
lastFocussedPage.focus()
pageScrollingDiv.scrollTop = scrollTop
}
}
var returnObj = {
addFonts,
getConfiguration() { return JSON.parse(JSON.stringify(config)) },
......
dist/index.html
......@@ -24,6 +24,7 @@
<body>
<div class="body"></div>
<p style="font-family: 'Calibri';">Click on the <span>canvas</span> and start typing
<input />
<button onclick="log()">Log</button>
<button onclick="setData()">Set Data</button>
<button onclick="generatePDF()">Generate PDF</button>
......
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