Skip to content

Commit

Permalink
[pr] non-interactivity
Browse files Browse the repository at this point in the history
  • Loading branch information
@dwelle
dwelle committed Oct 9, 2023
1 parent 4f882db commit 92bc9f4
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 19 deletions.
81 changes: 63 additions & 18 deletions src/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1245,6 +1245,7 @@ class App extends React.Component<AppProps, AppState> {
app={this}
isCollaborating={this.props.isCollaborating}
renderTopRightUI={renderTopRightUI}
uiDisabled={this.props.ui === false}
>
{this.props.children}
</LayerUI>
Expand All @@ -1271,14 +1272,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}
Expand Down Expand Up @@ -2203,6 +2206,10 @@ class App extends React.Component<AppProps, AppState> {
event.preventDefault();
}

if (this.props.interactive === false) {
return;
}

if (!didTapTwice) {
didTapTwice = true;
clearTimeout(tappedTwiceTimer);
Expand Down Expand Up @@ -2237,6 +2244,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({
Expand All @@ -2253,6 +2264,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
Expand Down Expand Up @@ -3296,6 +3311,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()) {
Expand All @@ -3311,6 +3330,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
Expand Down Expand Up @@ -3342,6 +3365,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({
Expand Down Expand Up @@ -3923,6 +3951,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)) {
Expand Down Expand Up @@ -4580,7 +4612,10 @@ class App extends React.Component<AppProps, AppState> {
// we must exit before we set `cursorButton` state and `savePointer`
// else it will send pointer state & laser pointer events in collab when
// panning
if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
if (
this.props.interactive !== false &&
this.handleCanvasPanUsingWheelOrSpaceDrag(event)
) {
return;
}

Expand Down Expand Up @@ -4611,14 +4646,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;
}

Expand Down Expand Up @@ -4709,15 +4750,15 @@ class App extends React.Component<AppProps, AppState> {
const onPointerMove =
this.onPointerMoveFromPointerDownHandler(pointerDownState);

const onPointerUp =
this.onPointerUpFromPointerDownHandler(pointerDownState);
if (!this.state.viewModeEnabled || this.state.activeTool.type === "laser") {
const onPointerUp =
this.onPointerUpFromPointerDownHandler(pointerDownState);

const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);

lastPointerUp = onPointerUp;
lastPointerUp = onPointerUp;

if (!this.state.viewModeEnabled || this.state.activeTool.type === "laser") {
window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
window.addEventListener(EVENT.POINTER_UP, onPointerUp);
window.addEventListener(EVENT.KEYDOWN, onKeyDown);
Expand Down Expand Up @@ -7917,6 +7958,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") ||
Expand Down Expand Up @@ -8328,7 +8373,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;
}

Expand Down
6 changes: 6 additions & 0 deletions src/components/LayerUI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ interface LayerUIProps {
children?: React.ReactNode;
app: AppClassProperties;
isCollaborating: boolean;
uiDisabled: boolean;
}

const DefaultMainMenu: React.FC<{
Expand Down Expand Up @@ -139,6 +140,7 @@ const LayerUI = ({
children,
app,
isCollaborating,
uiDisabled,
}: LayerUIProps) => {
const device = useDevice();
const tunnels = useInitializeTunnels();
Expand Down Expand Up @@ -356,6 +358,10 @@ const LayerUI = ({

const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);

if (uiDisabled) {
return null;
}

const layerUIJSX = (
<>
{/* ------------------------- tunneled UI ---------------------------- */}
Expand Down
6 changes: 5 additions & 1 deletion src/packages/excalidraw/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
validateEmbeddable,
renderEmbeddable,
activeTool,
ui,
interactive,
} = props;

const canvasActions = props.UIOptions?.canvasActions;
Expand Down Expand Up @@ -104,7 +106,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
onPointerUpdate={onPointerUpdate}
renderTopRightUI={renderTopRightUI}
langCode={langCode}
viewModeEnabled={viewModeEnabled}
viewModeEnabled={interactive === false ? true : viewModeEnabled}
zenModeEnabled={zenModeEnabled}
gridModeEnabled={gridModeEnabled}
libraryReturnUrl={libraryReturnUrl}
Expand All @@ -125,6 +127,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
renderEmbeddable={renderEmbeddable}
onHomeButtonClick={onHomeButtonClick}
activeTool={activeTool}
ui={ui}
interactive={interactive}
>
{children}
</App>
Expand Down
2 changes: 2 additions & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -459,6 +459,8 @@ export interface ExcalidrawProps {
type: "custom";
customType: string;
};
interactive?: boolean;
ui?: boolean;
}

export type SceneData = {
Expand Down

0 comments on commit 92bc9f4

Please sign in to comment.