Skip to content

A
a-doc-editor
Commit 8b4d6816 by ramdayalmunda
Options

backspace features

parent 3a3dad06
Showing with 59 additions and 6 deletions
dist/assets/a-doc-editor2.js
...@@ -9,9 +9,9 @@ var ADocEditor = function (customConfig) { ...@@ -9,9 +9,9 @@ var ADocEditor = function (customConfig) {
pageSetup: { size: "A4" }, zoom: 1, pageSetup: { size: "A4" }, zoom: 1,
format: { format: {
background: "#fff", background: "#fff",
margin: 10, // mm margin: 15, // mm
border: "", border: "",
tabWidth: 10, // mm tabWidth: 20, // mm
}, },
style: { style: {
fontSize: 10, // this is in mm fontSize: 10, // this is in mm
...@@ -199,7 +199,6 @@ var ADocEditor = function (customConfig) { ...@@ -199,7 +199,6 @@ var ADocEditor = function (customConfig) {
function reRenderCanvas() { function reRenderCanvas() {
if (isRendering) return if (isRendering) return
console.log('to rendering')
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 }
...@@ -253,6 +252,11 @@ var ADocEditor = function (customConfig) { ...@@ -253,6 +252,11 @@ var ADocEditor = function (customConfig) {
// to calculate the lines // to calculate the lines
let tempLineWidth = 0; let tempLineWidth = 0;
let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2) let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2)
let tabWidth =( (dataBlock.type==1?1:0)+ dataBlock.tabCount)*config.format.tabWidth*pxMmRatio
console.log('tabWidth', tabWidth)
lineObj.tabWidth = tabWidth
maxLineWidth -= tabWidth
lineObj.dataType = dataBlock.type
let wordEndIndex = 0; // this stores the index of the word which can fit in the line; let wordEndIndex = 0; // this stores the index of the word which can fit in the line;
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]
...@@ -302,6 +306,8 @@ var ADocEditor = function (customConfig) { ...@@ -302,6 +306,8 @@ var ADocEditor = function (customConfig) {
for (let l = 0; l < lines.length; l++) { for (let l = 0; l < lines.length; l++) {
let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true }) let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
x = config.format.margin * pxMmRatio x = config.format.margin * pxMmRatio
x += lines[l].tabWidth
console.log('line',l, lines[l])
y = y + (lines[l].maxFontSize * pxMmRatio) y = y + (lines[l].maxFontSize * pxMmRatio)
lines[l].y = y lines[l].y = y
ctx.save() ctx.save()
...@@ -350,11 +356,15 @@ var ADocEditor = function (customConfig) { ...@@ -350,11 +356,15 @@ var ADocEditor = function (customConfig) {
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.charStartIndex)
if (lineObj) { if (lineObj) {
console.log('line', lineObj)
x += lineObj.tabWidth
y = lineObj.y - lineObj.maxFontSize * pxMmRatio y = lineObj.y - lineObj.maxFontSize * pxMmRatio
} }
} }
let width = height / 10 let width = height / 10
console.log(x,y,width,height)
const imageData = ctx.getImageData(x, y, width, height); const imageData = ctx.getImageData(x, y, width, height);
const data = imageData.data; const data = imageData.data;
caretData.previousCaret = { imageData: structuredClone(imageData), x, y } caretData.previousCaret = { imageData: structuredClone(imageData), x, y }
...@@ -421,13 +431,27 @@ var ADocEditor = function (customConfig) { ...@@ -421,13 +431,27 @@ var ADocEditor = function (customConfig) {
} }
function keydownHandler(e) { function keydownHandler(e) {
if (e.key=='Tab'){
e.preventDefault()
caretData.activeData.tabCount += e.shiftKey?(-1):1
caretData.activeData.tabCount = (caretData.activeData.tabCount<0)?0:(caretData.activeData.tabCount>5?5:caretData.activeData.tabCount)
}
if (e.altKey) return if (e.altKey) return
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 (activeDataIndex > 0) { if (activeDataIndex > 0) {
caretData.activeData = dataList[activeDataIndex - 1] if ( caretData.activeData.type == 0 ){
caretData.index = caretData.activeData.plainContent.length if (caretData.activeData.tabCount){
caretData.activeData.tabCount--
}else{
if (!caretData.activeData.plainContent.length){ dataList.splice( activeDataIndex, 1 ) }
caretData.activeData = dataList[activeDataIndex - 1]
caretData.index = caretData.activeData.plainContent.length
}
}else if ( caretData.activeData.type==1 ){
caretData.activeData.type = 0
}
} }
} 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)
......
dist/assets/favicon.svg 0 → 100644
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 528.899 528.899"
xml:space="preserve">
<g>
<path d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981
c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
L27.473,390.597L0.3,512.69z"/>
</g>
</svg>
\ No newline at end of file
dist/favicon.svg 0 → 100644
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 528.899 528.899"
xml:space="preserve">
<g>
<path d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981
c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
L27.473,390.597L0.3,512.69z"/>
</g>
</svg>
\ No newline at end of file
dist/index.html
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<script src="./assets/pdf-lib.min.js" ></script> <script src="./assets/pdf-lib.min.js" ></script>
<script src="./assets/a-doc-editor2.js"></script> <script src="./assets/a-doc-editor2.js"></script>
<script src="./assets/html-docx.min.js"></script> <script src="./assets/html-docx.min.js"></script>
<link rel="icon" id="favicon" href="favicon.svg" type="image/png">
<style> <style>
body { body {
......
index.js
const express = require("express") const express = require("express")
const port = 3910; const port = 3910;
const path = require("path"); const path = require("path");
console.log( typeof FileReader )
const app = express() const app = express()
app.use( express.json() ) app.use( express.json() )
......
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