feat: make some area (button/link) clickable, and outer rim draggable

tiddly-gittly · Apr 21, 2024 · 1f293da · 1f293da
1 parent fc3cd75
commit 1f293da
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 5 deletions.
diff --git a/src/tw-whiteboard/tldraw/shapes/note/component.tsx b/src/tw-whiteboard/tldraw/shapes/note/component.tsx
@@ -60,8 +60,15 @@ export function NoteComponent({ shape, isDarkMode }: { isDarkMode: boolean; shap
           onChange={onTextInputChange}
         />
       </div>
-      <div className='note-shape-component-inner' key='render' style={{ display: isEditing ? 'none' : undefined, ...sharedStyle }}>
-        <div ref={noteRenderContainerReference}>Note loading...</div>
+      <div className='note-shape-component-inner note-shape-view-mode' key='render' style={{ display: isEditing ? 'none' : undefined, ...sharedStyle }}>
+        <div
+          ref={noteRenderContainerReference}
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+        >
+          Note loading...
+        </div>
       </div>
     </div>
   );

diff --git a/src/tw-whiteboard/tldraw/shapes/note/style.css b/src/tw-whiteboard/tldraw/shapes/note/style.css
@@ -14,6 +14,12 @@
   overflow-y: auto;
   border-radius: var(--radius-2);
 }
+.note-shape-component-inner.note-shape-view-mode {
+  cursor: move;
+}
+.note-shape-component-inner.note-shape-view-mode p {
+  cursor: auto;
+}
 .note-shape-component-inner.note-shape-edit-mode {
   padding: 0.5em;
 }

diff --git a/src/tw-whiteboard/tldraw/shapes/transclude/ShapeViewToolbar.tsx b/src/tw-whiteboard/tldraw/shapes/transclude/ShapeViewToolbar.tsx
@@ -22,8 +22,22 @@ export function ShapeViewToolbar({ shape, onToggleFold }: { onToggleFold: () =>
 
   return (
     <div className='shape-view-toolbar-container'>
-      <button dangerouslySetInnerHTML={{ __html: shape.props.folded ? unfoldIcon : foldIcon }} onClick={onToggleFold} title={shape.props.folded ? unfoldText : foldText} />
-      <button dangerouslySetInnerHTML={{ __html: openInStoryIcon }} onClick={onOpenInStory} title={openInStoryText} />
+      <button
+        onPointerDown={(event) => {
+          event.stopPropagation();
+        }}
+        dangerouslySetInnerHTML={{ __html: shape.props.folded ? unfoldIcon : foldIcon }}
+        onClick={onToggleFold}
+        title={shape.props.folded ? unfoldText : foldText}
+      />
+      <button
+        onPointerDown={(event) => {
+          event.stopPropagation();
+        }}
+        dangerouslySetInnerHTML={{ __html: openInStoryIcon }}
+        onClick={onOpenInStory}
+        title={openInStoryText}
+      />
     </div>
   );
 }
diff --git a/src/tw-whiteboard/tldraw/shapes/transclude/component.tsx b/src/tw-whiteboard/tldraw/shapes/transclude/component.tsx
@@ -66,12 +66,23 @@ export function TranscludeComponent({ shape, isDarkMode }: { isDarkMode: boolean
         key='edit-title'
         style={{ display: isEditing ? undefined : 'none', ...sharedStyle }}
         onClick={editTitleContainerOnClick}
+        onPointerDown={(event) => {
+          event.stopPropagation();
+        }}
       >
         <TiddlerTitleInput editTitleInputReference={editTitleInputReference} onTitleInputChange={onTitleInputChange} tiddlerTitle={tiddlerTitle} />
       </div>
       <div className='transclude-shape-component-inner' key='render' style={{ display: isEditing ? 'none' : undefined, ...sharedStyle }}>
         <h2>{tiddlerTitle}</h2>
-        <div ref={transcludeRenderContainerReference} style={{ display: shape.props.folded ? 'none' : undefined }}>Transclude loading...</div>
+        <div
+          ref={transcludeRenderContainerReference}
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+          style={{ display: shape.props.folded ? 'none' : undefined }}
+        >
+          Transclude loading...
+        </div>
         <ShapeViewToolbar shape={shape} onToggleFold={onToggleFold} />
       </div>
     </div>

diff --git a/src/tw-whiteboard/tldraw/shapes/transclude/style.css b/src/tw-whiteboard/tldraw/shapes/transclude/style.css
@@ -64,6 +64,7 @@
 .shape-view-toolbar-container:hover {
   opacity: 1;
   border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+  cursor: move;
 }
 
 /**