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

Add ability to choose a color when creating text elements

Browse source
This commit is contained in:
Faustino Kialungila 2020-01-03 17:10:09 +01:00
parent 527209e740
commit 12519b18de
1 changed files with 17 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/index.tsx
View file

@ -111,6 +111,7 @@ function newElement(
y: number, y: number,
strokeColor: string, strokeColor: string,
backgroundColor: string, backgroundColor: string,
textColor: string,
width = 0, width = 0,
height = 0 height = 0
) { ) {
@ -123,6 +124,7 @@ function newElement(
isSelected: false, isSelected: false,
strokeColor: strokeColor, strokeColor: strokeColor,
backgroundColor: backgroundColor, backgroundColor: backgroundColor,
textColor: textColor,
draw(rc: RoughCanvas, context: CanvasRenderingContext2D) {} draw(rc: RoughCanvas, context: CanvasRenderingContext2D) {}
}; };
return element; return element;
@ -345,6 +347,7 @@ function generateDraw(element: ExcaliburElement) {
element.draw = (rc, context) => { element.draw = (rc, context) => {
const font = context.font; const font = context.font;
context.font = element.font; context.font = element.font;
context.fillStyle = element.textColor;
context.fillText( context.fillText(
element.text, element.text,
element.x, element.x,
@ -415,6 +418,7 @@ type AppState = {
exportPadding: number; exportPadding: number;
currentItemStrokeColor: string; currentItemStrokeColor: string;
currentItemBackgroundColor: string; currentItemBackgroundColor: string;
textColor: string;
viewBackgroundColor: string; viewBackgroundColor: string;
}; };
@ -457,6 +461,7 @@ class App extends React.Component<{}, AppState> {
exportPadding: 10, exportPadding: 10,
currentItemStrokeColor: "#000000", currentItemStrokeColor: "#000000",
currentItemBackgroundColor: "#ffffff", currentItemBackgroundColor: "#ffffff",
textColor: "#000000",
viewBackgroundColor: "#ffffff" viewBackgroundColor: "#ffffff"
}; };
@ -582,7 +587,8 @@ class App extends React.Component<{}, AppState> {
x, x,
y, y,
this.state.currentItemStrokeColor, this.state.currentItemStrokeColor,
this.state.currentItemBackgroundColor this.state.currentItemBackgroundColor,
this.state.textColor
); );
let isDraggingElements = false; let isDraggingElements = false;
const cursorStyle = document.documentElement.style.cursor; const cursorStyle = document.documentElement.style.cursor;
@ -764,6 +770,16 @@ class App extends React.Component<{}, AppState> {
/> />
Shape Background Shape Background
</label> </label>
<label>
<input
type="color"
value={this.state.textColor}
onChange={e => {
this.setState({ textColor: e.target.value });
}}
/>
Text Color
</label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Export</legend> <legend>Export</legend>