excalidraw/src/data/restore.ts
Daishi Kato 65be7973be
Rotation support (#1099)
* rotate rectanble with fixed angle

* rotate dashed rectangle with fixed angle

* fix rotate handler rect

* fix canvas size with rotation

* angle in element base

* fix bug in calculating canvas size

* trial only for rectangle

* hitTest for rectangle rotation

* properly resize rotated rectangle

* fix canvas size calculation

* giving up... workaround for now

* **experimental** handler to rotate rectangle

* remove rotation on copy for debugging

* update snapshots

* better rotation handler with atan2

* rotate when drawImage

* add rotation handler

* hitTest for any shapes

* fix hitTest for curved lines

* rotate text element

* rotation locking

* hint messaage for rotating

* show proper handlers on mobile (a workaround, there should be a better way)

* refactor hitTest

* support exporting png

* support exporting svg

* fix rotating curved line

* refactor drawElementFromCanvas with getElementAbsoluteCoords

* fix export png and svg

* adjust resize positions for lines (N, E, S, W)

* do not make handlers big on mobile

* Update src/locales/en.json

Alright!

Co-Authored-By: Lipis <lipiridis@gmail.com>

* do not show rotation/resizing hints on mobile

* proper calculation for N and W positions

* simplify calculation

* use "rotation" as property name for clarification (may increase bundle size)

* update snapshots excluding rotation handle

* refactor with adjustPositionWithRotation

* refactor with adjustXYWithRotation

* forgot to rename rotation

* rename internal function

* initialize element angle on restore

* rotate wysiwyg editor

* fix shift-rotate around 270deg

* improve rotation locking

* refactor adjustXYWithRotation

* avoid rotation degree becomes >=360

* refactor with generateHandler

Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
2020-04-02 10:40:26 +02:00

86 lines
2.9 KiB
TypeScript

import { Point } from "../types";
import { ExcalidrawElement } from "../element/types";
import { AppState } from "../types";
import { DataState } from "./types";
import { isInvisiblySmallElement, normalizeDimensions } from "../element";
import { calculateScrollCenter } from "../scene";
import { randomId } from "../random";
export function restore(
// we're making the elements mutable for this API because we want to
// efficiently remove/tweak properties on them (to migrate old scenes)
savedElements: readonly Mutable<ExcalidrawElement>[],
savedState: AppState | null,
opts?: { scrollToContent: boolean },
): DataState {
const elements = savedElements
.filter((el) => {
// filtering out selection, which is legacy, no longer kept in elements,
// and causing issues if retained
return el.type !== "selection" && !isInvisiblySmallElement(el);
})
.map((element) => {
let points: Point[] = [];
if (element.type === "arrow") {
if (Array.isArray(element.points)) {
// if point array is empty, add one point to the arrow
// this is used as fail safe to convert incoming data to a valid
// arrow. In the new arrow, width and height are not being usde
points = element.points.length > 0 ? element.points : [[0, 0]];
} else {
// convert old arrow type to a new one
// old arrow spec used width and height
// to determine the endpoints
points = [
[0, 0],
[element.width, element.height],
];
}
element.points = points;
} else if (element.type === "line") {
// old spec, pre-arrows
// old spec, post-arrows
if (!Array.isArray(element.points) || element.points.length === 0) {
points = [
[0, 0],
[element.width, element.height],
];
} else {
points = element.points;
}
element.points = points;
} else {
normalizeDimensions(element);
// old spec, where non-linear elements used to have empty points arrays
if ("points" in element) {
delete element.points;
}
}
return {
...element,
// all elements must have version > 0 so getDrawingVersion() will pick up newly added elements
version: element.version || 1,
id: element.id || randomId(),
fillStyle: element.fillStyle || "hachure",
strokeWidth: element.strokeWidth || 1,
roughness: element.roughness ?? 1,
opacity:
element.opacity === null || element.opacity === undefined
? 100
: element.opacity,
angle: element.angle ?? 0,
};
});
if (opts?.scrollToContent && savedState) {
savedState = { ...savedState, ...calculateScrollCenter(elements) };
}
return {
elements: elements,
appState: savedState,
};
}