add ability to change colors via the annotation tooltip and refactor …

…highlightcolor picker
WorldBrain · Jun 27, 2024 · 904e9ac · 904e9ac
1 parent 1ac1a64
commit 904e9ac
Show file tree

Hide file tree

Showing 24 changed files with 1,010 additions and 335 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/annotations/annotation-save-logic.ts b/src/annotations/annotation-save-logic.ts
@@ -12,6 +12,7 @@ import {
 import type { RemoteSyncSettingsInterface } from 'src/sync-settings/background/types'
 import type { RGBAColor } from './cache/types'
 import type { AnnotationSharingState } from '@worldbrain/memex-common/lib/content-sharing/service/types'
+import { HighlightColor } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/types'
 
 export interface AnnotationShareOpts {
     shouldShare?: boolean
@@ -27,14 +28,14 @@ type AnnotationCreateData = {
     createdWhen?: Date
     selector?: Anchor
     localListIds?: number[]
-    color?: RGBAColor | string | string
+    color?: HighlightColor['id']
 } & ({ body: string; comment?: string } | { body?: string; comment: string })
 
 interface AnnotationUpdateData {
     localId: string
     body: string
     comment: string | null
-    color?: RGBAColor | string | string
+    color?: HighlightColor['id']
 }
 
 export interface SaveAnnotationParams<

diff --git a/src/annotations/background/types.ts b/src/annotations/background/types.ts
@@ -8,7 +8,7 @@ import type { AnnotSearchParams } from 'src/search/background/types'
 import type { Anchor } from 'src/highlighting/types'
 import type { SharedAnnotationReference } from '@worldbrain/memex-common/lib/content-sharing/types'
 import type { SharedAnnotationWithRefs } from '../types'
-import { RGBAColor } from '../cache/types'
+import { HighlightColor } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/types'
 
 export interface AnnotationInterface<Role extends RemoteFunctionRole> {
     getAllAnnotationsByUrl: RemotePositionalFunction<
@@ -46,7 +46,7 @@ export interface AnnotationInterface<Role extends RemoteFunctionRole> {
     >
     editAnnotation: RemotePositionalFunction<
         Role,
-        [string, string, RGBAColor | string, string],
+        [string, string, HighlightColor['id'] | string, string],
         any
     >
     updateAnnotationTags: RemotePositionalFunction<
@@ -102,7 +102,7 @@ export interface CreateAnnotationParams {
     title?: string
     comment?: string
     body?: string
-    color?: RGBAColor | string | string
+    color?: HighlightColor['id']
     selector?: Anchor
     isBookmarked?: boolean
     isSocialPost?: boolean

diff --git a/src/annotations/cache/index.ts b/src/annotations/cache/index.ts
@@ -30,6 +30,7 @@ import {
     pushOrderedItem,
 } from '@worldbrain/memex-common/lib/utils/item-ordering'
 import { DEFAULT_HIGHLIGHT_COLOR } from '@worldbrain/memex-common/lib/annotations/constants'
+import { HighlightColor } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/types'
 
 export interface PageAnnotationCacheDeps {
     sortingFn?: AnnotationsSorter
@@ -63,7 +64,7 @@ export class PageAnnotationsCache implements PageAnnotationsCacheInterface {
         UnifiedAnnotation['unifiedId']
     >()
 
-    private highlightColorDict: { [id: string]: RGBAColor } = {}
+    private highlightColorDict: HighlightColor[]
 
     constructor(private deps: PageAnnotationCacheDeps) {
         deps.sortingFn = deps.sortingFn ?? sortByPagePosition
@@ -93,7 +94,7 @@ export class PageAnnotationsCache implements PageAnnotationsCacheInterface {
     setHighlightColorDictionary: PageAnnotationsCacheInterface['setHighlightColorDictionary'] = (
         colors,
     ) => {
-        this.highlightColorDict = fromPairs(colors.map((c) => [c.id, c.color]))
+        this.highlightColorDict = colors
     }
 
     getAnnotationsArray: PageAnnotationsCacheInterface['getAnnotationsArray'] = () =>
@@ -199,10 +200,9 @@ export class PageAnnotationsCache implements PageAnnotationsCacheInterface {
         opts: { now: number },
     ): UnifiedAnnotation => {
         const unifiedAnnotationId = this.generateAnnotationId()
-        if (annotation.color != null) {
-            annotation.color =
-                this.highlightColorDict[annotation.color as string] ??
-                DEFAULT_HIGHLIGHT_COLOR
+
+        if (annotation.color == null) {
+            annotation.color = this.highlightColorDict[0].id
         }
 
         if (annotation.remoteId != null) {

diff --git a/src/annotations/cache/types.ts b/src/annotations/cache/types.ts
@@ -139,7 +139,7 @@ export type UnifiedAnnotation = Pick<
     lastEdited: number
     createdWhen: number
     creator?: UserReference
-    color?: RGBAColor
+    color?: HighlightColor['id']
 
     // Misc annotation feature state
     privacyLevel: AnnotationPrivacyLevels

diff --git a/src/annotations/cache/utils.ts b/src/annotations/cache/utils.ts
@@ -25,6 +25,7 @@ import type { SharedListMetadata } from 'src/content-sharing/background/types'
 import { DEFAULT_KEY } from '@worldbrain/memex-common/lib/utils/item-ordering'
 import { createSyncSettingsStore } from 'src/sync-settings/util'
 import { HIGHLIGHT_COLORS_DEFAULT } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/constants'
+import { HighlightColor } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/types'
 
 export const reshapeAnnotationForCache = (
     annot: Annotation & {
@@ -68,7 +69,7 @@ export const reshapeAnnotationForCache = (
             shouldShare: annot.isShared,
             isBulkShareProtected: annot.isBulkShareProtected,
         }),
-        color: annot.color as RGBAColor,
+        color: annot.color as HighlightColor['id'],
         ...(opts.extraData ?? {}),
     }
 }
@@ -94,7 +95,7 @@ export const reshapeSharedAnnotationForCache = (
         lastEdited: annot.updatedWhen,
         createdWhen: annot.createdWhen,
         privacyLevel: AnnotationPrivacyLevels.SHARED,
-        color: annot.color as RGBAColor,
+        color: annot.color as HighlightColor['id'],
         ...(opts.extraData ?? {}),
     }
 }

diff --git a/src/annotations/components/AnnotationEditable.tsx b/src/annotations/components/AnnotationEditable.tsx
@@ -33,7 +33,7 @@ import { ANNOT_BOX_ID_PREFIX } from 'src/sidebar/annotations-sidebar/constants'
 import { YoutubePlayer } from '@worldbrain/memex-common/lib/services/youtube/types'
 import { ImageSupportInterface } from 'src/image-support/background/types'
 import { Anchor } from 'src/highlighting/types'
-import HighlightColorPicker from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker'
+
 import tinycolor from 'tinycolor2'
 import { RGBAobjectToString } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/utils'
 import { SPECIAL_LIST_IDS } from '@worldbrain/memex-common/lib/storage/modules/lists/constants'
@@ -45,12 +45,15 @@ import type { HighlightColor } from '@worldbrain/memex-common/lib/common-ui/comp
 import CheckboxNotInput from 'src/common-ui/components/CheckboxNotInput'
 import { SpaceSearchSuggestion } from '@worldbrain/memex-common/lib/editor'
 import ListsSegment from '@worldbrain/memex-common/lib/common-ui/components/result-item-spaces-segment'
+import HighlightColorPicker from './highlightColorPicker'
+import { RemoteSyncSettingsInterface } from 'src/sync-settings/background/types'
+import { DEFAULT_HIGHLIGHT_COLOR } from '@worldbrain/memex-common/lib/annotations/constants'
 
 export interface HighlightProps extends AnnotationProps {
     body: string
     comment?: string
     selector?: Anchor
-    color?: RGBAColor
+    color?: HighlightColor
 }
 
 export interface NoteProps extends AnnotationProps {
@@ -126,11 +129,9 @@ export interface AnnotationProps {
     shareMenuAnnotationInstanceId: string
     imageSupport: ImageSupportInterface<'caller'>
     selector?: Anchor
-    saveHighlightColor?: (noteId, colorId, color) => void
-    saveHighlightColorSettings?: (newState: HighlightColor[]) => void
-    getHighlightColorSettings?: () => void
+    saveHighlightColor?: (color: HighlightColor['id']) => Promise<void>
     highlightColorSettings: HighlightColor[]
-    color?: RGBAColor
+    color?: HighlightColor
     getRootElement: () => HTMLElement
     toggleAutoAdd: () => void
     isAutoAddEnabled?: boolean
@@ -148,6 +149,7 @@ export interface AnnotationProps {
     isInFocus?: boolean
     shiftSelectItem?: () => void
     searchTerms?: string[]
+    syncSettingsBG: RemoteSyncSettingsInterface
 }
 
 export interface AnnotationEditableEventProps {
@@ -239,21 +241,21 @@ export default class AnnotationEditable extends React.Component<Props, State> {
     componentDidMount() {
         this.setTextAreaHeight()
 
-        if (!this.props.color) {
-            const defaultHighlightSettings = this.props.highlightColorSettings?.find(
-                (setting) => setting.id === 'default',
-            )
-            if (defaultHighlightSettings?.color) {
-                this.setState({
-                    defaultHighlightColor: defaultHighlightSettings.color,
-                    currentHighlightColor: defaultHighlightSettings.color,
-                })
-            }
-        } else {
-            this.setState({
-                currentHighlightColor: this.props.color,
-            })
-        }
+        // if (!this.props.color) {
+        //     const defaultHighlightSettings = this.props.highlightColorSettings?.find(
+        //         (setting) => setting.id === 'default',
+        //     )
+        //     if (defaultHighlightSettings?.color) {
+        //         this.setState({
+        //             defaultHighlightColor: defaultHighlightSettings.color,
+        //             currentHighlightColor: defaultHighlightSettings.color,
+        //         })
+        //     }
+        // } else {
+        //     this.setState({
+        //         currentHighlightColor: this.props.color,
+        //     })
+        // }
     }
 
     // This is a hack to ensure this state, which isn't available on init, only gets set once
@@ -270,11 +272,11 @@ export default class AnnotationEditable extends React.Component<Props, State> {
                 showShareMenu: this.props.initShowSpacePicker === 'footer',
             })
         }
-        if (prevProps.color != this.props.color) {
-            this.setState({
-                currentHighlightColor: this.props.color,
-            })
-        }
+        // if (prevProps.color != this.props.color) {
+        //     this.setState({
+        //         currentHighlightColor: this.props.color,
+        //     })
+        // }
 
         if (
             prevProps.highlightColorSettings !=
@@ -455,15 +457,18 @@ export default class AnnotationEditable extends React.Component<Props, State> {
         }
 
         const isScreenshotAnnotation = this.props.selector?.dimensions != null
-        let barColor = null
-
-        if (this.state.defaultHighlightColor) {
-            barColor = RGBAobjectToString(this.state.defaultHighlightColor)
-        }
-        if (this.state.currentHighlightColor) {
-            barColor = RGBAobjectToString(this.state.currentHighlightColor)
+        let barColor = RGBAobjectToString(DEFAULT_HIGHLIGHT_COLOR)
+        if (this.props.color) {
+            barColor = RGBAobjectToString(this.props.color.color)
         }
 
+        // if (this.state.defaultHighlightColor) {
+        //     barColor = RGBAobjectToString(this.props.color.color)
+        // }
+        // if (this.state.currentHighlightColor) {
+        //     barColor = RGBAobjectToString(this.props.color.color)
+        // }
+
         return (
             <HighlightStyled
                 onClick={this.props.onHighlightClick}
@@ -605,29 +610,10 @@ export default class AnnotationEditable extends React.Component<Props, State> {
                     getPortalRoot={this.props.getRootElement}
                 >
                     <HighlightColorPicker
-                        saveHighlightColorSettings={
-                            this.props.saveHighlightColorSettings
-                        }
-                        changeHighlightColor={(
-                            color: RGBAColor | string,
-                            colorId,
-                        ) => {
-                            this.props.saveHighlightColor(
-                                unifiedId,
-                                colorId,
-                                color,
-                            )
-                            this.setState({
-                                showHighlightColorPicker: false,
-                            })
-                        }}
-                        getHighlightColorSettings={
-                            this.props.getHighlightColorSettings
-                        }
-                        highlightColorSettings={
-                            this.props.highlightColorSettings
-                        }
-                        selectedColor={selectedColor}
+                        syncSettingsBG={this.props.syncSettingsBG}
+                        annotationId={this.props.unifiedId}
+                        selectedColor={this.props.color.id}
+                        updateAnnotationColor={this.props.saveHighlightColor}
                     />
                 </PopoutBox>
             )