Pure node rendering (#443)
Christopher Chedeau
5 years ago
committed by
GitHub
parent
5ce5e5ac1e
commit
7f6e1f420e
@ -0,0 +1,40 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
// In order to use this, you need to install Cairo on your machine. See
|
||||||
|
// instructions here: https://github.com/Automattic/node-canvas#compiling
|
||||||
|
|
||||||
|
// In order to run:
|
||||||
|
// npm install canvas # please do not check it in
|
||||||
|
// npm run build-node
|
||||||
|
// node build/static/js/build-node.js
|
||||||
|
// open test.png
|
||||||
|
|
||||||
|
var rewire = require("rewire");
|
||||||
|
var defaults = rewire("react-scripts/scripts/build.js");
|
||||||
|
var config = defaults.__get__("config");
|
||||||
|
|
||||||
|
// Disable multiple chunks
|
||||||
|
config.optimization.runtimeChunk = false;
|
||||||
|
config.optimization.splitChunks = {
|
||||||
|
cacheGroups: {
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// Set the filename to be deterministic
|
||||||
|
config.output.filename = "static/js/build-node.js";
|
||||||
|
// Don't choke on node-specific requires
|
||||||
|
config.target = "node";
|
||||||
|
// Set the node entrypoint
|
||||||
|
config.entry = "./src/index-node";
|
||||||
|
// By default, webpack is going to replace the require of the canvas.node file
|
||||||
|
// to just a string with the path of the canvas.node file. We need to tell
|
||||||
|
// webpack to avoid rewriting that dependency.
|
||||||
|
config.externals = function(context, request, callback) {
|
||||||
|
if (/\.node$/.test(request)) {
|
||||||
|
return callback(
|
||||||
|
null,
|
||||||
|
"commonjs ../../../node_modules/canvas/build/Release/canvas.node"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
callback();
|
||||||
|
};
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
import { getExportCanvasPreview } from "../src/scene/getExportCanvasPreview";
|
||||||
|
|
||||||
|
const { registerFont, createCanvas } = require("canvas");
|
||||||
|
|
||||||
|
const elements = [
|
||||||
|
{
|
||||||
|
id: "eVzaxG3YnHhqjEmD7NdYo",
|
||||||
|
type: "diamond",
|
||||||
|
x: 519,
|
||||||
|
y: 199,
|
||||||
|
width: 113,
|
||||||
|
height: 115,
|
||||||
|
strokeColor: "#000000",
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
fillStyle: "hachure",
|
||||||
|
strokeWidth: 1,
|
||||||
|
roughness: 1,
|
||||||
|
opacity: 100,
|
||||||
|
isSelected: false,
|
||||||
|
seed: 749612521
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7W-iw5pEBPTU3eaCaLtFo",
|
||||||
|
type: "ellipse",
|
||||||
|
x: 552,
|
||||||
|
y: 238,
|
||||||
|
width: 49,
|
||||||
|
height: 44,
|
||||||
|
strokeColor: "#000000",
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
fillStyle: "hachure",
|
||||||
|
strokeWidth: 1,
|
||||||
|
roughness: 1,
|
||||||
|
opacity: 100,
|
||||||
|
isSelected: false,
|
||||||
|
seed: 952056308
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "kqKI231mvTrcsYo2DkUsR",
|
||||||
|
type: "text",
|
||||||
|
x: 557.5,
|
||||||
|
y: 317.5,
|
||||||
|
width: 43,
|
||||||
|
height: 31,
|
||||||
|
strokeColor: "#000000",
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
fillStyle: "hachure",
|
||||||
|
strokeWidth: 1,
|
||||||
|
roughness: 1,
|
||||||
|
opacity: 100,
|
||||||
|
isSelected: false,
|
||||||
|
seed: 1683771448,
|
||||||
|
text: "test",
|
||||||
|
font: "20px Virgil",
|
||||||
|
baseline: 22
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
registerFont("./public/FG_Virgil.ttf", { family: "Virgil" });
|
||||||
|
const canvas = getExportCanvasPreview(
|
||||||
|
elements as any,
|
||||||
|
{
|
||||||
|
exportBackground: true,
|
||||||
|
viewBackgroundColor: "#ffffff",
|
||||||
|
scale: 1
|
||||||
|
},
|
||||||
|
createCanvas
|
||||||
|
);
|
||||||
|
|
||||||
|
const fs = require("fs");
|
||||||
|
const out = fs.createWriteStream("test.png");
|
||||||
|
const stream = canvas.createPNGStream();
|
||||||
|
stream.pipe(out);
|
||||||
|
out.on("finish", () => console.log("test.png was created."));
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
import rough from "roughjs/bin/rough";
|
||||||
|
import { ExcalidrawElement } from "../element/types";
|
||||||
|
import { getElementAbsoluteCoords } from "../element/bounds";
|
||||||
|
import { renderScene } from "../renderer/renderScene";
|
||||||
|
|
||||||
|
export function getExportCanvasPreview(
|
||||||
|
elements: readonly ExcalidrawElement[],
|
||||||
|
{
|
||||||
|
exportBackground,
|
||||||
|
exportPadding = 10,
|
||||||
|
viewBackgroundColor,
|
||||||
|
scale = 1
|
||||||
|
}: {
|
||||||
|
exportBackground: boolean;
|
||||||
|
exportPadding?: number;
|
||||||
|
scale?: number;
|
||||||
|
viewBackgroundColor: string;
|
||||||
|
},
|
||||||
|
createCanvas: (width: number, height: number) => any = function(
|
||||||
|
width,
|
||||||
|
height
|
||||||
|
) {
|
||||||
|
const tempCanvas = document.createElement("canvas");
|
||||||
|
tempCanvas.style.width = width + "px";
|
||||||
|
tempCanvas.style.height = height + "px";
|
||||||
|
tempCanvas.width = width * scale;
|
||||||
|
tempCanvas.height = height * scale;
|
||||||
|
return tempCanvas;
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
// calculate smallest area to fit the contents in
|
||||||
|
let subCanvasX1 = Infinity;
|
||||||
|
let subCanvasX2 = 0;
|
||||||
|
let subCanvasY1 = Infinity;
|
||||||
|
let subCanvasY2 = 0;
|
||||||
|
|
||||||
|
elements.forEach(element => {
|
||||||
|
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
|
||||||
|
subCanvasX1 = Math.min(subCanvasX1, x1);
|
||||||
|
subCanvasY1 = Math.min(subCanvasY1, y1);
|
||||||
|
subCanvasX2 = Math.max(subCanvasX2, x2);
|
||||||
|
subCanvasY2 = Math.max(subCanvasY2, y2);
|
||||||
|
});
|
||||||
|
|
||||||
|
function distance(x: number, y: number) {
|
||||||
|
return Math.abs(x > y ? x - y : y - x);
|
||||||
|
}
|
||||||
|
|
||||||
|
const width = distance(subCanvasX1, subCanvasX2) + exportPadding * 2;
|
||||||
|
const height = distance(subCanvasY1, subCanvasY2) + exportPadding * 2;
|
||||||
|
const tempCanvas: any = createCanvas(width, height);
|
||||||
|
tempCanvas.getContext("2d")?.scale(scale, scale);
|
||||||
|
|
||||||
|
renderScene(
|
||||||
|
elements,
|
||||||
|
rough.canvas(tempCanvas),
|
||||||
|
tempCanvas,
|
||||||
|
{
|
||||||
|
viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
|
||||||
|
scrollX: 0,
|
||||||
|
scrollY: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offsetX: -subCanvasX1 + exportPadding,
|
||||||
|
offsetY: -subCanvasY1 + exportPadding,
|
||||||
|
renderScrollbars: false,
|
||||||
|
renderSelection: false
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return tempCanvas;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue