diff options
Diffstat (limited to 'src/client/views/collections')
14 files changed, 473 insertions, 91 deletions
diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 6bd1d9f5f..8319f19ca 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -74,7 +74,10 @@ .carousel3DView-fwd, .carousel3DView-back { - top: 50%; + top: 0; + background: transparent; + width: calc((1 - #{$CAROUSEL3D_CENTER_SCALE} * 0.33) / 2 * 100%); + height: 100%; } .carousel3DView-fwd-scroll, @@ -108,8 +111,6 @@ opacity: 1; } -.carousel3DView-back:hover, -.carousel3DView-fwd:hover, .carousel3DView-back-scroll:hover, .carousel3DView-fwd-scroll:hover { background: lightgray; diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index d94e552b4..4bc72772a 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -2,14 +2,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { computed } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc } from '../../../fields/Doc'; +import { Doc, DocListCast } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; -import { NumCast, ScriptCast, StrCast } from '../../../fields/Types'; +import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { returnFalse, returnZero, Utils } from '../../../Utils'; +import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; import { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } from '../global/globalCssVariables.scss'; -import { DocumentView } from '../nodes/DocumentView'; +import { DocFocusOptions, DocumentView } from '../nodes/DocumentView'; import { StyleProp } from '../StyleProvider'; import './CollectionCarousel3DView.scss'; import { CollectionSubView } from './CollectionSubView'; @@ -46,6 +47,15 @@ export class CollectionCarousel3DView extends CollectionSubView() { .translate(-this.panelWidth() + ((this.centerScale - 1) * this.panelWidth()) / 2, -((Number(CAROUSEL3D_TOP) / 100) * this.props.PanelHeight()) + ((this.centerScale - 1) * this.panelHeight()) / 2) .scale(1 / this.centerScale); + focus = (anchor: Doc, options: DocFocusOptions) => { + const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); + if (anchor.type !== DocumentType.CONFIG && !docs.includes(anchor)) return; + options.didMove = true; + const target = DocCast(anchor.annotationOn) ?? anchor; + const index = docs.indexOf(target); + index !== -1 && (this.layoutDoc._carousel_index = index); + return undefined; + }; @computed get content() { const currentIndex = NumCast(this.layoutDoc._carousel_index); const displayDoc = (childPair: { layout: Doc; data: Doc }) => { @@ -61,6 +71,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { LayoutTemplateString={this.props.childLayoutString} Document={childPair.layout} DataDoc={childPair.data} + focus={this.focus} ScreenToLocalTransform={this.childScreenToLocal} isContentActive={this.isChildContentActive} isDocumentActive={this.props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this.props.isDocumentActive : this.isContentActive} @@ -85,8 +96,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; }; - onArrowClick = (e: React.MouseEvent, direction: number) => { - e.stopPropagation(); + onArrowClick = (direction: number) => { this.changeSlide(direction); !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = direction === 1 ? 'fwd' : 'back'); // while autoscroll is on, keep the other autoscroll button hidden !this.layoutDoc.autoScrollOn && this.fadeScrollButton(); // keep pause button visible while autoscroll is on @@ -117,16 +127,11 @@ export class CollectionCarousel3DView extends CollectionSubView() { }; @computed get buttons() { - if (!this.props.isContentActive()) return null; return ( <div className="arrow-buttons"> - <div key="back" className="carousel3DView-back" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={e => this.onArrowClick(e, -1)}> - <FontAwesomeIcon icon="angle-left" size={'2x'} /> - </div> - <div key="fwd" className="carousel3DView-fwd" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={e => this.onArrowClick(e, 1)}> - <FontAwesomeIcon icon="angle-right" size={'2x'} /> - </div> - {this.autoScrollButton} + <div title="click to go back" key="back" className="carousel3DView-back" onClick={e => this.onArrowClick(-1)} /> + <div title="click to advance" key="fwd" className="carousel3DView-fwd" onClick={e => this.onArrowClick(1)} /> + {/* {this.autoScrollButton} */} </div> ); } @@ -165,7 +170,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { <div className="carousel-wrapper" style={{ transform: `translateX(${this.translateX}px)` }}> {this.content} </div> - {this.props.Document._chromeHidden ? null : this.buttons} + {this.buttons} <div className="dot-bar">{this.dots}</div> </div> ); diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss index 8660113cd..130b31325 100644 --- a/src/client/views/collections/CollectionCarouselView.scss +++ b/src/client/views/collections/CollectionCarouselView.scss @@ -1,8 +1,7 @@ - .collectionCarouselView-outer { - height : 100%; + height: 100%; .collectionCarouselView-caption { - height: 50; + height: 50; display: inline-block; width: 100%; } @@ -13,7 +12,8 @@ user-select: none; } } -.carouselView-back, .carouselView-fwd { +.carouselView-back, +.carouselView-fwd { position: absolute; display: flex; top: 42.5%; @@ -22,18 +22,19 @@ align-items: center; border-radius: 5px; justify-content: center; - color: rgba(255,255,255,0.5); - background : rgba(0,0,0, 0.1); + color: rgba(255, 255, 255, 0.5); + background: rgba(0, 0, 0, 0.1); &:hover { - color:white; + color: white; } } .carouselView-fwd { - right: 0; + right: 20; } .carouselView-back { - left: 0; + left: 20; } -.carouselView-back:hover, .carouselView-fwd:hover { +.carouselView-back:hover, +.carouselView-fwd:hover { background: lightgray; -}
\ No newline at end of file +} diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 7fa36d228..040a584b8 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, Opt } from '../../../fields/Doc'; import { NumCast, ScriptCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, returnFalse, returnZero, StopEvent } from '../../../Utils'; +import { emptyFunction, returnFalse, returnOne, returnZero, StopEvent } from '../../../Utils'; import { DragManager } from '../../util/DragManager'; import { DocumentView, DocumentViewProps } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; @@ -44,12 +44,14 @@ export class CollectionCarouselView extends CollectionSubView() { panelHeight = () => this.props.PanelHeight() - (StrCast(this.layoutDoc._layout_showCaption) ? 50 : 0); onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); onContentClick = () => ScriptCast(this.layoutDoc.onChildClick); + @computed get marginX() { + return NumCast(this.layoutDoc.caption_xMargin, 50); + } + captionWidth = () => this.props.PanelWidth() - 2 * this.marginX; @computed get content() { const index = NumCast(this.layoutDoc._carousel_index); const curDoc = this.childLayoutPairs?.[index]; - const captionProps = { ...this.props, fieldKey: 'caption', setHeight: undefined, setContentView: undefined }; - const marginX = NumCast(this.layoutDoc['caption_xMargin']); - const marginY = NumCast(this.layoutDoc['caption_yMargin']); + const captionProps = { ...this.props, NativeScaling: returnOne, PanelWidth: this.captionWidth, fieldKey: 'caption', setHeight: undefined, setContentView: undefined }; const show_captions = StrCast(this.layoutDoc._layout_showCaption); return !(curDoc?.layout instanceof Doc) ? null : ( <> @@ -80,9 +82,9 @@ export class CollectionCarouselView extends CollectionSubView() { style={{ display: show_captions ? undefined : 'none', borderRadius: this.props.styleProvider?.(this.layoutDoc, captionProps, StyleProp.BorderRounding), - marginRight: marginX, - marginLeft: marginX, - width: `calc(100% - ${marginX * 2}px)`, + marginRight: this.marginX, + marginLeft: this.marginX, + width: `calc(100% - ${this.marginX * 2}px)`, }}> <FormattedTextBox key={index} {...captionProps} allowScroll={true} fieldKey={show_captions} styleProvider={this.captionStyleProvider} Document={curDoc.layout} DataDoc={undefined} /> </div> diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index b13753025..c0530ab81 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -1,5 +1,285 @@ @import '../global/globalCssVariables.scss'; -@import '../../../../node_modules/golden-layout/src/css/goldenlayout-base.css'; + +.lm_root { + position: relative; +} +.lm_row > .lm_item { + float: left; +} +.lm_content { + overflow: hidden; + position: relative; +} +.lm_dragging, +.lm_dragging * { + cursor: move !important; + user-select: none; +} +.lm_maximised { + position: absolute; + top: 0; + left: 0; + z-index: 40; +} +.lm_maximise_placeholder { + display: none; +} +.lm_splitter { + position: relative; + z-index: 20; +} +.lm_splitter:hover, +.lm_splitter.lm_dragging { + background: orange; +} +.lm_splitter.lm_vertical .lm_drag_handle { + width: 100%; + position: absolute; + cursor: ns-resize; +} +.lm_splitter.lm_horizontal { + float: left; + height: 100%; +} +.lm_splitter.lm_horizontal .lm_drag_handle { + height: 100%; + position: absolute; + cursor: ew-resize; +} +.lm_header { + overflow: visible; + position: relative; + z-index: 1; +} +// .lm_header [class^='lm_'] { +// box-sizing: content-box !important; +// } +.lm_header .lm_controls { + position: absolute; + right: 3px; +} +.lm_header .lm_controls > li { + cursor: pointer; + float: left; + width: 18px; + height: 18px; + text-align: center; + top: 3px; +} +.lm_header ul { + margin: 0; + padding: 0; + list-style-type: none; +} +.lm_header .lm_tabs { + position: absolute; +} +.lm_header .lm_tab { + cursor: pointer; + float: left; + height: 25px; + padding: 0 10px 5px; + padding-right: 25px; + position: relative; + box-shadow: unset !important; +} +.lm_header .lm_tab i { + width: 2px; + height: 19px; + position: absolute; +} +.lm_header .lm_tab i.lm_left { + top: 0; + left: -2px; +} +.lm_header .lm_tab i.lm_right { + top: 0; + right: -2px; +} +.lm_header .lm_tab .lm_title { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; +} +.lm_header .lm_tab .lm_close_tab { + width: 14px; + height: 14px; + position: absolute; + top: 0; + right: 0; + text-align: center; +} +.lm_stack.lm_left .lm_header, +.lm_stack.lm_right .lm_header { + height: 100%; +} +.lm_dragProxy.lm_left .lm_header, +.lm_dragProxy.lm_right .lm_header, +.lm_stack.lm_left .lm_header, +.lm_stack.lm_right .lm_header { + width: 20px; + float: left; + vertical-align: top; +} +.lm_dragProxy.lm_left .lm_header .lm_tabs, +.lm_dragProxy.lm_right .lm_header .lm_tabs, +.lm_stack.lm_left .lm_header .lm_tabs, +.lm_stack.lm_right .lm_header .lm_tabs { + transform-origin: left top; + top: 0; + width: 1000px; +} +.lm_dragProxy.lm_left .lm_header .lm_controls, +.lm_dragProxy.lm_right .lm_header .lm_controls, +.lm_stack.lm_left .lm_header .lm_controls, +.lm_stack.lm_right .lm_header .lm_controls { + bottom: 0; +} +.lm_dragProxy.lm_left .lm_items, +.lm_dragProxy.lm_right .lm_items, +.lm_stack.lm_left .lm_items, +.lm_stack.lm_right .lm_items { + float: left; +} +.lm_dragProxy.lm_left .lm_header .lm_tabs, +.lm_stack.lm_left .lm_header .lm_tabs { + transform: rotate(-90deg) scaleX(-1); + left: 0; +} +.lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab, +.lm_stack.lm_left .lm_header .lm_tabs .lm_tab { + transform: scaleX(-1); + margin-top: 1px; +} +.lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list, +.lm_stack.lm_left .lm_header .lm_tabdropdown_list { + top: initial; + right: initial; + left: 20px; +} +.lm_dragProxy.lm_right .lm_content { + float: left; +} +.lm_dragProxy.lm_right .lm_header .lm_tabs, +.lm_stack.lm_right .lm_header .lm_tabs { + transform: rotate(90deg) scaleX(1); + left: 100%; + margin-left: 0; +} +.lm_dragProxy.lm_right .lm_header .lm_controls, +.lm_stack.lm_right .lm_header .lm_controls { + left: 3px; +} +.lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list, +.lm_stack.lm_right .lm_header .lm_tabdropdown_list { + top: initial; + right: 20px; +} +.lm_dragProxy.lm_bottom .lm_header .lm_tab, +.lm_stack.lm_bottom .lm_header .lm_tab { + margin-top: 0; + border-top: none; +} +.lm_dragProxy.lm_bottom .lm_header .lm_controls, +.lm_stack.lm_bottom .lm_header .lm_controls { + top: 3px; +} +.lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list, +.lm_stack.lm_bottom .lm_header .lm_tabdropdown_list { + top: initial; + bottom: 20px; +} +.lm_drop_tab_placeholder { + float: left; + width: 100px; + height: 10px; + visibility: hidden; +} +.lm_header .lm_controls .lm_tabdropdown:before { + content: ''; + width: 0; + height: 0; + vertical-align: middle; + display: inline-block; + border-top: 5px dashed; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + color: white; +} +.lm_header .lm_tabdropdown_list { + position: absolute; + top: 20px; + right: 0; + z-index: 5; + overflow: hidden; +} +.lm_header .lm_tabdropdown_list .lm_tab { + clear: both; + padding-right: 10px; + margin: 0; +} +.lm_header .lm_tabdropdown_list .lm_tab .lm_title { + width: 100px; +} +.lm_header .lm_tabdropdown_list .lm_close_tab { + display: none !important; +} +.lm_dragProxy { + position: absolute; + top: 0; + left: 0; + z-index: 30; +} +.lm_dragProxy .lm_header { + background: transparent; +} +.lm_dragProxy .lm_content { + border-top: none; + overflow: hidden; +} +.lm_dropTargetIndicator { + display: none; + position: absolute; + z-index: 20; +} +.lm_dropTargetIndicator .lm_inner { + width: 100%; + height: 100%; + position: relative; + top: 0; + left: 0; +} +.lm_transition_indicator { + display: none; + width: 20px; + height: 20px; + position: absolute; + top: 0; + left: 0; + z-index: 20; +} +.lm_popin { + width: 20px; + height: 20px; + position: absolute; + bottom: 0; + right: 0; + z-index: 9999; +} +.lm_popin > * { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.lm_popin > .lm_bg { + z-index: 10; +} +.lm_popin > .lm_icon { + z-index: 20; +} /*# sourceMappingURL=goldenlayout-base.css.map */ + @import '../../../../node_modules/golden-layout/src/css/goldenlayout-dark-theme.css'; .lm_title { @@ -35,6 +315,8 @@ width: max-content; height: 100%; display: flex; + max-width: 100; + text-overflow: ellipsis; } .lm_active { @@ -46,18 +328,33 @@ // font-weight: 700; } +.lm_header .lm_tabs { + overflow-y: hidden; + width: 100%; +} +ul.lm_tabs::before { + content: ' '; + position: absolute; + bottom: 0; + width: 100%; + z-index: 1; + pointer-events: none; + border: solid 1px black; +} .lm_header .lm_tab { // padding: 0px; // moved to MainView.scss, othwerise they get overridden by default stylings // opacity: 0.7; // box-shadow: none; // height: 25px; // border-bottom: black solid; + border-bottom: unset !important; + border-top-right-radius: 5px; + border-top-left-radius: 5px; .collectionDockingView-gear { display: none; } } - .lm_header .lm_tab.lm_active { padding: 0; opacity: 1; @@ -65,7 +362,11 @@ box-shadow: none; height: 27px; margin-right: 2px; - // border-bottom: unset; + z-index: 2 !important; + border-right: solid 2px; + border-left: solid 2px; + border-top: solid 2px; + border-color: black; .collectionDockingView-gear { display: inline-block; @@ -123,20 +424,55 @@ } .lm_close_tab { + display: inline-flex !important; padding: 0; + opacity: 1 !important; align-self: center; margin-right: 5px; - background-color: black; border-radius: 3px; - opacity: 1 !important; width: 15px !important; height: 15px !important; position: relative !important; - display: inline-flex !important; align-items: center; top: 0 !important; right: unset !important; left: 0 !important; + background-image: unset !important; + &::before { + content: '\a0x\a0'; + color: rgb(50, 50, 50); + margin: auto; + position: relative; + top: -2px; + } + &:hover { + &::before { + background: gray; + color: white; + } + } +} +.lm_close { + background-image: unset !important; + &:hover { + background: gray; + color: white !important; + } + &::before { + content: 'x'; + margin: auto; + position: relative; + top: -2; + font-size: medium; + font-family: sans-serif; + } +} + +.lm_iconWrap { + &:hover { + background: gray; + color: white !important; + } } .lm_tab, @@ -154,14 +490,6 @@ top: 0; left: 0; - // overflow: hidden; // bcz: menus don't show up when this is on (e.g., the parentSelectorMenu) - .collectionDockingView-gear { - padding-left: 5px; - height: 15px; - width: 18px; - margin: auto; - } - .collectionDockingView-drag { touch-action: none; position: absolute; @@ -180,7 +508,6 @@ display: flex; align-content: center; justify-content: center; - background: $dark-gray; } .lm_controls > li { @@ -190,14 +517,38 @@ } .lm_controls .lm_popout { - transform: rotate(45deg); - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); + background-image: unset; + left: -3; + &:hover { + background: gray; + color: white !important; + } + } + li.lm_popout::before { + content: '+'; + margin: auto; + font-size: x-large; + top: -6; + position: relative; + } + .lm_maximise { + background-image: unset !important; + &::before { + content: '\25A3'; + margin: auto; + font-size: medium; + position: relative; + } + &:hover { + background: gray; + color: white !important; + } } .lm_maximised .lm_controls .lm_maximise { - opacity: 1; - transform: scale(0.8); - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) !important; + &::before { + content: '\25A2'; + } } .flexlayout__layout { diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 8472c59db..4873a61ff 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -10,7 +10,7 @@ import { List } from '../../../fields/List'; import { ImageCast, NumCast, StrCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; import { GetEffectiveAcl, inheritParentAcls } from '../../../fields/util'; -import { emptyFunction, incrementTitleCopy } from '../../../Utils'; +import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, incrementTitleCopy } from '../../../Utils'; import { DocServer } from '../../DocServer'; import { Docs } from '../../documents/Documents'; import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; @@ -31,6 +31,7 @@ import { CollectionFreeFormView } from './collectionFreeForm'; import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; import { TabDocView } from './TabDocView'; import React = require('react'); +import { SettingsManager } from '../../util/SettingsManager'; const _global = (window /* browser */ || global) /* node */ as any; @observer @@ -60,7 +61,7 @@ export class CollectionDockingView extends CollectionSubView() { return this._goldenLayout._maximisedItem !== null; } private _goldenLayout: any = null; - + static _highlightStyleSheet: any = addStyleSheet(); constructor(props: SubCollectionViewProps) { super(props); if (this.props.renderDepth < 0) runInAction(() => (CollectionDockingView.Instance = this)); @@ -330,6 +331,16 @@ export class CollectionDockingView extends CollectionSubView() { width => !this._goldenLayout && width > 20 && setTimeout(() => this.setupGoldenLayout()), // need to wait for the collectiondockingview-container to have it's width/height since golden layout reads that to configure its windows { fireImmediately: true } ); + reaction( + () => [SettingsManager.userBackgroundColor, SettingsManager.userBackgroundColor], + () => { + clearStyleSheetRules(CollectionDockingView._highlightStyleSheet); + addStyleSheetRule(CollectionDockingView._highlightStyleSheet, 'lm_controls', { background: `${SettingsManager.userBackgroundColor} !important` }); + addStyleSheetRule(CollectionDockingView._highlightStyleSheet, 'lm_controls', { color: `${SettingsManager.userColor} !important` }); + addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: `${SettingsManager.userBackgroundColor} !important` }); + }, + { fireImmediately: true } + ); } }; @@ -505,6 +516,23 @@ export class CollectionDockingView extends CollectionSubView() { } }); + let addNewDoc = action(() => { + const dashboard = Doc.ActiveDashboard; + if (dashboard) { + dashboard['pane-count'] = NumCast(dashboard['pane-count']) + 1; + const docToAdd = Docs.Create.FreeformDocument([], { + _width: this.props.PanelWidth(), + _height: this.props.PanelHeight(), + _layout_fitWidth: true, + _freeform_backgroundGrid: true, + title: `Untitled Tab ${NumCast(dashboard['pane-count'])}`, + }); + Doc.AddDocToList(Doc.MyHeaderBar, 'data', docToAdd); + inheritParentAcls(this.dataDoc, docToAdd, false); + CollectionDockingView.AddSplit(docToAdd, OpenWhereMod.none, stack); + } + }); + stack.header?.controlsContainer .find('.lm_close') //get the close icon .off('click') //unbind the current click handler @@ -524,31 +552,18 @@ export class CollectionDockingView extends CollectionSubView() { }) ); + stack.element.click((e: any) => { + if (stack.contentItems.length === 0 && Array.from(document.elementsFromPoint(e.originalEvent.x, e.originalEvent.y)).some(ele => ele?.className === 'empty-tabs-message')) { + addNewDoc(); + } + }); stack.header?.controlsContainer .find('.lm_maximise') //get the close icon .click(() => setTimeout(this.stateChanged)); stack.header?.controlsContainer .find('.lm_popout') //get the popout icon .off('click') //unbind the current click handler - .click( - action(() => { - // stack.config.fixed = !stack.config.fixed; // force the stack to have a fixed size - const dashboard = Doc.ActiveDashboard; - if (dashboard) { - dashboard['pane-count'] = NumCast(dashboard['pane-count']) + 1; - const docToAdd = Docs.Create.FreeformDocument([], { - _width: this.props.PanelWidth(), - _height: this.props.PanelHeight(), - _layout_fitWidth: true, - _freeform_backgroundGrid: true, - title: `Untitled Tab ${NumCast(dashboard['pane-count'])}`, - }); - Doc.AddDocToList(Doc.MyHeaderBar, 'data', docToAdd); - inheritParentAcls(this.dataDoc, docToAdd, false); - CollectionDockingView.AddSplit(docToAdd, OpenWhereMod.none, stack); - } - }) - ); + .click(addNewDoc); }; render() { diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 54a60271a..26272d2ee 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -210,11 +210,12 @@ export function CollectionSubView<X>(moreProps?: X) { const targetDocments = DocListCast(this.dataDoc[this.props.fieldKey]); const someMoved = !dropAction && docDragData.draggedDocuments.some(drag => targetDocments.includes(drag)); if (someMoved) docDragData.droppedDocuments = docDragData.droppedDocuments.map((drop, i) => (targetDocments.includes(docDragData.draggedDocuments[i]) ? docDragData.draggedDocuments[i] : drop)); - if ((!dropAction || dropAction === 'same' || dropAction === 'move' || someMoved) && docDragData.moveDocument) { + if ((!dropAction || dropAction === 'inSame' || dropAction === 'same' || dropAction === 'move' || someMoved) && docDragData.moveDocument) { const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d); const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d); if (movedDocs.length) { - const canAdd = de.embedKey || dropAction || Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.rootDoc); + const canAdd = + (de.embedKey || dropAction || Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.rootDoc)) && (dropAction !== 'inSame' || docDragData.draggedDocuments.every(d => d.embedContainer === this.rootDoc)); const moved = docDragData.moveDocument(movedDocs, this.rootDoc, canAdd ? this.addDocument : returnFalse); added = canAdd || moved ? moved : undefined; } else { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index eed04b3ee..9e5ac77d9 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -149,7 +149,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree if (isAlreadyInTree() !== sameTree) { console.log('WHAAAT'); } - dragData.dropAction = dropAction && !isAlreadyInTree() ? dropAction : sameTree ? 'same' : dragData.dropAction; + dragData.dropAction = dropAction && !isAlreadyInTree() ? dropAction : sameTree && dragData.dropAction !== 'inSame' ? 'same' : dragData.dropAction; e.stopPropagation(); } }; @@ -438,7 +438,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree render() { TraceMobx(); - const scale = (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1) || 1; + const scale = this.props.NativeDimScaling?.() || 1; return ( <div style={{ transform: `scale(${scale})`, transformOrigin: 'top left', width: `${100 / scale}%`, height: `${100 / scale}%` }}> {!(this.doc instanceof Doc) || !this.treeChildren ? null : this.doc.treeView_HasOverlay ? ( diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index dab53b671..26aa5a121 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -132,6 +132,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { if (tab.element[0].children[1].children.length === 1) { iconWrap.className = 'lm_iconWrap lm_moreInfo'; + iconWrap.title = 'click for menu, drag to embed in document'; const dragBtnDown = (e: React.PointerEvent) => { setupMoveUpEvents( this, diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 0cc11bf1c..cbcc7c710 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -21,7 +21,7 @@ } .treeView-bulletIcons { - width: 100%; + margin: auto; height: 100%; // changes start here. @@ -64,6 +64,8 @@ position: relative; width: fit-content; min-height: 20px; + min-width: 15px; + margin-right: 3px; color: $medium-gray; border: #80808030 1px solid; border-radius: 5px; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 832e102bc..f89aa065b 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -433,9 +433,9 @@ export class TreeView extends React.Component<TreeViewProps> { return (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && innerAdd(doc), true as boolean); }; const addDoc = inside ? localAdd : parentAddDoc; - const move = (!dropAction || dropAction === 'proto' || dropAction === 'move' || dropAction === 'same') && moveDocument; + const move = (!dropAction || dropAction === 'proto' || dropAction === 'move' || dropAction === 'same' || dropAction === 'inSame') && moveDocument; const canAdd = (!this.props.treeView.outlineMode && !StrCast((inside ? this.props.document : this.props.treeViewParent)?.treeView_FreezeChildren).includes('add')) || forceAdd; - if (canAdd) { + if (canAdd && (dropAction !== 'inSame' || droppedDocuments.every(d => d.embedContainer === this.props.parentTreeView?.doc))) { this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.dropping = true); const res = droppedDocuments.reduce((added, d) => (move ? move(d, undefined, addDoc) || (dropAction === 'proto' ? addDoc(d) : false) : addDoc(d)) || added, false); this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.dropping = false); @@ -598,7 +598,7 @@ export class TreeView extends React.Component<TreeViewProps> { } const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[key])) instanceof ComputedField; const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true); - !dataIsComputed && added && Doc.SetContainer(doc, DocCast(this.doc.embedContainer)); + !dataIsComputed && added && Doc.SetContainer(doc, this.doc); return added; }; @@ -761,7 +761,7 @@ export class TreeView extends React.Component<TreeViewProps> { <IconButton color={color} icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />} size={Size.XSMALL} /> ) ) : ( - <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}> + <div className="treeView-bulletIcons"> <div className={`treeView-${this.onCheckedClick ? 'checkIcon' : 'expandIcon'}`}> <FontAwesomeIcon size="sm" diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx index 1e76d373c..15b6e1d37 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx @@ -350,7 +350,7 @@ export function computeTimelineLayout(poolData: Map<string, PoolData>, pivotDoc: groupNames.push({ type: 'text', text: toLabel(Math.ceil(maxTime)), x: Math.ceil(maxTime - minTime) * scaling, y: 0, height: fontHeight, fontSize, payload: undefined }); } - const divider = { type: 'div', color: Doc.ActiveDashboard?.colorScheme === ColorScheme.Dark ? 'dimgray' : 'black', x: 0, y: 0, width: panelDim[0], height: -1, payload: undefined }; + const divider = { type: 'div', color: 'black', x: 0, y: 0, width: panelDim[0], height: -1, payload: undefined }; return normalizeResults(panelDim, fontHeight, docMap, poolData, viewDefsToJSX, groupNames, (maxTime - minTime) * scaling, [divider]); function layoutDocsAtTime(keyDocs: Doc[], key: number) { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 8a812c671..9df96fabc 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -33,7 +33,6 @@ import { undoBatch, UndoManager } from '../../../util/UndoManager'; import { COLLECTION_BORDER_WIDTH } from '../../../views/global/globalCssVariables.scss'; import { Timeline } from '../../animationtimeline/Timeline'; import { ContextMenu } from '../../ContextMenu'; -import { DocumentDecorations } from '../../DocumentDecorations'; import { GestureOverlay } from '../../GestureOverlay'; import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke'; import { LightboxView } from '../../LightboxView'; @@ -187,7 +186,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return this.props.ScreenToLocalTransform().translate(-this.borderWidth, -this.borderWidth); } @computed get cachedGetTransform(): Transform { - return this.getContainerTransform().translate(-this.cachedCenteringShiftX, -this.cachedCenteringShiftY).transform(this.cachedGetLocalTransform); + return this.getContainerTransform() + .scale(this.props.isAnnotationOverlay ? 1 : 1 / this.nativeDim()) + .translate(-this.cachedCenteringShiftX, -this.cachedCenteringShiftY) + .transform(this.cachedGetLocalTransform); } public static gotoKeyframe(timer: NodeJS.Timeout | undefined, docs: Doc[], duration: number) { @@ -862,7 +864,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection // create a new curve by appending all curves of the current segment together in order to render a single new stroke. if (!e.shiftKey) { this._eraserLock++; - this.segmentInkStroke(intersect.inkView, intersect.t).forEach(segment => + const segments = this.segmentInkStroke(intersect.inkView, intersect.t); + segments.forEach(segment => this.forceStrokeGesture( e, GestureUtils.Gestures.Stroke, diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index cd7bd28e9..4c502021d 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -18,7 +18,7 @@ import { SelectionManager } from '../../../util/SelectionManager'; import { Transform } from '../../../util/Transform'; import { undoBatch, UndoManager } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; -import { OpenWhere } from '../../nodes/DocumentView'; +import { DocumentView, OpenWhere } from '../../nodes/DocumentView'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { pasteImageBitmap } from '../../nodes/WebBoxRenderer'; import { PreviewCursor } from '../../PreviewCursor'; @@ -335,7 +335,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque if (!(e.nativeEvent as any).marqueeHit) { (e.nativeEvent as any).marqueeHit = true; if (!this.props.trySelectCluster(e.shiftKey)) { - this.setPreviewCursor(e.clientX, e.clientY, false, false, this.props.Document); + !DocumentView.ExploreMode && this.setPreviewCursor(e.clientX, e.clientY, false, false, this.props.Document); } else e.stopPropagation(); } } |