extras
/
excalidraw
mirror of https://github.com/excalidraw/excalidraw.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: support hiding UI and disabling interactivity

This commit is contained in:
dwelle 2023-10-05 23:09:43 +02:00
parent 2e61926a6b
commit 77b8f5afb6
4 changed files with 78 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/App.tsx
View File

@ -1211,6 +1211,7 @@ class App extends React.Component<AppProps, AppState> {
}
app={this}
isCollaborating={this.props.isCollaborating}
uiDisabled={this.props.ui === false}
>
{this.props.children}
</LayerUI>
@ -1237,14 +1238,16 @@ class App extends React.Component<AppProps, AppState> {
closable={this.state.toast.closable}
/>
)}
{this.state.contextMenu && (
<ContextMenu
items={this.state.contextMenu.items}
top={this.state.contextMenu.top}
left={this.state.contextMenu.left}
actionManager={this.actionManager}
/>
)}
{this.state.contextMenu &&
this.props.interactive !== false &&
this.props.ui !== false && (
<ContextMenu
items={this.state.contextMenu.items}
top={this.state.contextMenu.top}
left={this.state.contextMenu.left}
actionManager={this.actionManager}
/>
)}
<StaticCanvas
canvas={this.canvas}
rc={this.rc}
@ -2108,6 +2111,10 @@ class App extends React.Component<AppProps, AppState> {
event.preventDefault();
}
if (this.props.interactive === false) {
return;
}
if (!didTapTwice) {
didTapTwice = true;
clearTimeout(tappedTwiceTimer);
@ -2142,6 +2149,10 @@ class App extends React.Component<AppProps, AppState> {
};
private onTouchEnd = (event: TouchEvent) => {
if (this.props.interactive === false) {
return;
}
this.resetContextMenuTimer();
if (event.touches.length > 0) {
this.setState({
@ -2158,6 +2169,10 @@ class App extends React.Component<AppProps, AppState> {
public pasteFromClipboard = withBatchedUpdates(
async (event: ClipboardEvent | null) => {
if (this.props.interactive === false) {
return;
}
const isPlainPaste = !!(IS_PLAIN_PASTE && event);
// #686
@ -3200,6 +3215,10 @@ class App extends React.Component<AppProps, AppState> {
private onGestureStart = withBatchedUpdates((event: GestureEvent) => {
event.preventDefault();
if (this.props.interactive === false) {
return false;
}
// we only want to deselect on touch screens because user may have selected
// elements by mistake while zooming
if (this.isTouchScreenMultiTouchGesture()) {
@ -3215,6 +3234,10 @@ class App extends React.Component<AppProps, AppState> {
private onGestureChange = withBatchedUpdates((event: GestureEvent) => {
event.preventDefault();
if (this.props.interactive === false) {
return false;
}
// onGestureChange only has zoom factor but not the center.
// If we're on iPad or iPhone, then we recognize multi-touch and will
// zoom in at the right location in the touchmove handler
@ -3246,6 +3269,11 @@ class App extends React.Component<AppProps, AppState> {
// fires only on Safari
private onGestureEnd = withBatchedUpdates((event: GestureEvent) => {
event.preventDefault();
if (this.props.interactive === false) {
return false;
}
// reselect elements only on touch screens (see onGestureStart)
if (this.isTouchScreenMultiTouchGesture()) {
this.setState({
@ -3827,6 +3855,10 @@ class App extends React.Component<AppProps, AppState> {
private handleCanvasPointerMove = (
event: React.PointerEvent<HTMLCanvasElement>,
) => {
if (this.props.interactive === false) {
return false;
}
this.savePointer(event.clientX, event.clientY, this.state.cursorButton);
if (gesture.pointers.has(event.pointerId)) {
@ -4479,8 +4511,10 @@ class App extends React.Component<AppProps, AppState> {
return;
}
if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
return;
if (this.props.interactive !== false) {
if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
return;
}
}
this.lastPointerDownEvent = event;
@ -4512,14 +4546,20 @@ class App extends React.Component<AppProps, AppState> {
selectedElementsAreBeingDragged: false,
});
if (this.handleDraggingScrollBar(event, pointerDownState)) {
if (
this.props.interactive !== false &&
this.handleDraggingScrollBar(event, pointerDownState)
) {
return;
}
this.clearSelectionIfNotUsingSelection();
this.updateBindingEnabledOnPointerMove(event);
if (this.handleSelectionOnPointerDown(event, pointerDownState)) {
if (
this.props.interactive !== false &&
this.handleSelectionOnPointerDown(event, pointerDownState)
) {
return;
}
@ -4601,15 +4641,15 @@ class App extends React.Component<AppProps, AppState> {
const onPointerMove =
this.onPointerMoveFromPointerDownHandler(pointerDownState);
const onPointerUp =
this.onPointerUpFromPointerDownHandler(pointerDownState);
const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
lastPointerUp = onPointerUp;
if (!this.state.viewModeEnabled || this.state.activeTool.type === "laser") {
const onPointerUp =
this.onPointerUpFromPointerDownHandler(pointerDownState);
const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
lastPointerUp = onPointerUp;
window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
window.addEventListener(EVENT.POINTER_UP, onPointerUp);
window.addEventListener(EVENT.KEYDOWN, onKeyDown);
@ -7804,6 +7844,10 @@ class App extends React.Component<AppProps, AppState> {
) => {
event.preventDefault();
if (this.props.interactive === false) {
return;
}
if (
(("pointerType" in event.nativeEvent &&
event.nativeEvent.pointerType === "touch") ||
@ -8215,7 +8259,7 @@ class App extends React.Component<AppProps, AppState> {
event: WheelEvent | React.WheelEvent<HTMLDivElement | HTMLCanvasElement>,
) => {
event.preventDefault();
if (isPanning) {
if (isPanning || this.props.interactive === false) {
return;
}

6
src/components/LayerUI.tsx
View File

@ -79,6 +79,7 @@ interface LayerUIProps {
children?: React.ReactNode;
app: AppClassProperties;
isCollaborating: boolean;
uiDisabled: boolean;
}
const DefaultMainMenu: React.FC<{
@ -137,6 +138,7 @@ const LayerUI = ({
children,
app,
isCollaborating,
uiDisabled,
}: LayerUIProps) => {
const device = useDevice();
const tunnels = useInitializeTunnels();
@ -354,6 +356,10 @@ const LayerUI = ({
const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
if (uiDisabled) {
return null;
}
const layerUIJSX = (
<>
{/* ------------------------- tunneled UI ---------------------------- */}

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

@ -44,6 +44,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
children,
validateEmbeddable,
renderEmbeddable,
ui,
interactive,
} = props;
const canvasActions = props.UIOptions?.canvasActions;
@ -100,7 +102,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
onPointerUpdate={onPointerUpdate}
renderTopRightUI={renderTopRightUI}
langCode={langCode}
viewModeEnabled={viewModeEnabled}
viewModeEnabled={interactive === false ? true : viewModeEnabled}
zenModeEnabled={zenModeEnabled}
gridModeEnabled={gridModeEnabled}
libraryReturnUrl={libraryReturnUrl}
@ -119,6 +121,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
onScrollChange={onScrollChange}
validateEmbeddable={validateEmbeddable}
renderEmbeddable={renderEmbeddable}
ui={ui}
interactive={interactive}
>
{children}
</App>

2
src/types.ts
View File

@ -445,6 +445,8 @@ export interface ExcalidrawProps {
element: NonDeleted<ExcalidrawEmbeddableElement>,
appState: AppState,
) => JSX.Element | null;
interactive?: boolean;
ui?: boolean;
}
export type SceneData = {