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

36
src/index.tsx
View file

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

3
src/types.ts
View file

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