Skip to content

A
a-doc-editor
Commit 01295e1a by ramdayalmunda
Options

some feature added for headers

parent 71818282
Showing with 212 additions and 40 deletions
dist/assets/a-doc-editor.css
...@@ -12,7 +12,8 @@ ...@@ -12,7 +12,8 @@
hidden { hidden {
display: none; display: none;
} }
canvas:focus-visible{
canvas:focus-visible {
outline: unset; outline: unset;
} }
...@@ -38,7 +39,7 @@ canvas:focus-visible{ ...@@ -38,7 +39,7 @@ canvas:focus-visible{
background-color: goldenrod; background-color: goldenrod;
} }
.toolbar [adc-type="menu-item"]:hover [adc-type="menu-options"] { .toolbar [adc-type="menu-item"].hover [adc-type="menu-options"] {
opacity: 1; opacity: 1;
z-index: 10; z-index: 10;
pointer-events: auto; pointer-events: auto;
...@@ -57,7 +58,7 @@ canvas:focus-visible{ ...@@ -57,7 +58,7 @@ canvas:focus-visible{
.toolbar .item { .toolbar .item {
position: relative; position: relative;
background: #408640; background: white;
border: 1px solid gray; border: 1px solid gray;
border-radius: 3px; border-radius: 3px;
padding-top: 2px; padding-top: 2px;
...@@ -71,10 +72,12 @@ canvas:focus-visible{ ...@@ -71,10 +72,12 @@ canvas:focus-visible{
.popover { .popover {
position: absolute; position: absolute;
padding: 5px; padding: 5px;
background-color: gray; background-color: #fff;
border: 1px solid purple; border: 1px solid purple;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
text-align: center;
box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.4);
} }
.popover.show { .popover.show {
...@@ -84,7 +87,8 @@ canvas:focus-visible{ ...@@ -84,7 +87,8 @@ canvas:focus-visible{
} }
.toolbar .item:hover { .toolbar .item:hover {
background: #5fad5f; background: white;
animation: shineAnimation 1s infinite alternate;
} }
[adc-type="popover"] { [adc-type="popover"] {
...@@ -110,6 +114,59 @@ canvas:focus-visible{ ...@@ -110,6 +114,59 @@ canvas:focus-visible{
background-color: #f5c468; background-color: #f5c468;
} }
.content-area {
display: flex;
overflow-x: auto;
overflow-y: hidden;
}
.content-area .left-sidebar{
width: 200px;
background-color:#408640;
padding: 5px;
}
.content-area .right-sidebar{
width: 200px;
background-color: #f5c468;
padding: 5px;
}
.content-area .left-sidebar,
.content-area .page-list,
.content-area .right-sidebar{
flex-shrink: 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
text-wrap: nowrap;
transition: 0.5s;
margin-top: 0;
}
.left-sidebar .toggle-btn,
.right-sidebar .toggle-btn{
display: block;
position: static;
top: 0;
width: 100%;
text-align: center;
}
.left-sidebar .content,
.right-sidebar .content{
opacity: 1;
position: relative;
left: 0%;
transition: 0.5s;
}
.left-sidebar.hide,
.right-sidebar.hide{
width: 50px;
}
.left-sidebar.hide .content,
.right-sidebar.hide .content{
opacity: 0;
}
.page-list { .page-list {
position: relative; position: relative;
display: block; display: block;
...@@ -126,7 +183,8 @@ canvas:focus-visible{ ...@@ -126,7 +183,8 @@ canvas:focus-visible{
height: auto; height: auto;
display: block; display: block;
position: relative; position: relative;
margin: 20px; margin-top: 20px;
margin-bottom: 20px;
} }
.footer { .footer {
...@@ -135,3 +193,15 @@ canvas:focus-visible{ ...@@ -135,3 +193,15 @@ canvas:focus-visible{
width: 100%; width: 100%;
background-color: red; background-color: red;
} }
@keyframes shineAnimation {
0% {
background: #fff;
}
50% {
background: #ddd;
}
100% {
background: #fff;
}
}
\ No newline at end of file
dist/assets/a-doc-editor.js
...@@ -8,6 +8,13 @@ var ADocEditor = function (customConfig) { ...@@ -8,6 +8,13 @@ var ADocEditor = function (customConfig) {
} }
const letters = { "0": "a", "1": "b", "2": "c", "3": "d", "4": "e", "5": "f", "6": "g", "7": "h", "8": "i", "9": "j", "a": "k", "b": "l", "c": "m", "d": "n", "e": "o", "f": "p", "g": "q", "h": "r", "i": "s", "j": "t", "k": "u", "l": "v", "m": "w", "n": "x", "o": "y", "p": "z" } const letters = { "0": "a", "1": "b", "2": "c", "3": "d", "4": "e", "5": "f", "6": "g", "7": "h", "8": "i", "9": "j", "a": "k", "b": "l", "c": "m", "d": "n", "e": "o", "f": "p", "g": "q", "h": "r", "i": "s", "j": "t", "k": "u", "l": "v", "m": "w", "n": "x", "o": "y", "p": "z" }
const romanNumerals = [["I", "IV", "V", "IX"], ["X", "XL", "L", "XC"], ["C", "CD", "D", "CM"], ["M"]]; const romanNumerals = [["I", "IV", "V", "IX"], ["X", "XL", "L", "XC"], ["C", "CD", "D", "CM"], ["M"]];
const styleList = [
{ name: "Normal Text", fontFamily: "Calibri", fontSize: 11, fontColor: "#000", bold: false, italic: false },
{ name: "Title", fontFamily: "Calibri", fontSize: 26, fontColor: "#000", bold: false, italic: false },
{ name: "Subtitle", fontFamily: "Calibri", fontSize: 15, fontColor: "#555", bold: false, italic: false },
{ name: "Heading 1", fontFamily: "Calibri", fontSize: 20, fontColor: "#000", bold: false, italic: false },
]
var defaultConfig = { var defaultConfig = {
pageSetup: { size: "A4" }, zoom: 1, pageSetup: { size: "A4" }, zoom: 1,
format: { format: {
...@@ -47,7 +54,11 @@ var ADocEditor = function (customConfig) { ...@@ -47,7 +54,11 @@ var ADocEditor = function (customConfig) {
pageIndex: 0, pageIndex: 0,
caretSize: config.style.fontSize, caretSize: config.style.fontSize,
previousCaret: null, previousCaret: null,
style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) }, style: null,
dimension: {
x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4)
}
} }
var pageList = [] var pageList = []
var pageScrollingDiv = null var pageScrollingDiv = null
...@@ -86,8 +97,8 @@ var ADocEditor = function (customConfig) { ...@@ -86,8 +97,8 @@ var ADocEditor = function (customConfig) {
<div class="item" adc="list-handler" adc-target="list-popover"> <div class="item" adc="list-handler" adc-target="list-popover">
<span>L</span> <span>L</span>
<div class="popover" adc="list-popover" adc-type="popover"> <div class="popover" adc="list-popover" adc-type="popover">
<div class="option" adc-toggle="listing-option" value="1">•&nbsp;&nbsp;Bullets&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> <div class="option" adc-toggle="popover" value="1">•&nbsp;&nbsp;Bullets&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="option" adc-toggle="listing-option" value="0">1. Numbers</div> <div class="option" adc-toggle="popover" value="0">1. Numbers</div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
...@@ -95,9 +106,28 @@ var ADocEditor = function (customConfig) { ...@@ -95,9 +106,28 @@ var ADocEditor = function (customConfig) {
<input type="number" adc="font-size-input" class="small-input"> <input type="number" adc="font-size-input" class="small-input">
<button adc="font-size-change" class="small-btn" value="+1">+</button> <button adc="font-size-change" class="small-btn" value="+1">+</button>
</div> </div>
<div class="item" adc="style-handler" adc-target="style-popover" style="width: 150px;">
<span>Normal Text</span>
<div class="popover" adc="style-popover" adc-type="popover">
<div class="option" adc-toggle="popover" value="1">Normal Text</div>
<div class="option" adc-toggle="popover" value="0">Header 1</div>
</div>
</div>
</div>
</div>
<div class="content-area">
<div class="left-sidebar hide">
<button class="toggle-btn" adc="toggle-left-sidebar">X</button>
<div class="content" adc="left-sidebar-content"></div>
</div>
<div class="page-list" adc="page-list"></div>
<div class="right-sidebar hide">
<button class="toggle-btn" adc="toggle-right-sidebar">X</button>
<div class="content" adc="right-sidebar-content"></div>
</div> </div>
</div> </div>
<div class="page-list" adc="page-list"></div>
<div class="footer"> <div class="footer">
<div class="toolbar"> <div class="toolbar">
...@@ -146,7 +176,7 @@ var ADocEditor = function (customConfig) { ...@@ -146,7 +176,7 @@ var ADocEditor = function (customConfig) {
htmlObj = { htmlObj = {
header: shadow.querySelector('.header'), header: shadow.querySelector('.header'),
pageList: shadow.querySelector('page-list') pageList: shadow.querySelector('[adc="page-list"]')
} }
pageScrollingDiv = shadow.querySelector('[adc="page-list"]') pageScrollingDiv = shadow.querySelector('[adc="page-list"]')
...@@ -178,7 +208,7 @@ var ADocEditor = function (customConfig) { ...@@ -178,7 +208,7 @@ var ADocEditor = function (customConfig) {
})() })()
!(function handleList() { !(function handleList() {
let listItems = shadow.querySelectorAll('[adc-toggle="listing-option"]') let listItems = shadow.querySelectorAll('[adc-toggle="popover"]')
let popover = shadow.querySelector('[adc-type="popover"]') let popover = shadow.querySelector('[adc-type="popover"]')
for (let i = 0; i < listItems.length; i++) { for (let i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', (e) => { listItems[i].addEventListener('click', (e) => {
...@@ -202,7 +232,7 @@ var ADocEditor = function (customConfig) { ...@@ -202,7 +232,7 @@ var ADocEditor = function (customConfig) {
!(function fontSizeHandler() { !(function fontSizeHandler() {
let fontSizeInput = shadow.querySelector('[adc="font-size-input"]') let fontSizeInput = shadow.querySelector('[adc="font-size-input"]')
fontSizeInput.value = caretData.style.fontSize fontSizeInput.value = (caretData?.style?caretData:config).style.fontSize
let fontSizeChangers = shadow.querySelectorAll('[adc="font-size-change"]') let fontSizeChangers = shadow.querySelectorAll('[adc="font-size-change"]')
fontSizeChangers.forEach(btn => { fontSizeChangers.forEach(btn => {
btn.addEventListener('click', (e) => { btn.addEventListener('click', (e) => {
...@@ -254,6 +284,45 @@ var ADocEditor = function (customConfig) { ...@@ -254,6 +284,45 @@ var ADocEditor = function (customConfig) {
.addEventListener('click', printDoc) .addEventListener('click', printDoc)
})() })()
!(function styleHandler(){
let stylePopup = shadow.querySelector('[adc="style-popover"]')
stylePopup.innerHTML = ""
styleList.forEach( (style, s)=>{
let option = document.createElement('div')
option.setAttribute('class', 'option')
option.setAttribute('adc-toggle', "popover")
option.append(style.name)
option.style.fontFamily = style.fontFamily
option.style.fontSize = `${style.fontSize}pt`
option.style.color = style.fontColor
stylePopup.append(option)
option.addEventListener('click', (e)=>{
stylePopup.classList.remove('show')
if (caretData.activeData){
caretData.activeData.style = { ...style }
reRenderCanvas()
focusOnPage()
}
})
} )
})()
!(function sidebarsHandlers(){
let leftSidebar = shadow.querySelector('.left-sidebar')
let toggleLeft = shadow.querySelector('[adc="toggle-left-sidebar"]')
toggleLeft.addEventListener('click', ()=>{
leftSidebar.classList.toggle('hide')
})
let rightSidebar = shadow.querySelector('.right-sidebar')
let toggleRight = shadow.querySelector('[adc="toggle-right-sidebar"]')
toggleRight.addEventListener('click', ()=>{
rightSidebar.classList.toggle('hide')
toggleRight.scrollIntoView({behavior: 'smooth'})
})
})()
reConfigure(customConfig) reConfigure(customConfig)
reRenderCanvas() reRenderCanvas()
addGlobalEvents() addGlobalEvents()
...@@ -292,7 +361,7 @@ var ADocEditor = function (customConfig) { ...@@ -292,7 +361,7 @@ var ADocEditor = function (customConfig) {
let pageIndex = 0 let pageIndex = 0
if (!pageList.length) { if (!pageList.length) {
pageList[pageIndex] = { id: ++counter, el: createNewPage(), dataIndex: 0 } pageList[pageIndex] = { id: ++counter, el: createNewPage(), dataIndex: 0 }
shadow.querySelector('.page-list').append(pageList[pageIndex].el) shadow.querySelector('[adc="page-list"]').append(pageList[pageIndex].el)
} }
...@@ -364,8 +433,9 @@ var ADocEditor = function (customConfig) { ...@@ -364,8 +433,9 @@ var ADocEditor = function (customConfig) {
} }
} }
for (c = 0; c < dataBlock.plainContent.length; c++) { for (c = 0; c < dataBlock.plainContent.length; c++) {
let style = dataBlock?.formatedText?.[c] let style = dataBlock?.formatedText?.[c].style
lineObj.maxFontSize = (lineObj.maxFontSize < dataBlock?.formatedText?.[c].fontSize) ? dataBlock?.formatedText?.[c].fontSize : lineObj.maxFontSize if (!style) style = { ...config.style }
lineObj.maxFontSize = (lineObj.maxFontSize < style.fontSize) ? style.fontSize : lineObj.maxFontSize
if (/\s/.test(dataBlock.plainContent[c])) { if (/\s/.test(dataBlock.plainContent[c])) {
// condition to check if a blank character is found. // condition to check if a blank character is found.
...@@ -376,9 +446,13 @@ var ADocEditor = function (customConfig) { ...@@ -376,9 +446,13 @@ var ADocEditor = function (customConfig) {
let charWidth = getCharacterWidth(dataBlock.plainContent[c], style) let charWidth = getCharacterWidth(dataBlock.plainContent[c], style)
dataBlock.formatedText[c] = { dataBlock.formatedText[c] = {
style: {
...config.style, ...config.style,
...style, ...style,
width: charWidth },
dimension: {
width: charWidth,
},
} }
// // if with the current char the string could not fit on one line // // if with the current char the string could not fit on one line
...@@ -483,16 +557,16 @@ var ADocEditor = function (customConfig) { ...@@ -483,16 +557,16 @@ var ADocEditor = function (customConfig) {
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] let char = setData?.plainContent[c]
if (char) { if (char) {
let style = setData.formatedText[c] let style = setData.formatedText[c].style
ctx.save() ctx.save()
ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize * pxMmRatio * mmPtRatio}px ${style.fontFamily}` ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize * pxMmRatio * mmPtRatio}px ${style.fontFamily}`
ctx.fillStyle = `${style?.fontColor}` ctx.fillStyle = `${style?.fontColor}`
ctx.fillText(char, x, y) ctx.fillText(char, x, y)
setData.formatedText[c].x = x setData.formatedText[c].dimension.x = x
setData.formatedText[c].y = y setData.formatedText[c].dimension.y = y
ctx.restore() ctx.restore()
if (setData.formatedText[c]?.width) { if (setData.formatedText[c]?.dimension?.width) {
x += setData.formatedText[c]?.width x += setData.formatedText[c]?.dimension?.width
} }
} }
} }
...@@ -605,7 +679,10 @@ var ADocEditor = function (customConfig) { ...@@ -605,7 +679,10 @@ var ADocEditor = function (customConfig) {
// ***** DISPLAYABLE TEXT **** // // ***** DISPLAYABLE TEXT **** //
e.preventDefault() e.preventDefault()
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index) caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
caretData.activeData.formatedText.splice(caretData.index, 0, caretData.style) let style = caretData.style
style = style?style:null
console.log(style)
caretData.activeData.formatedText.splice(caretData.index, 0, { style : style, dimension: {} })
++caretData.index ++caretData.index
} }
else if (e.key == 'ArrowLeft') { else if (e.key == 'ArrowLeft') {
...@@ -658,9 +735,9 @@ var ADocEditor = function (customConfig) { ...@@ -658,9 +735,9 @@ var ADocEditor = function (customConfig) {
if ((cursor.y <= lines[l].y) && (cursor.y >= (lines[l].maxFontSize * pxMmRatio * mmPtRatio))) { if ((cursor.y <= lines[l].y) && (cursor.y >= (lines[l].maxFontSize * pxMmRatio * mmPtRatio))) {
let dataSet = dataList[lines[l].dataIndex] let dataSet = dataList[lines[l].dataIndex]
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) { for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
if ((cursor.x >= dataSet.formatedText[c].x) && (cursor.x <= (dataSet.formatedText[c].width + dataSet.formatedText[c].x))) { if ((cursor.x >= dataSet.formatedText[c]?.dimension?.x) && (cursor.x <= (dataSet.formatedText[c]?.dimension?.width + dataSet.formatedText[c]?.dimension?.x))) {
caretData.activeData = dataSet caretData.activeData = dataSet
if (cursor.x <= dataSet.formatedText[c].x + dataSet.formatedText[c].width / 2) { if (cursor.x <= dataSet.formatedText[c]?.dimension?.x + dataSet.formatedText[c]?.dimension?.width / 2) {
caretData.index = c caretData.index = c
} else { } else {
caretData.index = c + 1 caretData.index = c + 1
...@@ -686,7 +763,7 @@ var ADocEditor = function (customConfig) { ...@@ -686,7 +763,7 @@ var ADocEditor = function (customConfig) {
const pxX = (e.clientX - rect.left) * config.pageSetup.pxWidth / rect.width; const pxX = (e.clientX - rect.left) * config.pageSetup.pxWidth / rect.width;
const pxY = (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height; const pxY = (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height;
placeCaret({ x: pxX, y: pxY }) placeCaret({ x: pxX, y: pxY })
let style = caretData.activeData.formatedText[caretData.index] let style = caretData.activeData.formatedText[caretData.index]?.style
if (style) caretData.style = { if (style) caretData.style = {
...caretData.style, ...caretData.style,
fontSize: style.fontSize, fontSize: style.fontSize,
...@@ -825,7 +902,7 @@ var ADocEditor = function (customConfig) { ...@@ -825,7 +902,7 @@ var ADocEditor = function (customConfig) {
} }
function changeFontFamily() { function changeFontFamily() {
let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select') let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
if (fontFamilyDropdown) fontFamilyDropdown.value = caretData.style.fontFamily if (fontFamilyDropdown) fontFamilyDropdown.value = (caretData?.style?caretData:config).style.fontFamily
} }
} }
...@@ -836,8 +913,9 @@ var ADocEditor = function (customConfig) { ...@@ -836,8 +913,9 @@ var ADocEditor = function (customConfig) {
} }
function addGlobalEvents(e) { function addGlobalEvents(e) {
shadow.querySelector('.page-list').addEventListener('wheel', onMouseWheelHandler) shadow.querySelector('[adc="page-list"]').addEventListener('wheel', onMouseWheelHandler)
shadow.addEventListener('mousedown', globalMouseDownHandler) shadow.addEventListener('mousedown', globalMouseDownHandler)
shadow.addEventListener('mouseover', globalMouseOverHandler)
} }
function globalMouseDownHandler(e) { function globalMouseDownHandler(e) {
var elem = e.target var elem = e.target
...@@ -856,6 +934,23 @@ var ADocEditor = function (customConfig) { ...@@ -856,6 +934,23 @@ var ADocEditor = function (customConfig) {
} }
function globalMouseOverHandler(e){
let menuItems = shadow.querySelectorAll('[adc-type="menu-item"]')
menuItems.forEach( item => item.classList.remove('hover') )
let hoverElem
let elem = e?.target
while(elem){
if (elem?.getAttribute?.('adc-type')=='menu-item' ){
hoverElem = elem;
break
}
elem = elem.parentNode
}
if (hoverElem){
hoverElem.classList.add('hover')
}
}
function renderCaret(toLoop) { function renderCaret(toLoop) {
clearTimeout(caretData.timeout) clearTimeout(caretData.timeout)
...@@ -875,14 +970,15 @@ var ADocEditor = function (customConfig) { ...@@ -875,14 +970,15 @@ var ADocEditor = function (customConfig) {
let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.charStartIndex) let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.charStartIndex)
let x = (config.format.margin * pxMmRatio) + lineObj.tabWidth let x = (config.format.margin * pxMmRatio) + lineObj.tabWidth
let y = (config.format.margin) * pxMmRatio let y = (config.format.margin) * pxMmRatio
let height = caretData.style.fontSize * pxMmRatio * mmPtRatio * 5 / 4
let height = (caretData?.style?caretData:config).style.fontSize * pxMmRatio * mmPtRatio * 5 / 4
let width = height / 10 let width = height / 10
let charData = caretData.activeData.formatedText[caretData.index - 1] let charDimension = caretData.activeData.formatedText[caretData.index - 1]?.dimension
if (lineObj) { if (lineObj) {
x = (charData ? (charData.x + charData.width) : x) x = (charDimension ? (charDimension.x + charDimension.width) : x)
if (charData) { if (charDimension) {
y = charData.y - (caretData.style.fontSize * pxMmRatio * mmPtRatio) y = charDimension.y - ((caretData?.style?caretData:config).style.fontSize * pxMmRatio * mmPtRatio)
} else { } else {
if (prevLine && prevLine.pageIndex != lineObj.pageIndex) { if (prevLine && prevLine.pageIndex != lineObj.pageIndex) {
y = (config.format.margin) * pxMmRatio y = (config.format.margin) * pxMmRatio
...@@ -914,7 +1010,7 @@ var ADocEditor = function (customConfig) { ...@@ -914,7 +1010,7 @@ var ADocEditor = function (customConfig) {
if (thisPage != focussedPage) { if (thisPage != focussedPage) {
lastFocussedPage = thisPage lastFocussedPage = thisPage
focussedPage = thisPage focussedPage = thisPage
focusOnPage() // focusOnPage()
} }
ctx.restore() ctx.restore()
...@@ -939,6 +1035,7 @@ var ADocEditor = function (customConfig) { ...@@ -939,6 +1035,7 @@ var ADocEditor = function (customConfig) {
} }
function newDocument(e) { function newDocument(e) {
globalMouseOverHandler(); // to hide the menu when clicked
caretData.blink = true caretData.blink = true
dataList = [ dataList = [
{ {
...@@ -961,7 +1058,11 @@ var ADocEditor = function (customConfig) { ...@@ -961,7 +1058,11 @@ var ADocEditor = function (customConfig) {
pageIndex: 0, pageIndex: 0,
caretSize: config.style.fontSize, caretSize: config.style.fontSize,
previousCaret: null, previousCaret: null,
style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) }, style: { ...dataList[0].style },
dimension: {
x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4)
},
} }
pageList = [] pageList = []
shadow.querySelector('[adc="page-list"').innerHTML = "" shadow.querySelector('[adc="page-list"').innerHTML = ""
...@@ -1058,7 +1159,7 @@ var ADocEditor = function (customConfig) { ...@@ -1058,7 +1159,7 @@ var ADocEditor = function (customConfig) {
for (let c = lines[l].charStartIndex; c < lines[l].charEndIndex; c++) { for (let c = lines[l].charStartIndex; c < lines[l].charEndIndex; c++) {
let fontObj = fontList.find(item => item.name == dataSet.formatedText[c].fontFamily) let fontObj = fontList.find(item => item.name == dataSet.formatedText[c]?.style?.fontFamily)
let font = embeddedFonts[fontObj.name] let font = embeddedFonts[fontObj.name]
if (!font) { if (!font) {
const fontBytes = fontObj.fontBytes const fontBytes = fontObj.fontBytes
...@@ -1066,13 +1167,13 @@ var ADocEditor = function (customConfig) { ...@@ -1066,13 +1167,13 @@ var ADocEditor = function (customConfig) {
embeddedFonts[fontObj.name] = font embeddedFonts[fontObj.name] = font
} }
x = dataSet.formatedText[c].x / (pxMmRatio * mmPtRatio); // X-coordinate x = dataSet.formatedText[c]?.dimension?.x / (pxMmRatio * mmPtRatio); // X-coordinate
y = pageHeight - dataSet.formatedText[c].y / (pxMmRatio * mmPtRatio); // Y-coordinate y = pageHeight - dataSet.formatedText[c]?.style?.y / (pxMmRatio * mmPtRatio); // Y-coordinate
page.drawText(dataSet.plainContent[c], { page.drawText(dataSet.plainContent[c], {
x, y, font, x, y, font,
size: dataSet.formatedText[c].fontSize, size: dataSet.formatedText[c]?.style?.fontSize,
color: rgb(...getRgb(dataSet.formatedText[c].fontColor)) color: rgb(...getRgb(dataSet.formatedText[c]?.style.fontColor))
}); });
} }
......
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