Integrate new features: Lasso Select Tool, Customizable Toolbar, and Force Compact Mode by imed-ghomari · Pull Request #181 · tldraw/obsidian-plugin

imed-ghomari · 2025-12-29T09:59:24Z

Overview

This PR introduces several feature enhancements designed to provide granular control over the Tldraw experience within Obsidian. These additions focus on UI flexibility, tool efficiency, and advanced shape configuration.

Key Features Added

Lasso Select Tool: (solves add lasso select tool #169)
- Integrated a dedicated LassoSelectTool for free-form selection.
- Smart Activation: The tool is automatically engaged when clicking/dragging on an empty canvas area, significantly speeding up selection workflows.
- Includes visual SVG selection overlays for precise real-time feedback.
Force Compact Mode:
- Introduces a setting to force the mobile-optimized layout on desktop devices, ideal for sidebars or narrow note views.
- Technical Note: This utilizes the native forceMobile prop, which required the underlying update of the tldraw library to version 4.2.1.
Customizable Toolbar:
- Adds a "Toolbar Customization" section in settings.
- Users can now selectively enable/disable and reorder tools to create a personalized, clutter-free workspace tailored to their specific use cases.
Advanced Stroke & Shape Configurations:
- Customizable Presets: Define exact thicknesses for S, M, L, and XL stroke sizes.
- Persistent Defaults: Set the default size and style (draw, solid, dashed, dotted) for all newly created shapes.
- Drawing Parameters: Exposed settings for Streamline, Smoothing, and Thinning to tune the drawing experience for different input devices. (solves reduce line smoothing #89)

Implementation Details

Updated tldraw to 4.2.1 to support the aforementioned UI features (specifically forceMobile).
Refactored TldrawApp.tsx to handle dynamic tool ordering and custom component overlays.
Modernized the settings tab for better categorization of editor and pointer options.
Ensured full backward compatibility with all existing tldraw documents.

I'm not a developer; I vibe-coded and tested the changes manually. Feel free to reject them if they're not suitable.

…ustom Toolbar, Compact Mode, Stroke Options)

jon-dez · 2025-12-29T14:05:42Z

Thanks for the PR! While I review the changes, there are a few things I want to address.

First, I've noticed that you updated tldraw to 4.2.1. The reason this plugin hasn't updated to a newer version yet is because the last time I checked the 4.0.0 version of tldraw introduced changes to its license which caused the "tldraw" watermark to disappear and be replaced with a message:

I don't want to update to version 4.0.0+ just yet due to this since I don't have a license key yet. I did apply for a hobby license and have talked to the tldraw team about it so I hope to have an updated version within the coming month. Within the same point but addressing the tldraw 4.2.1 patch file; I've forked the tldraw repo and added a few changes that fixed some bugs when using tldraw inside Obsidian, I don't know if you used my fork to generate the patches.

Second, I notice the description mentions refactoring the TldrawApp.tsx file for dynamic tool ordering and custom component overlays. I think this could have been implemented without having to touch that file, but I'll double check the changes to be sure. I'll provide comments suggesting on how it could be done if it touching that file could be avoided.

Give me a bit to review the code and add more comments. Again thanks for showing interest on resolving outstanding issues!

jon-dez

I added a bunch of comments. A few capabilities were removed from the latest release. This is a danger of using AI tooling without doing an in depth review of the changes. While I do not mind using AI tools for vibe coding, please be considerate that it may introduce changes that do not fully adhere to patterns found in the code base. Again, thanks for your PR. I hope that you can address the changes I requested so that your contributions could be part of a future release!

If you have any questions you can reply to this thread or email me (jon@jon-dez.com).

jon-dez · 2025-12-29T15:44:07Z

src/components/TldrawApp.tsx

+		const classes = [];
+		if (themeMode === "dark") classes.push('tl-theme__dark');
+		else if (themeMode === "light") { }
+		else if (isObsidianThemeDark()) classes.push('tl-theme__dark');
+
+		return classes.join(' ');


unnecessary modification

jon-dez · 2025-12-29T15:45:28Z

src/components/TldrawApp.tsx

 				components={overridesUiComponents.current}
 				// Set this flag to false when a tldraw document is embed into markdown to prevent it from gaining focus when it is loaded.
 				autoFocus={false}
+				forceMobile={plugin.settings.tldrawOptions?.forceCompactMode}


tldraw 4 feature

jon-dez · 2025-12-29T15:54:14Z

src/components/TldrawApp.tsx

+	// Inject stroke parameters into window for patched getPath
+	React.useEffect(() => {
+		(window as any).tldrawStrokeOptions = plugin.settings.tldrawOptions?.strokeParameters;
+	}, [plugin.settings.tldrawOptions?.strokeParameters]);


Refactor this useEffect hook into the useTldrawAppEffects hook and utilize the settings variable returned from the useUserPluginSettings in the dependency array. Also, could you go into more detail as to where the window.tldrawStrokeOptions comes from and why it is necessary?

jon-dez · 2025-12-29T15:55:37Z

src/components/TldrawApp.tsx

+	React.useEffect(() => {
+		if (!editor) return;
+
+		const pointingCanvasState = editor.getStateDescendant('select.pointing_canvas');
+		if (!pointingCanvasState) return;
+
+		const originalOnEnter = pointingCanvasState.onEnter;
+
+		pointingCanvasState.onEnter = function (info) {
+			const selectedShapeIds = editor.getSelectedShapeIds();
+			const selectionBounds = editor.getSelectionPageBounds();
+
+			if (selectedShapeIds.length === 0 || (selectionBounds && !selectionBounds.containsPoint(info.point))) {
+				editor.setCurrentTool('lasso-select');
+				return;
+			}
+
+			originalOnEnter?.call(this, info);
+		};
+
+		return () => {
+			if (originalOnEnter) {
+				pointingCanvasState.onEnter = originalOnEnter;
+			}
+		};
+	}, [editor]);
+


Refactor this useEffect hook into the LassoOverlays component in order to keep relevant code together.

jon-dez · 2025-12-29T15:57:01Z

src/components/TldrawApp.tsx

 		icons: {
 			...plugin.getIconOverrides(),
 			...iconAssetUrls,
+			...iconAssetUrls,


This appears to be a duplicate line

Suggested change

...iconAssetUrls,

jon-dez · 2025-12-29T16:52:51Z

src/main.ts

revert file

jon-dez · 2025-12-29T16:54:16Z

src/contexts/plugin.tsx

revert file changes are unnecessary

jon-dez · 2025-12-29T16:56:07Z

src/components/settings/FileSettings.tsx

Make sure you are not removing any capabilities...

jon-dez · 2025-12-29T16:59:10Z

src/components/CustomToolbar.tsx

If toolbar tools are not defined by the user's settings, opt to using default toolbar content. Refer to https://tldraw.dev/examples/add-tool-to-toolbar

jon-dez · 2025-12-29T17:00:05Z

patches/tldraw+4.2.1+001+initial.patch

tldraw 4, prefer to stay on the 3.15.3 for now

jon-dez · 2025-12-29T17:09:47Z

package.json

 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"tldraw": "^3.15.3",
+		"tldraw": "^4.2.1",


Upgrade to latest version is currently postponed.

Suggested change

"tldraw": "^4.2.1",

"tldraw": "^3.15.3",

jon-dez · 2025-12-29T17:10:08Z

patches/@tldraw+editor+3.15.3+001+no-source-maps.patch

Restore this file; Upgrade to latest version is currently postponed.

jon-dez · 2025-12-29T17:10:17Z

patches/@tldraw+tlschema+3.15.3+001+no-source-maps.patch

Restore this file; Upgrade to latest version is currently postponed.

jon-dez · 2025-12-29T17:10:28Z

patches/tldraw+3.15.3+001+no-source-maps.patch

Restore this file; Upgrade to latest version is currently postponed.

imed-ghomari · 2025-12-29T18:56:39Z

Hi, sorry for the confusion, but I'm not able to implement these changes. The pull request was simply a reference for adding new features, as I was using them on the forked version of your plugin. I wouldn't even know if I’m following your instructions correctly or unintentionally breaking the code further. Feel free to close the pull request if you want.

jon-dez · 2026-01-04T17:44:03Z

@imed-ghomari no problem, I'll keep this PR open in case anybody wants to jump in and work on this.

…ween vertical and horizontal toolbar

…sso select, draw and erase tools for better visibility in focus mode

…roke limit setting fix

…x in tdlraw repo issue, and added ui for zoom speed setting

Update tldraw to 4.2.1 and integrate custom features (Lasso Select, C…

a3be824

…ustom Toolbar, Compact Mode, Stroke Options)

jon-dez requested changes Dec 29, 2025

View reviewed changes

imed-ghomari added 10 commits January 23, 2026 16:43

updated to tldraw 4.3 for performance improvement and added toggl bet…

966b6be

…ween vertical and horizontal toolbar

fixed lasso selection color to be blue, and added custom icons for la…

a3145d8

…sso select, draw and erase tools for better visibility in focus mode

fix tools not working on zooming in

256b69f

removed refresh with rapid strokes

701dd4e

made tool and cursor change quicker

196c3d0

obsidian bottom toolbar on mobile fix, first open stroke size fix, st…

0a4f521

…roke limit setting fix

added setting to decrease zoom quality to increase speed

8e72b21

solved problem of tldraw tool unresponsive when using trackpad via fi…

2369cf7

…x in tdlraw repo issue, and added ui for zoom speed setting

Updated to tldraw 4.4 for preformance gains

6b51048

1.27.0

bc34e41

Comments

Conversation

imed-ghomari commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Key Features Added

Implementation Details

Uh oh!

jon-dez commented Dec 29, 2025

Uh oh!

jon-dez left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

imed-ghomari commented Dec 29, 2025

Uh oh!

jon-dez commented Jan 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

imed-ghomari commented Dec 29, 2025 •

edited

Loading