Skip to content

A
a-doc-editor
Commit b84ed9a4 by ramdayalmunda
Options

minor position fix

parent 40a9ddfd
Showing with 10 additions and 12 deletions
dist/assets/a-doc-editor.css
.a-doc-editor { .a-doc-editor {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 400px; height: 590px;
} }
.a-doc-editor canvas:focus-visible { .a-doc-editor canvas:focus-visible {
outline: red auto 1px; /* outline: auto rgb(0, 68, 255, 50%); */
} }
...@@ -45,7 +45,6 @@ ...@@ -45,7 +45,6 @@
right: 20%; right: 20%;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #3756be;
text-align: center; text-align: center;
align-items: center; align-items: center;
overflow: auto; overflow: auto;
...@@ -54,6 +53,7 @@ ...@@ -54,6 +53,7 @@
.a-doc-editor .body .scrolling-area canvas.page { .a-doc-editor .body .scrolling-area canvas.page {
background: #f3f3f3; background: #f3f3f3;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%;
} }
.a-doc-editor .body .scrolling-area canvas.page:first-child { .a-doc-editor .body .scrolling-area canvas.page:first-child {
......
dist/assets/a-doc-editor.js
...@@ -108,14 +108,9 @@ var ADocEditor = function (customConfig) { ...@@ -108,14 +108,9 @@ var ADocEditor = function (customConfig) {
// container.append(mainComponent) // container.append(mainComponent)
reRenderPages(dataSet) reRenderPages(dataSet)
// caretData.interval = setInterval(() => {
// caretData.blink = !caretData.blink
// reRenderPages(dataSet, true)
// }, caretData.intervalDuration)
} }
function reRenderPages(dataList, blinking = false) { function reRenderPages(dataList, blinking = false) {
console.log('rendering', dataList)
if (renderInProgress) return if (renderInProgress) return
renderInProgress = true renderInProgress = true
...@@ -199,7 +194,6 @@ var ADocEditor = function (customConfig) { ...@@ -199,7 +194,6 @@ var ADocEditor = function (customConfig) {
for (let i = 0; i < dataSet.formatedText.length; i++) { for (let i = 0; i < dataSet.formatedText.length; i++) {
ctx.save() ctx.save()
ctx.font = `${dataSet.formatedText[i].fontSize}px ${dataSet.formatedText[i].fontFamily}` ctx.font = `${dataSet.formatedText[i].fontSize}px ${dataSet.formatedText[i].fontFamily}`
console.log('dataSet.formatedText[i].fontColor', dataSet.formatedText[i].fontColor)
ctx.fillStyle = dataSet.formatedText[i].fontColor ctx.fillStyle = dataSet.formatedText[i].fontColor
ctx.fillText(dataSet.formatedText[i].char, dataSet.formatedText[i].x, dataSet.formatedText[i].y) ctx.fillText(dataSet.formatedText[i].char, dataSet.formatedText[i].x, dataSet.formatedText[i].y)
ctx.restore() ctx.restore()
...@@ -240,7 +234,9 @@ var ADocEditor = function (customConfig) { ...@@ -240,7 +234,9 @@ var ADocEditor = function (customConfig) {
} }
function createCanvas() { function createCanvas() {
console.log('pageSetup', config.pageSetup)
let canvas = document.createElement('canvas') let canvas = document.createElement('canvas')
canvas.setAttribute('class', 'page')
canvas.width = config.pageSetup.canvasWidth canvas.width = config.pageSetup.canvasWidth
canvas.height = config.pageSetup.canvasHeight canvas.height = config.pageSetup.canvasHeight
canvas.addEventListener('keydown', keydownHandler) canvas.addEventListener('keydown', keydownHandler)
...@@ -255,11 +251,16 @@ var ADocEditor = function (customConfig) { ...@@ -255,11 +251,16 @@ var ADocEditor = function (customConfig) {
focusedCanvas = e.target focusedCanvas = e.target
caretData.blink = false caretData.blink = false
reRenderPages(dataSet) reRenderPages(dataSet)
caretData.interval = setInterval(() => {
caretData.blink = !caretData.blink
reRenderPages(dataSet, true)
}, caretData.intervalDuration)
} }
function onBlurHandler(e) { function onBlurHandler(e) {
focusedCanvas = null focusedCanvas = null
caretData.blink = true caretData.blink = true
reRenderPages(dataSet) reRenderPages(dataSet)
clearInterval(caretData.interval)
} }
...@@ -328,9 +329,7 @@ var ADocEditor = function (customConfig) { ...@@ -328,9 +329,7 @@ var ADocEditor = function (customConfig) {
var returnObj = { var returnObj = {
destory, destory,
loadContent: function (data) { loadContent: function (data) {
console.log('to load', JSON.parse(JSON.stringify(dataSet)))
dataSet = JSON.parse(JSON.stringify(data)) dataSet = JSON.parse(JSON.stringify(data))
console.log('new Data', JSON.parse(JSON.stringify(dataSet)))
caretData.activeData = null caretData.activeData = null
caretData.activeData = dataSet[0] caretData.activeData = dataSet[0]
caretData.index = dataSet[0].plainContent.length caretData.index = dataSet[0].plainContent.length
......
dist/index.html
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
</style> </style>
</head> </head>
<body> <body>
<h2>To create a custom doc editor</h2>
<p>Click on the canvas and start typing</p> <p>Click on the canvas and start typing</p>
<div id="user-container-for-editor"></div> <div id="user-container-for-editor"></div>
......
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