Compare commits

..

5 Commits

Author SHA1 Message Date
zsviczian
4c5e196f25 default tool should be selection not hand in view mode 2023-10-07 19:00:25 +02:00
zsviczian
25af9023d4 toggle laser in view mode on double tap 2023-10-07 11:54:22 +00:00
zsviczian
76795c7d1b added shortcut key, fixed regression impacting other tools 2023-10-06 16:38:37 +00:00
zsviczian
ca22a52102 add laser pointer to view mode 2023-10-06 15:04:34 +00:00
David Luzar
a249f332a2 fix: ensure we do not stop laser update prematurely (#7100) 2023-10-06 12:00:35 +02:00
11 changed files with 123 additions and 71 deletions

View File

@@ -30,7 +30,6 @@ All `props` are *optional*.
| [`generateIdForFile`](#generateidforfile) | `function` | _ | Allows you to override `id` generation for files added on canvas |
| [`validateEmbeddable`](#validateEmbeddable) | string[] | `boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined)` | \_ | use for custom src url validation |
| [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
| [`activeTool`](#activeTool) | `object` | - | Set the active editor tool (forced) |
### Storing custom data on Excalidraw elements
@@ -237,19 +236,4 @@ validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) =>
This is an optional property. By default we support a handful of well-known sites. You may allow additional sites or disallow the default ones by supplying a custom validator. If you pass `true`, all URLs will be allowed. You can also supply a list of hostnames, RegExp (or list of RegExp objects), or a function. If the function returns `undefined`, the built-in validator will be used.
Supplying a list of hostnames (with or without `www.`) is the preferred way to allow a specific list of domains.
### activeTool
```ts
activeTool?:
| {
type: ToolType;
}
| {
type: "custom";
customType: string;
};
```
Tool to be force-set as active. As long as the prop is set, the editor active tool will be set to this. Useful only in specific circumstances such as when UI is disabled and the editor should be limited to just one tool (such as a laser pointer).
Supplying a list of hostnames (with or without `www.`) is the preferred way to allow a specific list of domains.

View File

@@ -18,6 +18,7 @@ import {
getDefaultAppState,
isEraserActive,
isHandToolActive,
isLaserPointerActive,
} from "../appState";
import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
import { Bounds } from "../element/bounds";
@@ -439,3 +440,44 @@ export const actionToggleHandTool = register({
},
keyTest: (event) => event.key === KEYS.H,
});
export const actionToggleLaserPointer = register({
name: "toggleLaserPointerTool",
viewMode: true,
trackEvent: { category: "menu" },
perform(elements, appState, _, app) {
let activeTool: AppState["activeTool"];
if (isLaserPointerActive(appState)) {
activeTool = updateActiveTool(appState, {
...(appState.activeTool.lastActiveTool || {
type: appState.viewModeEnabled ? "hand" : "selection",
}),
lastActiveToolBeforeEraser: null,
});
setCursor(
app.interactiveCanvas,
appState.viewModeEnabled ? CURSOR_TYPE.GRAB : CURSOR_TYPE.POINTER,
);
} else {
activeTool = updateActiveTool(appState, {
type: "laser",
lastActiveToolBeforeEraser: appState.activeTool,
});
setCursor(app.interactiveCanvas, CURSOR_TYPE.CROSSHAIR);
}
return {
appState: {
...appState,
selectedElementIds: {},
selectedGroupIds: {},
activeEmbeddable: null,
activeTool,
},
commitToHistory: true,
};
},
checked: (appState) => appState.activeTool.type === "laser",
contextItemLabel: "labels.laser",
});

View File

@@ -36,6 +36,7 @@ export type ShortcutName =
| "flipVertical"
| "hyperlink"
| "toggleElementLock"
| "toggleLaserPointerTool"
>
| "saveScene"
| "imageExport";
@@ -83,6 +84,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
viewMode: [getShortcutKey("Alt+R")],
hyperlink: [getShortcutKey("CtrlOrCmd+K")],
toggleElementLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
toggleLaserPointerTool: [getShortcutKey("K")],
};
export const getShortcutFromShortcutName = (name: ShortcutName) => {

View File

@@ -124,7 +124,8 @@ export type ActionName =
| "setFrameAsActiveTool"
| "setEmbeddableAsActiveTool"
| "createContainerFromText"
| "wrapTextInContainer";
| "wrapTextInContainer"
| "toggleLaserPointerTool";
export type PanelComponentProps = {
elements: readonly ExcalidrawElement[];

View File

@@ -266,3 +266,11 @@ export const isHandToolActive = ({
}) => {
return activeTool.type === "hand";
};
export const isLaserPointerActive = ({
activeTool,
}: {
activeTool: AppState["activeTool"];
}) => {
return activeTool.type === "laser";
};

View File

@@ -46,6 +46,7 @@ import {
getDefaultAppState,
isEraserActive,
isHandToolActive,
isLaserPointerActive,
} from "../appState";
import { parseClipboard } from "../clipboard";
import {
@@ -343,7 +344,11 @@ import {
actionRemoveAllElementsFromFrame,
actionSelectAllElementsInFrame,
} from "../actions/actionFrame";
import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
import {
actionToggleHandTool,
zoomToFit,
actionToggleLaserPointer,
} from "../actions/actionCanvas";
import { jotaiStore } from "../jotai";
import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
import {
@@ -1903,13 +1908,6 @@ class App extends React.Component<AppProps, AppState> {
this.refreshDeviceState(this.excalidrawContainerRef.current);
}
if (
this.props.activeTool &&
this.props.activeTool.type !== this.state.activeTool.type
) {
this.setActiveTool(this.props.activeTool);
}
if (
prevState.scrollX !== this.state.scrollX ||
prevState.scrollY !== this.state.scrollY
@@ -2917,7 +2915,22 @@ class App extends React.Component<AppProps, AppState> {
return;
}
if (event.key === KEYS.K && !event.altKey && !event[KEYS.CTRL_OR_CMD]) {
if (isLaserPointerActive(this.state)) {
this.setActiveTool({
type: "selection",
});
} else {
this.setActiveTool({ type: "laser" });
}
return;
}
if (this.state.viewModeEnabled) {
//revert to hand in case a key is pressed (K is handled above)
if (event.key !== KEYS.K) {
this.setActiveTool({ type: "selection" });
}
return;
}
@@ -3067,15 +3080,6 @@ class App extends React.Component<AppProps, AppState> {
}
}
if (event.key === KEYS.K && !event.altKey && !event[KEYS.CTRL_OR_CMD]) {
if (this.state.activeTool.type === "laser") {
this.setActiveTool({ type: "selection" });
} else {
this.setActiveTool({ type: "laser" });
}
return;
}
if (
event[KEYS.CTRL_OR_CMD] &&
(event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE)
@@ -3143,7 +3147,11 @@ class App extends React.Component<AppProps, AppState> {
| { type: "custom"; customType: string },
) => {
const nextActiveTool = updateActiveTool(this.state, tool);
if (nextActiveTool.type === "hand") {
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
} else if (!isHoldingSpace) {
setCursorForShape(this.interactiveCanvas, this.state);
}
if (isToolIcon(document.activeElement)) {
this.focusContainer();
}
@@ -3160,10 +3168,8 @@ class App extends React.Component<AppProps, AppState> {
originSnapOffset: null,
activeEmbeddable: null,
} as const;
let nextState: AppState;
if (nextActiveTool.type !== "selection") {
nextState = {
return {
...prevState,
activeTool: nextActiveTool,
selectedElementIds: makeNextSelectedElementIds({}, prevState),
@@ -3172,21 +3178,12 @@ class App extends React.Component<AppProps, AppState> {
multiElement: null,
...commonResets,
};
} else {
nextState = {
...prevState,
activeTool: nextActiveTool,
...commonResets,
};
}
if (nextActiveTool.type === "hand") {
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
} else if (!isHoldingSpace) {
setCursorForShape(this.interactiveCanvas, nextState);
}
return nextState;
return {
...prevState,
activeTool: nextActiveTool,
...commonResets,
};
});
};
@@ -3626,6 +3623,18 @@ class App extends React.Component<AppProps, AppState> {
if (this.state.multiElement) {
return;
}
if (this.state.viewModeEnabled) {
if (this.state.activeTool.type === "laser") {
this.setActiveTool({ type: "selection" });
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
} else {
this.setActiveTool({ type: "laser" });
setCursor(this.interactiveCanvas, CURSOR_TYPE.CROSSHAIR);
}
return;
}
// we should only be able to double click when mode is selection
if (this.state.activeTool.type !== "selection") {
return;
@@ -4753,7 +4762,7 @@ class App extends React.Component<AppProps, AppState> {
(event.button === POINTER_BUTTON.WHEEL ||
(event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
isHandToolActive(this.state) ||
this.state.viewModeEnabled)
(this.state.viewModeEnabled && !isLaserPointerActive(this.state)))
) ||
isTextElement(this.state.editingElement)
) {
@@ -8157,6 +8166,7 @@ class App extends React.Component<AppProps, AppState> {
actionToggleZenMode,
actionToggleViewMode,
actionToggleStats,
actionToggleLaserPointer,
];
}

View File

@@ -91,7 +91,7 @@ export class LaserPathManager {
private collaboratorsState: Map<string, CollabolatorState> = new Map();
private rafId: number | undefined;
private lastUpdate = 0;
private isDrawing = false;
private container: SVGSVGElement | undefined;
constructor(private app: App) {
@@ -100,7 +100,7 @@ export class LaserPathManager {
destroy() {
this.stop();
this.lastUpdate = 0;
this.isDrawing = false;
this.ownState = instantiateCollabolatorState();
this.collaboratorsState = new Map();
}
@@ -127,7 +127,7 @@ export class LaserPathManager {
}
private updatePath(state: CollabolatorState) {
this.lastUpdate = performance.now();
this.isDrawing = true;
if (!this.isRunning) {
this.start();
@@ -160,7 +160,7 @@ export class LaserPathManager {
this.updateCollabolatorsState();
if (performance.now() - this.lastUpdate < DECAY_TIME * 2) {
if (this.isDrawing) {
this.update();
} else {
this.isRunning = false;
@@ -250,6 +250,8 @@ export class LaserPathManager {
return;
}
let somePathsExist = false;
for (const [key, state] of this.collaboratorsState.entries()) {
if (!this.app.state.collaborators.has(key)) {
state.svg.remove();
@@ -269,6 +271,10 @@ export class LaserPathManager {
paths += ` ${this.draw(state.currentPath)}`;
}
if (paths.trim()) {
somePathsExist = true;
}
state.svg.setAttribute("d", paths);
state.svg.setAttribute("fill", getClientColor(key));
}
@@ -287,7 +293,17 @@ export class LaserPathManager {
paths += ` ${this.draw(this.ownState.currentPath)}`;
}
paths = paths.trim();
if (paths) {
somePathsExist = true;
}
this.ownState.svg.setAttribute("d", paths);
this.ownState.svg.setAttribute("fill", "red");
if (!somePathsExist) {
this.isDrawing = false;
}
}
}

View File

@@ -155,9 +155,7 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
onPointerCancel={props.onPointerCancel}
onTouchMove={props.onTouchMove}
onPointerDown={props.onPointerDown}
onDoubleClick={
props.appState.viewModeEnabled ? undefined : props.onDoubleClick
}
onDoubleClick={props.onDoubleClick}
>
{t("labels.drawingCanvas")}
</canvas>

View File

@@ -1,5 +1,6 @@
{
"labels": {
"laser": "Toggle laser pointer",
"paste": "Paste",
"pasteAsPlaintext": "Paste as plaintext",
"pasteCharts": "Paste charts",

View File

@@ -44,7 +44,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
children,
validateEmbeddable,
renderEmbeddable,
activeTool,
} = props;
const canvasActions = props.UIOptions?.canvasActions;
@@ -120,7 +119,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
onScrollChange={onScrollChange}
validateEmbeddable={validateEmbeddable}
renderEmbeddable={renderEmbeddable}
activeTool={activeTool}
>
{children}
</App>

View File

@@ -445,14 +445,6 @@ export interface ExcalidrawProps {
element: NonDeleted<ExcalidrawEmbeddableElement>,
appState: AppState,
) => JSX.Element | null;
activeTool?:
| {
type: ToolType;
}
| {
type: "custom";
customType: string;
};
}
export type SceneData = {