foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make requested changes

Browse Source
This commit is contained in:
Arun Kumar 2021-03-18 22:49:37 +05:30
parent 489f45b910
commit db4ed1ecb1
8 changed files with 94 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/actions/actionExport.tsx
View File

@ -23,6 +23,7 @@ export const actionChangeProjectName = register({
label={t("labels.fileTitle")}
value={appState.name || "Unnamed"}
onChange={(name: string) => updateData(name)}
customName={appState.customName}
/>
),
});

2
src/appState.ts
View File

@ -74,6 +74,7 @@ export const getDefaultAppState = (): Omit<
zenModeEnabled: false,
zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
viewModeEnabled: false,
customName: false,
};
};
@ -155,6 +156,7 @@ const APP_STATE_STORAGE_CONF = (<
zenModeEnabled: { browser: true, export: false },
zoom: { browser: true, export: false },
viewModeEnabled: { browser: false, export: false },
customName: { browser: false, export: false },
});
const _clearAppStateForStorage = <ExportType extends "export" | "browser">(

23
src/components/App.tsx
View File

@ -304,7 +304,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
zenModeEnabled = false,
gridModeEnabled = false,
theme = defaultAppState.theme,
exportName = defaultAppState.name,
name,
} = props;
this.state = {
...defaultAppState,
@ -316,7 +316,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
viewModeEnabled,
zenModeEnabled,
gridSize: gridModeEnabled ? GRID_SIZE : null,
name: exportName,
name: name ? name : defaultAppState.name,
customName: typeof name === "string",
};
if (excalidrawRef) {
const readyPromise =
@ -525,6 +526,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
let gridSize = actionResult?.appState?.gridSize || null;
let theme = actionResult?.appState?.theme || "light";
let name = actionResult?.appState?.name || this.state.name;
if (typeof this.props.viewModeEnabled !== "undefined") {
viewModeEnabled = this.props.viewModeEnabled;
@ -542,6 +544,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
theme = this.props.theme;
}
if (typeof this.props.name !== "undefined") {
name = this.props.name;
}
this.setState(
(state) => {
// using Object.assign instead of spread to fool TS 4.2.2+ into
@ -558,6 +564,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
zenModeEnabled,
gridSize,
theme,
name,
customName: typeof this.props.name === "string",
});
},
() => {
@ -903,19 +911,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
});
}
if (
prevProps.exportName !== this.props.exportName &&
this.props.exportName
) {
if (prevProps.name !== this.props.name && this.props.name) {
this.setState({
name: this.props.exportName,
name: this.props.name,
});
}
if (this.props.onExportNameChange && prevState.name !== this.state.name) {
this.props.onExportNameChange(this.state.name);
}
document
.querySelector(".excalidraw")
?.classList.toggle("theme--dark", this.state.theme === "dark");

7
src/components/ProjectName.tsx
View File

@ -7,6 +7,7 @@ type Props = {
value: string;
onChange: (value: string) => void;
label: string;
customName: boolean;
};
export class ProjectName extends Component<Props> {
@ -43,7 +44,11 @@ export class ProjectName extends Component<Props> {
};
public render() {
return (
return this.props.customName ? (
<span className="TextInput" aria-label={this.props.label}>
{this.props.value}
</span>
) : (
<span
suppressContentEditableWarning
ref={this.makeEditable}

9
src/packages/excalidraw/README.md
View File

@ -378,8 +378,7 @@ export default function IndexPage() {
| [`gridModeEnabled`](#gridModeEnabled) | boolean | | This implies if the grid mode is enabled |
| [`libraryReturnUrl`](#libraryReturnUrl) | string | | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
| [`theme`](#theme) | `light` or `dark` | | The theme of the Excalidraw component |
| [`exportName`](#exportName) | string | | Name of the drawing |
| [`onExportNameChange`](#onExportNameChange) | Function | | Callback triggered when name is updated |
| [`name`](#name) | string | | Name of the drawing |
#### `width`
@ -545,14 +544,10 @@ If supplied, this URL will be used when user tries to install a library from [li
This prop controls Excalidraw's theme. When supplied, the value takes precedence over `intialData.appState.theme`, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app.
### `exportName`
### `name`
This prop sets the export name of the drawing. When supplied, the value takes precedence over `intialData.appState.name`.
### `onExportNameChange`
This callback is triggered when export name is updated.
### Extra API's
#### `getSceneVersion`

6
src/packages/excalidraw/index.tsx
View File

@ -31,8 +31,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
gridModeEnabled,
libraryReturnUrl,
theme,
exportName,
onExportNameChange,
name,
} = props;
useEffect(() => {
@ -75,8 +74,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
gridModeEnabled={gridModeEnabled}
libraryReturnUrl={libraryReturnUrl}
theme={theme}
exportName={exportName}
onExportNameChange={onExportNameChange}
name={name}
/>
</IsMobileProvider>
</InitializeApp>

67
src/tests/__snapshots__/regressionTests.test.tsx.snap
View File

@ -19,6 +19,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -480,6 +481,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -947,6 +949,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": "id10",
@ -1723,6 +1726,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -1927,6 +1931,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -2385,6 +2390,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -2638,6 +2644,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -2802,6 +2809,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -3279,6 +3287,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -3587,6 +3596,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -3791,6 +3801,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -4035,6 +4046,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -4287,6 +4299,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -4648,6 +4661,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "down",
"customName": false,
"draggingElement": Object {
"angle": 0,
"backgroundColor": "transparent",
@ -4943,6 +4957,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": Object {
"angle": 0,
"backgroundColor": "transparent",
@ -5250,6 +5265,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "down",
"customName": false,
"draggingElement": Object {
"angle": 0,
"backgroundColor": "transparent",
@ -5458,6 +5474,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": Object {
"angle": 0,
"backgroundColor": "transparent",
@ -5644,6 +5661,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": "id3",
@ -6097,6 +6115,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -6415,6 +6434,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "down",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -8449,6 +8469,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -8811,6 +8832,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -9066,6 +9088,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -9319,6 +9342,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -9634,6 +9658,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -9798,6 +9823,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -9962,6 +9988,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -10126,6 +10153,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -10320,6 +10348,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -10514,6 +10543,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "down",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -10708,6 +10738,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -10902,6 +10933,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -11066,6 +11098,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -11230,6 +11263,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -11424,6 +11458,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -11588,6 +11623,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "down",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -11782,6 +11818,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -12498,6 +12535,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -12751,6 +12789,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "down",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -12853,6 +12892,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -12953,6 +12993,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -13117,6 +13158,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -13425,6 +13467,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -13733,6 +13776,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -13897,6 +13941,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -14093,6 +14138,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -14342,6 +14388,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -14666,6 +14713,7 @@ Object {
"currentItemStrokeWidth": 2,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -15505,6 +15553,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -15813,6 +15862,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -16121,6 +16171,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -16500,6 +16551,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -16667,6 +16719,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -16988,6 +17041,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -17227,6 +17281,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -17482,6 +17537,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -17809,6 +17865,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -17909,6 +17966,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -18073,6 +18131,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -18894,6 +18953,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -18994,6 +19054,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": "id3",
@ -19726,6 +19787,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "down",
"customName": false,
"draggingElement": Object {
"angle": 0,
"backgroundColor": "transparent",
@ -20131,6 +20193,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "down",
"customName": false,
"draggingElement": Object {
"angle": 0,
"backgroundColor": "transparent",
@ -20426,6 +20489,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "down",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -20528,6 +20592,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -21026,6 +21091,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,
@ -21126,6 +21192,7 @@ Object {
"currentItemStrokeWidth": 1,
"currentItemTextAlign": "left",
"cursorButton": "up",
"customName": false,
"draggingElement": null,
"editingElement": null,
"editingGroupId": null,

4
src/types.ts
View File

@ -93,6 +93,7 @@ export type AppState = {
theme: "light" | "dark";
gridSize: number | null;
viewModeEnabled: boolean;
customName: boolean;
/** top-most selected groups (i.e. does not include nested groups) */
selectedGroupIds: { [groupId: string]: boolean };
@ -191,8 +192,7 @@ export interface ExcalidrawProps {
gridModeEnabled?: boolean;
libraryReturnUrl?: string;
theme?: "dark" | "light";
exportName?: string;
onExportNameChange?: (name: string) => void;
name?: string;
}
export type SceneData = {