Skip to content

A
a-doc-editor
Commit 44af4271 by ramdayalmunda
Options

added enter event

parent 6ffd5ec8
Showing with 61 additions and 41 deletions
dist/assets/a-doc-editor.js
...@@ -30,8 +30,22 @@ var ADocEditor = function (customConfig) { ...@@ -30,8 +30,22 @@ var ADocEditor = function (customConfig) {
} }
var config = null; var config = null;
var canvasList = [] var canvasList = []
const dataTypes = [
"paragraph",
]
var dataSet = [ var dataSet = [
{ id: 1, plainContent: "" } {
id: 1,
type: 0,
plainContent: "",
style: {
fontSize: 28,
fontFamily: 'Arial',
bold: false,
italic: false,
fontColor: "#1e1f77"
}
}
] ]
var caretData = { var caretData = {
...@@ -46,17 +60,6 @@ var ADocEditor = function (customConfig) { ...@@ -46,17 +60,6 @@ var ADocEditor = function (customConfig) {
y: 21, y: 21,
} }
var renderInProgress = false; var renderInProgress = false;
var focusedCanvas = false;
var domElement = {
header: {
el: document.createElement('div'),
},
body: {
el: document.createElement('div'),
}
}
function inititalize(customConfig) { function inititalize(customConfig) {
config = { ...defaultConfig, ...customConfig } config = { ...defaultConfig, ...customConfig }
...@@ -109,7 +112,7 @@ var ADocEditor = function (customConfig) { ...@@ -109,7 +112,7 @@ var ADocEditor = function (customConfig) {
</div> </div>
<div class="sidebar-body"></div> <div class="sidebar-body"></div>
</div> </div>
<div class="right-sidebar hide" id="${rightSidebarId}"> <div class="right-sidebar" id="${rightSidebarId}">
<div class="toggle-sidebar"> <div class="toggle-sidebar">
<span>&lrarr;</span> <span>&lrarr;</span>
<span>Comments</span> <span>Comments</span>
...@@ -249,6 +252,7 @@ var ADocEditor = function (customConfig) { ...@@ -249,6 +252,7 @@ var ADocEditor = function (customConfig) {
function renderCaret() { function renderCaret() {
let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true }) let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true })
let activeTextData = caretData.activeData.formatedText[caretData.index - 1] let activeTextData = caretData.activeData.formatedText[caretData.index - 1]
if (!activeTextData) activeTextData = caretData.activeData.style
let rectX = activeTextData?.x + activeTextData?.width; let rectX = activeTextData?.x + activeTextData?.width;
let rectY = activeTextData?.y - activeTextData?.fontSize; let rectY = activeTextData?.y - activeTextData?.fontSize;
rectX = rectX ? rectX : 0 rectX = rectX ? rectX : 0
...@@ -270,7 +274,6 @@ var ADocEditor = function (customConfig) { ...@@ -270,7 +274,6 @@ 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.setAttribute('class', 'page')
canvas.width = config.pageSetup.canvasWidth canvas.width = config.pageSetup.canvasWidth
...@@ -319,7 +322,21 @@ var ADocEditor = function (customConfig) { ...@@ -319,7 +322,21 @@ var ADocEditor = function (customConfig) {
e.preventDefault() e.preventDefault()
} }
else if (e.keyCode == 13) { // Enter Key else if (e.keyCode == 13) { // Enter Key
console.log('Enter') if (caretData){
if (caretData.activeData.type == 0){ // for plain text // just go to next line
let newLineData = {
type: 0,
plainContent: "",
style: JSON.parse( JSON.stringify(caretData.activeData.formatedText[caretData.activeData.formatedText.length-1]) )
}
newLineData.style.y += newLineData.style.fontSize
newLineData.style.x = 0
newLineData.style.width = 0
dataSet.push(newLineData)
caretData.activeData = newLineData
caretData.index = 0
}
}
} }
else if (e.key.length == 1 || e.keyCode == 32) { else if (e.key.length == 1 || e.keyCode == 32) {
e.preventDefault() e.preventDefault()
...@@ -371,6 +388,9 @@ var ADocEditor = function (customConfig) { ...@@ -371,6 +388,9 @@ var ADocEditor = function (customConfig) {
caretData.index = dataSet[0].plainContent.length caretData.index = dataSet[0].plainContent.length
reRenderPages(dataSet) reRenderPages(dataSet)
}, },
getContent: function (){
return JSON.parse( JSON.stringify( dataSet ) )
}
} }
return returnObj return returnObj
} }
......
dist/index.html
...@@ -18,10 +18,14 @@ ...@@ -18,10 +18,14 @@
</head> </head>
<body> <body>
<div class="body"></div> <div class="body"></div>
<p>Click on the canvas and start typing</p> <p>Click on the canvas and start typing]
<button onclick="extractData()">Extract</button>
<button onclick="setData()">Set Data</button>
</p>
<div id="user-container-for-editor"></div> <div id="user-container-for-editor"></div>
<script type="module" src="./script.js"></script> <script src="./script.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
dist/randomDataSet.js deleted 100644 → 0
var tempDocData = [
{
id: `1`,
type: "text",
plainContent: "Did you ever hear about the Great Ice Age or the Pleistocene Epoch? Less than one million years ago, in fact, some 12,000 years ago, an ice sheet many thousands of feet thick rode over Burke Mountain in a southeastward direction.",
},
// {
// id: `2`,
// type: "text",
// plainContent: "The drug seekers would come into the emergency room and scream about how much pain they were in. When you told them that you would start elevating their pain with Tylenol or Advil instead of a narcotic they became nasty and combative. They would start telling you what drug and dose they had to have to make their pain tolerable.",
// },
]
export {
tempDocData,
}
\ No newline at end of file
dist/script.js
import { tempDocData } from "./randomDataSet.js" var editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") })
!(async function(){
let editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") }) function extractData() {
let data = editor.getContent()
console.log(data)
}
function setData() {
var tempDocData = [
{
id: `1`,
type: "text",
plainContent: "Did you ever hear about the Great Ice Age or the Pleistocene Epoch? Less than one million years ago, in fact, some 12,000 years ago, an ice sheet many thousands of feet thick rode over Burke Mountain in a southeastward direction.",
},
]
editor.loadContent(tempDocData) editor.loadContent(tempDocData)
})()
\ No newline at 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