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

Double click to edit text

Browse source
This commit is contained in:
hazam 2020-01-07 21:52:29 +05:00
parent bf8a288490
commit 22fd7b807e
3 changed files with 91 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/element/textWysiwyg.tsx
View file

@ -1,13 +1,26 @@
import { KEYS } from "../index";
export function textWysiwyg(
x: number,
y: number,
strokeColor: string,
onSubmit: (text: string) => void
) {
const input = document.createElement("input");
type TextWysiwygParams = {
initText: string;
x: number;
y: number;
strokeColor: string;
fontSize: number;
fontFamily: string;
onSubmit: (text: string) => void;
};
export function textWysiwyg({
initText,
x,
y,
strokeColor,
fontSize,
fontFamily,
onSubmit
}: TextWysiwygParams) {
const input = document.createElement("input");
input.value = initText;
Object.assign(input.style, {
color: strokeColor,
position: "absolute",
@ -17,8 +30,8 @@ export function textWysiwyg(
boxShadow: "none",
textAlign: "center",
width: (window.innerWidth - x) * 2 + "px",
fontSize: "20px",
fontFamily: "Virgil",
fontSize: fontSize + "px",
fontFamily,
border: "none",
background: "transparent"
});
@ -57,4 +70,5 @@ export function textWysiwyg(
window.addEventListener("wheel", stopEvent, true);
document.body.appendChild(input);
input.focus();
input.select();
}

87
src/index.tsx
View file

@ -80,14 +80,18 @@ function resetCursor() {
document.documentElement.style.cursor = "";
}
function addTextElement(element: ExcalidrawTextElement, text: string) {
function addTextElement(
element: ExcalidrawTextElement,
text: string,
fontSize: number,
fontFamily: string
) {
resetCursor();
if (text === null || text === "") {
return false;
}
const fontSize = 20;
element.text = text;
element.font = `${fontSize}px Virgil`;
element.font = `${fontSize}px ${fontFamily}`;
const font = context.font;
context.font = element.font;
const textMeasure = context.measureText(element.text);
@ -138,6 +142,8 @@ class App extends React.Component<{}, AppState> {
exportBackground: true,
currentItemStrokeColor: "#000000",
currentItemBackgroundColor: "#ffffff",
currentItemFontFamily: "Virgil",
currentItemFontSize: 20,
viewBackgroundColor: "#ffffff",
scrollX: 0,
scrollY: 0,
@ -688,21 +694,28 @@ class App extends React.Component<{}, AppState> {
}
if (isTextElement(element)) {
textWysiwyg(
e.clientX,
e.clientY,
this.state.currentItemStrokeColor,
text => {
addTextElement(element, text);
textWysiwyg({
initText: "",
x: e.clientX,
y: e.clientY,
strokeColor: this.state.currentItemStrokeColor,
fontSize: this.state.currentItemFontSize,
fontFamily: this.state.currentItemFontFamily,
onSubmit: text => {
addTextElement(
element,
text,
this.state.currentItemFontSize,
this.state.currentItemFontFamily
);
elements.push(element);
element.isSelected = true;
this.setState({
draggingElement: null,
elementType: "selection"
});
}
);
});
return;
}
@ -916,9 +929,12 @@ class App extends React.Component<{}, AppState> {
const x =
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
if (getElementAtPosition(elements, x, y)) {
const elementAtPosition = getElementAtPosition(elements, x, y);
if (elementAtPosition && !isTextElement(elementAtPosition)) {
return;
} else if (elementAtPosition) {
elements.splice(elements.indexOf(elementAtPosition), 1);
this.forceUpdate();
}
const element = newElement(
@ -933,21 +949,50 @@ class App extends React.Component<{}, AppState> {
100
);
textWysiwyg(
e.clientX,
e.clientY,
this.state.currentItemStrokeColor,
text => {
addTextElement(element as ExcalidrawTextElement, text);
let initText = "";
let textX = e.clientX;
let textY = e.clientY;
if (elementAtPosition) {
Object.assign(element, elementAtPosition);
// x and y will change after calling addTextElement function
element.x = elementAtPosition.x + elementAtPosition.width / 2;
element.y =
elementAtPosition.y + elementAtPosition.actualBoundingBoxAscent;
initText = elementAtPosition.text;
textX =
this.state.scrollX +
elementAtPosition.x +
CANVAS_WINDOW_OFFSET_LEFT +
elementAtPosition.width / 2;
textY =
this.state.scrollY +
elementAtPosition.y +
CANVAS_WINDOW_OFFSET_TOP +
elementAtPosition.actualBoundingBoxAscent;
}
textWysiwyg({
initText,
x: textX,
y: textY,
strokeColor: this.state.currentItemStrokeColor,
fontSize: this.state.currentItemFontSize,
fontFamily: this.state.currentItemFontFamily,
onSubmit: text => {
addTextElement(
element as ExcalidrawTextElement,
text,
this.state.currentItemFontSize,
this.state.currentItemFontFamily
);
elements.push(element);
element.isSelected = true;
this.setState({
draggingElement: null,
elementType: "selection"
});
}
);
});
}}
/>
</div>

2
src/types.ts
View file

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