Skip to content

A
a-doc-editor
Commit 7065804e by ramdayalmunda
Options

selection fixes, caret fixes, heading fixes, arrow keys fixes, backspace fixes

parent f5d9a42e
Showing with 569 additions and 143 deletions
dist/assets/a-doc-editor.css
...@@ -127,20 +127,21 @@ canvas:focus-visible { ...@@ -127,20 +127,21 @@ canvas:focus-visible {
width: 200px; width: 200px;
background-color: #408640; background-color: #408640;
padding: 5px; padding: 5px;
white-space: nowrap; /* Prevent text wrapping */ white-space: nowrap;
text-overflow: ellipsis; /* Add ellipsis ( ... ) */ /* Prevent text wrapping */
text-overflow: ellipsis;
/* Add ellipsis ( ... ) */
} }
.content-area .left-sidebar, .content-area .left-sidebar,
.content-area .page-list, .content-area .page-list,
.content-area .right-sidebar { .content-area .right-sidebar {
flex-shrink: 0; flex-shrink: 0;
height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden;
text-wrap: nowrap; text-wrap: nowrap;
transition: 0.5s; transition: 0.5s;
margin-top: 0; margin-top: 0;
border-radius: 0 10px 10px 0;
} }
.left-sidebar .toggle-btn, .left-sidebar .toggle-btn,
...@@ -150,6 +151,13 @@ canvas:focus-visible { ...@@ -150,6 +151,13 @@ canvas:focus-visible {
top: 0; top: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 25px;
padding: 0;
margin: 0;
border: none;
background: none;
cursor: pointer;
transition: 400ms;
} }
.left-sidebar .content, .left-sidebar .content,
...@@ -160,7 +168,7 @@ canvas:focus-visible { ...@@ -160,7 +168,7 @@ canvas:focus-visible {
.left-sidebar.hide, .left-sidebar.hide,
.right-sidebar.hide { .right-sidebar.hide {
width: 50px; width: 30px;
} }
.left-sidebar.hide .content, .left-sidebar.hide .content,
...@@ -172,37 +180,55 @@ canvas:focus-visible { ...@@ -172,37 +180,55 @@ canvas:focus-visible {
position: relative; position: relative;
display: block; display: block;
overflow-y: auto; overflow-y: auto;
overflow-x: auto;
background: #858585; background: #858585;
gap: 20px; gap: 20px;
align-items: center; align-items: center;
overflow-x: hidden; overflow-x: hidden;
} }
.page-list .page{
background-color: #fff;
width: fit-content;
height: fit-content;
display: block;
position: relative;
margin: 20px 2px 20px 2px;
}
.page-list canvas { .page-list .page canvas {
background-color: #fff; background-color: #fff;
width: 210mm; width: 210mm;
height: auto; height: auto;
display: block; display: block;
position: relative; position: absolute;
margin-top: 20px; margin: 0;
margin-bottom: 20px; }
margin-right: 2px; .page-list .page canvas.selection {
background-color: transparent;
width: 210mm;
height: auto;
display: block;
position: absolute;
margin: 0;
pointer-events: none;
} }
.footer { .footer {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
background-color: red; background-color: red;
} }
.toolbar .item ul.dropdown { .toolbar .item ul.dropdown {
position: absolute; position: absolute;
max-height: 300px; max-height: 300px;
width: max-content; width: max-content;
min-width: 100px; min-width: 100px;
padding: 0; padding: 10px 5px;
border: 1px #000 solid; border: 1px rgba(0, 0, 0, 0.2) solid;
border-radius: 10px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
list-style-type: none; list-style-type: none;
...@@ -210,17 +236,17 @@ canvas:focus-visible { ...@@ -210,17 +236,17 @@ canvas:focus-visible {
display: none; display: none;
background: white; background: white;
} }
.toolbar .item ul.dropdown.show
{ .toolbar .item ul.dropdown.show {
display: block; display: block;
} }
.toolbar .item ul.dropdown li{
.toolbar .item ul.dropdown li {
padding: 5pt; padding: 5pt;
width: 100%; border-radius: 5px;
} }
.toolbar .item ul.dropdown li:hover, .toolbar .item ul.dropdown li:hover {
.toolbar .item ul.dropdown li.selected {
background: #09f; background: #09f;
} }
...@@ -232,6 +258,10 @@ a#submit { ...@@ -232,6 +258,10 @@ a#submit {
z-index: 1; z-index: 1;
} }
.rotate{
transform: rotate(180deg);
transition: 400ms;
}
@keyframes shineAnimation { @keyframes shineAnimation {
0% { 0% {
......
dist/assets/a-doc-editor.js
let isModule = (typeof module != 'undefined') ? true : false let isModule = (typeof module != 'undefined') ? true : false
if (!isModule) console.log('Browser Environment') if (!isModule) console.warn('Browser Environment')
var ADocEditor = function (customConfig) { var ADocEditor = function (customConfig) {
var container, counter = 0, shadow, pxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = []; var container, counter = 0, shadow, pxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = [];
const mmPtRatio = 254 / 720; // this is used for font size const mmPtRatio = 254 / 720; // this is used for font size
...@@ -10,13 +10,13 @@ var ADocEditor = function (customConfig) { ...@@ -10,13 +10,13 @@ var ADocEditor = function (customConfig) {
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 textStyleList = [ const textStyleList = [
{ type: "Normal Text", fontFamily: "Calibri", fontSize: 11, fontColor: "#000", bold: false, italic: false, spaces: 10 }, { type: "Normal Text", fontFamily: "Libre Franklin", fontSize: 11, fontColor: "#000", bold: false, italic: false, spaces: 10 },
{ type: "Title", fontFamily: "Calibri", fontSize: 26, fontColor: "#000", bold: false, italic: false, spaces: 0 }, { type: "Title", fontFamily: "Libre Franklin", fontSize: 26, fontColor: "#000", bold: false, italic: false, spaces: 0 },
{ type: "Subtitle", fontFamily: "Calibri", fontSize: 15, fontColor: "#555", bold: false, italic: false, spaces: 4 }, { type: "Subtitle", fontFamily: "Libre Franklin", fontSize: 15, fontColor: "#555", bold: false, italic: false, spaces: 4 },
{ type: "Heading 1", fontFamily: "Calibri", fontSize: 20, fontColor: "#000", bold: false, italic: false, spaces: 2 }, { type: "Heading 1", fontFamily: "Libre Franklin", fontSize: 20, fontColor: "#000", bold: false, italic: false, spaces: 2 },
] ]
const styleName = {}; const styleName = {};
textStyleList.forEach((sty, s) => { styleName[sty.type] = s }) textStyleList.forEach((style, s) => { styleName[style.type] = s })
const listStyles = [ const listStyles = [
{ type: "Number", value: 0 }, { type: "Number", value: 0 },
...@@ -35,7 +35,7 @@ var ADocEditor = function (customConfig) { ...@@ -35,7 +35,7 @@ var ADocEditor = function (customConfig) {
style: { style: {
type: textStyleList[0].type, type: textStyleList[0].type,
// fontSize: 11, // this is in pt // 1pt = 1/72 inch // 1pt = 254/72 mm // fontSize: 11, // this is in pt // 1pt = 1/72 inch // 1pt = 254/72 mm
// fontFamily: 'Calibri', // fontFamily: 'Libre Franklin',
// bold: false, // bold: false,
// italic: false, // italic: false,
// fontColor: "#f01", // fontColor: "#f01",
...@@ -68,13 +68,27 @@ var ADocEditor = function (customConfig) { ...@@ -68,13 +68,27 @@ var ADocEditor = function (customConfig) {
dimension: { dimension: {
x: config.format.margin, x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4) y: config.format.margin + (3 * config.style.fontSize / 4)
} },
} dragging: {
is: false, // to check if mouse is down for dragging,
started: false, // to check if the mouse has moved for dragging
startX: null, // start and end are coordinated of opposite corner
startY: null,
endX: null,
endY: null,
startingDataIndex: null,
endDataIndex: null,
startingCharIndex: null,
endIndex: null,
}
}
var upDownArrowX = null
var pageList = [] var pageList = []
var pageScrollingDiv = null var pageScrollingDiv = null
var focussedPage = null var focussedPage = null
var lastFocussedPage = null var lastFocussedPage = null
var isRendering = false var isRendering = false
var isSelectionRendering = false
function initialize() { function initialize() {
config = JSON.parse(JSON.stringify(defaultConfig)) config = JSON.parse(JSON.stringify(defaultConfig))
container = customConfig.container container = customConfig.container
...@@ -82,7 +96,6 @@ var ADocEditor = function (customConfig) { ...@@ -82,7 +96,6 @@ var ADocEditor = function (customConfig) {
htmlStr = /*html*/` htmlStr = /*html*/`
<div class="header"> <div class="header">
<div class="toolbar"> <div class="toolbar">
<div class="item" adc-target="file-menu" adc-type="menu-item"> <div class="item" adc-target="file-menu" adc-type="menu-item">
<span>File</span> <span>File</span>
...@@ -117,8 +130,8 @@ var ADocEditor = function (customConfig) { ...@@ -117,8 +130,8 @@ var ADocEditor = function (customConfig) {
</div> </div>
<div class="content-area"> <div class="content-area">
<div class="left-sidebar"> <div class="left-sidebar hide">
<button class="toggle-btn" adc="toggle-left-sidebar">X</button> <button class="toggle-btn rotate" adc="toggle-left-sidebar">&#10554;</button>
<div class="content" adc="left-sidebar-content"></div> <div class="content" adc="left-sidebar-content"></div>
</div> </div>
<div class="page-list" adc="page-list"></div> <div class="page-list" adc="page-list"></div>
...@@ -190,12 +203,20 @@ var ADocEditor = function (customConfig) { ...@@ -190,12 +203,20 @@ var ADocEditor = function (customConfig) {
})() })()
!(function fontSelectHandle() { !(function fontSelectHandle() {
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') addFonts(["./assets/fonts/ArchitectsDaughter-Regular.woff2", "./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter')
addFonts(["./assets/fonts/Assistant-VariableFont_wght.woff2", "./assets/fonts/Assistant-VariableFont_wght.ttf"], 'Assistant') addFonts(["./assets/fonts/Assistant-VariableFont_wght.woff2", "./assets/fonts/Assistant-VariableFont_wght.ttf"], 'Assistant')
addFonts(["./assets/fonts/Bitter-VariableFont_wght.woff2", "./assets/fonts/Bitter-VariableFont_wght.ttf"], 'Bitter') addFonts(["./assets/fonts/CrimsonText-Regular.woff2", "./assets/fonts/CrimsonText-Regular.ttf"], 'Crimson Text')
addFonts(["./assets/fonts/calibri-regular.woff2", "./assets/fonts/calibri-regular.ttf"], 'Calibri') addFonts(["./assets/fonts/EduTASBeginner-VariableFont_wght.woff2", "./assets/fonts/EduTASBeginner-VariableFont_wght.ttf"], 'Edu TAS Beginner')
addFonts(["./assets/fonts/IndieFlower-Regular.woff2", "./assets/fonts/IndieFlower-Regular.ttf"], 'Indie Flower')
addFonts(["./assets/fonts/Karla-VariableFont_wght.woff2", "./assets/fonts/Karla-VariableFont_wght.ttf"], 'Karla')
addFonts(["./assets/fonts/Kenia-Regular.woff2", "./assets/fonts/Kenia-Regular.ttf"], 'Kenia')
addFonts(["./assets/fonts/Lato-Regular.woff2", "./assets/fonts/Lato-Regular.ttf"], 'Lato')
addFonts(["./assets/fonts/LibreFranklin-VariableFont_wght.woff2", "./assets/fonts/LibreFranklin-VariableFont_wght.ttf"], 'Libre Franklin')
addFonts(["./assets/fonts/Lora-Regular.woff2", "./assets/fonts/Lora-Regular.ttf"], 'Lora')
addFonts(["./assets/fonts/Macondo-Regular.woff2", "./assets/fonts/Macondo-Regular.ttf"], 'Macondo')
addFonts(["./assets/fonts/Outfit-VariableFont_wght.woff2", "./assets/fonts/Outfit-VariableFont_wght.ttf"], 'Outfit')
addFonts(["./assets/fonts/TitilliumWeb-Regular.woff2", "./assets/fonts/TitilliumWeb-Regular.ttf"], 'Titillium Web')
addFonts(["./assets/fonts/VarelaRound-Regular.woff2", "./assets/fonts/VarelaRound-Regular.ttf"], 'Varela Round')
})() })()
!(function handleList() { !(function handleList() {
...@@ -206,7 +227,7 @@ var ADocEditor = function (customConfig) { ...@@ -206,7 +227,7 @@ var ADocEditor = function (customConfig) {
let selection = document.createElement('span') let selection = document.createElement('span')
selection.setAttribute('value', null) selection.setAttribute('value', null)
selection.setAttribute('adc-type', 'selection') selection.setAttribute('adc-type', 'selection')
selection.innerHTML = "[List-Style]" selection.innerHTML = "[No-List]"
listStyleElem.append(selection) listStyleElem.append(selection)
let ul = document.createElement('ul') let ul = document.createElement('ul')
...@@ -226,7 +247,7 @@ var ADocEditor = function (customConfig) { ...@@ -226,7 +247,7 @@ var ADocEditor = function (customConfig) {
} else { } else {
e.stopPropagation() e.stopPropagation()
ul.classList.remove('show') ul.classList.remove('show')
selection.innerHTML = "[List-Style]" selection.innerHTML = "[No-List]"
} }
changeListStyle() changeListStyle()
caretData.blink = false caretData.blink = false
...@@ -348,6 +369,7 @@ var ADocEditor = function (customConfig) { ...@@ -348,6 +369,7 @@ var ADocEditor = function (customConfig) {
let toggleLeft = shadow.querySelector('[adc="toggle-left-sidebar"]') let toggleLeft = shadow.querySelector('[adc="toggle-left-sidebar"]')
toggleLeft.addEventListener('click', () => { toggleLeft.addEventListener('click', () => {
leftSidebar.classList.toggle('hide') leftSidebar.classList.toggle('hide')
toggleLeft.classList[leftSidebar.classList.contains('hide') ? 'add' : 'remove']('rotate')
}) })
// let rightSidebar = shadow.querySelector('.right-sidebar') // let rightSidebar = shadow.querySelector('.right-sidebar')
...@@ -388,6 +410,9 @@ var ADocEditor = function (customConfig) { ...@@ -388,6 +410,9 @@ var ADocEditor = function (customConfig) {
for (let p = 0; p < pageList.length; p++) { for (let p = 0; p < pageList.length; p++) {
pageList[p].el.style.width = `${config.pageSetup.uiWidth}mm` pageList[p].el.style.width = `${config.pageSetup.uiWidth}mm`
pageList[p].selectionCanvas.style.width = `${config.pageSetup.uiWidth}mm`
pageList[p].page.style.width = `${config.pageSetup.uiWidth}mm`
pageList[p].page.style.height = `${config.pageSetup.uiHeight}mm`
} }
pxMmRatio = config.pageSetup.pxWidth / config.pageSetup.mmWidth; pxMmRatio = config.pageSetup.pxWidth / config.pageSetup.mmWidth;
...@@ -398,8 +423,9 @@ var ADocEditor = function (customConfig) { ...@@ -398,8 +423,9 @@ var ADocEditor = function (customConfig) {
if (isRendering) return if (isRendering) return
let pageIndex = 0 let pageIndex = 0
if (!pageList.length) { if (!pageList.length) {
pageList[pageIndex] = { id: ++counter, el: createNewPage(), dataIndex: 0 } let newPage = createNewPage()
shadow.querySelector('[adc="page-list"]').append(pageList[pageIndex].el) pageList[pageIndex] = { id: ++counter, el: newPage.el, page: newPage.page, selectionCanvas: newPage.selectionCanvas, dataIndex: 0 }
shadow.querySelector('[adc="page-list"]').append(pageList[pageIndex].page)
} }
...@@ -431,8 +457,8 @@ var ADocEditor = function (customConfig) { ...@@ -431,8 +457,8 @@ var ADocEditor = function (customConfig) {
y: 0, // this is the starting y coordinate; it will change based on the max font size y: 0, // this is the starting y coordinate; it will change based on the max font size
plainContent: "", plainContent: "",
dataIndex: d, dataIndex: d,
charStartIndex: 0, // index from where to check startingCharIndex: 0, // index from where to check
charEndIndex: 0, // index till where to check// not including this index. endingCharIndex: 0, // index till where to check// not including this index.
listItemNumber: 0, listItemNumber: 0,
} }
newLineObj.maxFontSize = newLineObj.fontSize newLineObj.maxFontSize = newLineObj.fontSize
...@@ -478,7 +504,7 @@ var ADocEditor = function (customConfig) { ...@@ -478,7 +504,7 @@ var ADocEditor = function (customConfig) {
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.
wordEndIndex = c wordEndIndex = c
lineObj.charEndIndex = c lineObj.endingCharIndex = c
tempWordWidth = 0 tempWordWidth = 0
} }
let charWidth = getCharacterWidth(dataBlock.plainContent[c], style) let charWidth = getCharacterWidth(dataBlock.plainContent[c], style)
...@@ -493,14 +519,14 @@ var ADocEditor = function (customConfig) { ...@@ -493,14 +519,14 @@ var ADocEditor = function (customConfig) {
// 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. // 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 wordEndIndex = c
lineObj.charEndIndex = c lineObj.endingCharIndex = c
tempWordWidth = 0 tempWordWidth = 0
} }
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1) lineObj.plainContent = dataBlock.plainContent.slice(lineObj.startingCharIndex, lineObj.endingCharIndex + 1)
lineObj.maxLineWidth = maxLineWidth
lines.push(lineObj) lines.push(lineObj)
lineObj = new getLineObj() lineObj = new getLineObj()
lineObj.maxLineWidth = maxLineWidth
lineObj.maxFontSize = style.fontSize lineObj.maxFontSize = style.fontSize
if (dataBlock.type == 1) { if (dataBlock.type == 1) {
lineObj.tabWidth = tabWidth lineObj.tabWidth = tabWidth
...@@ -510,9 +536,10 @@ var ADocEditor = function (customConfig) { ...@@ -510,9 +536,10 @@ var ADocEditor = function (customConfig) {
lineObj.tabWidth = 0 lineObj.tabWidth = 0
lineObj.tabCount = 0 lineObj.tabCount = 0
} }
lineObj.charStartIndex = wordEndIndex + 1 lineObj.startingCharIndex = wordEndIndex + 1
lineObj.charEndIndex = wordEndIndex + 1 lineObj.endingCharIndex = wordEndIndex + 1
tempLineWidth = tempWordWidth tempLineWidth = tempWordWidth
lineObj.maxLineWidth = maxLineWidth
} }
else { else {
// if the char can fit in the same line. then it is well and good // if the char can fit in the same line. then it is well and good
...@@ -523,12 +550,12 @@ var ADocEditor = function (customConfig) { ...@@ -523,12 +550,12 @@ var ADocEditor = function (customConfig) {
} }
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1) lineObj.plainContent = dataBlock.plainContent.slice(lineObj.startingCharIndex, lineObj.endingCharIndex + 1)
// there is chance that the last line is not at the width// so we need to handle the last line separately // there is chance that the last line is not at the width// so we need to handle the last line separately
if (lineObj.charEndIndex <= dataBlock.plainContent.length) { if (lineObj.endingCharIndex <= dataBlock.plainContent.length) {
lineObj.charEndIndex = dataBlock.plainContent.length lineObj.endingCharIndex = dataBlock.plainContent.length
} }
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex) lineObj.plainContent = dataBlock.plainContent.slice(lineObj.startingCharIndex, lineObj.endingCharIndex)
lines.push(lineObj) lines.push(lineObj)
...@@ -542,6 +569,7 @@ var ADocEditor = function (customConfig) { ...@@ -542,6 +569,7 @@ var ADocEditor = function (customConfig) {
let maxHeight = config.pageSetup.pxHeight - config.format.margin * pxMmRatio * 2 let maxHeight = config.pageSetup.pxHeight - config.format.margin * pxMmRatio * 2
let pageIndex = 0 let pageIndex = 0
let x = 0, y = config.format.margin * pxMmRatio; let x = 0, y = config.format.margin * pxMmRatio;
let firstLineOnPage = true
for (let l = 0; l < lines.length; l++) { for (let l = 0; l < lines.length; l++) {
let setData = dataList[lines[l].dataIndex] let setData = dataList[lines[l].dataIndex]
let ctx = pageList[pageIndex].el.getContext('2d', { willReadFrequently: true }) let ctx = pageList[pageIndex].el.getContext('2d', { willReadFrequently: true })
...@@ -555,19 +583,30 @@ var ADocEditor = function (customConfig) { ...@@ -555,19 +583,30 @@ var ADocEditor = function (customConfig) {
if (maxHeight < y) { if (maxHeight < y) {
pageIndex++ pageIndex++
if (!pageList?.[pageIndex]) { if (!pageList?.[pageIndex]) {
pageList[pageIndex] = { id: ++counter, el: createNewPage(), dataIndex: lines[l].dataIndex } let newPage = createNewPage()
shadow.querySelector('[adc="page-list"]').append(pageList[pageIndex].el) pageList[pageIndex] = { id: ++counter, el: newPage.el, page: newPage.page, selectionCanvas: newPage.selectionCanvas, dataIndex: lines[l].dataIndex }
shadow.querySelector('[adc="page-list"]').append(pageList[pageIndex].page)
} }
ctx = pageList[pageIndex].el.getContext('2d', { willReadFrequently: true }) ctx = pageList[pageIndex].el.getContext('2d', { willReadFrequently: true })
y = config.format.margin * pxMmRatio + (lines[l].maxFontSize * pxMmRatio * mmPtRatio); y = config.format.margin * pxMmRatio + (lines[l].maxFontSize * pxMmRatio * mmPtRatio);
lastFocussedPage = pageList[pageIndex].el lastFocussedPage = pageList[pageIndex].el
caretData.blink = false caretData.blink = false
focusOnPage({ scroll: true }) focusOnPage({ scroll: true })
firstLineOnPage = true
} }
lines[l].pageIndex = pageIndex lines[l].pageIndex = pageIndex
ctx.save() ctx.save()
if (!firstLineOnPage) {
y = y + ((lines[l - 1].maxFontSize / 3) * pxMmRatio * mmPtRatio)
lines[l].y = y
} else {
pageList[pageIndex].startingLineIndex = l
pageList[pageIndex].startingDataIndex = lines[l].dataIndex
pageList[pageIndex].startingCharIndex = lines[l].startingCharIndex
}
lines[l].apparentY = y
// this is to render the numbering and bullets etc // this is to render the numbering and bullets etc
if (lines[l].dataType == 1) { if (lines[l].dataType == 1) {
...@@ -585,7 +624,7 @@ var ADocEditor = function (customConfig) { ...@@ -585,7 +624,7 @@ var ADocEditor = function (customConfig) {
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) { for (let c = lines[l].startingCharIndex; c <= lines[l].endingCharIndex; c++) {
let char = setData?.plainContent[c] let char = setData?.plainContent[c]
if (char) { if (char) {
let style = getFullStyle(setData.formatedText[c].style) let style = getFullStyle(setData.formatedText[c].style)
...@@ -603,6 +642,7 @@ var ADocEditor = function (customConfig) { ...@@ -603,6 +642,7 @@ var ADocEditor = function (customConfig) {
} }
ctx.restore() ctx.restore()
firstLineOnPage = false
} }
return return
} }
...@@ -621,7 +661,7 @@ var ADocEditor = function (customConfig) { ...@@ -621,7 +661,7 @@ var ADocEditor = function (customConfig) {
function createNewPage() { function createNewPage() {
let canvas; let page, canvas, selectionCanvas;
if (isModule) { if (isModule) {
const { createCanvas } = require('canvas') const { createCanvas } = require('canvas')
canvas = createCanvas(config.pageSetup.canvasWidth, config.pageSetup.canvasHeight) canvas = createCanvas(config.pageSetup.canvasWidth, config.pageSetup.canvasHeight)
...@@ -634,6 +674,7 @@ var ADocEditor = function (customConfig) { ...@@ -634,6 +674,7 @@ var ADocEditor = function (customConfig) {
canvas.setAttribute('tabIndex', '-1') canvas.setAttribute('tabIndex', '-1')
canvas.width = config.pageSetup.pxWidth canvas.width = config.pageSetup.pxWidth
canvas.height = config.pageSetup.pxHeight canvas.height = config.pageSetup.pxHeight
canvas.style.width = `${config.pageSetup.uiWidth}mm` canvas.style.width = `${config.pageSetup.uiWidth}mm`
let ctx = canvas.getContext('2d', { willReadFrequently: true }) let ctx = canvas.getContext('2d', { willReadFrequently: true })
...@@ -642,11 +683,25 @@ var ADocEditor = function (customConfig) { ...@@ -642,11 +683,25 @@ var ADocEditor = function (customConfig) {
canvas.addEventListener('keydown', keydownHandler) canvas.addEventListener('keydown', keydownHandler)
canvas.addEventListener('mousedown', mousedownHandler) canvas.addEventListener('mousedown', mousedownHandler)
canvas.addEventListener('mousemove', mouseMoveHandler)
canvas.addEventListener("focus", onFocusHandler) canvas.addEventListener("focus", onFocusHandler)
canvas.addEventListener("blur", onBlurHandler) canvas.addEventListener("blur", onBlurHandler)
selectionCanvas = document.createElement('canvas')
selectionCanvas.setAttribute('class', 'selection')
selectionCanvas.width = config.pageSetup.pxWidth
selectionCanvas.height = config.pageSetup.pxHeight
selectionCanvas.style.width = `${config.pageSetup.uiWidth}mm`
page = document.createElement('div')
page.setAttribute('class', 'page')
page.style.width = `${config.pageSetup.uiWidth}mm`
page.style.height = `${config.pageSetup.uiHeight}mm`
page.append(canvas)
page.append(selectionCanvas)
} }
return canvas return { page, el: canvas, selectionCanvas }
} }
function keydownHandler(e) { function keydownHandler(e) {
...@@ -659,6 +714,7 @@ var ADocEditor = function (customConfig) { ...@@ -659,6 +714,7 @@ var ADocEditor = function (customConfig) {
manageIndentation(e.key == '[' ? -1 : 1) manageIndentation(e.key == '[' ? -1 : 1)
} }
else if (e.key == 'Backspace') { else if (e.key == 'Backspace') {
if (caretData.index == 0) { if (caretData.index == 0) {
let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id) let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
if (caretData.activeData.tabCount) { if (caretData.activeData.tabCount) {
...@@ -668,20 +724,27 @@ var ADocEditor = function (customConfig) { ...@@ -668,20 +724,27 @@ var ADocEditor = function (customConfig) {
caretData.activeData.tabCount-- caretData.activeData.tabCount--
} }
} }
else if (activeDataIndex > 0) { else if (activeDataIndex >= 0) {
if (caretData.activeData.type == 0) { if (caretData.activeData.type == 0) {
if (activeDataIndex != 0) {
if (!caretData.activeData.plainContent.length) { dataList.splice(activeDataIndex, 1) } if (!caretData.activeData.plainContent.length) { dataList.splice(activeDataIndex, 1) }
caretData.activeData = dataList[activeDataIndex - 1] caretData.activeData = dataList[activeDataIndex - 1]
caretData.index = caretData.activeData.plainContent.length caretData.index = caretData.activeData.plainContent.length
}
} else if (caretData.activeData.type == 1) { } else if (caretData.activeData.type == 1) {
caretData.activeData.type = 0 caretData.activeData.type = 0
} }
} }
} else if (e.ctrlKey || e.metaKey) {
} else { } else {
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index - 1) + caretData.activeData.plainContent.slice(caretData.index) caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index - 1) + caretData.activeData.plainContent.slice(caretData.index)
caretData.activeData.formatedText.splice(caretData.index - 1, 1) caretData.activeData.formatedText.splice(caretData.index - 1, 1)
--caretData.index; --caretData.index;
} }
setCaretStyle()
setToolbarData({ ...caretData.style, dataSetType: caretData.activeData.type, listStyle: caretData.activeData.listStyle })
} }
else if (e.key == 'Enter') { else if (e.key == 'Enter') {
let dataObj = { let dataObj = {
...@@ -705,11 +768,15 @@ var ADocEditor = function (customConfig) { ...@@ -705,11 +768,15 @@ var ADocEditor = function (customConfig) {
caretData.index = 0 caretData.index = 0
caretData.activeData = dataObj caretData.activeData = dataObj
if (dataObj.type == 0) dataObj.tabCount = 0 if (dataObj.type == 0) dataObj.tabCount = 0
if (!dataObj.formatedText.length){ if (!dataObj.formatedText.length && caretData.style.type) {
caretData.style = { type: textStyleList[0].type } caretData.style = { type: textStyleList[0].type }
caretData.activeData.style = { type: textStyleList[0].type } caretData.activeData.style = { type: textStyleList[0].type }
} else {
dataObj.style = { ...caretData.style }
} }
// dataList.push(dataObj) // dataList.push(dataObj)
setCaretStyle()
setToolbarData({ ...caretData.style, dataSetType: caretData.activeData.type, listStyle: caretData.activeData.listStyle })
} }
else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) { // displayable text else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) { // displayable text
// ***** DISPLAYABLE TEXT **** // // ***** DISPLAYABLE TEXT **** //
...@@ -721,6 +788,7 @@ var ADocEditor = function (customConfig) { ...@@ -721,6 +788,7 @@ var ADocEditor = function (customConfig) {
++caretData.index ++caretData.index
} }
else if (e.key == 'ArrowLeft') { else if (e.key == 'ArrowLeft') {
e.preventDefault()
if (caretData.index) { if (caretData.index) {
--caretData.index --caretData.index
} else { } else {
...@@ -730,8 +798,22 @@ var ADocEditor = function (customConfig) { ...@@ -730,8 +798,22 @@ var ADocEditor = function (customConfig) {
caretData.index = caretData.activeData.plainContent.length caretData.index = caretData.activeData.plainContent.length
} }
} }
upDownArrowX = null
setCaretStyle()
setToolbarData({ ...caretData.style, dataSetType: caretData.activeData.type, listStyle: caretData.activeData.listStyle })
caretData.blink = false
renderCaret(true)
return
} }
else if (e.key == 'ArrowRight') { else if (e.key == 'ArrowRight') {
e.preventDefault()
if (e.shiftKey && !caretData.dragging.is) {
caretData.dragging.startingDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
caretData.dragging.startingCharIndex = caretData.index
caretData.dragging.is = true
} else {
stopDragging(true)
}
if (caretData.index < caretData.activeData.plainContent.length) { if (caretData.index < caretData.activeData.plainContent.length) {
++caretData.index ++caretData.index
} else { } else {
...@@ -741,12 +823,51 @@ var ADocEditor = function (customConfig) { ...@@ -741,12 +823,51 @@ var ADocEditor = function (customConfig) {
caretData.index = 0 caretData.index = 0
} }
} }
upDownArrowX = null
setCaretStyle()
setToolbarData({ ...caretData.style, dataSetType: caretData.activeData.type, listStyle: caretData.activeData.listStyle })
caretData.blink = false
renderCaret(true)
return
} }
else if (e.key == 'ArrowUp') { else if (e.key == 'ArrowUp') {
console.log('Up') e.preventDefault()
let currentX = getCurrentX(true);
upDownArrowX = currentX
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let lineIndex = lines.findIndex(item => {
return item.dataIndex == dataIndex && item.endingCharIndex >= caretData.index
})
if (lineIndex > 0) {
placeCaret({
dataSetIndex: lines[lineIndex-1].dataIndex,
index: getCharIndexByLineAndX(lineIndex-1, currentX)
})
}
caretData.blink = false
renderCaret(true)
return
} }
else if (e.key == 'ArrowDown') { else if (e.key == 'ArrowDown') {
console.log('Down') e.preventDefault()
let currentX = getCurrentX(true);
upDownArrowX = currentX
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let lineIndex = lines.findIndex(item => {
return item.dataIndex == dataIndex && item.endingCharIndex >= caretData.index
})
if (lineIndex < lines.length-1) {
placeCaret({
dataSetIndex: lines[lineIndex+1].dataIndex,
index: getCharIndexByLineAndX(lineIndex+1, currentX)
})
}
caretData.blink = false
renderCaret(true)
return
} }
function manageIndentation(value) { function manageIndentation(value) {
...@@ -761,55 +882,135 @@ var ADocEditor = function (customConfig) { ...@@ -761,55 +882,135 @@ var ADocEditor = function (customConfig) {
reRenderCanvas() reRenderCanvas()
} }
function placeCaret(cursor = { x: 0, y: 0 }) { function getCurrentX(allowUpDownArrow){
if (!allowUpDownArrow || upDownArrowX==null){
let currentX = caretData.activeData.formatedText[caretData.index]?.dimension?.x
if (!currentX) currentX = caretData.activeData.formatedText[caretData.index - 1]?.dimension?.x
return currentX
}else return upDownArrowX
}
function getCharIndexByLineAndX( lineIndex, refX ){
let dataSet = dataList[lines[lineIndex].dataIndex]
let charIndex = lines[lineIndex].startingCharIndex
for (let c = lines[lineIndex].startingCharIndex; c <= lines[lineIndex].endingCharIndex; c++) {
charIndex = c;
let width = dataSet.formatedText?.[c]?.dimension?.width
width = width ? width : 0
let x = dataSet.formatedText?.[c]?.dimension?.x
x = x ? x : 0
if (refX <= x + width / 2) break;
}
let found = false return charIndex
for (let l = 0; l < lines.length; l++) {
if ((cursor.y <= lines[l].y) && (cursor.y >= (lines[l].maxFontSize * pxMmRatio * mmPtRatio))) {
let dataSet = dataList[lines[l].dataIndex]
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
if ((cursor.x >= dataSet.formatedText[c]?.dimension?.x) && (cursor.x <= (dataSet.formatedText[c]?.dimension?.width + dataSet.formatedText[c]?.dimension?.x))) {
caretData.activeData = dataSet
if (cursor.x <= dataSet.formatedText[c]?.dimension?.x + dataSet.formatedText[c]?.dimension?.width / 2) {
caretData.index = c
} else {
caretData.index = c + 1
} }
found = true
function getCaretPosition(e, coordinates, pageIndex) {
let cursor = coordinates
if (!cursor) cursor = getCoordinates(e)
if (!pageIndex) pageIndex = pageList.findIndex(item => item.el == e.target)
let lineIndex = pageList[pageIndex].startingLineIndex
for (let l = pageList[pageIndex].startingLineIndex; lines[l]?.pageIndex == pageIndex; l++) {
if (!lines[l]) break
lineIndex = l
if (cursor.y <= lines[l].apparentY) break
}
let lineObj = lines[lineIndex]
let dataSet = dataList[lineObj.dataIndex]
let charIndex = lineObj.startingCharIndex
for (let c = lineObj.startingCharIndex; c <= lineObj.endingCharIndex; c++) {
charIndex = c;
let width = dataSet.formatedText?.[c]?.dimension?.width
width = width ? width : 0
let x = dataSet.formatedText?.[c]?.dimension?.x
x = x ? x : 0
if (cursor.x <= x + width / 2) break;
}
cursor = {
dataSetIndex: lineObj.dataIndex,
index: charIndex ? charIndex : 0,
...cursor,
}
return cursor
}
function placeCaret(pos) {
if (typeof pos.dataSetIndex == 'number' && typeof pos.index == 'number') {
caretData.activeData = dataList[pos.dataSetIndex]
caretData.index = pos.index
caretData.blink = false caretData.blink = false
renderCaret(true) renderCaret(true)
return return
} }
console.warn('no char found')
}
if (found) break; // break only when the caret index is determined
} }
function setDragStartPosition() {
caretData.dragging.startingDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
caretData.dragging.startingCharIndex = caretData.index
} }
if (!found) {
console.log('no char found') function getCoordinates(e) {
const rect = e.target.getBoundingClientRect(); // Get the position of the canvas
return {
x: (e.clientX - rect.left) * config.pageSetup.pxWidth / rect.width,
y: (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height,
} }
} }
function mousedownHandler(e) { function mousedownHandler(e) {
stopDragging(true)
if (focussedPage) { if (focussedPage) {
const rect = e.target.getBoundingClientRect(); // Get the position of the canvas e.stopPropagation()
const pxX = (e.clientX - rect.left) * config.pageSetup.pxWidth / rect.width; let caretPos = getCaretPosition(e)
const pxY = (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height; placeCaret(caretPos)
placeCaret({ x: pxX, y: pxY })
let style = caretData.activeData.formatedText[caretData.index]?.style let style = caretData.activeData.formatedText[caretData.index]?.style
if (style){ if (!style) style = caretData.activeData.formatedText[caretData.index - 1]?.style
if (!style) style = caretData.activeData.style
if (style) {
caretData.style = { ...style } caretData.style = { ...style }
let fullStyle = getFullStyle(style)
let fontInput = shadow.querySelector('[adc="font-size-input"]')
if (caretData?.style?.fontSize) fontInput.value = fullStyle.fontSize
else if (style?.fontSize) fontInput.value = fullStyle.fontSize
caretData.blink = false caretData.blink = false
renderCaret(true) renderCaret(true)
setToolbarData({
...caretData.style,
dataSetType: caretData.activeData.type,
listStyle: caretData.activeData.listStyle
})
}
caretData.dragging.is = true
caretData.dragging.startX = caretPos.x
caretData.dragging.startY = caretPos.y
upDownArrowX = null
}
if (e.button == 2) {
stopDragging()
}
if (caretData.dragging.is) setDragStartPosition()
}
function mouseMoveHandler(e) {
if (e.button == 0 && e.buttons == 1 && caretData.dragging.is) {
caretData.dragging.started = true
let caretPos = getCaretPosition(e)
caretData.dragging.endX = caretPos.x
caretData.dragging.endY = caretPos.y
if (caretPos) {
caretData.dragging.endDataIndex = caretPos.dataSetIndex
caretData.dragging.endIndex = caretPos.index
renderSelection()
} }
} }
} }
function onFocusHandler(e) { function onFocusHandler(e) {
focussedPage = e.target focussedPage = e.target
lastFocussedPage = e.target lastFocussedPage = e.target
...@@ -821,6 +1022,161 @@ var ADocEditor = function (customConfig) { ...@@ -821,6 +1022,161 @@ var ADocEditor = function (customConfig) {
} }
} }
function renderSelection(clear) {
if (isSelectionRendering) return
isSelectionRendering = true
for (let p = 0; p < pageList.length; p++) {
// to clear previous selection
let ctx = pageList[p].selectionCanvas.getContext('2d', { willReadFrequently: true })
ctx.clearRect(0, 0, pageList[p].selectionCanvas.width, pageList[p].selectionCanvas.height)
}
if (clear) {
isSelectionRendering = false
return
}
let startingChar = {}, endChar = {};
if (caretData.dragging.startingDataIndex < caretData.dragging.endDataIndex) {
startingChar = { dataSetIndex: caretData.dragging.startingDataIndex, index: caretData.dragging.startingCharIndex }
endChar = { dataSetIndex: caretData.dragging.endDataIndex, index: caretData.dragging.endIndex }
}
else if (caretData.dragging.startingDataIndex > caretData.dragging.endDataIndex) {
startingChar = { dataSetIndex: caretData.dragging.endDataIndex, index: caretData.dragging.endIndex }
endChar = { dataSetIndex: caretData.dragging.startingDataIndex, index: caretData.dragging.startingCharIndex }
} else if (caretData.dragging.startingCharIndex < caretData.dragging.endIndex) {
startingChar = { dataSetIndex: caretData.dragging.startingDataIndex, index: caretData.dragging.startingCharIndex }
endChar = { dataSetIndex: caretData.dragging.endDataIndex, index: caretData.dragging.endIndex }
} else if (caretData.dragging.startingCharIndex > caretData.dragging.endIndex) {
startingChar = { dataSetIndex: caretData.dragging.endDataIndex, index: caretData.dragging.endIndex }
endChar = { dataSetIndex: caretData.dragging.startingDataIndex, index: caretData.dragging.startingCharIndex }
} else {
isSelectionRendering = false
return
}
let firstLineRendered = false
let x = 0, y = config.format.margin * pxMmRatio;
let maxHeight = config.pageSetup.pxHeight - config.format.margin * pxMmRatio * 2
for (let l = 0; l < lines.length; l++) {
let lineObj = lines[l]
x = config.format.margin * pxMmRatio
// y = lines[l].y
let setData = dataList[lineObj.dataIndex]
let lineHeight = (lineObj.maxFontSize * 4 / 3) * mmPtRatio * pxMmRatio
// if (maxHeight < y) {
// y = config.format.margin * pxMmRatio + (lines[l].maxFontSize * pxMmRatio * mmPtRatio);
// }
y = lines[l].y + (lineObj.maxFontSize / 3) * mmPtRatio * pxMmRatio
if (lineObj.dataIndex >= startingChar.dataSetIndex && lineObj.dataIndex <= endChar.dataSetIndex) {
let ctx = pageList[lineObj.pageIndex].selectionCanvas.getContext('2d', { willReadFrequently: true })
ctx.save()
ctx.fillStyle = "#0000ff55"
let startingCharInThisLine = false, endCharInThisLine = false;
if (
startingChar.dataSetIndex == lineObj.dataIndex &&
startingChar.index >= lineObj.startingCharIndex &&
startingChar.index <= lineObj.endingCharIndex
) {
startingCharInThisLine = true
}
if (
endChar.dataSetIndex == lineObj.dataIndex &&
endChar.index >= lineObj.startingCharIndex &&
endChar.index <= lineObj.endingCharIndex
) endCharInThisLine = true
if (startingCharInThisLine && endCharInThisLine) {
let drawY = y - lineHeight
let drawX = setData.formatedText[startingChar.index].dimension.x
let midChar = setData.formatedText[endChar.index]
let midX = midChar?.dimension?.x
midX = midX ? midX : 0
let lastChar = setData.formatedText[lineObj.endingCharIndex]
let endX = lastChar?.dimension?.x;
endX = endX ? endX : 0
ctx.fillRect(drawX, drawY, midX - drawX, lineHeight)
break
} else if (startingCharInThisLine) {
firstLineRendered = true
let drawY = y - lineHeight
let drawX = setData.formatedText?.[startingChar?.index]?.dimension?.x
drawX = drawX ? drawX : x
let lastChar = setData.formatedText[lineObj.endingCharIndex - 1]
let endX = lastChar?.dimension?.x + lastChar?.dimension?.width;
endX = endX ? endX : (drawX + lineObj.maxFontSize * mmPtRatio * pxMmRatio / 3)
ctx.fillRect(drawX, drawY, endX - drawX, lineHeight)
} else if (endCharInThisLine) {
let drawY = y - lineHeight
let midChar = setData.formatedText[endChar.index]
let midX = midChar?.dimension?.x + midChar?.dimension?.width
midX = midX ? (midX) : 0
ctx.fillRect(x, drawY, midX - x, lineHeight)
break
} else if (firstLineRendered) {
let drawY = y - lineHeight
let drawX = setData.formatedText?.[lineObj?.startingCharIndex]?.dimension?.x
drawX = drawX ? drawX : x
let lastChar = setData.formatedText[lineObj.endingCharIndex - 1]
let endX = lastChar?.dimension?.x + lastChar?.dimension?.width;
endX = endX ? endX : (drawX + lineObj.maxFontSize * mmPtRatio * pxMmRatio / 3)
ctx.fillRect(drawX, drawY, endX - drawX, lineHeight)
}
ctx.restore()
}
}
isSelectionRendering = false
}
function stopDragging(reset) {
if (reset) {
caretData.dragging.startX = null
caretData.dragging.startY = null
caretData.dragging.endX = null
caretData.dragging.endY = null
caretData.dragging.startingDataIndex = null
caretData.dragging.startingCharIndex = null
caretData.dragging.endDataIndex = null
caretData.dragging.endIndex = null
}
caretData.dragging.is = false
caretData.dragging.started = false
renderSelection(reset)
}
function setToolbarData(style) {
let fullStyle = getFullStyle(style)
let fontSizeInput = shadow.querySelector('[adc="font-size-input"]')
fontSizeInput.value = fullStyle.fontSize
let fontFamilyValue = shadow.querySelector('[adc="font-family"] [adc-type="selection"]')
if (fullStyle.fontFamily) {
fontFamilyValue.innerHTML = fullStyle.fontFamily
} else {
fontFamilyValue.innerHTML = ""
}
let listStyle = shadow.querySelector('[adc="list-style"] [adc-type="selection"]')
let listStyleValue = listStyles.find(item => item.value == style.listStyle)
if (style.dataSetType == 1 && listStyleValue) {
listStyle.innerHTML = listStyleValue.type
} else {
listStyle.innerHTML = '[No-List]'
}
let textStyle = shadow.querySelector('[adc="style-handler"] [adc-type="selection"]')
let textStyleValue = textStyleList.find(item => item.type == style?.type)
if (textStyleValue) {
textStyle.innerHTML = textStyleValue.type
} else {
textStyle.innerHTML = textStyleList[0]?.type
}
}
function getLabel(dataIndex) { function getLabel(dataIndex) {
let label = "x." let label = "x."
if (dataList[dataIndex].listStyle == 0) { // 1. a. i. if (dataList[dataIndex].listStyle == 0) { // 1. a. i.
...@@ -969,10 +1325,16 @@ var ADocEditor = function (customConfig) { ...@@ -969,10 +1325,16 @@ var ADocEditor = function (customConfig) {
function addGlobalEvents(e) { function addGlobalEvents(e) {
shadow.querySelector('[adc="page-list"]').addEventListener('wheel', onMouseWheelHandler) shadow.querySelector('[adc="page-list"]').addEventListener('wheel', onMouseWheelHandler)
// shadow.addEventListener('mousedown', globalMouseDownHandler)
shadow.addEventListener('click', globalClickDownHandler) shadow.addEventListener('click', globalClickDownHandler)
shadow.addEventListener('mouseover', globalMouseOverHandler) shadow.addEventListener('mouseover', globalMouseOverHandler)
shadow.addEventListener('mouseup', globalMouseUpHandler)
} }
function globalMouseUpHandler(e) {
caretData.dragging.is = false
console.log('drag', caretData.dragging)
}
function globalClickDownHandler(e) { function globalClickDownHandler(e) {
// these is to handle the dropdown items // these is to handle the dropdown items
...@@ -1003,6 +1365,15 @@ var ADocEditor = function (customConfig) { ...@@ -1003,6 +1365,15 @@ var ADocEditor = function (customConfig) {
} }
function findSpecialCharacterIndex(str, startingCharIndex, forward) {
let delta = forward ? 1 : -1
let curIndex = startingCharIndex + delta
while (str[curIndex]) {
if (str[curIndex] == " ") return curIndex
curIndex += delta
}
return null
}
function globalMouseOverHandler(e) { function globalMouseOverHandler(e) {
let menuItems = shadow.querySelectorAll('[adc-type="menu-item"]') let menuItems = shadow.querySelectorAll('[adc-type="menu-item"]')
...@@ -1021,6 +1392,24 @@ var ADocEditor = function (customConfig) { ...@@ -1021,6 +1392,24 @@ var ADocEditor = function (customConfig) {
} }
} }
function getCaretStyle(customStyle) {
let style = { type: textStyleList[0].type }
if (customStyle) style = { ...customStyle }
else if (caretData.activeData) {
if (caretData?.activeData?.formatedText?.[caretData.index - 1]) {
style = { ...caretData.activeData.formatedText[caretData.index - 1]?.style }
} else {
style = { ...caretData.activeData.style }
}
}
return style
}
function setCaretStyle(customStyle) {
caretData.style = { ...getCaretStyle(customStyle) }
return caretData.style
}
function getFullStyle(refStyle) { function getFullStyle(refStyle) {
let style = {} let style = {}
if (refStyle.type) { if (refStyle.type) {
...@@ -1036,7 +1425,7 @@ var ADocEditor = function (customConfig) { ...@@ -1036,7 +1425,7 @@ var ADocEditor = function (customConfig) {
function renderCaret(toLoop) { function renderCaret(toLoop) {
clearTimeout(caretData.timeout) clearTimeout(caretData.timeout)
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id) let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let lineIndex = lines.findIndex(item => item.dataIndex == dataIndex && caretData.index <= item.charEndIndex) let lineIndex = lines.findIndex(item => item.dataIndex == dataIndex && caretData.index <= item.endingCharIndex)
let lineObj = lines[lineIndex] let lineObj = lines[lineIndex]
let prevLine = lines[lineIndex - 1] let prevLine = lines[lineIndex - 1]
...@@ -1048,7 +1437,7 @@ var ADocEditor = function (customConfig) { ...@@ -1048,7 +1437,7 @@ var ADocEditor = function (customConfig) {
} }
if (!caretData.blink) { if (!caretData.blink) {
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id) let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.charStartIndex) let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.startingCharIndex)
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
...@@ -1105,15 +1494,15 @@ var ADocEditor = function (customConfig) { ...@@ -1105,15 +1494,15 @@ var ADocEditor = function (customConfig) {
} }
function focusOnPage(options = { scroll: false }) { function focusOnPage(options = { scroll: false }) {
caretData.blink = false caretData.blink = false
if (!lastFocussedPage) lastFocussedPage = pageList[0].el // if (!lastFocussedPage) lastFocussedPage = pageList[0].el
if (lastFocussedPage) { // if (lastFocussedPage) {
const scrollTop = pageScrollingDiv.scrollTop // const scrollTop = pageScrollingDiv.scrollTop
lastFocussedPage.focus(); // comment this // // lastFocussedPage.focus(); // comment this
pageScrollingDiv.scrollTop = scrollTop // pageScrollingDiv.scrollTop = scrollTop
if (options.scroll) { // if (options.scroll) {
lastFocussedPage.scrollIntoView({ behavior: "smooth" }) // lastFocussedPage.scrollIntoView({ behavior: "smooth" })
} // }
} // }
} }
function newDocument(e) { function newDocument(e) {
...@@ -1145,6 +1534,18 @@ var ADocEditor = function (customConfig) { ...@@ -1145,6 +1534,18 @@ var ADocEditor = function (customConfig) {
x: config.format.margin, x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4) y: config.format.margin + (3 * config.style.fontSize / 4)
}, },
dragging: {
is: false, // to check if mouse is down for dragging,
started: false, // to check if the mouse has moved for dragging
startX: null, // start and end are coordinated of opposite corner
startY: null,
endX: null,
endY: null,
startingDataIndex: null,
endDataIndex: null,
startingCharIndex: null,
endIndex: null,
}
} }
pageList = [] pageList = []
shadow.querySelector('[adc="page-list"').innerHTML = "" shadow.querySelector('[adc="page-list"').innerHTML = ""
...@@ -1157,7 +1558,7 @@ var ADocEditor = function (customConfig) { ...@@ -1157,7 +1558,7 @@ var ADocEditor = function (customConfig) {
const blob = new Blob([jsonString], { type: 'application/json' }); const blob = new Blob([jsonString], { type: 'application/json' });
const a = shadow.querySelector('[adc="download-link"'); const a = shadow.querySelector('[adc="download-link"');
a.download = 'saved-data.json'; a.download = 'a-saved-data.json';
a.href = URL.createObjectURL(blob); a.href = URL.createObjectURL(blob);
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
...@@ -1172,7 +1573,8 @@ var ADocEditor = function (customConfig) { ...@@ -1172,7 +1573,8 @@ var ADocEditor = function (customConfig) {
pxMmRatio: pxMmRatio, pxMmRatio: pxMmRatio,
config: JSON.parse(JSON.stringify(config)), config: JSON.parse(JSON.stringify(config)),
content: JSON.parse(JSON.stringify(dataList)), content: JSON.parse(JSON.stringify(dataList)),
caretData: JSON.parse(JSON.stringify(caretData)) caretData: JSON.parse(JSON.stringify(caretData)),
pageList: pageList,
} }
delete returnObj.caretData.activeData delete returnObj.caretData.activeData
...@@ -1186,7 +1588,7 @@ var ADocEditor = function (customConfig) { ...@@ -1186,7 +1588,7 @@ var ADocEditor = function (customConfig) {
function setDocumentData(data) { function setDocumentData(data) {
// might need to change some configuration // might need to change some configuration
for (let d = 0; d < data.content.length; d++) data.content[d].id = ++counter
dataList = JSON.parse(JSON.stringify(data.content)) dataList = JSON.parse(JSON.stringify(data.content))
config = JSON.parse(JSON.stringify(data.config)) config = JSON.parse(JSON.stringify(data.config))
caretData = JSON.parse(JSON.stringify(data.caretData)) caretData = JSON.parse(JSON.stringify(data.caretData))
...@@ -1195,7 +1597,6 @@ var ADocEditor = function (customConfig) { ...@@ -1195,7 +1597,6 @@ var ADocEditor = function (customConfig) {
reRenderCanvas() reRenderCanvas()
} }
// http://localhost:3910/assets/fonts/calibri-regular.woff2
async function printDoc() { async function printDoc() {
// pdf dimention in pdf-lib is based on 'pt' or 'points' by default. // pdf dimention in pdf-lib is based on 'pt' or 'points' by default.
// 1pt = 1/72 inch // 1pt = 1/72 inch
...@@ -1240,7 +1641,7 @@ var ADocEditor = function (customConfig) { ...@@ -1240,7 +1641,7 @@ var ADocEditor = function (customConfig) {
} }
for (let c = lines[l].charStartIndex; c < lines[l].charEndIndex; c++) { for (let c = lines[l].startingCharIndex; c < lines[l].endingCharIndex; c++) {
let fontObj = fontList.find(item => item.name == dataSet.formatedText[c]?.style?.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) {
...@@ -1289,18 +1690,18 @@ var ADocEditor = function (customConfig) { ...@@ -1289,18 +1690,18 @@ var ADocEditor = function (customConfig) {
link.click(); link.click();
} }
async function setupHeaders(){ async function setupHeaders() {
let headerList = shadow.querySelector('[adc="left-sidebar-content"]') let headerList = shadow.querySelector('[adc="left-sidebar-content"]')
headerList.innerHTML = "" headerList.innerHTML = ""
for(let d=0; d<dataList.length; d++){ for (let d = 0; d < dataList.length; d++) {
let styleIndex = textStyleList.findIndex( item => item.type == dataList[d]?.style?.type ) let styleIndex = textStyleList.findIndex(item => item.type == dataList[d]?.style?.type)
if (styleIndex>0 && dataList[d].plainContent.length){ if (styleIndex > 0 && dataList[d].plainContent.length) {
let headingItem = document.createElement('div') let headingItem = document.createElement('div')
headingItem.innerHTML = dataList[d].plainContent headingItem.innerHTML = dataList[d].plainContent
headingItem.innerHTML = "&nbsp;".repeat(textStyleList[styleIndex].spaces)+headingItem.innerHTML headingItem.innerHTML = "&nbsp;".repeat(textStyleList[styleIndex].spaces*3) + headingItem.innerHTML
headerList.append(headingItem) headerList.append(headingItem)
let headingStyle = getFullStyle(dataList[d].style) // let headingStyle = getFullStyle(dataList[d].style)
headingItem.style.fontSize = `${headingStyle.fontSize/1.2}pt` // headingItem.style.fontSize = `${headingStyle.fontSize / 1.2}pt`
headingItem.style.width = '100%' headingItem.style.width = '100%'
headingItem.style.whiteSpace = 'nowrap' headingItem.style.whiteSpace = 'nowrap'
headingItem.style.overflow = "hidden" headingItem.style.overflow = "hidden"
......
dist/script.js
...@@ -35,46 +35,40 @@ function setData() { ...@@ -35,46 +35,40 @@ function setData() {
if (!extractedData) extractedData = JSON.parse( localStorage.getItem('oldData') ) if (!extractedData) extractedData = JSON.parse( localStorage.getItem('oldData') )
if(extractedData){ if(extractedData){
editor.setDocumentData(extractedData) editor.setDocumentData(extractedData)
editor.focusOnPage()
} }
} }
setTimeout( ()=>{
setData()
}, 500 )
function generatePDF() { function generatePDF() {
editor.generatePDF("your_doc-pdf-lib.pdf") editor.generatePDF("your_doc-pdf-lib.pdf")
} }
editor.addFonts(["./assets/fonts/Caveat-VariableFont_wght.woff2", "./assets/fonts/Caveat-VariableFont_wght.ttf"], 'Caveat') // editor.addFonts(["./assets/fonts/Caveat-VariableFont_wght.woff2", "./assets/fonts/Caveat-VariableFont_wght.ttf"], 'Caveat')
editor.addFonts(["./assets/fonts/Comfortaa-VariableFont_wght.woff2", "./assets/fonts/Comfortaa-VariableFont_wght.ttf"], 'Comfortaa') // editor.addFonts(["./assets/fonts/Comfortaa-VariableFont_wght.woff2", "./assets/fonts/Comfortaa-VariableFont_wght.ttf"], 'Comfortaa')
editor.addFonts(["./assets/fonts/CrimsonText-Regular.woff2", "./assets/fonts/CrimsonText-Regular.ttf"], 'Crimson Text') // editor.addFonts(["./assets/fonts/FiraSans-Regular.woff2", "./assets/fonts/FiraSans-Regular.ttf"], 'Fira Sans')
editor.addFonts(["./assets/fonts/EduTASBeginner-VariableFont_wght.woff2", "./assets/fonts/EduTASBeginner-VariableFont_wght.ttf"], 'Edu TAS Beginner') // editor.addFonts(["./assets/fonts/Kanit-Regular.woff2", "./assets/fonts/Kanit-Regular.ttf"], 'Kanit')
editor.addFonts(["./assets/fonts/FiraSans-Regular.woff2", "./assets/fonts/FiraSans-Regular.ttf"], 'Fira Sans') // editor.addFonts(["./assets/fonts/Merriweather-Regular.woff2", "./assets/fonts/Merriweather-Regular.ttf"], 'Merriweather')
editor.addFonts(["./assets/fonts/IndieFlower-Regular.woff2", "./assets/fonts/IndieFlower-Regular.ttf"], 'Indie Flower') // editor.addFonts(["./assets/fonts/Montserrat-VariableFont_wght.woff2", "./assets/fonts/Montserrat-VariableFont_wght.ttf"], 'Montserrat')
editor.addFonts(["./assets/fonts/Kanit-Regular.woff2", "./assets/fonts/Kanit-Regular.ttf"], 'Kanit') // editor.addFonts(["./assets/fonts/Mulish-VariableFont_wght.woff2", "./assets/fonts/Mulish-VariableFont_wght.ttf"], 'Mulish')
editor.addFonts(["./assets/fonts/Karla-VariableFont_wght.woff2", "./assets/fonts/Karla-VariableFont_wght.ttf"], 'Karla') // editor.addFonts(["./assets/fonts/NotoSans-VariableFont_wdth,wght.woff2", "./assets/fonts/NotoSans-VariableFont_wdth,wght.ttf"], 'Noto Sans')
editor.addFonts(["./assets/fonts/Kenia-Regular.woff2", "./assets/fonts/Kenia-Regular.ttf"], 'Kenia') // editor.addFonts(["./assets/fonts/Nunito-VariableFont_wght.woff2", "./assets/fonts/Nunito-VariableFont_wght.ttf"], 'Nunito')
editor.addFonts(["./assets/fonts/Lato-Regular.woff2", "./assets/fonts/Lato-Regular.ttf"], 'Lato') // editor.addFonts(["./assets/fonts/OpenSans-VariableFont_wdth,wght.woff2", "./assets/fonts/OpenSans-VariableFont_wdth,wght.ttf"], 'Open Sans')
editor.addFonts(["./assets/fonts/LibreFranklin-VariableFont_wght.woff2", "./assets/fonts/LibreFranklin-VariableFont_wght.ttf"], 'Libre Franklin') // editor.addFonts(["./assets/fonts/Pacifico-Regular.woff2", "./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico')
editor.addFonts(["./assets/fonts/Lora-Regular.woff2", "./assets/fonts/Lora-Regular.ttf"], 'Lora') // editor.addFonts(["./assets/fonts/Poppins-Regular.woff2", "./assets/fonts/Poppins-Regular.ttf"], 'Poppins')
editor.addFonts(["./assets/fonts/Macondo-Regular.woff2", "./assets/fonts/Macondo-Regular.ttf"], 'Macondo') // editor.addFonts(["./assets/fonts/Prompt-Regular.woff2", "./assets/fonts/Prompt-Regular.ttf"], 'Prompt')
editor.addFonts(["./assets/fonts/Merriweather-Regular.woff2", "./assets/fonts/Merriweather-Regular.ttf"], 'Merriweather') // editor.addFonts(["./assets/fonts/Rajdhani-Regular.woff2", "./assets/fonts/Rajdhani-Regular.ttf"], 'Rajdhani')
editor.addFonts(["./assets/fonts/Montserrat-VariableFont_wght.woff2", "./assets/fonts/Montserrat-VariableFont_wght.ttf"], 'Montserrat') // editor.addFonts(["./assets/fonts/Roboto-Regular.woff2", "./assets/fonts/Roboto-Regular.ttf"], 'Roboto')
editor.addFonts(["./assets/fonts/Mulish-VariableFont_wght.woff2", "./assets/fonts/Mulish-VariableFont_wght.ttf"], 'Mulish') // editor.addFonts(["./assets/fonts/Rubik-VariableFont_wght.woff2", "./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik')
editor.addFonts(["./assets/fonts/NotoSans-VariableFont_wdth,wght.woff2", "./assets/fonts/NotoSans-VariableFont_wdth,wght.ttf"], 'Noto Sans') // editor.addFonts(["./assets/fonts/SourceCodePro-VariableFont_wght.woff2", "./assets/fonts/SourceCodePro-VariableFont_wght.ttf"], 'Source Code Pro')
editor.addFonts(["./assets/fonts/Nunito-VariableFont_wght.woff2", "./assets/fonts/Nunito-VariableFont_wght.ttf"], 'Nunito') // editor.addFonts(["./assets/fonts/Teko-VariableFont_wght.woff2", "./assets/fonts/Teko-VariableFont_wght.ttf"], 'Teko')
editor.addFonts(["./assets/fonts/OpenSans-VariableFont_wdth,wght.woff2", "./assets/fonts/OpenSans-VariableFont_wdth,wght.ttf"], 'Open Sans') // editor.addFonts(["./assets/fonts/Ubuntu-Regular.woff2", "./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu')
editor.addFonts(["./assets/fonts/Outfit-VariableFont_wght.woff2", "./assets/fonts/Outfit-VariableFont_wght.ttf"], 'Outfit') // editor.addFonts(["./assets/fonts/WorkSans-Regular.woff2", "./assets/fonts/WorkSans-Regular.ttf"], 'Work Sans')
editor.addFonts(["./assets/fonts/Pacifico-Regular.woff2", "./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico') // editor.addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
editor.addFonts(["./assets/fonts/Poppins-Regular.woff2", "./assets/fonts/Poppins-Regular.ttf"], 'Poppins') // editor.addFonts(["./assets/fonts/Bitter-VariableFont_wght.woff2", "./assets/fonts/Bitter-VariableFont_wght.ttf"], 'Bitter')
editor.addFonts(["./assets/fonts/Prompt-Regular.woff2", "./assets/fonts/Prompt-Regular.ttf"], 'Prompt')
editor.addFonts(["./assets/fonts/Rajdhani-Regular.woff2", "./assets/fonts/Rajdhani-Regular.ttf"], 'Rajdhani')
editor.addFonts(["./assets/fonts/Roboto-Regular.woff2", "./assets/fonts/Roboto-Regular.ttf"], 'Roboto')
editor.addFonts(["./assets/fonts/Rubik-VariableFont_wght.woff2", "./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik')
editor.addFonts(["./assets/fonts/SourceCodePro-VariableFont_wght.woff2", "./assets/fonts/SourceCodePro-VariableFont_wght.ttf"], 'Source Code Pro')
editor.addFonts(["./assets/fonts/Teko-VariableFont_wght.woff2", "./assets/fonts/Teko-VariableFont_wght.ttf"], 'Teko')
editor.addFonts(["./assets/fonts/TitilliumWeb-Regular.woff2", "./assets/fonts/TitilliumWeb-Regular.ttf"], 'Titillium Web')
editor.addFonts(["./assets/fonts/Ubuntu-Regular.woff2", "./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu')
editor.addFonts(["./assets/fonts/VarelaRound-Regular.woff2", "./assets/fonts/VarelaRound-Regular.ttf"], 'Varela Round')
editor.addFonts(["./assets/fonts/WorkSans-Regular.woff2", "./assets/fonts/WorkSans-Regular.ttf"], 'Work Sans')
// end of file // end of file
\ No newline at end of file
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