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

Fix merge and update style with new change

Browse source
This commit is contained in:
David Bonan 2020-01-06 12:43:55 +01:00
parent cb423cff29
commit 2b417123be
2 changed files with 103 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/ElementOption.tsx
View file

@ -15,9 +15,9 @@ function ElementOption(props: PropsElementOption) {
props.onChange(e.currentTarget.value); props.onChange(e.currentTarget.value);
}; };
return ( return (
<> <div style={{marginTop: 5, marginBottom: 5}}>
<label style={{ display: 'flex', flexDirection: 'row' }}> <label>
<span style={{ marginRight: 5, fontSize: 14, minWidth: 40 }}>{props.label}:</span> <h5>{props.label}</h5>
{props.type === 'select' ? ( {props.type === 'select' ? (
<select onChange={handleChangeSelect} value={props.value} style={{ flex: 1 }}> <select onChange={handleChangeSelect} value={props.value} style={{ flex: 1 }}>
{props.options?.map(option => ( {props.options?.map(option => (
@ -27,10 +27,10 @@ function ElementOption(props: PropsElementOption) {
))} ))}
</select> </select>
) : ( ) : (
<input type={props.type || 'text'} onChange={handleChangeInput} value={props.value} style={{ flex: 1 }} /> <input type={props.type || 'text'} onChange={handleChangeInput} value={props.value} />
)} )}
</label> </label>
</> </div>
); );
} }

23
src/index.tsx
View file

@ -25,7 +25,7 @@ type ExcalidrawTextElement = ExcalidrawElement & {
const LOCAL_STORAGE_KEY = "excalidraw"; const LOCAL_STORAGE_KEY = "excalidraw";
const LOCAL_STORAGE_KEY_STATE = "excalidraw-state"; const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
const listFonts = ["Virgil", "Arial", "Times New Roman", "Georgia", "Arial", "Helvetica", "Tahoma", "Courier"] const listFonts = ["Virgil", "Arial", "Times New Roman", "Georgia", "Helvetica", "Tahoma", "Courier"]
const elements = Array.of<ExcalidrawElement>(); const elements = Array.of<ExcalidrawElement>();
@ -1447,7 +1447,7 @@ class App extends React.Component<{}, AppState> {
const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT; const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT;
const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP; const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP;
/** elementSelectedOptions is array of option for a selected element, ex in text : Input text, font size ... */ /** elementSelectedOptions is array of option for a selected element, ex in text : Input text, font size ... */
const elementSelectedOptions: Array<ReactNode> = []; const elementSelectedTextOptions: Array<ReactNode> = [];
const selectedElement = elements.find(element => element.isSelected); const selectedElement = elements.find(element => element.isSelected);
if (selectedElement) { if (selectedElement) {
@ -1455,10 +1455,10 @@ class App extends React.Component<{}, AppState> {
if (isTextElement(selectedElement)) { if (isTextElement(selectedElement)) {
// Text value option // Text value option
if(elements.filter(element => element.isSelected).length === 1) { if(elements.filter(element => element.isSelected).length === 1) {
elementSelectedOptions.push( elementSelectedTextOptions.push(
<ElementOption <ElementOption
key="value" key="value"
label="Value" label="Text value"
value={selectedElement.text} value={selectedElement.text}
onChange={(text: string) => onChange={(text: string) =>
this.changeTextElement({ text }) this.changeTextElement({ text })
@ -1467,7 +1467,7 @@ class App extends React.Component<{}, AppState> {
); );
} }
// Font size option // Font size option
elementSelectedOptions.push( elementSelectedTextOptions.push(
<ElementOption <ElementOption
key="size" key="size"
label="Size" label="Size"
@ -1478,7 +1478,7 @@ class App extends React.Component<{}, AppState> {
/> />
); );
// Font familly option // Font familly option
elementSelectedOptions.push( elementSelectedTextOptions.push(
<ElementOption <ElementOption
key="fontFamilly" key="fontFamilly"
label="Font" label="Font"
@ -1491,7 +1491,6 @@ class App extends React.Component<{}, AppState> {
/> />
); );
} }
/** TODO: Do some option for other element's type */
} }
return ( return (
@ -1563,12 +1562,7 @@ class App extends React.Component<{}, AppState> {
</div> </div>
{someElementIsSelected() && ( {someElementIsSelected() && (
<> <>
{elementSelectedOptions.length > 0 && (
<>
<h4>Element's options</h4>
<div className="panelColumn">{elementSelectedOptions}</div>
</>
)}
<div className="panelColumn"> <div className="panelColumn">
<h4>Selection</h4> <h4>Selection</h4>
<div className="buttonList"> <div className="buttonList">
@ -1577,6 +1571,7 @@ class App extends React.Component<{}, AppState> {
<button onClick={this.moveOneLeft}>Send backward</button> <button onClick={this.moveOneLeft}>Send backward</button>
<button onClick={this.moveAllLeft}>Send to back</button> <button onClick={this.moveAllLeft}>Send to back</button>
</div> </div>
{elementSelectedTextOptions.length > 0 && elementSelectedTextOptions}
<h5>Stroke Color</h5> <h5>Stroke Color</h5>
<ColorPicker <ColorPicker
color={getSelectedAttribute(element => element.strokeColor)} color={getSelectedAttribute(element => element.strokeColor)}
@ -1659,6 +1654,7 @@ class App extends React.Component<{}, AppState> {
Delete selected Delete selected
</button> </button>
</div> </div>
</>
)} )}
<h4>Canvas</h4> <h4>Canvas</h4>
<div className="panelColumn"> <div className="panelColumn">
@ -1717,7 +1713,6 @@ class App extends React.Component<{}, AppState> {
Load file... Load file...
</button> </button>
</div> </div>
</>
</div> </div>
<canvas <canvas
id="canvas" id="canvas"