sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix global items colors

Browse Source
This commit is contained in:
Faustino Kialungila 2020-01-03 15:25:52 +01:00
parent db386b8400
commit c224bc4c8f
1 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/index.tsx
View File

@ -105,7 +105,15 @@ function hitTest(element: ExcaliburElement, x: number, y: number): boolean {
} }
} }
function newElement(type: string, x: number, y: number, width = 0, height = 0) { function newElement(
type: string,
x: number,
y: number,
strokeColor: string,
backgroundColor: string,
width = 0,
height = 0
) {
const element = { const element = {
type: type, type: type,
x: x, x: x,
@ -113,6 +121,8 @@ function newElement(type: string, x: number, y: number, width = 0, height = 0) {
width: width, width: width,
height: height, height: height,
isSelected: false, isSelected: false,
strokeColor: strokeColor,
backgroundColor: backgroundColor,
draw(rc: RoughCanvas, context: CanvasRenderingContext2D) {} draw(rc: RoughCanvas, context: CanvasRenderingContext2D) {}
}; };
return element; return element;
@ -122,11 +132,11 @@ function renderScene(
rc: RoughCanvas, rc: RoughCanvas,
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
// null indicates transparent bg // null indicates transparent bg
viewBgColor: string | null viewBackgroundColor: string | null
) { ) {
const fillStyle = context.fillStyle; const fillStyle = context.fillStyle;
if (typeof viewBgColor === "string") { if (typeof viewBackgroundColor === "string") {
context.fillStyle = viewBgColor; context.fillStyle = viewBackgroundColor;
context.fillRect(-0.5, -0.5, canvas.width, canvas.height); context.fillRect(-0.5, -0.5, canvas.width, canvas.height);
} else { } else {
context.clearRect(-0.5, -0.5, canvas.width, canvas.height); context.clearRect(-0.5, -0.5, canvas.width, canvas.height);
@ -159,12 +169,12 @@ function exportAsPNG({
exportBackground, exportBackground,
exportVisibleOnly, exportVisibleOnly,
exportPadding = 10, exportPadding = 10,
viewBgColor viewBackgroundColor
}: { }: {
exportBackground: boolean; exportBackground: boolean;
exportVisibleOnly: boolean; exportVisibleOnly: boolean;
exportPadding?: number; exportPadding?: number;
viewBgColor: string; viewBackgroundColor: string;
}) { }) {
if (!elements.length) return window.alert("Cannot export empty canvas."); if (!elements.length) return window.alert("Cannot export empty canvas.");
@ -228,7 +238,7 @@ function exportAsPNG({
// reset transparent bg back to original // reset transparent bg back to original
if (!exportBackground) { if (!exportBackground) {
renderScene(rc, context, viewBgColor); renderScene(rc, context, viewBackgroundColor);
} }
// create a temporary <a> elem which we'll use to download the image // create a temporary <a> elem which we'll use to download the image
@ -283,11 +293,7 @@ function getArrowPoints(element: ExcaliburElement) {
return [x1, y1, x2, y2, x3, y3, x4, y4]; return [x1, y1, x2, y2, x3, y3, x4, y4];
} }
function generateDraw( function generateDraw(element: ExcaliburElement) {
element: ExcaliburElement,
itemStrokeColor: string,
itemBackgroundColorColor: string
) {
if (element.type === "selection") { if (element.type === "selection") {
element.draw = (rc, context) => { element.draw = (rc, context) => {
const fillStyle = context.fillStyle; const fillStyle = context.fillStyle;
@ -297,8 +303,8 @@ function generateDraw(
}; };
} else if (element.type === "rectangle") { } else if (element.type === "rectangle") {
const shape = generator.rectangle(0, 0, element.width, element.height, { const shape = generator.rectangle(0, 0, element.width, element.height, {
stroke: itemStrokeColor, stroke: element.strokeColor,
fill: itemBackgroundColorColor fill: element.backgroundColor
}); });
element.draw = (rc, context) => { element.draw = (rc, context) => {
context.translate(element.x, element.y); context.translate(element.x, element.y);
@ -311,7 +317,7 @@ function generateDraw(
element.height / 2, element.height / 2,
element.width, element.width,
element.height, element.height,
{ stroke: itemStrokeColor, fill: itemBackgroundColorColor } { stroke: element.strokeColor, fill: element.backgroundColor }
); );
element.draw = (rc, context) => { element.draw = (rc, context) => {
context.translate(element.x, element.y); context.translate(element.x, element.y);
@ -322,11 +328,11 @@ function generateDraw(
const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element); const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
const shapes = [ const shapes = [
// \ // \
generator.line(x3, y3, x2, y2, { stroke: itemStrokeColor }), generator.line(x3, y3, x2, y2, { stroke: element.strokeColor }),
// ----- // -----
generator.line(x1, y1, x2, y2, { stroke: itemStrokeColor }), generator.line(x1, y1, x2, y2, { stroke: element.strokeColor }),
// / // /
generator.line(x4, y4, x2, y2, { stroke: itemStrokeColor }) generator.line(x4, y4, x2, y2, { stroke: element.strokeColor })
]; ];
element.draw = (rc, context) => { element.draw = (rc, context) => {
@ -407,9 +413,9 @@ type AppState = {
exportBackground: boolean; exportBackground: boolean;
exportVisibleOnly: boolean; exportVisibleOnly: boolean;
exportPadding: number; exportPadding: number;
itemStrokeColor: string; currentItemStrokeColor: string;
itemBackgroundColor: string; currentItemBackgroundColor: string;
viewBgColor: string; viewBackgroundColor: string;
}; };
class App extends React.Component<{}, AppState> { class App extends React.Component<{}, AppState> {
@ -427,9 +433,9 @@ class App extends React.Component<{}, AppState> {
exportBackground: false, exportBackground: false,
exportVisibleOnly: true, exportVisibleOnly: true,
exportPadding: 10, exportPadding: 10,
itemStrokeColor: "#000000", currentItemStrokeColor: "#000000",
itemBackgroundColor: "#ffffff", currentItemBackgroundColor: "#ffffff",
viewBgColor: "#ffffff" viewBackgroundColor: "#ffffff"
}; };
private onKeyDown = (event: KeyboardEvent) => { private onKeyDown = (event: KeyboardEvent) => {
@ -528,11 +534,7 @@ class App extends React.Component<{}, AppState> {
parsedElements.forEach(parsedElement => { parsedElements.forEach(parsedElement => {
parsedElement.x += 10; parsedElement.x += 10;
parsedElement.y += 10; parsedElement.y += 10;
generateDraw( generateDraw(parsedElement);
parsedElement,
this.state.itemStrokeColor,
this.state.itemBackgroundColor
);
elements.push(parsedElement); elements.push(parsedElement);
}); });
this.forceUpdate(); this.forceUpdate();
@ -556,7 +558,13 @@ class App extends React.Component<{}, AppState> {
onMouseDown={e => { onMouseDown={e => {
const x = e.clientX - (e.target as HTMLElement).offsetLeft; const x = e.clientX - (e.target as HTMLElement).offsetLeft;
const y = e.clientY - (e.target as HTMLElement).offsetTop; const y = e.clientY - (e.target as HTMLElement).offsetTop;
const element = newElement(this.state.elementType, x, y); const element = newElement(
this.state.elementType,
x,
y,
this.state.currentItemStrokeColor,
this.state.currentItemBackgroundColor
);
let isDraggingElements = false; let isDraggingElements = false;
const cursorStyle = document.documentElement.style.cursor; const cursorStyle = document.documentElement.style.cursor;
if (this.state.elementType === "selection") { if (this.state.elementType === "selection") {
@ -613,11 +621,7 @@ class App extends React.Component<{}, AppState> {
element.height = height; element.height = height;
} }
generateDraw( generateDraw(element);
element,
this.state.itemStrokeColor,
this.state.itemBackgroundColor
);
elements.push(element); elements.push(element);
if (this.state.elementType === "text") { if (this.state.elementType === "text") {
this.setState({ this.setState({
@ -664,11 +668,7 @@ class App extends React.Component<{}, AppState> {
// Make a perfect square or circle when shift is enabled // Make a perfect square or circle when shift is enabled
draggingElement.height = e.shiftKey ? width : height; draggingElement.height = e.shiftKey ? width : height;
generateDraw( generateDraw(draggingElement);
draggingElement,
this.state.itemStrokeColor,
this.state.itemBackgroundColor
);
if (this.state.elementType === "selection") { if (this.state.elementType === "selection") {
setSelection(draggingElement); setSelection(draggingElement);
@ -718,9 +718,9 @@ class App extends React.Component<{}, AppState> {
<label> <label>
<input <input
type="color" type="color"
value={this.state.viewBgColor} value={this.state.viewBackgroundColor}
onChange={e => { onChange={e => {
this.setState({ viewBgColor: e.target.value }); this.setState({ viewBackgroundColor: e.target.value });
}} }}
/> />
Background Background
@ -728,9 +728,9 @@ class App extends React.Component<{}, AppState> {
<label> <label>
<input <input
type="color" type="color"
value={this.state.itemStrokeColor} value={this.state.currentItemStrokeColor}
onChange={e => { onChange={e => {
this.setState({ itemStrokeColor: e.target.value }); this.setState({ currentItemStrokeColor: e.target.value });
}} }}
/> />
Shape Stroke Shape Stroke
@ -738,9 +738,9 @@ class App extends React.Component<{}, AppState> {
<label> <label>
<input <input
type="color" type="color"
value={this.state.itemBackgroundColor} value={this.state.currentItemBackgroundColor}
onChange={e => { onChange={e => {
this.setState({ itemBackgroundColor: e.target.value }); this.setState({ currentItemBackgroundColor: e.target.value });
}} }}
/> />
Shape Background Shape Background
@ -754,7 +754,7 @@ class App extends React.Component<{}, AppState> {
exportBackground: this.state.exportBackground, exportBackground: this.state.exportBackground,
exportVisibleOnly: this.state.exportVisibleOnly, exportVisibleOnly: this.state.exportVisibleOnly,
exportPadding: this.state.exportPadding, exportPadding: this.state.exportPadding,
viewBgColor: this.state.viewBgColor viewBackgroundColor: this.state.viewBackgroundColor
}); });
}} }}
> >
@ -796,7 +796,7 @@ class App extends React.Component<{}, AppState> {
} }
componentDidUpdate() { componentDidUpdate() {
renderScene(rc, context, this.state.viewBgColor); renderScene(rc, context, this.state.viewBackgroundColor);
} }
} }