From d95730d904612640184ca6fdc00864b0c81b0c0c Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 18 Sep 2024 20:46:38 -0400 Subject: lots of changes to fix dragging cards, integrate iconTags with other tags, sizing docs when selected to fit window, --- src/client/views/nodes/DocumentView.tsx | 5 + src/client/views/nodes/IconTagBox.scss | 24 ++--- src/client/views/nodes/IconTagBox.tsx | 106 ++++++++++----------- .../views/nodes/formattedText/FormattedTextBox.tsx | 1 + 4 files changed, 67 insertions(+), 69 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 4c357cf45..758e70508 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -67,6 +67,7 @@ export interface DocumentViewProps extends FieldViewSharedProps { hideCaptions?: boolean; contentPointerEvents?: Property.PointerEvents | undefined; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents dontCenter?: 'x' | 'y' | 'xy'; + showTags?: boolean; childHideDecorationTitle?: boolean; childHideResizeHandles?: boolean; childDragAction?: dropActionType; // allows child documents to be dragged out of collection without holding the embedKey or dragging the doc decorations title bar. @@ -1126,6 +1127,10 @@ export class DocumentView extends DocComponent() { @observable public static CurrentlyPlaying: DocumentView[] = []; // audio or video media views that are currently playing @observable public TagPanelHeight = 0; + @computed get showTags() { + return this.Document._layout_showTags || this._props.showTags; + } + @computed private get shouldNotScale() { return (this.layout_fitWidth && !this.nativeWidth) || this.ComponentView?.isUnstyledView?.(); } diff --git a/src/client/views/nodes/IconTagBox.scss b/src/client/views/nodes/IconTagBox.scss index 211a961c1..90cc06092 100644 --- a/src/client/views/nodes/IconTagBox.scss +++ b/src/client/views/nodes/IconTagBox.scss @@ -2,23 +2,25 @@ .card-button-container { display: flex; - padding: 3px; - position: absolute; + position: relative; pointer-events: none; - background-color: rgb(218, 218, 218); + background-color: rgb(218, 218, 218); border-radius: 50px; - transform: translateY(25px); - align-items: center; - justify-content: start; + align-items: center; + gap: 5px; + padding-left: 5px; + padding-right: 5px; + padding-top: 2px; + padding-bottom: 2px; button { pointer-events: auto; - transform: translateY(-7.5px); - width: 30px; - height: 30px; + width: 20px; + height: 20px; + margin: auto; + padding: 0; border-radius: 50%; background-color: $dark-gray; - margin: 5px; background-color: transparent; } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx index f86372ec0..3d021fd73 100644 --- a/src/client/views/nodes/IconTagBox.tsx +++ b/src/client/views/nodes/IconTagBox.tsx @@ -6,18 +6,18 @@ import { observer } from 'mobx-react'; import React from 'react'; import { numberRange } from '../../../Utils'; import { Doc, StrListCast } from '../../../fields/Doc'; -import { DocData } from '../../../fields/DocSymbols'; -import { BoolCast, DocCast, NumCast, StrCast } from '../../../fields/Types'; -import { CollectionViewType } from '../../documents/DocumentTypes'; +import { StrCast } from '../../../fields/Types'; import { SnappingManager } from '../../util/SnappingManager'; import { undoable } from '../../util/UndoManager'; import { MainView } from '../MainView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { PropertiesView } from '../PropertiesView'; +import { DocumentView } from './DocumentView'; import './IconTagBox.scss'; export interface IconTagProps { - doc: Doc; + Views: DocumentView[]; + IsEditing: boolean; } /** @@ -26,59 +26,16 @@ export interface IconTagProps { */ @observer export class IconTagBox extends ObservableReactComponent { - @computed - get currentScale() { - return NumCast((this._props.doc.embedContainer as Doc)?._freeform_scale, 1); - } - constructor(props: IconTagProps) { super(props); } - componentDidUpdate(): void { - this._props.doc[DocData].tagHeight = 36 * this.currentScale; + @computed get View() { + return this._props.Views.lastElement(); + } + @computed get currentScale() { + return this.View?.screenToLocalScale(); } - - /** - * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups - * @param doc - * @param cardSort - * @returns - */ - renderButtons = (doc: Doc): JSX.Element | null => { - const amButtons = StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length + 1; - - const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); - - const totalWidth = (amButtons - 1) * 35 + (amButtons - 1) * 2 * 5 + 6; - - const iconMap = (buttonID: number) => { - return StrCast(Doc.UserDoc()[keys[buttonID]]) as IconProp; - }; - - const isCard = DocCast(this._props.doc.embedContainer).type_collection === CollectionViewType.Card; - - return ( -
- {numberRange(amButtons - 1).map(i => ( - Click to add/remove this card from the {iconMap(i).toString()} group
}> - - - ))} - - ); - }; /** * Opens the filter panel in the properties menu @@ -93,13 +50,13 @@ export class IconTagBox extends ObservableReactComponent { }; /** - * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt - * @param childPairIndex * @param buttonID * @param doc */ - toggleButton = undoable((doc: Doc, icon: string) => { - BoolCast(doc[icon]) ? (doc[icon] = false) : (doc[icon] = true); + setIconTag = undoable((icon: string, state: boolean) => { + this._props.Views.forEach(view => { + view.dataDoc[icon] = state; + }); }, 'toggle card tag'); /** @@ -112,10 +69,43 @@ export class IconTagBox extends ObservableReactComponent { const isActive = doc[icon.toString()]; const color = isActive ? '#4476f7' : '#323232'; - return ; + return ; }; + /** + * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups + */ render() { - return <>{this.renderButtons(this._props.doc)}; + const amButtons = StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length + 1; + + const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); + + const iconMap = (buttonID: number) => { + return StrCast(Doc.UserDoc()[keys[buttonID]]) as IconProp; + }; + const buttons = numberRange(amButtons - 1) + .filter(i => this._props.IsEditing || this.View.Document[iconMap(i).toString()] || (DocumentView.Selected.length === 1 && this.View.IsSelected)) + .map(i => ( + Click to add/remove this card from the {iconMap(i).toString()} group}> + + + )); + return !buttons.length ? null : ( +
+ {buttons} +
+ ); } } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 343e255dc..e0331a422 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -275,6 +275,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent