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