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

Preserve text styles on change

Browse source
This commit is contained in:
hazam 2020-01-07 22:03:59 +05:00
parent 22fd7b807e
commit a384807f90
3 changed files with 17 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/element/textWysiwyg.tsx
View file

@ -5,8 +5,7 @@ type TextWysiwygParams = {
x: number; x: number;
y: number; y: number;
strokeColor: string; strokeColor: string;
fontSize: number; font: string;
fontFamily: string;
onSubmit: (text: string) => void; onSubmit: (text: string) => void;
}; };
@ -15,8 +14,7 @@ export function textWysiwyg({
x, x,
y, y,
strokeColor, strokeColor,
fontSize, font,
fontFamily,
onSubmit onSubmit
}: TextWysiwygParams) { }: TextWysiwygParams) {
const input = document.createElement("input"); const input = document.createElement("input");
@ -30,8 +28,7 @@ export function textWysiwyg({
boxShadow: "none", boxShadow: "none",
textAlign: "center", textAlign: "center",
width: (window.innerWidth - x) * 2 + "px", width: (window.innerWidth - x) * 2 + "px",
fontSize: fontSize + "px", font: font,
fontFamily,
border: "none", border: "none",
background: "transparent" background: "transparent"
}); });

36
src/index.tsx
View file

@ -83,24 +83,23 @@ function resetCursor() {
function addTextElement( function addTextElement(
element: ExcalidrawTextElement, element: ExcalidrawTextElement,
text: string, text: string,
fontSize: number, font: string
fontFamily: string
) { ) {
resetCursor(); resetCursor();
if (text === null || text === "") { if (text === null || text === "") {
return false; return false;
} }
element.text = text; element.text = text;
element.font = `${fontSize}px ${fontFamily}`; element.font = font;
const font = context.font; const currentFont = context.font;
context.font = element.font; context.font = element.font;
const textMeasure = context.measureText(element.text); const textMeasure = context.measureText(element.text);
const width = textMeasure.width; const width = textMeasure.width;
const actualBoundingBoxAscent = const actualBoundingBoxAscent =
textMeasure.actualBoundingBoxAscent || fontSize; textMeasure.actualBoundingBoxAscent || parseInt(font);
const actualBoundingBoxDescent = textMeasure.actualBoundingBoxDescent || 0; const actualBoundingBoxDescent = textMeasure.actualBoundingBoxDescent || 0;
element.actualBoundingBoxAscent = actualBoundingBoxAscent; element.actualBoundingBoxAscent = actualBoundingBoxAscent;
context.font = font; context.font = currentFont;
const height = actualBoundingBoxAscent + actualBoundingBoxDescent; const height = actualBoundingBoxAscent + actualBoundingBoxDescent;
// Center the text // Center the text
element.x -= width / 2; element.x -= width / 2;
@ -142,8 +141,7 @@ class App extends React.Component<{}, AppState> {
exportBackground: true, exportBackground: true,
currentItemStrokeColor: "#000000", currentItemStrokeColor: "#000000",
currentItemBackgroundColor: "#ffffff", currentItemBackgroundColor: "#ffffff",
currentItemFontFamily: "Virgil", currentItemFont: "20px Virgil",
currentItemFontSize: 20,
viewBackgroundColor: "#ffffff", viewBackgroundColor: "#ffffff",
scrollX: 0, scrollX: 0,
scrollY: 0, scrollY: 0,
@ -699,15 +697,9 @@ class App extends React.Component<{}, AppState> {
x: e.clientX, x: e.clientX,
y: e.clientY, y: e.clientY,
strokeColor: this.state.currentItemStrokeColor, strokeColor: this.state.currentItemStrokeColor,
fontSize: this.state.currentItemFontSize, font: this.state.currentItemFont,
fontFamily: this.state.currentItemFontFamily,
onSubmit: text => { onSubmit: text => {
addTextElement( addTextElement(element, text, this.state.currentItemFont);
element,
text,
this.state.currentItemFontSize,
this.state.currentItemFontFamily
);
elements.push(element); elements.push(element);
element.isSelected = true; element.isSelected = true;
this.setState({ this.setState({
@ -947,7 +939,7 @@ class App extends React.Component<{}, AppState> {
1, 1,
1, 1,
100 100
); ) as ExcalidrawTextElement;
let initText = ""; let initText = "";
let textX = e.clientX; let textX = e.clientX;
@ -975,15 +967,13 @@ class App extends React.Component<{}, AppState> {
initText, initText,
x: textX, x: textX,
y: textY, y: textY,
strokeColor: this.state.currentItemStrokeColor, strokeColor: element.strokeColor,
fontSize: this.state.currentItemFontSize, font: element.font || this.state.currentItemFont,
fontFamily: this.state.currentItemFontFamily,
onSubmit: text => { onSubmit: text => {
addTextElement( addTextElement(
element as ExcalidrawTextElement, element,
text, text,
this.state.currentItemFontSize, element.font || this.state.currentItemFont
this.state.currentItemFontFamily
); );
elements.push(element); elements.push(element);
element.isSelected = true; element.isSelected = true;

3
src/types.ts
View file

@ -7,8 +7,7 @@ export type AppState = {
exportBackground: boolean; exportBackground: boolean;
currentItemStrokeColor: string; currentItemStrokeColor: string;
currentItemBackgroundColor: string; currentItemBackgroundColor: string;
currentItemFontSize: number; currentItemFont: string;
currentItemFontFamily: string;
viewBackgroundColor: string; viewBackgroundColor: string;
scrollX: number; scrollX: number;
scrollY: number; scrollY: number;