He mind

example/2_features_cn.html

@@ -197,10 +197,7 @@
                 <input class="file" type="file" id="image-chooser" accept="image/*" />
             </div>
         </div>
-        <script
-            type="text/javascript"
-            src="//jsd.onmicrosoft.cn/npm/[email protected]/es6/jsmind.js"
-        ></script>
+        <script type="text/javascript" src="../es6/jsmind.js"></script>
         <script
             type="text/javascript"
             src="//jsd.onmicrosoft.cn/npm/[email protected]/es6/jsmind.draggable-node.js"

src/jsmind.graph.js

@@ -123,6 +123,9 @@ class CanvasGraph {
         };
         this.init_line_render();
     }
+    getPixelRatio() {
+        return window.devicePixelRatio || 1;
+    }
     init_line_render() {
         if (typeof this.opts.custom_line_render === 'function') {
             this.drawing = (ctx, x1, y1, x2, y2) => {
@@ -144,11 +147,23 @@ class CanvasGraph {
         return this.e_canvas;
     }
     set_size(w, h) {
+        let dpr = this.getPixelRatio();
+
         this.size.w = w;
         this.size.h = h;
-        this.e_canvas.width = w;
-        this.e_canvas.height = h;
+        if (this.e_canvas.width && this.e_canvas.height && this.canvas_ctx.scale) {
+            this.e_canvas.width = w * dpr;
+            this.e_canvas.height = h * dpr;
+
+            this.e_canvas.style.width = w + 'px';
+            this.e_canvas.style.height = h + 'px';
+            this.canvas_ctx.scale(dpr, dpr);
+        } else {
+            this.e_canvas.width = w;
+            this.e_canvas.height = h;
+        }
     }
+
     clear() {
         this.canvas_ctx.clearRect(0, 0, this.size.w, this.size.h);
     }
@@ -160,7 +175,7 @@ class CanvasGraph {
         this.drawing(ctx, pin.x + offset.x, pin.y + offset.y, pout.x + offset.x, pout.y + offset.y);
     }
     copy_to(dest_canvas_ctx, callback) {
-        dest_canvas_ctx.drawImage(this.e_canvas, 0, 0);
+        dest_canvas_ctx.drawImage(this.e_canvas, 0, 0, this.size.w, this.size.h);
         !!callback && callback();
     }
     _bezier_to(ctx, x1, y1, x2, y2) {

src/plugins/jsmind.screenshot.js

@@ -37,11 +37,13 @@ class JmScreenshot {
         this.version = '0.2.0';
         this.jm = jm;
         this.options = opts;
+        this.dpr = window.devicePixelRatio || 1;
     }
 
     shoot() {
         let c = this.create_canvas();
         let ctx = c.getContext('2d');
+        ctx.scale(this.dpr, this.dpr);
         Promise.resolve(ctx)
             .then(() => this.draw_background(ctx))
             .then(() => this.draw_lines(ctx))
@@ -53,8 +55,14 @@ class JmScreenshot {
 
     create_canvas() {
         let c = $.c('canvas');
-        c.width = this.jm.view.size.w;
-        c.height = this.jm.view.size.h;
+        const w = this.jm.view.size.w;
+        const h = this.jm.view.size.h;
+
+        c.width = w * this.dpr;
+        c.height = h * this.dpr;
+        c.style.width = w + 'px';
+        c.style.height = h + 'px';
+
         c.style.visibility = 'hidden';
         this.jm.view.e_panel.appendChild(c);
         return c;

tests/unit/jsmind.graph.test.js

@@ -83,7 +83,13 @@ describe('graph over canvas', () => {
         const mockDest = { drawImage: jest.fn() };
         const callback = jest.fn();
         graph.copy_to(mockDest, callback);
-        expect(mockDest.drawImage).toBeCalledWith(mockCanvas, 0, 0);
+        expect(mockDest.drawImage).toBeCalledWith(
+            mockCanvas,
+            0,
+            0,
+            mockCanvas.width,
+            mockCanvas.height
+        );
         expect(callback).toBeCalled();
     });
 });