smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

SVG export (#598)

Browse source 
* first draft of export to SVG. WIP

* enabled text rendeing - which is not quite right atm

* placeholder svg icon

* size the canvas based on the bounding box of elements

* Do not add opacity attributes if default

* render background rect

* Ensure arrows are in the same SVG group

* parse font-size from font

* export web fonts

* use fixed locations for fonts

* Rename export functions

* renamed export file

* oops broke the icon.
This commit is contained in:
Preet 2020-01-28 12:25:13 -08:00 • committed by GitHub
parent 321e4022b0
commit 97b11b0f53
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 447 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/ExportDialog.tsx
View file

@ -4,11 +4,11 @@ import React, { useState, useEffect, useRef } from "react";
import { Modal } from "./Modal";
import { ToolButton } from "./ToolButton";
import { clipboard, exportFile, downloadFile, link } from "./icons";
import { clipboard, exportFile, downloadFile, svgFile, link } from "./icons";
import { Island } from "./Island";
import { ExcalidrawElement } from "../element/types";
import { AppState } from "../types";
import { getExportCanvasPreview } from "../scene/getExportCanvasPreview";
import { exportToCanvas } from "../scene/export";
import { ActionsManagerInterface, UpdaterFn } from "../actions/types";
import Stack from "./Stack";
@ -36,6 +36,7 @@ function ExportModal({
actionManager,
syncActionResult,
onExportToPng,
onExportToSvg,
onExportToClipboard,
onExportToBackend,
onCloseRequest,
@ -46,6 +47,7 @@ function ExportModal({
actionManager: ActionsManagerInterface;
syncActionResult: UpdaterFn;
onExportToPng: ExportCB;
onExportToSvg: ExportCB;
onExportToClipboard: ExportCB;
onExportToBackend: ExportCB;
onCloseRequest: () => void;
@ -70,7 +72,7 @@ function ExportModal({
useEffect(() => {
const previewNode = previewRef.current;
const canvas = getExportCanvasPreview(exportedElements, {
const canvas = exportToCanvas(exportedElements, {
exportBackground,
viewBackgroundColor,
exportPadding,
@ -136,6 +138,13 @@ function ExportModal({
onClick={() => onExportToPng(exportedElements, scale)}
ref={pngButton}
/>
<ToolButton
type="button"
icon={svgFile}
title={t("buttons.exportToSvg")}
aria-label={t("buttons.exportToSvg")}
onClick={() => onExportToSvg(exportedElements, scale)}
/>
{probablySupportsClipboard && (
<ToolButton
type="button"
@ -213,6 +222,7 @@ export function ExportDialog({
actionManager,
syncActionResult,
onExportToPng,
onExportToSvg,
onExportToClipboard,
onExportToBackend,
}: {
@ -222,6 +232,7 @@ export function ExportDialog({
actionManager: ActionsManagerInterface;
syncActionResult: UpdaterFn;
onExportToPng: ExportCB;
onExportToSvg: ExportCB;
onExportToClipboard: ExportCB;
onExportToBackend: ExportCB;
}) {
@ -257,6 +268,7 @@ export function ExportDialog({
actionManager={actionManager}
syncActionResult={syncActionResult}
onExportToPng={onExportToPng}
onExportToSvg={onExportToSvg}
onExportToClipboard={onExportToClipboard}
onExportToBackend={onExportToBackend}
onCloseRequest={handleClose}