enhance: introduce read only flag

logseq · Mar 27, 2023 · 133d520 · 133d520
1 parent 4330f92
commit 133d520
Show file tree

Hide file tree

Showing 23 changed files with 73 additions and 61 deletions.
diff --git a/src/main/frontend/extensions/tldraw.cljs b/src/main/frontend/extensions/tldraw.cljs
@@ -153,7 +153,7 @@
        (tldraw {:renderers tldraw-renderers
                 :handlers (get-tldraw-handlers page-name)
                 :onMount on-mount
-                :isPublishing config/publishing?
+                :readOnly config/publishing?
                 :onPersist (fn [app info]
                              (state/set-state! [:whiteboard/last-persisted-at (state/get-current-repo)] (util/time-ms))
                              (util/profile "tldraw persist"

diff --git a/tldraw/apps/tldraw-logseq/src/app.tsx b/tldraw/apps/tldraw-logseq/src/app.tsx
@@ -53,7 +53,7 @@ const tools: TLReactToolConstructor<Shape>[] = [
 interface LogseqTldrawProps {
   renderers: LogseqContextValue['renderers']
   handlers: LogseqContextValue['handlers']
-  isPublishing: LogseqContextValue['isPublishing']
+  readOnly: boolean
   model?: TLDocumentModel<Shape>
   onMount?: TLReactCallbacks<Shape>['onMount']
   onPersist?: TLReactCallbacks<Shape>['onPersist']
@@ -92,13 +92,14 @@ const AppImpl = () => {
 
 const AppInner = ({
   onPersist,
+  readOnly,
   model,
   ...rest
 }: Omit<LogseqTldrawProps, 'renderers' | 'handlers'>) => {
   const onDrop = useDrop()
   const onPaste = usePaste()
   const onCopy = useCopy()
-  const onQuickAdd = useQuickAdd()
+  const onQuickAdd = readOnly ? null : useQuickAdd()
 
   const onPersistOnDiff: TLReactCallbacks<Shape>['onPersist'] = React.useCallback(
     (app, info) => {
@@ -114,6 +115,7 @@ const AppInner = ({
       onDrop={onDrop}
       onPaste={onPaste}
       onCopy={onCopy}
+      readOnly={readOnly}
       onCanvasDBClick={onQuickAdd}
       onPersist={onPersistOnDiff}
       model={model}
@@ -124,7 +126,7 @@ const AppInner = ({
   )
 }
 
-export const App = function App({ renderers, handlers, isPublishing, ...rest }: LogseqTldrawProps): JSX.Element {
+export const App = function App({ renderers, handlers, ...rest }: LogseqTldrawProps): JSX.Element {
   const memoRenders: any = React.useMemo(() => {
     return Object.fromEntries(
       Object.entries(renderers).map(([key, comp]) => {
@@ -136,7 +138,6 @@ export const App = function App({ renderers, handlers, isPublishing, ...rest }:
   const contextValue = {
     renderers: memoRenders,
     handlers: handlers,
-    isPublishing: isPublishing,
   }
 
   return (

diff --git a/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx b/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx
@@ -8,11 +8,9 @@ import { TablerIcon } from '../icons'
 import { Button } from '../Button'
 import { ZoomMenu } from '../ZoomMenu'
 import * as Separator from '@radix-ui/react-separator'
-import { LogseqContext } from './../../lib/logseq-context'
 
 export const ActionBar = observer(function ActionBar(): JSX.Element {
   const app = useApp<Shape>()
-  const { isPublishing } = React.useContext(LogseqContext)
 
   const undo = React.useCallback(() => {
     app.api.undo()
@@ -32,7 +30,7 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
 
   return (
     <div className="tl-action-bar">
-      {!isPublishing && (
+      {!app.readOnly && (
         <div className="tl-toolbar tl-history-bar">
           <Button tooltip="Undo" onClick={undo}>
             <TablerIcon name="arrow-back-up" />
@@ -43,7 +41,7 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
         </div>
       )}
 
-      <div className={`tl-toolbar tl-zoom-bar ${isPublishing ? "" : "ml-4"}`}>
+      <div className={`tl-toolbar tl-zoom-bar ${app.readOnly ? "" : "ml-4"}`}>
         <Button tooltip="Zoom in" onClick={zoomIn} id="tl-zoom-in">
           <TablerIcon name="plus" />
         </Button>

diff --git a/tldraw/apps/tldraw-logseq/src/components/AppUI.tsx b/tldraw/apps/tldraw-logseq/src/components/AppUI.tsx
@@ -4,18 +4,16 @@ import { DevTools } from './Devtools'
 import { PrimaryTools } from './PrimaryTools'
 import { StatusBar } from './StatusBar'
 import { isDev } from '@tldraw/core'
-import { LogseqContext } from './../lib/logseq-context'
-import React from 'react'
-
+import { useApp } from '@tldraw/react'
 
 export const AppUI = observer(function AppUI() {
-  const { isPublishing } = React.useContext(LogseqContext)
+  const app = useApp()
 
   return (
     <>
       {isDev() && <StatusBar />}
       {isDev() && <DevTools />}
-      {!isPublishing && <PrimaryTools />}
+      {!app.readOnly && <PrimaryTools />}
       <ActionBar />
     </>
   )

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -566,9 +566,6 @@ const getContextBarActionTypes = (type: ShapeType) => {
 }
 
 export const getContextBarActionsForShapes = (shapes: Shape[]) => {
-  const {isPublishing} = React.useContext(LogseqContext)
-  if (isPublishing) return []
-
   const types = shapes.map(s => s.props.type)
   const actionTypes = new Set(shapes.length > 0 ? getContextBarActionTypes(types[0]) : [])
   for (let i = 1; i < types.length && actionTypes.size > 0; i++) {

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react-lite'
 import { TablerIcon } from '../icons'
 import { Button } from '../Button'
 import * as React from 'react'
-import { LogseqContext } from './../../lib/logseq-context'
 
 import * as ReactContextMenu from '@radix-ui/react-context-menu'
 import * as Separator from '@radix-ui/react-separator'
@@ -21,7 +20,6 @@ export const ContextMenu = observer(function ContextMenu({
 }: ContextMenuProps) {
   const app = useApp()
   const rContent = React.useRef<HTMLDivElement>(null)
-  const { isPublishing } = React.useContext(LogseqContext)
 
   const runAndTransition = (f: Function) => {
     f()
@@ -56,7 +54,7 @@ export const ContextMenu = observer(function ContextMenu({
         tabIndex={-1}
       >
         <div>
-          {app.selectedShapes?.size > 1 && !isPublishing && (
+          {app.selectedShapes?.size > 1 && !app.readOnly && (
             <>
               <ReactContextMenu.Item>
                 <div className="tl-menu-button-row pb-0">
@@ -145,7 +143,7 @@ export const ContextMenu = observer(function ContextMenu({
           )}
           {(app.selectedShapesArray.some(s => s.type === 'group' || app.getParentGroup(s)) ||
             app.selectedShapesArray.length > 1) &&
-            !isPublishing && (
+            !app.readOnly && (
             <>
               {app.selectedShapesArray.some(s => s.type === 'group' || app.getParentGroup(s)) && (
                 <ReactContextMenu.Item
@@ -180,7 +178,7 @@ export const ContextMenu = observer(function ContextMenu({
           )}
           {app.selectedShapes?.size > 0 && (
             <>
-              {!isPublishing && (
+              {!app.readOnly && (
                 <ReactContextMenu.Item
                   className="tl-menu-item"
                   onClick={() => runAndTransition(app.cut)}
@@ -208,7 +206,7 @@ export const ContextMenu = observer(function ContextMenu({
               </ReactContextMenu.Item>
             </>
           )}
-          {!isPublishing && (
+          {!app.readOnly && (
             <ReactContextMenu.Item
               className="tl-menu-item"
               onClick={() => runAndTransition(app.paste)}
@@ -222,7 +220,7 @@ export const ContextMenu = observer(function ContextMenu({
               </div>
             </ReactContextMenu.Item>
           )}
-          {app.selectedShapes?.size === 1 && !isPublishing && (
+          {app.selectedShapes?.size === 1 && !app.readOnly && (
             <ReactContextMenu.Item
               className="tl-menu-item"
               onClick={() => runAndTransition(() => app.paste(undefined, true))}
@@ -255,7 +253,7 @@ export const ContextMenu = observer(function ContextMenu({
               Deselect all
             </ReactContextMenu.Item>
           )}
-          {app.selectedShapes?.size > 0 && !isPublishing && (
+          {app.selectedShapes?.size > 0 && !app.readOnly && (
             <>
               <ReactContextMenu.Item
                 className="tl-menu-item"
@@ -269,7 +267,7 @@ export const ContextMenu = observer(function ContextMenu({
                   </span>
                 </div>
               </ReactContextMenu.Item>
-              {app.selectedShapes?.size > 1 && !isPublishing && (
+              {app.selectedShapes?.size > 1 && !app.readOnly && (
                 <>
                   <ReactContextMenu.Separator className="menu-separator" />
                   <ReactContextMenu.Item
@@ -288,7 +286,7 @@ export const ContextMenu = observer(function ContextMenu({
                   </ReactContextMenu.Item>
                 </>
               )}
-              {!isPublishing && (
+              {!app.readOnly && (
                 <>
               <ReactContextMenu.Separator className="menu-separator" />
               <ReactContextMenu.Item

diff --git a/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts b/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts
@@ -57,7 +57,6 @@ export interface LogseqContextValue {
     redirectToPage: (uuidOrPageName: string) => void
     copyToClipboard: (text: string, html: string) => void
   }
-  isPublishing: boolean
 }
 
 export const LogseqContext = React.createContext<LogseqContextValue>({} as LogseqContextValue)
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
@@ -508,13 +508,15 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
                 {targetNotFound && <div className="tl-target-not-found">Target not found</div>}
                 {showingPortal && <PortalComponent {...componentProps} />}
               </div>
-              <CircleButton
-                active={!!this.collapsed}
-                style={{ opacity: isSelected ? 1 : 0 }}
-                icon={this.props.blockType === 'B' ? 'block' : 'page'}
-                onClick={this.toggleCollapsed}
-                otherIcon={'whiteboard-element'}
-              />
+              {!app.readOnly && (
+                <CircleButton
+                  active={!!this.collapsed}
+                  style={{ opacity: isSelected ? 1 : 0 }}
+                  icon={this.props.blockType === 'B' ? 'block' : 'page'}
+                  onClick={this.toggleCollapsed}
+                  otherIcon={'whiteboard-element'}
+                />
+              )}
             </>
           )}
         </div>

diff --git a/tldraw/packages/core/src/lib/TLApi/TLApi.ts b/tldraw/packages/core/src/lib/TLApi/TLApi.ts
@@ -367,6 +367,8 @@ export class TLApi<S extends TLShape = TLShape, K extends TLEventMap = TLEventMa
   }
 
   doGroup = (shapes: S[] = this.app.allSelectedShapesArray) => {
+    if (this.app.readOnly) return
+
     const selectedGroups: S[] = [
       ...shapes.filter(s => s.type === 'group'),
       ...shapes.map(s => this.app.getParentGroup(s)),
@@ -393,6 +395,8 @@ export class TLApi<S extends TLShape = TLShape, K extends TLEventMap = TLEventMa
   }
 
   unGroup = (shapes: S[] = this.app.allSelectedShapesArray) => {
+    if (this.app.readOnly) return
+
     const selectedGroups: S[] = [
       ...shapes.filter(s => s.type === 'group'),
       ...shapes.map(s => this.app.getParentGroup(s)),