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