Skip to content

A
a-doc-editor
Commit f4171454 by ramdayalmunda
Options

arrow keys function

parent 2d66b649
Showing with 47 additions and 31 deletions
dist/assets/a-doc-editor2.js
......@@ -46,7 +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 focussedPage = null
var focussedPage = null
var lastFocussedPage = null
var isRendering = false
function initialize() {
......@@ -127,7 +127,10 @@ var ADocEditor = function (customConfig) {
...caretData.style,
fontFamily: e.target.value,
}
if (lastFocussedPage) {
lastFocussedPage.focus()
lastFocussedPage.scrollIntoView({ behavior: 'manual' })
}
})
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')
......@@ -226,7 +229,7 @@ var ADocEditor = function (customConfig) {
// to calculate the lines
let tempLineWidth = 0;
let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio*2)
let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2)
let wordEndIndex = 0; // this stores the index of the word which can fit in the line;
for (c = 0; c < dataBlock.plainContent.length; c++) {
let style = dataBlock?.formatedText?.[c]
......@@ -277,10 +280,10 @@ var ADocEditor = function (customConfig) {
}
function renderLines() {
let x = 0, y = config.format.margin*pxMmRatio;
let x = 0, y = config.format.margin * pxMmRatio;
for (let l = 0; l < lines.length; l++) {
let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
x = config.format.margin*pxMmRatio
x = config.format.margin * pxMmRatio
y = y + (lines[l].maxFontSize * pxMmRatio)
lines[l].y = y
ctx.save()
......@@ -317,23 +320,23 @@ var ADocEditor = function (customConfig) {
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){
y = lineObj.y-lineObj.maxFontSize*pxMmRatio
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) {
y = lineObj.y - lineObj.maxFontSize * pxMmRatio
}
}
let width = height/10
let width = height / 10
const imageData = ctx.getImageData(x, y, width, height);
const data = imageData.data;
caretData.previousCaret = { imageData: structuredClone(imageData), x, y }
......@@ -351,7 +354,7 @@ var ADocEditor = function (customConfig) {
}
ctx.restore()
if(toLoop){
if (toLoop) {
caretData.timeout = setTimeout(() => {
renderCaret(true)
}, caretData.timeoutDuration)
......@@ -404,9 +407,9 @@ var ADocEditor = function (customConfig) {
if (e.altKey) return
else if (e.key == 'Backspace') {
if (caretData.index == 0) {
let activeDataIndex = dataList.findIndex( item => item.id==caretData.activeData.id )
if (activeDataIndex>0){
caretData.activeData = dataList[activeDataIndex-1]
let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
if (activeDataIndex > 0) {
caretData.activeData = dataList[activeDataIndex - 1]
caretData.index = caretData.activeData.plainContent.length
}
} else {
......@@ -437,24 +440,24 @@ var ADocEditor = function (customConfig) {
caretData.activeData.formatedText.splice(caretData.index, 0, caretData.style)
++caretData.index
}
else if (e.key=='ArrowLeft'){
else if (e.key == 'ArrowLeft') {
console.log('Left')
if (caretData.index){
if (caretData.index) {
--caretData.index
console.log('move')
}
}
else if (e.key=='ArrowRight'){
else if (e.key == 'ArrowRight') {
console.log('Right')
if (caretData.index<caretData.activeData.plainContent.length){
if (caretData.index < caretData.activeData.plainContent.length) {
console.log('move')
++caretData.index
}
}
else if (e.key=='ArrowUp'){
else if (e.key == 'ArrowUp') {
console.log('Up')
}
else if (e.key=='ArrowDown'){
else if (e.key == 'ArrowDown') {
console.log('Down')
}
caretData.blink = false
......@@ -462,7 +465,20 @@ var ADocEditor = function (customConfig) {
reRenderCanvas(dataList)
}
function mousedownHandler(e) {
// console.log('mouse down')
console.clear()
if (focussedPage) {
console.log('mouse down', e.target)
const rect = e.target.getBoundingClientRect(); // Get the position of the canvas
const x = e.clientX - rect.left; // Adjusted X coordinate
const y = e.clientY - rect.top; // Adjusted Y coordinate
const width = Math.round(rect.width)
const height = Math.round(rect.height)
console.log(`${x} ${y} -- ${width} ${height}`);
console.log(dataList)
console.log(lines)
}
}
function onFocusHandler(e) {
focussedPage = e.target
......
dist/script.js
......@@ -25,7 +25,7 @@ function setData() {
editor.loadContent(extractedData)
}
function generatePDF(){
function generatePDF() {
editor.generatePDF("your_doc-pdf-lib.pdf")
}
......
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