Skip to content

Commit 3372e8a

Browse files
grassatorgrassator
authored
Merge pull request #4 from JunIce/master
fixed the canvas adapt the monitor's pixel ratio and the start the dev server by vite
2 parents e6b1d15 + b5c1e11 commit 3372e8a

22 files changed

+1219
-3010
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
build/
1+
dist/
22
.DS_Store
33
node_modules

‎demo/index.html‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>Canvas Text Editor</title>
7+
<meta name="description" content="">
8+
<meta name="keywords" content="">
9+
<script src="./lib/index.js" type="module"></script>
10+
</head>
11+
<body>
12+
</body>
13+
</html>

‎lib/CanvasTextEditor.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
"use strict";
22

3-
var FontMetrics = require('FontMetrics'),
4-
Document = require('Document'),
5-
Selection = require('Selection');
3+
var FontMetrics = require('./FontMetrics'),
4+
Document = require('./Document'),
5+
Selection = require('./Selection');
66

77
/**
88
* Simple plain-text text editor using html5 canvas.
@@ -20,7 +20,8 @@ var CanvasTextEditor = function(doc, options) {
2020
fontSize: 14,
2121
padding: 5,
2222
width: 640,
23-
height: 480
23+
height: 480,
24+
dpr: window.devicePixelRatio || 1,
2425
};
2526

2627
if (typeof options === 'object') {
@@ -172,7 +173,7 @@ CanvasTextEditor.prototype._createCanvas = function() {
172173
this.canvas = document.createElement('canvas');
173174
this.canvas.style.display = 'block';
174175
this.context = this.canvas.getContext('2d');
175-
this.resize(this.options.width, this.options.height);
176+
this.resize(this.options.width, this.options.height, this.options.dpr);
176177
this.render();
177178
this.wrapper.appendChild(this.canvas);
178179
};
@@ -393,10 +394,14 @@ CanvasTextEditor.prototype.getDocument = function() {
393394
* Resizes editor to provided dimensions.
394395
* @param {Number} width
395396
* @param {Number} height
397+
* @param {Number} dpr device pixel ratio
396398
*/
397-
CanvasTextEditor.prototype.resize = function(width, height) {
398-
this.canvas.width = width;
399-
this.canvas.height = height;
399+
CanvasTextEditor.prototype.resize = function(width, height, dpr) {
400+
this.canvas.width = width * dpr;
401+
this.canvas.height = height * dpr;
402+
this.canvas.style.width = `${width}px`;
403+
this.canvas.style.height = `${height}px`;
404+
this.context.scale(dpr, dpr);
400405
// We need to update context settings every time we resize
401406
this.context.font = this._metrics.getSize() + 'px ' + this._metrics.getFamily();
402407
};

‎lib/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import CanvasTextEditor from "./CanvasTextEditor.js";
2+
import Document from "./Document.js";
3+
4+
document.addEventListener(
5+
"DOMContentLoaded",
6+
function () {
7+
var text = "",
8+
characterCount = 0,
9+
aCharCode = "a".charCodeAt(0);
10+
for (var i = 0; i < 100; i++) {
11+
characterCount = Math.floor(Math.random() * 120);
12+
for (var j = 0; j < characterCount; j++) {
13+
text += String.fromCharCode(aCharCode + Math.floor(Math.random() * 26));
14+
}
15+
text += "\n";
16+
}
17+
var doc = new Document(text),
18+
editor = new CanvasTextEditor(doc);
19+
document.body.appendChild(editor.getEl());
20+
editor.focus();
21+
},
22+
false
23+
);

‎package.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
"name": "canvas-text-editor",
44
"description": "Simple text editor using html5 canvas",
55
"version": "0.1.0",
6-
"engines": {
7-
"node": ">= 0.4.x < 0.7.0"
6+
"scripts": {
7+
"build": "vite build",
8+
"dev": "vite",
9+
"test": "vitest"
810
},
911
"devDependencies": {
10-
"coffee-script": "latest",
11-
"stitch": "latest",
12-
"uglify-js": "latest",
13-
"express": "latest"
12+
"jsdom": "22.1.0",
13+
"vite": "4.3.9",
14+
"vite-plugin-commonjs": "0.8.2",
15+
"vitest": "0.34.1"
1416
}
1517
}

‎scripts/build.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎scripts/common.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎scripts/serve.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎test/spec/DocumentSpec.js‎ renamed to ‎test/Document.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
describe("Document", function() {
2-
var Document = require('Document'),
2+
var Document = require('../lib/Document'),
33
testText = 'Line1\n\nLine3\nLine4',
44
doc = null;
55

0 commit comments

Comments
 (0)