diff options
Diffstat (limited to 'src/client/views/collections')
12 files changed, 569 insertions, 317 deletions
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 992c1f600..0ca86172f 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -2,7 +2,7 @@ import React = require("react"); import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; import { action, computed, observable, reaction, runInAction, Lambda } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast, Opt } from "../../../fields/Doc"; +import { Doc, DocListCast, Opt, Field } from "../../../fields/Doc"; import { BoolCast, Cast, StrCast, NumCast } from "../../../fields/Types"; import AntimodeMenu from "../AntimodeMenu"; import "./CollectionMenu.scss"; @@ -24,21 +24,37 @@ import { Document } from "../../../fields/documentSchemas"; import { SelectionManager } from "../../util/SelectionManager"; import { DocumentView } from "../nodes/DocumentView"; import { ColorState } from "react-color"; +import { ObjectField } from "../../../fields/ObjectField"; +import { ScriptField } from "../../../fields/ScriptField"; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { DocUtils } from "../../documents/Documents"; @observer export default class CollectionMenu extends AntimodeMenu { static Instance: CollectionMenu; - @observable SelectedCollection: CollectionView | undefined; + @observable SelectedCollection: DocumentView | undefined; + @observable FieldKey: string; constructor(props: Readonly<{}>) { super(props); + this.FieldKey = ""; CollectionMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away this.Pinned = Cast(Doc.UserDoc()["menuCollections-pinned"], "boolean", true); this.jumpTo(300, 300); } + componentDidMount() { + reaction(() => SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0], + (doc) => doc && this.SetSelection(doc)) + } + + @action + SetSelection(view: DocumentView) { + this.SelectedCollection = view; + } + @action toggleMenuPin = (e: React.MouseEvent) => { Doc.UserDoc()["menuCollections-pinned"] = this.Pinned = !this.Pinned; @@ -53,14 +69,18 @@ export default class CollectionMenu extends AntimodeMenu { </button>; return this.getElement(!this.SelectedCollection ? [button] : - [<CollectionViewBaseChrome key="chrome" CollectionView={this.SelectedCollection} type={StrCast(this.SelectedCollection.props.Document._viewType) as CollectionViewType} />, + [<CollectionViewBaseChrome key="chrome" + docView={this.SelectedCollection} + fieldKey={Doc.LayoutFieldKey(this.SelectedCollection?.props.Document)} + type={StrCast(this.SelectedCollection?.props.Document._viewType, CollectionViewType.Invalid) as CollectionViewType} />, button]); } } interface CollectionMenuProps { - CollectionView: CollectionView; type: CollectionViewType; + fieldKey: string; + docView: DocumentView; } const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); @@ -69,61 +89,95 @@ const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); export class CollectionViewBaseChrome extends React.Component<CollectionMenuProps> { //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\) - get target() { return this.props.CollectionView.props.Document; } + get document() { return this.props.docView?.props.Document; } + get target() { return this.document; } _templateCommand = { params: ["target", "source"], title: "item view", - script: "this.target.childLayoutTemplate = getDocTemplate(this.source?.[0])", + script: "self.target.childLayoutTemplate = getDocTemplate(self.source?.[0])", immediate: undoBatch((source: Doc[]) => source.length && (this.target.childLayoutTemplate = Doc.getDocTemplate(source?.[0]))), initialize: emptyFunction, }; _narrativeCommand = { params: ["target", "source"], title: "child click view", - script: "this.target.childClickedOpenTemplateView = getDocTemplate(this.source?.[0])", + script: "self.target.childClickedOpenTemplateView = getDocTemplate(self.source?.[0])", immediate: undoBatch((source: Doc[]) => source.length && (this.target.childClickedOpenTemplateView = Doc.getDocTemplate(source?.[0]))), initialize: emptyFunction, }; _contentCommand = { - params: ["target", "source"], title: "clear content", - script: "getProto(this.target).data = copyField(this.source);", + params: ["target", "source"], title: "set content", + script: "getProto(self.target).data = copyField(self.source);", immediate: undoBatch((source: Doc[]) => Doc.GetProto(this.target).data = new List<Doc>(source)), // Doc.aliasDocs(source), initialize: emptyFunction, }; + _onClickCommand = { + params: ["target", "proxy"], title: "copy onClick", + script: `{ if (self.proxy?.[0]) { + getProto(self.proxy[0]).onClick = copyField(self.target.onClick); + getProto(self.proxy[0]).target = self.target.target; + getProto(self.proxy[0]).source = copyField(self.target.source); + }}`, + immediate: undoBatch((source: Doc[]) => { }), + initialize: emptyFunction, + }; + _openLinkInCommand = { + params: ["target", "container"], title: "link follow target", + script: `{ if (self.container?.length) { + getProto(self.target).linkContainer = self.container[0]; + getProto(self.target).isLinkButton = true; + getProto(self.target).onClick = makeScript("getProto(self.linkContainer).data = new List([self.links[0]?.anchor2])"); + }}`, + immediate: undoBatch((container: Doc[]) => { + if (container.length) { + Doc.GetProto(this.target).linkContainer = container[0]; + Doc.GetProto(this.target).isLinkButton = true; + Doc.GetProto(this.target).onClick = ScriptField.MakeScript("getProto(self.linkContainer).data = new List([self.links[0]?.anchor2])"); + } + }), + initialize: emptyFunction, + }; _viewCommand = { params: ["target"], title: "bookmark view", - script: "this.target._panX = this['target-panX']; this.target._panY = this['target-panY']; this.target._viewScale = this['target-viewScale'];", + script: "self.target._panX = self['target-panX']; self.target._panY = self['target-panY']; self.target._viewScale = self['target-viewScale'];", immediate: undoBatch((source: Doc[]) => { this.target._panX = 0; this.target._panY = 0; this.target._viewScale = 1; }), initialize: (button: Doc) => { button['target-panX'] = this.target._panX; button['target-panY'] = this.target._panY; button['target-viewScale'] = this.target._viewScale; }, }; _clusterCommand = { params: ["target"], title: "fit content", - script: "this.target._fitToBox = !this.target._fitToBox;", + script: "self.target._fitToBox = !self.target._fitToBox;", immediate: undoBatch((source: Doc[]) => this.target._fitToBox = !this.target._fitToBox), initialize: emptyFunction }; _fitContentCommand = { params: ["target"], title: "toggle clusters", - script: "this.target.useClusters = !this.target.useClusters;", + script: "self.target.useClusters = !self.target.useClusters;", immediate: undoBatch((source: Doc[]) => this.target.useClusters = !this.target.useClusters), initialize: emptyFunction }; + _saveFilterCommand = { + params: ["target"], title: "save filter", + script: "self.target._docFilters = copyField(self['target-docFilters']);", + immediate: undoBatch((source: Doc[]) => this.target._docFilters = undefined), + initialize: (button: Doc) => { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; }, + }; - _freeform_commands = [this._viewCommand, this._fitContentCommand, this._clusterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; + _freeform_commands = [this._viewCommand, this._saveFilterCommand, this._fitContentCommand, this._clusterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; _stacking_commands = [this._contentCommand, this._templateCommand]; _masonry_commands = [this._contentCommand, this._templateCommand]; _schema_commands = [this._templateCommand, this._narrativeCommand]; + _doc_commands = [this._openLinkInCommand, this._onClickCommand]; _tree_commands = []; private get _buttonizableCommands() { switch (this.props.type) { + default: return this._doc_commands; + case CollectionViewType.Freeform: return this._freeform_commands; case CollectionViewType.Tree: return this._tree_commands; case CollectionViewType.Schema: return this._schema_commands; case CollectionViewType.Stacking: return this._stacking_commands; case CollectionViewType.Masonry: return this._stacking_commands; - case CollectionViewType.Freeform: return this._freeform_commands; case CollectionViewType.Time: return this._freeform_commands; case CollectionViewType.Carousel: return this._freeform_commands; case CollectionViewType.Carousel3D: return this._freeform_commands; } - return []; } private _picker: any; private _commandRef = React.createRef<HTMLInputElement>(); @@ -155,24 +209,19 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp this.document._facetWidth = 0; } - @computed get subChrome() { switch (this.props.type) { - case CollectionViewType.Freeform: return (<CollectionFreeFormViewChrome key="collchrome" CollectionView={this.props.CollectionView} type={this.props.type} />); - case CollectionViewType.Stacking: return (<CollectionStackingViewChrome key="collchrome" CollectionView={this.props.CollectionView} type={this.props.type} />); - case CollectionViewType.Schema: return (<CollectionSchemaViewChrome key="collchrome" CollectionView={this.props.CollectionView} type={this.props.type} />); - case CollectionViewType.Tree: return (<CollectionTreeViewChrome key="collchrome" CollectionView={this.props.CollectionView} type={this.props.type} />); - case CollectionViewType.Masonry: return (<CollectionStackingViewChrome key="collchrome" CollectionView={this.props.CollectionView} type={this.props.type} />); - case CollectionViewType.Carousel3D: return (<Collection3DCarouselViewChrome key="collchrome" CollectionView={this.props.CollectionView} type={this.props.type} />); - case CollectionViewType.Grid: return (<CollectionGridViewChrome key="collchrome" CollectionView={this.props.CollectionView} type={this.props.type} />); - default: return null; + default: + case CollectionViewType.Freeform: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} />); + case CollectionViewType.Stacking: return (<CollectionStackingViewChrome key="collchrome" {...this.props} />); + case CollectionViewType.Schema: return (<CollectionSchemaViewChrome key="collchrome" {...this.props} />); + case CollectionViewType.Tree: return (<CollectionTreeViewChrome key="collchrome" {...this.props} />); + case CollectionViewType.Masonry: return (<CollectionStackingViewChrome key="collchrome" {...this.props} />); + case CollectionViewType.Carousel3D: return (<Collection3DCarouselViewChrome key="collchrome" {...this.props} />); + case CollectionViewType.Grid: return (<CollectionGridViewChrome key="collchrome" {...this.props} />); + case CollectionViewType.Docking: return (<CollectionDockingChrome key="collchrome" {...this.props} />); } } - - private get document() { - return this.props.CollectionView.props.Document; - } - private dropDisposer?: DragManager.DragDropDisposer; protected createDropTarget = (ele: HTMLDivElement) => { this.dropDisposer?.(); @@ -194,15 +243,15 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp dragViewDown = (e: React.PointerEvent) => { setupMoveUpEvents(this, e, (e, down, delta) => { - const vtype = this.props.CollectionView.collectionViewType; + const vtype = this.props.type; const c = { params: ["target"], title: vtype, - script: `this.target._viewType = '${StrCast(this.props.CollectionView.props.Document._viewType)}'`, - immediate: (source: Doc[]) => this.props.CollectionView.props.Document._viewType = Doc.getDocTemplate(source?.[0]), + script: `this.target._viewType = '${StrCast(this.props.type)}'`, + immediate: (source: Doc[]) => this.document._viewType = Doc.getDocTemplate(source?.[0]), initialize: emptyFunction, }; DragManager.StartButtonDrag([this._viewRef.current!], c.script, StrCast(c.title), - { target: this.props.CollectionView.props.Document }, c.params, c.initialize, e.clientX, e.clientY); + { target: this.document }, c.params, c.initialize, e.clientX, e.clientY); return true; }, emptyFunction, emptyFunction); } @@ -210,7 +259,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp setupMoveUpEvents(this, e, (e, down, delta) => { this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => DragManager.StartButtonDrag([this._commandRef.current!], c.script, c.title, - { target: this.props.CollectionView.props.Document }, c.params, c.initialize, e.clientX, e.clientY)); + { target: this.document }, c.params, c.initialize, e.clientX, e.clientY)); return true; }, emptyFunction, () => { this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => c.immediate([])); @@ -244,7 +293,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp className="collectionViewBaseChrome-viewPicker" onPointerDown={stopPropagation} onChange={this.viewChanged} - value={StrCast(this.props.CollectionView.props.Document._viewType)}> + value={StrCast(this.props.type)}> {Object.values(CollectionViewType).map(type => [CollectionViewType.Invalid, CollectionViewType.Docking].includes(type) ? (null) : ( <option key={Utils.GenerateGuid()} @@ -264,13 +313,20 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp <div className="collectionMenu-cont" > <div className="collectionMenu"> <div className="collectionViewBaseChrome"> - {this.viewModes} - {this.templateChrome} + {this.props.type === CollectionViewType.Invalid || this.props.type === CollectionViewType.Docking ? (null) : this.viewModes} + {this.props.type === CollectionViewType.Docking ? (null) : this.templateChrome} <div className="collectionViewBaseChrome-viewSpecs" title="filter documents to show" style={{ display: "grid" }}> <button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} > <FontAwesomeIcon icon="filter" size="lg" /> </button> </div> + + {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : <button className={"antimodeMenu-button"} key="float" + style={{ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined, borderRight: "1px solid gray" }} + title="Toggle Overlay Layer" + onClick={() => DocumentView.FloatDoc(this.props.docView)}> + <FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} /> + </button>} </div> {this.subChrome} </div> @@ -280,15 +336,22 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp } @observer -export class CollectionFreeFormViewChrome extends React.Component<CollectionMenuProps> { +export class CollectionDockingChrome extends React.Component<CollectionMenuProps> { + render() { + return (null); + } +} + +@observer +export class CollectionFreeFormViewChrome extends React.Component<CollectionMenuProps & { isOverlay: boolean }> { public static Instance: CollectionFreeFormViewChrome; constructor(props: any) { super(props); CollectionFreeFormViewChrome.Instance = this; } - get Document() { return this.props.CollectionView.props.Document; } + get document() { return this.props.docView.props.Document; } @computed get dataField() { - return this.props.CollectionView.props.Document[Doc.LayoutFieldKey(this.props.CollectionView.props.Document)]; + return this.document[Doc.LayoutFieldKey(this.document)]; } @computed get childDocs() { return DocListCast(this.dataField); @@ -296,38 +359,44 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu @undoBatch @action nextKeyframe = (): void => { - const currentFrame = Cast(this.Document.currentFrame, "number", null); + const currentFrame = Cast(this.document.currentFrame, "number", null); if (currentFrame === undefined) { - this.Document.currentFrame = 0; + this.document.currentFrame = 0; CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0); } CollectionFreeFormDocumentView.updateKeyframe(this.childDocs, currentFrame || 0); - this.Document.currentFrame = Math.max(0, (currentFrame || 0) + 1); - this.Document.lastFrame = Math.max(NumCast(this.Document.currentFrame), NumCast(this.Document.lastFrame)); + this.document.currentFrame = Math.max(0, (currentFrame || 0) + 1); + this.document.lastFrame = Math.max(NumCast(this.document.currentFrame), NumCast(this.document.lastFrame)); } @undoBatch @action prevKeyframe = (): void => { - const currentFrame = Cast(this.Document.currentFrame, "number", null); + const currentFrame = Cast(this.document.currentFrame, "number", null); if (currentFrame === undefined) { - this.Document.currentFrame = 0; + this.document.currentFrame = 0; CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0); } CollectionFreeFormDocumentView.gotoKeyframe(this.childDocs.slice()); - this.Document.currentFrame = Math.max(0, (currentFrame || 0) - 1); + this.document.currentFrame = Math.max(0, (currentFrame || 0) - 1); } @undoBatch @action miniMap = (): void => { - this.Document.hideMinimap = !this.Document.hideMinimap; + this.document.hideMinimap = !this.document.hideMinimap; } private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""]; private _width = ["1", "5", "10", "100"]; - private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; - private _head = ["", "", "arrow", "", "", "arrow", "", "", ""]; - private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""]; - private _shape = ["line", "line", "line", "", "", "", "rectangle", "circle", "triangle"]; - + // private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; + // private _head = ["", "", "arrow", "", "", "arrow", "", "", ""]; + // private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""]; + // private _shape = ["line", "line", "line", "", "", "", "rectangle", "circle", "triangle"]; + private _dotsize = [10, 20, 30, 40]; + private _draw = ["∿", "⎯", "→", "↔︎", "ロ", "O"]; + private _head = ["", "", "", "arrow", "", ""]; + private _end = ["", "", "arrow", "arrow", "", ""]; + private _shape = ["", "line", "line", "line", "rectangle", "circle"]; + private _title = ["pen", "line", "line with arrow", "line with double arrows", "square", "circle",]; + private _faName = ["pen-fancy", "minus", "long-arrow-alt-right", "arrows-alt-h", "square", "circle"]; @observable _shapesNum = this._shape.length; @observable _selected = this._shapesNum; @@ -390,9 +459,11 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu }); return <div className="btn-draw" key="draw"> {this._draw.map((icon, i) => - <button className="antimodeMenu-button" key={icon} onPointerDown={() => func(i, false)} onDoubleClick={() => func(i, true)} + <button className="antimodeMenu-button" title={this._title[i]} key={icon} onPointerDown={() => func(i, false)} onDoubleClick={() => func(i, true)} style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}> - {this._draw[i]} + {/* {this._draw[i]} */} + <FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" /> + </button>)} </div>; } @@ -411,11 +482,11 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu return !this._widthBtn ? widthPicker : <div className="btn2-group" key="width"> {widthPicker} - {this._width.map(wid => - <button className="antimodeMenu-button" key={wid} + {this._width.map((wid, i) => + <button className="antimodeMenu-button" key={wid} title="change width" onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })} - style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001 }}> - {wid} + style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: "center" }}> + • </button>)} </div>; } @@ -455,33 +526,47 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu return <button className="antimodeMenu-button" key="format" title="toggle foramatting pane" onPointerDown={action(e => FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)} style={{ backgroundColor: this._fillBtn ? "121212" : "" }}> - <FontAwesomeIcon icon="chevron-right" size="lg" /> + <FontAwesomeIcon icon="angle-double-right" size="lg" /> </button>; } render() { - return this.Document.isAnnotationOverlay ? (null) : - <div className="collectionFreeFormMenu-cont"> + return !this.props.docView.layoutDoc ? (null) : <div className="collectionFreeFormMenu-cont"> + {this.props.docView.props.renderDepth !== 0 ? (null) : <div key="map" title="mini map" className="backKeyframe" onClick={this.miniMap}> <FontAwesomeIcon icon={"map"} size={"lg"} /> </div> - <div key="back" title="back frame" className="backKeyframe" onClick={this.prevKeyframe}> - <FontAwesomeIcon icon={"caret-left"} size={"lg"} /> - </div> - <div key="num" title="toggle view all" className="numKeyframe" style={{ backgroundColor: this.Document.editing ? "#759c75" : "#c56565" }} - onClick={action(() => this.Document.editing = !this.Document.editing)} > - {NumCast(this.Document.currentFrame)} - </div> - <div key="fwd" title="forward frame" className="fwdKeyframe" onClick={this.nextKeyframe}> - <FontAwesomeIcon icon={"caret-right"} size={"lg"} /> - </div> + } + <div key="back" title="back frame" className="backKeyframe" onClick={this.prevKeyframe}> + <FontAwesomeIcon icon={"caret-left"} size={"lg"} /> + </div> + <div key="num" title="toggle view all" className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }} + onClick={action(() => this.document.editing = !this.document.editing)} > + {NumCast(this.document.currentFrame)} + </div> + <div key="fwd" title="forward frame" className="fwdKeyframe" onClick={this.nextKeyframe}> + <FontAwesomeIcon icon={"caret-right"} size={"lg"} /> + </div> - {this.widthPicker} - {this.colorPicker} - {this.fillPicker} - {this.drawButtons} - {this.formatPane} - </div>; + {!this.props.isOverlay || this.document.type !== DocumentType.WEB ? (null) : + <button className={"antimodeMenu-button"} key="hypothesis" + style={{ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined, borderRight: "1px solid gray" }} + title="Use Hypothesis" + onClick={() => this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating}> + <FontAwesomeIcon icon={["fab", "hire-a-helper"]} size={"lg"} /> + </button> + } + {!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating ? + <> + {this.drawButtons} + {this.widthPicker} + {this.colorPicker} + {this.fillPicker} + {this.formatPane} + </> : + (null) + } + </div>; } } @observer @@ -489,12 +574,14 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu @observable private _currentKey: string = ""; @observable private suggestions: string[] = []; - @computed private get descending() { return StrCast(this.props.CollectionView.props.Document._columnsSort) === "descending"; } - @computed get pivotField() { return StrCast(this.props.CollectionView.props.Document._pivotField); } + get document() { return this.props.docView.props.Document; } + + @computed private get descending() { return StrCast(this.document._columnsSort) === "descending"; } + @computed get pivotField() { return StrCast(this.document._pivotField); } getKeySuggestions = async (value: string): Promise<string[]> => { value = value.toLowerCase(); - const docs = DocListCast(this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldKey]); + const docs = DocListCast(this.document[this.props.fieldKey]); if (docs instanceof Doc) { return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value)); } else { @@ -529,14 +616,14 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu @action setValue = (value: string) => { - this.props.CollectionView.props.Document._pivotField = value; + this.document._pivotField = value; return true; } @action toggleSort = () => { - this.props.CollectionView.props.Document._columnsSort = - this.props.CollectionView.props.Document._columnsSort === "descending" ? "ascending" : - this.props.CollectionView.props.Document._columnsSort === "ascending" ? undefined : "descending"; + this.document._columnsSort = + this.document._columnsSort === "descending" ? "ascending" : + this.document._columnsSort === "ascending" ? undefined : "descending"; } @action resetValue = () => { this._currentKey = this.pivotField; }; @@ -586,35 +673,36 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu @observer export class CollectionSchemaViewChrome extends React.Component<CollectionMenuProps> { - // private _textwrapAllRows: boolean = Cast(this.props.CollectionView.props.Document.textwrappedSchemaRows, listSpec("string"), []).length > 0; + // private _textwrapAllRows: boolean = Cast(this.document.textwrappedSchemaRows, listSpec("string"), []).length > 0; + get document() { return this.props.docView.props.Document; } @undoBatch togglePreview = () => { const dividerWidth = 4; const borderWidth = Number(COLLECTION_BORDER_WIDTH); - const panelWidth = this.props.CollectionView.props.PanelWidth(); - const previewWidth = NumCast(this.props.CollectionView.props.Document.schemaPreviewWidth); + const panelWidth = this.props.docView.props.PanelWidth(); + const previewWidth = NumCast(this.document.schemaPreviewWidth); const tableWidth = panelWidth - 2 * borderWidth - dividerWidth - previewWidth; - this.props.CollectionView.props.Document.schemaPreviewWidth = previewWidth === 0 ? Math.min(tableWidth / 3, 200) : 0; + this.document.schemaPreviewWidth = previewWidth === 0 ? Math.min(tableWidth / 3, 200) : 0; } @undoBatch @action toggleTextwrap = async () => { - const textwrappedRows = Cast(this.props.CollectionView.props.Document.textwrappedSchemaRows, listSpec("string"), []); + const textwrappedRows = Cast(this.document.textwrappedSchemaRows, listSpec("string"), []); if (textwrappedRows.length) { - this.props.CollectionView.props.Document.textwrappedSchemaRows = new List<string>([]); + this.document.textwrappedSchemaRows = new List<string>([]); } else { - const docs = DocListCast(this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldKey]); + const docs = DocListCast(this.document[this.props.fieldKey]); const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]); - this.props.CollectionView.props.Document.textwrappedSchemaRows = new List<string>(allRows); + this.document.textwrappedSchemaRows = new List<string>(allRows); } } render() { - const previewWidth = NumCast(this.props.CollectionView.props.Document.schemaPreviewWidth); - const textWrapped = Cast(this.props.CollectionView.props.Document.textwrappedSchemaRows, listSpec("string"), []).length > 0; + const previewWidth = NumCast(this.document.schemaPreviewWidth); + const textWrapped = Cast(this.document.textwrappedSchemaRows, listSpec("string"), []).length > 0; return ( <div className="collectionSchemaViewChrome-cont"> @@ -634,11 +722,12 @@ export class CollectionSchemaViewChrome extends React.Component<CollectionMenuPr @observer export class CollectionTreeViewChrome extends React.Component<CollectionMenuProps> { + get document() { return this.props.docView.props.Document; } get sortAscending() { - return this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldKey + "-sortAscending"]; + return this.document[this.props.fieldKey + "-sortAscending"]; } set sortAscending(value) { - this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldKey + "-sortAscending"] = value; + this.document[this.props.fieldKey + "-sortAscending"] = value; } @computed private get ascending() { return Cast(this.sortAscending, "boolean", null); @@ -669,15 +758,16 @@ export class CollectionTreeViewChrome extends React.Component<CollectionMenuProp // Enter scroll speed for 3D Carousel @observer export class Collection3DCarouselViewChrome extends React.Component<CollectionMenuProps> { + get document() { return this.props.docView.props.Document; } @computed get scrollSpeed() { - return this.props.CollectionView.props.Document._autoScrollSpeed; + return this.document._autoScrollSpeed; } @action setValue = (value: string) => { const numValue = Number(StrCast(value)); if (numValue > 0) { - this.props.CollectionView.props.Document._autoScrollSpeed = numValue; + this.document._autoScrollSpeed = numValue; return true; } return false; @@ -714,13 +804,14 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp private decrementLimitReached: boolean = false; @observable private resize = false; private resizeListenerDisposer: Opt<Lambda>; + get document() { return this.props.docView.props.Document; } componentDidMount() { - runInAction(() => this.resize = this.props.CollectionView.props.PanelWidth() < 700); + runInAction(() => this.resize = this.props.docView.props.PanelWidth() < 700); // listener to reduce text on chrome resize (panel resize) - this.resizeListenerDisposer = computed(() => this.props.CollectionView.props.PanelWidth()).observe(({ newValue }) => { + this.resizeListenerDisposer = computed(() => this.props.docView.props.PanelWidth()).observe(({ newValue }) => { runInAction(() => this.resize = newValue < 700); }); } @@ -729,7 +820,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp this.resizeListenerDisposer?.(); } - get numCols() { return NumCast(this.props.CollectionView.props.Document.gridNumCols, 10); } + get numCols() { return NumCast(this.document.gridNumCols, 10); } /** * Sets the value of `numCols` on the grid's Document to the value entered. @@ -738,7 +829,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp onNumColsEnter = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter" || e.key === "Tab") { if (e.currentTarget.valueAsNumber > 0) { - this.props.CollectionView.props.Document.gridNumCols = e.currentTarget.valueAsNumber; + this.document.gridNumCols = e.currentTarget.valueAsNumber; } } @@ -750,8 +841,8 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp // @undoBatch // onRowHeightEnter = (e: React.KeyboardEvent<HTMLInputElement>) => { // if (e.key === "Enter" || e.key === "Tab") { - // if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { - // this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber; + // if (e.currentTarget.valueAsNumber > 0 && this.document.rowHeight as number !== e.currentTarget.valueAsNumber) { + // this.document.rowHeight = e.currentTarget.valueAsNumber; // } // } // } @@ -761,7 +852,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp */ @undoBatch toggleFlex = () => { - this.props.CollectionView.props.Document.gridFlex = !BoolCast(this.props.CollectionView.props.Document.gridFlex, true); + this.document.gridFlex = !BoolCast(this.document.gridFlex, true); } /** @@ -769,8 +860,8 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp */ onIncrementButtonClick = () => { this.clicked = true; - this.entered && (this.props.CollectionView.props.Document.gridNumCols as number)--; - undoBatch(() => this.props.CollectionView.props.Document.gridNumCols = this.numCols + 1)(); + this.entered && (this.document.gridNumCols as number)--; + undoBatch(() => this.document.gridNumCols = this.numCols + 1)(); this.entered = false; } @@ -780,8 +871,8 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp onDecrementButtonClick = () => { this.clicked = true; if (!this.decrementLimitReached) { - this.entered && (this.props.CollectionView.props.Document.gridNumCols as number)++; - undoBatch(() => this.props.CollectionView.props.Document.gridNumCols = this.numCols - 1)(); + this.entered && (this.document.gridNumCols as number)++; + undoBatch(() => this.document.gridNumCols = this.numCols - 1)(); } this.entered = false; } @@ -792,7 +883,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp incrementValue = () => { this.entered = true; if (!this.clicked && !this.decrementLimitReached) { - this.props.CollectionView.props.Document.gridNumCols = this.numCols + 1; + this.document.gridNumCols = this.numCols + 1; } this.decrementLimitReached = false; this.clicked = false; @@ -805,7 +896,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp this.entered = true; if (!this.clicked) { if (this.numCols !== 1) { - this.props.CollectionView.props.Document.gridNumCols = this.numCols - 1; + this.document.gridNumCols = this.numCols - 1; } else { this.decrementLimitReached = true; @@ -819,7 +910,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp * Toggles the value of preventCollision */ toggleCollisions = () => { - this.props.CollectionView.props.Document.gridPreventCollision = !this.props.CollectionView.props.Document.gridPreventCollision; + this.document.gridPreventCollision = !this.document.gridPreventCollision; } /** @@ -827,7 +918,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp */ changeCompactType = (e: React.ChangeEvent<HTMLSelectElement>) => { // need to change startCompaction so that this operation will be undoable. - this.props.CollectionView.props.Document.gridStartCompaction = e.target.selectedOptions[0].value; + this.document.gridStartCompaction = e.target.selectedOptions[0].value; } render() { @@ -845,10 +936,10 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp <span className="grid-icon"> <FontAwesomeIcon icon="text-height" size="1x" /> </span> - <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.rowHeight as string} onKeyDown={this.onRowHeightEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> + <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.document.rowHeight as string} onKeyDown={this.onRowHeightEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> </span> */} <span className="grid-control" style={{ width: this.resize ? "12%" : "20%" }}> - <input type="checkbox" style={{ marginRight: 5 }} onChange={this.toggleCollisions} checked={!this.props.CollectionView.props.Document.gridPreventCollision} /> + <input type="checkbox" style={{ marginRight: 5 }} onChange={this.toggleCollisions} checked={!this.document.gridPreventCollision} /> <label className="flexLabel">{this.resize ? "Coll" : "Collisions"}</label> </span> @@ -856,7 +947,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp style={{ marginRight: 5 }} onPointerDown={stopPropagation} onChange={this.changeCompactType} - value={StrCast(this.props.CollectionView.props.Document.gridStartCompaction, StrCast(this.props.CollectionView.props.Document.gridCompaction))}> + value={StrCast(this.document.gridStartCompaction, StrCast(this.document.gridCompaction))}> {["vertical", "horizontal", "none"].map(type => <option className="collectionGridViewChrome-viewOption" onPointerDown={stopPropagation} @@ -868,11 +959,11 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp <span className="grid-control" style={{ width: this.resize ? "12%" : "20%" }}> <input style={{ marginRight: 5 }} type="checkbox" onChange={this.toggleFlex} - checked={BoolCast(this.props.CollectionView.props.Document.gridFlex, true)} /> + checked={BoolCast(this.document.gridFlex, true)} /> <label className="flexLabel">{this.resize ? "Flex" : "Flexible"}</label> </span> - <button onClick={() => this.props.CollectionView.props.Document.gridResetLayout = true}> + <button onClick={() => this.document.gridResetLayout = true}> {!this.resize ? "Reset" : <FontAwesomeIcon icon="redo-alt" size="1x" />} </button> diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx index 22a3877ab..2e4055256 100644 --- a/src/client/views/collections/CollectionPileView.tsx +++ b/src/client/views/collections/CollectionPileView.tsx @@ -39,7 +39,15 @@ export class CollectionPileView extends CollectionSubView(doc => doc) { @computed get contents() { return <div className="collectionPileView-innards" style={{ pointerEvents: this.layoutEngine() === "starburst" ? undefined : "none" }} > - <CollectionFreeFormView {...this.props} layoutEngine={this.layoutEngine} /> + <CollectionFreeFormView {...this.props} layoutEngine={this.layoutEngine} + addDocument={(doc: Doc | Doc[]) => { + (doc instanceof Doc ? [doc] : doc).map((d) => DocUtils.iconify(d)); + return this.props.addDocument(doc); + }} + moveDocument={(doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => { + (doc instanceof Doc ? [doc] : doc).map((d) => Doc.deiconifyView(d)); + return this.props.moveDocument(doc, targetCollection, addDoc); + }} /> </div>; } toggleStarburst = action(() => { @@ -72,24 +80,13 @@ export class CollectionPileView extends CollectionSubView(doc => doc) { } }); - @undoBatch - @action - onInternalDrop = (e: Event, de: DragManager.DropEvent) => { - if (super.onInternalDrop(e, de)) { - if (de.complete.docDragData) { - DocUtils.pileup(this.childDocs); - } - } - return true; - } - _undoBatch: UndoManager.Batch | undefined; pointerDown = (e: React.PointerEvent) => { let dist = 0; SnappingManager.SetIsDragging(true); // this._lastTap should be set to 0, and this._doubleTap should be set to false in the class header setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => { - if (this.layoutEngine() === "pass" && this.childDocs.length && this.props.isSelected(true)) { + if (this.layoutEngine() === "pass" && this.childDocs.length && e.shiftKey) { dist += Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1]); if (dist > 100) { if (!this._undoBatch) { @@ -110,11 +107,11 @@ export class CollectionPileView extends CollectionSubView(doc => doc) { if (!this.childDocs.length) { this.props.ContainingCollectionView?.removeDocument(this.props.Document); } - }, emptyFunction, false, this.layoutEngine() === "pass" && this.props.isSelected(true)); // this sets _doubleTap + }, emptyFunction, e.shiftKey && this.layoutEngine() === "pass", this.layoutEngine() === "pass" && e.shiftKey); // this sets _doubleTap } onClick = (e: React.MouseEvent) => { - if (e.button === 0 && this._doubleTap) { + if (e.button === 0) {//} && this._doubleTap) { SelectionManager.DeselectAll(); this.toggleStarburst(); e.stopPropagation(); @@ -124,7 +121,6 @@ export class CollectionPileView extends CollectionSubView(doc => doc) { render() { return <div className={"collectionPileView"} onClick={this.onClick} onPointerDown={this.pointerDown} - ref={this.createDashEventsTarget} style={{ width: this.props.PanelWidth(), height: `calc(100% - ${this.props.Document._chromeStatus === "enabled" ? 51 : 0}px)` }}> {this.contents} </div>; diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index dd4c34885..0332b4bf2 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -208,7 +208,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) NativeHeight={returnZero} NativeWidth={returnZero} fitToBox={false} - dontRegisterView={this.props.dontRegisterView} + dontRegisterView={BoolCast(this.layoutDoc.dontRegisterChildViews, this.props.dontRegisterView)} rootSelected={this.rootSelected} dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType} onClick={this.onChildClickHandler} diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 8480a56cc..9f78c15eb 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -55,17 +55,17 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: class CollectionSubView extends DocComponent<X & SubCollectionViewProps, T>(schemaCtor) { private dropDisposer?: DragManager.DragDropDisposer; private gestureDisposer?: GestureUtils.GestureEventDisposer; - protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; + protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; protected _mainCont?: HTMLDivElement; protected createDashEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view this.dropDisposer?.(); this.gestureDisposer?.(); - this.multiTouchDisposer?.(); + this._multiTouchDisposer?.(); if (ele) { this._mainCont = ele; this.dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc, this.onInternalPreDrop.bind(this)); this.gestureDisposer = GestureUtils.MakeGestureTarget(ele, this.onGesture.bind(this)); - this.multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(ele, this.onTouchStart.bind(this)); + this._multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(ele, this.onTouchStart.bind(this)); } } protected CreateDropTarget(ele: HTMLDivElement) { //used in schema view @@ -74,7 +74,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: componentWillUnmount() { this.gestureDisposer?.(); - this.multiTouchDisposer?.(); + this._multiTouchDisposer?.(); } @computed get dataDoc() { @@ -127,7 +127,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: const docs = rawdocs.filter(d => !(d instanceof Promise)).map(d => d as Doc); const docFilters = this.docFilters(); - const viewSpecScript = Cast(this.props.Document.viewSpecScript, ScriptField); + const viewSpecScript = ScriptCast(this.props.Document.viewSpecScript); const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []); return this.props.Document.dontRegisterView ? docs : DocUtils.FilterDocs(docs, docFilters, docRangeFilters, viewSpecScript); @@ -195,7 +195,11 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d); const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d); const res = addedDocs.length ? this.addDocument(addedDocs) : true; - added = movedDocs.length ? docDragData.moveDocument(movedDocs, this.props.Document, Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document) || de.embedKey || !this.props.isAnnotationOverlay ? this.addDocument : returnFalse) : res; + if (movedDocs.length) { + const canAdd = this.props.Document._viewType === CollectionViewType.Pile || de.embedKey || !this.props.isAnnotationOverlay || + Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document); + added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.addDocument : returnFalse); + } else added = res; } else { added = this.addDocument(docDragData.droppedDocuments); } @@ -292,7 +296,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: const reg = new RegExp(Utils.prepend(""), "g"); const modHtml = srcUrl ? html.replace(reg, srcUrl) : html; const htmlDoc = Docs.Create.HtmlDocument(modHtml, { ...options, title: "-web page-", _width: 300, _height: 300 }); - Doc.GetProto(htmlDoc)["data-text"] = text; + Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc)["text"] = text; this.props.addDocument(htmlDoc); if (srcWeb) { const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")[0].contentDocument?.getSelection()?.focusNode as any); @@ -300,7 +304,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: const rect = "getBoundingClientRect" in focusNode ? focusNode.getBoundingClientRect() : focusNode?.parentElement.getBoundingClientRect(); const x = (rect?.x || 0); const y = NumCast(srcWeb._scrollTop) + (rect?.y || 0); - const anchor = Docs.Create.FreeformDocument([], { _backgroundColor: "transparent", _width: 25, _height: 25, x, y, annotationOn: srcWeb }); + const anchor = Docs.Create.FreeformDocument([], { _backgroundColor: "transparent", _width: 75, _height: 40, x, y, annotationOn: srcWeb }); anchor.context = srcWeb; const key = Doc.LayoutFieldKey(srcWeb); Doc.AddDocToList(srcWeb, key + "-annotations", anchor); @@ -430,7 +434,7 @@ import { Docs, DocumentOptions, DocUtils } from "../../documents/Documents"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { DocumentType } from "../../documents/DocumentTypes"; import { FormattedTextBox, GoogleRef } from "../nodes/formattedText/FormattedTextBox"; -import { CollectionView } from "./CollectionView"; +import { CollectionView, CollectionViewType } from "./CollectionView"; import { SelectionManager } from "../../util/SelectionManager"; import { OverlayView } from "../OverlayView"; import { setTimeout } from "timers"; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 651357e5d..705871a6f 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -100,8 +100,8 @@ class TreeView extends React.Component<TreeViewProps> { childDocList(field: string) { const layout = Doc.LayoutField(this.doc) instanceof Doc ? Doc.LayoutField(this.doc) as Doc : undefined; return ((this.props.dataDoc ? DocListCast(this.props.dataDoc[field]) : undefined) || // if there's a data doc for an expanded template, use it's data field - (layout ? Cast(layout[field], listSpec(Doc)) : undefined) || // else if there's a layout doc, display it's fields - Cast(this.doc[field], listSpec(Doc))) as Doc[]; // otherwise use the document's data field + (layout ? DocListCast(layout[field]) : undefined) || // else if there's a layout doc, display it's fields + DocListCast(this.doc[field])) as Doc[]; // otherwise use the document's data field } @computed get childDocs() { return this.childDocList(this.fieldKey); } @computed get childLinks() { return this.childDocList("links"); } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index e2f78d6f9..42d320308 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -8,7 +8,7 @@ import * as React from 'react'; import Lightbox from 'react-image-lightbox-with-rotate'; import 'react-image-lightbox-with-rotate/style.css'; // This only needs to be imported once in your app import { DateField } from '../../../fields/DateField'; -import { AclAddonly, AclReadonly, DataSym, Doc, DocListCast, Field, Opt, AclEdit, AclSym, AclPrivate } from '../../../fields/Doc'; +import { AclAddonly, AclReadonly, DataSym, Doc, DocListCast, Field, Opt, AclEdit, AclSym, AclPrivate, AclAdmin } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; @@ -17,7 +17,7 @@ import { listSpec } from '../../../fields/Schema'; import { ComputedField, ScriptField } from '../../../fields/ScriptField'; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; -import { TraceMobx, GetEffectiveAcl, getPlaygroundMode, distributeAcls } from '../../../fields/util'; +import { TraceMobx, GetEffectiveAcl, getPlaygroundMode, distributeAcls, SharingPermissions } from '../../../fields/util'; import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; @@ -27,12 +27,10 @@ import { InteractionUtils } from '../../util/InteractionUtils'; import { UndoManager } from '../../util/UndoManager'; import { ContextMenu } from "../ContextMenu"; import { FieldView, FieldViewProps } from '../nodes/FieldView'; -import { ScriptBox } from '../ScriptBox'; import { Touchable } from '../Touchable'; import { CollectionCarousel3DView } from './CollectionCarousel3DView'; import { CollectionCarouselView } from './CollectionCarouselView'; import { CollectionDockingView } from "./CollectionDockingView"; -import { AddCustomFreeFormLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import { CollectionGridView } from './collectionGrid/CollectionGridView'; import { CollectionLinearView } from './CollectionLinearView'; @@ -47,8 +45,7 @@ import { SubCollectionViewProps } from './CollectionSubView'; import { CollectionTimeView } from './CollectionTimeView'; import { CollectionTreeView } from "./CollectionTreeView"; import './CollectionView.scss'; -import CollectionMenu from './CollectionMenu'; -import { SharingPermissions } from '../../util/SharingManager'; +import { ContextMenuProps } from '../ContextMenuItem'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -105,13 +102,14 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus @observable private static _safeMode = false; public static SetSafeMode(safeMode: boolean) { this._safeMode = safeMode; } - protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; + protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; private AclMap = new Map<symbol, string>([ [AclPrivate, SharingPermissions.None], [AclReadonly, SharingPermissions.View], [AclAddonly, SharingPermissions.Add], - [AclEdit, SharingPermissions.Edit] + [AclEdit, SharingPermissions.Edit], + [AclAdmin, SharingPermissions.Admin] ]); get collectionViewType(): CollectionViewType | undefined { @@ -144,7 +142,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus const effectiveAcl = GetEffectiveAcl(this.props.Document); if (added.length) { - if (effectiveAcl === AclReadonly && !getPlaygroundMode()) { + if (effectiveAcl === AclPrivate || (effectiveAcl === AclReadonly && !getPlaygroundMode())) { return false; } else { @@ -191,7 +189,8 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus @action.bound removeDocument = (doc: any): boolean => { - if (GetEffectiveAcl(this.props.Document) === AclEdit || getPlaygroundMode()) { + const effectiveAcl = GetEffectiveAcl(this.props.Document); + if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin || getPlaygroundMode()) { const docs = doc instanceof Doc ? [doc] : doc as Doc[]; const targetDataDoc = this.props.Document[DataSym]; const value = DocListCast(targetDataDoc[this.props.fieldKey]); @@ -268,9 +267,8 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus setupViewTypes(category: string, func: (viewType: CollectionViewType) => Doc, addExtras: boolean) { - const existingVm = ContextMenu.Instance.findByDescription(category); - const subItems = existingVm && "subitems" in existingVm ? existingVm.subitems : []; + const subItems: ContextMenuProps[] = []; subItems.push({ description: "Freeform", event: () => func(CollectionViewType.Freeform), icon: "signature" }); if (addExtras && CollectionView._safeMode) { ContextMenu.Instance.addItem({ description: "Test Freeform", event: () => func(CollectionViewType.Invalid), icon: "project-diagram" }); @@ -288,17 +286,18 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus subItems.push({ description: "Pivot/Time", event: () => func(CollectionViewType.Time), icon: "columns" }); subItems.push({ description: "Map", event: () => func(CollectionViewType.Map), icon: "globe-americas" }); subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "th-list" }); - if (addExtras && this.props.Document._viewType === CollectionViewType.Freeform) { - subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) }); - } addExtras && subItems.push({ description: "lightbox", event: action(() => this._isLightboxOpen = true), icon: "eye" }); - !existingVm && ContextMenu.Instance.addItem({ description: category, noexpand: true, subitems: subItems, icon: "eye" }); + + const existingVm = ContextMenu.Instance.findByDescription(category); + const catItems = existingVm && "subitems" in existingVm ? existingVm.subitems : []; + catItems.push({ description: "Add a Perspective...", addDivider: true, noexpand: true, subitems: subItems, icon: "eye" }); + !existingVm && ContextMenu.Instance.addItem({ description: category, subitems: catItems, icon: "eye" }); } onContextMenu = (e: React.MouseEvent): void => { const cm = ContextMenu.Instance; if (cm && !e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 - this.setupViewTypes("Add a Perspective...", vtype => { + this.setupViewTypes("UI Controls...", vtype => { const newRendition = Doc.MakeAlias(this.props.Document); newRendition._viewType = vtype; this.props.addDocTab(newRendition, "onRight"); @@ -572,7 +571,6 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus ChildLayoutTemplate: this.childLayoutTemplate, ChildLayoutString: this.childLayoutString, }; - setTimeout(action(() => this.props.isSelected(true) && (CollectionMenu.Instance.SelectedCollection = this)), 0); const boxShadow = Doc.UserDoc().renderStyle === "comic" || this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined : `${Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`; return (<div className={"collectionView"} onContextMenu={this.onContextMenu} @@ -587,7 +585,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus Utils.CorsProxy(Cast(d.data, ImageField)!.url.href) : Cast(d.data, ImageField)!.url.href : ""))} - {(!this.props.isSelected() || this.props.Document.hideFilterView) && !this.props.Document.forceActive ? (null) : + {(!this.props.isSelected() && !this.props.Document.forceActive) || this.props.Document.hideFilterView ? (null) : <div className="collectionView-filterDragger" title="library View Dragger" onPointerDown={this.onPointerDown} style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "55%" }} /> } diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx index 649406e6c..8c0b8de9d 100644 --- a/src/client/views/collections/ParentDocumentSelector.tsx +++ b/src/client/views/collections/ParentDocumentSelector.tsx @@ -40,15 +40,21 @@ export class SelectorContextMenu extends React.Component<SelectorProps> { this._reaction?.(); } async fetchDocuments() { - const aliases = (await SearchUtil.GetAliasesOfDocument(this.props.Document)).filter(doc => doc !== this.props.Document); - const { docs } = await SearchUtil.Search("", true, { fq: `data_l:"${this.props.Document[Id]}"` }); - const map: Map<Doc, Doc> = new Map; - const allDocs = await Promise.all(aliases.map(doc => SearchUtil.Search("", true, { fq: `data_l:"${doc[Id]}"` }).then(result => result.docs))); - allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index]))); - docs.forEach(doc => map.delete(doc)); + const aliases = (await SearchUtil.GetAliasesOfDocument(this.props.Document)); + const containerProtoSets = await Promise.all(aliases.map(async alias => + await Promise.all((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs))); + const containerProtos = containerProtoSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>()); + const containerSets = await Promise.all(Array.from(containerProtos.keys()).map(async container => { + return (await SearchUtil.GetAliasesOfDocument(container)); + })); + const containers = containerSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>()); + const doclayoutSets = await Promise.all(Array.from(containers.keys()).map(async (dp) => { + return (await SearchUtil.GetAliasesOfDocument(dp)); + })); + const doclayouts = Array.from(doclayoutSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>()).keys()); runInAction(() => { - this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.Document })); - this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target })); + this._docs = doclayouts.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.Document })); + this._otherDocs = []; }); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx index a4fd5384f..b00074cc6 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx @@ -142,9 +142,16 @@ export function computePivotLayout( const fieldKey = "data"; const pivotColumnGroups = new Map<FieldResult<Field>, PivotColumn>(); + let nonNumbers = 0; const pivotFieldKey = toLabel(pivotDoc._pivotField); childPairs.map(pair => { - const lval = Cast(pair.layout[pivotFieldKey], listSpec("string"), null); + const lval = pivotFieldKey === "#" ? Array.from(Object.keys(Doc.GetProto(pair.layout))).filter(k => k.startsWith("#")).map(k => k.substring(1)) : + Cast(pair.layout[pivotFieldKey], listSpec("string"), null); + + const num = toNumber(pair.layout[pivotFieldKey]); + if (num === undefined || Number.isNaN(num)) { + nonNumbers++; + } const val = Field.toString(pair.layout[pivotFieldKey] as Field); if (lval) { lval.forEach((val, i) => { @@ -168,13 +175,6 @@ export function computePivotLayout( }); } }); - let nonNumbers = 0; - childPairs.map(pair => { - const num = toNumber(pair.layout[pivotFieldKey]); - if (num === undefined || Number.isNaN(num)) { - nonNumbers++; - } - }); const pivotNumbers = nonNumbers / childPairs.length < .1; if (pivotColumnGroups.size > 10) { const arrayofKeys = Array.from(pivotColumnGroups.keys()); @@ -434,27 +434,3 @@ function normalizeResults( payload: gname.payload }))); } - -export function AddCustomFreeFormLayout(doc: Doc, dataKey: string): () => void { - return () => { - const addOverlay = (key: "arrangeScript" | "arrangeInit", options: OverlayElementOptions, params?: Record<string, string>, requiredType?: string) => { - let overlayDisposer: () => void = emptyFunction; // filled in below after we have a reference to the scriptingBox - const scriptField = Cast(doc[key], ScriptField); - const scriptingBox = <ScriptBox initialText={scriptField && scriptField.script.originalScript} - // tslint:disable-next-line: no-unnecessary-callback-wrapper - onCancel={() => overlayDisposer()} // don't get rid of the function wrapper-- we don't want to use the current value of overlayDiposer, but the one set below - onSave={(text, onError) => { - const script = CompileScript(text, { params, requiredType, typecheck: false }); - if (!script.compiled) { - onError(script.errors.map(error => error.messageText).join("\n")); - } else { - doc[key] = new ScriptField(script); - overlayDisposer(); - } - }} />; - overlayDisposer = OverlayView.Instance.addWindow(scriptingBox, options); - }; - addOverlay("arrangeInit", { x: 400, y: 100, width: 400, height: 300, title: "Layout Initialization" }, { collection: "Doc", docs: "Doc[]" }, undefined); - addOverlay("arrangeScript", { x: 400, y: 500, width: 400, height: 300, title: "Layout Script" }, { doc: "Doc", index: "number", collection: "Doc", state: "any", docs: "Doc[]" }, "{x: number, y: number, width?: number, height?: number}"); - }; -} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 979b21321..57336131a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -57,7 +57,6 @@ export const panZoomSchema = createSchema({ currentTimecode: "number", displayTimecode: "number", currentFrame: "number", - arrangeScript: ScriptField, arrangeInit: ScriptField, useClusters: "boolean", fitToBox: "boolean", @@ -892,7 +891,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P this.props.focus(doc); } else { const contextHgt = Doc.AreProtosEqual(annotOn, this.props.Document) && this.props.VisibleHeight ? this.props.VisibleHeight() : NumCast(annotOn._height); - const offset = annotOn && (contextHgt / 2 * 96 / 72); + const offset = annotOn && (contextHgt / 2); this.props.Document._scrollY = NumCast(doc.y) - offset; } @@ -944,7 +943,11 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P parentActive = (outsideReaction: boolean) => this.props.active(outsideReaction) || this.backgroundActive ? true : false; getChildDocumentViewProps(childLayout: Doc, childData?: Doc): DocumentViewProps { return { - ...this.props, + addDocument: this.props.addDocument, + removeDocument: this.props.removeDocument, + moveDocument: this.props.moveDocument, + pinToPres: this.props.pinToPres, + whenActiveChanged: this.props.whenActiveChanged, NativeHeight: returnZero, NativeWidth: returnZero, fitToBox: false, @@ -1001,10 +1004,6 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P return this.props.addDocTab(doc, where); }); getCalculatedPositions(params: { pair: { layout: Doc, data?: Doc }, index: number, collection: Doc, docs: Doc[], state: any }): PoolData { - const result = this.Document.arrangeScript?.script.run(params, console.log); - if (result?.success) { - return { x: 0, y: 0, transition: "transform 1s", ...result, pair: params.pair, replica: "" }; - } const layoutDoc = Doc.Layout(params.pair.layout); const { x, y, opacity } = this.Document.currentFrame === undefined ? params.pair.layout : CollectionFreeFormDocumentView.getValues(params.pair.layout, this.Document.currentFrame || 0); @@ -1145,7 +1144,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P @action componentDidMount() { super.componentDidMount?.(); - this._layoutComputeReaction = reaction(() => this.doLayoutComputation, + this._layoutComputeReaction = reaction(() => { TraceMobx(); return this.doLayoutComputation }, (elements) => this._layoutElements = elements || [], { fireImmediately: true, name: "doLayout" }); @@ -1243,11 +1242,11 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" }); !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); - const viewctrls = ContextMenu.Instance.findByDescription("View Controls..."); + const viewctrls = ContextMenu.Instance.findByDescription("UI Controls..."); const viewCtrlItems = viewctrls && "subitems" in viewctrls ? viewctrls.subitems : []; viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" }); viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }); - !viewctrls && ContextMenu.Instance.addItem({ description: "View Controls...", subitems: viewCtrlItems, icon: "eye" }); + !viewctrls && ContextMenu.Instance.addItem({ description: "UI Controls...", subitems: viewCtrlItems, icon: "eye" }); const options = ContextMenu.Instance.findByDescription("Options..."); const optionItems = options && "subitems" in options ? options.subitems : []; diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss index 88876471c..010beb836 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss @@ -24,11 +24,13 @@ .formatShapePane-inputBtn { width: inherit; - position: absolute; + position: absolute; } .sketch-picker { background: #323232; + width: 160px !important; + height: 80% !important; .flexbox-fit { background: #323232; diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 4e328d838..ddc282e57 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -12,6 +12,8 @@ import { SelectionManager } from "../../../util/SelectionManager"; import AntimodeMenu from "../../AntimodeMenu"; import "./FormatShapePane.scss"; import { undoBatch } from "../../../util/UndoManager"; +import { ColorState, SketchPicker } from 'react-color'; +import { DocumentView } from "../../../views/nodes/DocumentView" @observer export default class FormatShapePane extends AntimodeMenu { @@ -20,14 +22,16 @@ export default class FormatShapePane extends AntimodeMenu { private _lastFill = "#D0021B"; private _lastLine = "#D0021B"; private _lastDash = "2"; - private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]; private _mode = ["fill-drip", "ruler-combined"]; - @observable private _subOpen = [false, false, false, false]; + @observable private _subOpen = [false, false]; @observable private _currMode = "fill-drip"; - @observable private _lock = false; + @observable _lock = false; @observable private _fillBtn = false; @observable private _lineBtn = false; + @observable _controlBtn = false; + @observable private _controlPoints: { X: number, Y: number }[] = []; + @observable _currPoint = -1; getField(key: string) { return this.selectedInk?.reduce((p, i) => @@ -101,19 +105,58 @@ export default class FormatShapePane extends AntimodeMenu { upDownButtons = (dirs: string, field: string) => { switch (field) { case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break; + // case "rot": this.selectedInk?.forEach(i => i.rootDoc.rotation = NumCast(i.rootDoc.rotation) + (dirs === "up" ? 0.1 : -0.1)); break; case "Xps": this.selectedInk?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break; case "Yps": this.selectedInk?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break; case "stk": this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break; case "wid": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + //redraw points const oldWidth = NumCast(i.rootDoc._width); + const oldHeight = NumCast(i.rootDoc._height); + const oldX = NumCast(i.rootDoc.x); + const oldY = NumCast(i.rootDoc.y); i.rootDoc._width = oldWidth + (dirs === "up" ? 10 : - 10); this._lock && (i.rootDoc._height = (i.rootDoc._width / oldWidth * NumCast(i.rootDoc._height))); + const doc = Document(i.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; + const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } }); break; case "hgt": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + const oldWidth = NumCast(i.rootDoc._width); const oldHeight = NumCast(i.rootDoc._height); - i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10); + const oldX = NumCast(i.rootDoc.x); + const oldY = NumCast(i.rootDoc.y); i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10); this._lock && (i.rootDoc._width = (i.rootDoc._height / oldHeight * NumCast(i.rootDoc._width))); + const doc = Document(i.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; + const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } }); break; } @@ -121,12 +164,11 @@ export default class FormatShapePane extends AntimodeMenu { @undoBatch @action - rotate = (degrees: number) => { - this.selectedInk?.forEach(action(inkView => { + rotate = (angle: number) => { + const _centerPoints: { X: number, Y: number }[] = []; + SelectionManager.SelectedDocuments().forEach(action(inkView => { const doc = Document(inkView.rootDoc); if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { - const angle = Number(degrees) - Number(doc.rotation); - doc.rotation = Number(degrees); const ink = Cast(doc.data, InkField)?.inkData; if (ink) { const xs = ink.map(p => p.X); @@ -135,143 +177,280 @@ export default class FormatShapePane extends AntimodeMenu { const top = Math.min(...ys); const right = Math.max(...xs); const bottom = Math.max(...ys); - const _centerPoints: { X: number, Y: number }[] = []; _centerPoints.push({ X: left, Y: top }); + } + } + })); + + var index = 0; + SelectionManager.SelectedDocuments().forEach(action(inkView => { + const doc = Document(inkView.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + doc.rotation = Number(doc.rotation) + Number(angle); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { const newPoints: { X: number, Y: number }[] = []; for (var i = 0; i < ink.length; i++) { - const newX = Math.cos(angle) * (ink[i].X - _centerPoints[0].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].X; - const newY = Math.sin(angle) * (ink[i].X - _centerPoints[0].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].Y; + const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y; newPoints.push({ X: newX, Y: newY }); } doc.data = new InkField(newPoints); - const xs2 = newPoints.map(p => p.X); - const ys2 = newPoints.map(p => p.Y); - const left2 = Math.min(...xs2); - const top2 = Math.min(...ys2); - const right2 = Math.max(...xs2); - const bottom2 = Math.max(...ys2); - doc._height = (bottom2 - top2) * inkView.props.ScreenToLocalTransform().Scale; - doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; + const xs = newPoints.map(p => p.X); + const ys = newPoints.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + const right = Math.max(...xs); + const bottom = Math.max(...ys); + + doc._height = (bottom - top); + doc._width = (right - left); } + index++; } })); } + @undoBatch + @action + control = (xDiff: number, yDiff: number, controlNum: number) => { + this.selectedInk?.forEach(action(inkView => { + if (this.selectedInk?.length === 1) { + const doc = Document(inkView.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + + const newPoints: { X: number, Y: number }[] = []; + const order = controlNum % 4; + for (var i = 0; i < ink.length; i++) { + if (controlNum === i || + (order === 0 && i === controlNum + 1) || + (order === 0 && controlNum !== 0 && i === controlNum - 2) || + (order === 0 && controlNum !== 0 && i === controlNum - 1) || + (order === 3 && i === controlNum - 1) || + (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 1) || + (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2) + || ((ink[0].X === ink[ink.length - 1].X) && (ink[0].Y === ink[ink.length - 1].Y) && (i === 0 || i === ink.length - 1) && (controlNum === 0 || controlNum === ink.length - 1)) + ) { + newPoints.push({ X: ink[i].X - (xDiff * inkView.props.ScreenToLocalTransform().Scale), Y: ink[i].Y - (yDiff * inkView.props.ScreenToLocalTransform().Scale) }); + } + else { + newPoints.push({ X: ink[i].X, Y: ink[i].Y }); + } + } + const oldx = doc.x; + const oldy = doc.y; + const xs = ink.map(p => p.X); + const ys = ink.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + doc.data = new InkField(newPoints); + const xs2 = newPoints.map(p => p.X); + const ys2 = newPoints.map(p => p.Y); + const left2 = Math.min(...xs2); + const top2 = Math.min(...ys2); + const right2 = Math.max(...xs2); + const bottom2 = Math.max(...ys2); + doc._height = (bottom2 - top2); + doc._width = (right2 - left2); + //if points move out of bounds - colorPicker(setter: (color: string) => {}) { - return <div className="btn-group-palette" key="colorpicker" > - {this._palette.map(color => - <button className="antimodeMenu-button" key={color} onPointerDown={undoBatch(action(() => setter(color)))} style={{ zIndex: 1001, position: "relative" }}> - <div className="color-previewII" style={{ backgroundColor: color }} /> - </button>)} + doc.x = oldx - (left - left2); + doc.y = oldy - (top - top2); + + } + } + } + })); + } + + @undoBatch + @action + switchStk = (color: ColorState) => { + const val = String(color.hex); + this.colorStk = val; + return true; + } + + @undoBatch + @action + switchFil = (color: ColorState) => { + const val = String(color.hex); + this.colorFil = val; + return true; + } + + + colorPicker(setter: (color: string) => {}, type: string) { + return <div className="btn-group-palette" key="colorpicker" style={{ width: 160, margin: 10 }}> + <SketchPicker onChange={type === "stk" ? this.switchStk : this.switchFil} presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']} + color={type === "stk" ? this.colorStk : this.colorFil} /> </div>; } inputBox = (key: string, value: any, setter: (val: string) => {}) => { return <> - <input style={{ color: "black", width: 80, position: "absolute", right: 20 }} + <input style={{ color: "black", width: 40, position: "absolute", right: 20 }} type="text" value={value} - onChange={e => setter(e.target.value)} + onChange={undoBatch(action((e) => setter(e.target.value)))} autoFocus /> - <button className="antiMenu-Buttonup" key="up" onPointerDown={undoBatch(action(() => this.upDownButtons("up", key)))}> + <button className="antiMenu-Buttonup" key="up1" onPointerDown={undoBatch(action(() => this.upDownButtons("up", key)))}> ˄ </button> <br /> - <button className="antiMenu-Buttonup" key="down" onPointerDown={undoBatch(action(() => this.upDownButtons("down", key)))} style={{ marginTop: -8 }}> + <button className="antiMenu-Buttonup" key="down1" onPointerDown={undoBatch(action(() => this.upDownButtons("down", key)))} style={{ marginTop: -8 }}> ˅ </button> </>; } + inputBoxDuo = (key: string, value: any, setter: (val: string) => {}, title1: string, key2: string, value2: any, setter2: (val: string) => {}, title2: string) => { + return <> + {title1} + <p style={{ marginTop: -20, right: 70, position: "absolute" }}>{title2}</p> + + <input style={{ color: "black", width: 40, position: "absolute", right: 130 }} + type="text" value={value} + onChange={e => setter(e.target.value)} + autoFocus /> + <button className="antiMenu-Buttonup" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons("up", key)))} style={{ right: 110 }}> + ˄ + </button> + <button className="antiMenu-Buttonup" key="down2" onPointerDown={undoBatch(action(() => this.upDownButtons("down", key)))} style={{ marginTop: 12, right: 110 }}> + ˅ + </button> + {title2 === "" ? "" : <> + <input style={{ color: "black", width: 40, position: "absolute", right: 20 }} + type="text" value={value2} + onChange={e => setter2(e.target.value)} + autoFocus /> + <button className="antiMenu-Buttonup" key="up3" onPointerDown={undoBatch(action(() => this.upDownButtons("up", key2)))}> + ˄ + </button> + <br /> + <button className="antiMenu-Buttonup" key="down3" onPointerDown={undoBatch(action(() => this.upDownButtons("down", key2)))} style={{ marginTop: -8 }}> + ˅ + </button></>} + </>; + } + + colorButton(value: string, setter: () => {}) { return <> - <button className="antimodeMenu-button" key="fill" onPointerDown={undoBatch(action(e => setter()))} style={{ position: "absolute", right: 80 }}> - <FontAwesomeIcon icon="fill-drip" size="lg" /> - <div className="color-previewI" style={{ backgroundColor: value ?? "121212" }} /> + <button className="antimodeMenu-button" key="color" onPointerDown={undoBatch(action(e => setter()))} style={{ position: "relative", marginTop: -5 }}> + <div className="color-previewII" style={{ backgroundColor: value ?? "121212" }} /> + {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -23, position: "fixed" }}>☒</p> : ""} + </button> + </>; + } + + controlPointsButton() { + return <> + <button className="antimodeMenu-button" title="Edit points" key="bezier" onPointerDown={action(() => this._controlBtn = this._controlBtn ? false : true)} style={{ position: "relative", marginTop: 10, backgroundColor: this._controlBtn ? "black" : "" }}> + <FontAwesomeIcon icon="bezier-curve" size="lg" /> + </button> + <button className="antimodeMenu-button" title="Lock ratio" key="ratio" onPointerDown={action(() => this._lock = this._lock ? false : true)} style={{ position: "relative", marginTop: 10, backgroundColor: this._lock ? "black" : "" }}> + <FontAwesomeIcon icon="lock" size="lg" /> + + </button> + <button className="antimodeMenu-button" key="rotate" title="Rotate 90˚" onPointerDown={action(() => this.rotate(Math.PI / 2))} style={{ position: "relative", marginTop: 10, fontSize: 15 }}> + ⟲ </button> <br /> <br /> </>; } - @computed get fillButton() { return this.colorButton(this.colorFil, () => this._fillBtn = !this._fillBtn); } - @computed get lineButton() { return this.colorButton(this.colorStk, () => this._lineBtn = !this._lineBtn); } + lockRatioButton() { + return <> + <button className="antimodeMenu-button" key="lock" onPointerDown={action(() => this._lock = this._lock ? false : true)} style={{ position: "absolute", right: 80, backgroundColor: this._lock ? "black" : "" }}> + {/* <FontAwesomeIcon icon="bezier-curve" size="lg" /> */} + <FontAwesomeIcon icon="lock" size="lg" /> + + </button> + <br /> <br /> + </>; + } - @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color); } - @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color); } + rotate90Button() { + return <> + <button className="antimodeMenu-button" key="rot" onPointerDown={action(() => this.rotate(Math.PI / 2))} style={{ position: "absolute", right: 80, }}> + {/* <FontAwesomeIcon icon="bezier-curve" size="lg" /> */} + ⟲ + + </button> + <br /> <br /> + </>; + } + @computed get fillButton() { return this.colorButton(this.colorFil, () => { this._fillBtn = !this._fillBtn; this._lineBtn = false; return true; }); } + @computed get lineButton() { return this.colorButton(this.colorStk, () => { this._lineBtn = !this._lineBtn; this._fillBtn = false; return true; }); } + + @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color, "fil"); } + @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color, "stk"); } @computed get stkInput() { return this.inputBox("stk", this.widthStk, (val: string) => this.widthStk = val); } - @computed get hgtInput() { return this.inputBox("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val); } + @computed get dashInput() { return this.inputBox("dsh", this.widthStk, (val: string) => this.widthStk = val); } + + @computed get hgtInput() { return this.inputBoxDuo("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val, "H:", "wid", this.shapeWid, (val: string) => this.shapeWid = val, "W:"); } @computed get widInput() { return this.inputBox("wid", this.shapeWid, (val: string) => this.shapeWid = val); } - @computed get rotInput() { return this.inputBox("rot", this.shapeRot, (val: string) => this.shapeRot = val); } - @computed get XpsInput() { return this.inputBox("Xps", this.shapeXps, (val: string) => this.shapeXps = val); } + @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); } + + @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); } - @computed get propertyGroupItems() { - const fillCheck = <div key="fill" style={{ display: this._subOpen[0] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> - <input className="formatShapePane-inputBtn" type="radio" checked={this.unFilled} onChange={undoBatch(action(() => this.unFilled = true))} /> - No Fill - <br /> - <input className="formatShapePane-inputBtn" type="radio" checked={this.solidFil} onChange={undoBatch(action(() => this.solidFil = true))} /> - Solid Fill - <br /> <br /> - {this.solidFil ? "Color" : ""} - {this.solidFil ? this.fillButton : ""} - {this._fillBtn && this.solidFil ? this.fillPicker : ""} - </div>; + @computed get controlPoints() { return this.controlPointsButton(); } + @computed get lockRatio() { return this.lockRatioButton(); } + @computed get rotate90() { return this.rotate90Button(); } - const markers = <> - <input key="markHead" className="formatShapePane-inputBtn" type="checkbox" checked={this.markHead !== ""} onChange={undoBatch(action(() => this.markHead = this.markHead ? "" : "arrow"))} /> - Arrow Head - <br /> - <input key="markTail" className="formatShapePane-inputBtn" type="checkbox" checked={this.markTail !== ""} onChange={undoBatch(action(() => this.markTail = this.markTail ? "" : "arrow"))} /> - Arrow End - <br /> - </>; - const lineCheck = <div key="lineCheck" style={{ display: this._subOpen[1] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> - <input className="formatShapePane-inputBtn" type="radio" checked={this.unStrokd} onChange={undoBatch(action(() => this.unStrokd = true))} /> - No Line - <br /> - <input className="formatShapePane-inputBtn" type="radio" checked={this.solidStk} onChange={undoBatch(action(() => this.solidStk = true))} /> - Solid Line - <br /> - <input className="formatShapePane-inputBtn" type="radio" checked={this.dashdStk ? true : false} onChange={undoBatch(action(() => this.dashdStk = "2"))} /> - Dash Line - <br /> - <br /> - {(this.solidStk || this.dashdStk) ? "Color" : ""} - {(this.solidStk || this.dashdStk) ? this.lineButton : ""} - {(this.solidStk || this.dashdStk) && this._lineBtn ? this.linePicker : ""} - <br /> + @computed get propertyGroupItems() { + const fillCheck = <div key="fill" style={{ display: (this._subOpen[0] && this.selectedInk && this.selectedInk.length >= 1) ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + Fill: + {this.fillButton} + <div style={{ float: "left", width: 100 }} > + Stroke: + {this.lineButton} + </div> + + {this._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""} + {this._fillBtn || this._lineBtn ? "" : <br />} {(this.solidStk || this.dashdStk) ? "Width" : ""} {(this.solidStk || this.dashdStk) ? this.stkInput : ""} - {(this.solidStk || this.dashdStk) ? <input type="range" defaultValue={Number(this.widthStk)} min={1} max={100} onChange={e => this.widthStk = e.target.value} /> : (null)} - <br /> <br /> - {(this.solidStk || this.dashdStk) ? markers : ""} - </div>; - const sizeCheck = <div key="sizeCheck" style={{ display: this._subOpen[2] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> - Height {this.hgtInput} - <br /> <br /> - Width {this.widInput} - <br /> <br /> - <input className="formatShapePane-inputBtn" style={{ right: 0 }} type="checkbox" checked={this._lock} onChange={undoBatch(action(() => this._lock = !this._lock))} /> - Lock Ratio - <br /> <br /> - Rotation {this.rotInput} - <br /> <br /> - </div>; - const positionCheck = <div key="posCheck" style={{ display: this._subOpen[3] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> - Horizontal {this.XpsInput} - <br /> <br /> - Vertical {this.YpsInput} - <br /> <br /> + {(this.solidStk || this.dashdStk) ? <input type="range" defaultValue={Number(this.widthStk)} min={1} max={100} onChange={undoBatch(action((e) => this.widthStk = e.target.value))} /> : (null)} + <br /> + {(this.solidStk || this.dashdStk) ? <> + <p style={{ position: "absolute", fontSize: 12 }}>Arrow Head</p> + <input key="markHead" className="formatShapePane-inputBtn" type="checkbox" checked={this.markHead !== ""} onChange={undoBatch(action(() => this.markHead = this.markHead ? "" : "arrow"))} style={{ position: "absolute", right: 110, width: 20 }} /> + <p style={{ position: "absolute", fontSize: 12, right: 30 }}>Arrow End</p> + <input key="markTail" className="formatShapePane-inputBtn" type="checkbox" checked={this.markTail !== ""} onChange={undoBatch(action(() => this.markTail = this.markTail ? "" : "arrow"))} style={{ position: "absolute", right: 0, width: 20 }} /> + <br /> + </> : ""} + Dash: <input key="markHead" className="formatShapePane-inputBtn" type="checkbox" checked={this.dashdStk === "2"} onChange={undoBatch(action(() => this.dashdStk = this.dashdStk === "2" ? "0" : "2"))} style={{ position: "absolute", right: 110, width: 20 }} /> + + + </div>; - const subMenus = this._currMode === "fill-drip" ? [`fill`, `line`] : [`size`, `position`]; - const menuItems = this._currMode === "fill-drip" ? [fillCheck, lineCheck] : [sizeCheck, positionCheck]; - const indexOffset = this._currMode === "fill-drip" ? 0 : 2; + + + const sizeCheck = + + <div key="sizeCheck" style={{ display: (this._subOpen[1] && this.selectedInk && this.selectedInk.length >= 1) ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + {this.controlPoints} + {this.hgtInput} + {this.XpsInput} + {this.rotInput} + + </div>; + + + const subMenus = this._currMode === "fill-drip" ? [`Appearance`, 'Transform'] : []; + const menuItems = this._currMode === "fill-drip" ? [fillCheck, sizeCheck] : []; + const indexOffset = 0; + return <div className="antimodeMenu-sub" key="submenu" style={{ position: "absolute", width: "inherit", top: 60 }}> {subMenus.map((subMenu, i) => <div key={subMenu} style={{ width: "inherit" }}> @@ -302,6 +481,7 @@ export default class FormatShapePane extends AntimodeMenu { } render() { - return this.getElementVert([this.closeBtn, this.propertyGroupBtn, this.propertyGroupItems]); + return this.getElementVert([this.closeBtn, + this.propertyGroupItems]); } }
\ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index aa9a3b4ae..764758eee 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -1,6 +1,6 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Doc, Opt, DocListCast, DataSym, AclEdit, AclAddonly } from "../../../../fields/Doc"; +import { Doc, Opt, DocListCast, DataSym, AclEdit, AclAddonly, AclAdmin } from "../../../../fields/Doc"; import { GetEffectiveAcl, getPlaygroundMode } from "../../../../fields/util"; import { InkData, InkField, InkTool } from "../../../../fields/InkField"; import { List } from "../../../../fields/List"; @@ -281,7 +281,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque this._downX = x; this._downY = y; const effectiveAcl = GetEffectiveAcl(this.props.Document); - if (effectiveAcl === AclEdit || effectiveAcl === AclAddonly || getPlaygroundMode()) PreviewCursor.Show(x, y, this.onKeyPress, this.props.addLiveTextDocument, this.props.getTransform, this.props.addDocument, this.props.nudge); + if ([AclAdmin, AclEdit, AclAddonly].includes(effectiveAcl) || getPlaygroundMode()) PreviewCursor.Show(x, y, this.onKeyPress, this.props.addLiveTextDocument, this.props.getTransform, this.props.addDocument, this.props.nudge); this.clearSelection(); } }); |