diff --git a/src/components/ElementOption.tsx b/src/components/ElementOption.tsx new file mode 100644 index 000000000..5a26c0ec3 --- /dev/null +++ b/src/components/ElementOption.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +type PropsElementOption = { + label: string; + value: string; + onChange: Function; +}; +function ElementOption(props: PropsElementOption) { + const handleChangeInput = (e: React.FormEvent) => { + props.onChange(e.currentTarget.value); + }; + return ( + <> + + + ); +} + +export default ElementOption; diff --git a/src/index.tsx b/src/index.tsx index d29567b4b..62513f66f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { ReactNode } from "react"; import ReactDOM from "react-dom"; import rough from "roughjs/bin/wrappers/rough"; import { RoughCanvas } from "roughjs/bin/canvas"; @@ -12,6 +12,7 @@ import { roundRect } from "./roundRect"; import EditableText from "./components/EditableText"; import "./styles.scss"; +import ElementOption from "./components/ElementOption"; type ExcalidrawElement = ReturnType; type ExcalidrawTextElement = ExcalidrawElement & { @@ -742,12 +743,7 @@ function generateDraw(element: ExcalidrawElement) { leftY ] = getDiamondPoints(element); return generator.polygon( - [ - [topX, topY], - [rightX, rightY], - [bottomX, bottomY], - [leftX, leftY] - ], + [[topX, topY], [rightX, rightY], [bottomX, bottomY], [leftX, leftY]], { stroke: element.strokeColor, fill: element.backgroundColor, @@ -1397,9 +1393,70 @@ class App extends React.Component<{}, AppState> { this.setState({ currentItemBackgroundColor: color }); }; + private updateElement = (element: any, values: any) => { + /** Use of Object.assign instead spread because we want to keep ref to element for update is value in initial object */ + Object.assign(element, values); + if (values.text || values.font) { + const fontSize = values.font + ? values.font.split("px")[0] + : element.font.split("px")[0]; + context.font = `${fontSize}px Virgil`; + const textMeasure = context.measureText(values.text || element.text); + const width = textMeasure.width; + const actualBoundingBoxAscent = + textMeasure.actualBoundingBoxAscent || fontSize; + const actualBoundingBoxDescent = + textMeasure.actualBoundingBoxDescent || 0; + element.actualBoundingBoxAscent = actualBoundingBoxAscent; + const height = actualBoundingBoxAscent + actualBoundingBoxDescent; + element.width = width; + element.height = height; + } + this.forceUpdate(); + }; + + private updateFontSizeElement = (element: any, size: string) => { + if (size.match(/[^0-9.]/g)) { + return; + } + this.updateElement(element, { font: `${size}px Virgil` }); + }; + public render() { const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT; const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP; + /** elementSelectedOptions is array of option for a selected element, ex in text : Input text, font size ... */ + const elementSelectedOptions: Array = []; + const selectedElement = elements.find(element => element.isSelected); + + if (selectedElement) { + /** If the selected item is a Text so : */ + if (isTextElement(selectedElement)) { + // Text value option + elementSelectedOptions.push( + + this.updateElement(selectedElement, { text }) + } + /> + ); + // Font size option + elementSelectedOptions.push( + + this.updateFontSizeElement(selectedElement, size) + } + /> + ); + } + /** TODO: Do some option for other element's type */ + } return (
{ ))}
{someElementIsSelected() && ( + <> +

Element's options

+
+ {elementSelectedOptions.length > 0 + ? elementSelectedOptions + : "No options available"} +

Selection

@@ -1617,6 +1681,7 @@ class App extends React.Component<{}, AppState> { Load file...
+