diff options
| -rw-r--r-- | src/client/util/DragManager.ts | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewChromes.scss | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewChromes.tsx | 68 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 2 |
5 files changed, 49 insertions, 27 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index a09d78a06..f4461d2f7 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -216,7 +216,7 @@ export namespace DragManager { // drag a button template and drop a new button export function StartButtonDrag(eles: HTMLElement[], script: string, title: string, vars: { [name: string]: Field }, params: string[], initialize: (button: Doc) => void, downX: number, downY: number, options?: DragOptions) { const finishDrag = (e: DragCompleteEvent) => { - const bd = Docs.Create.ButtonDocument({ _width: 150, _height: 50, title, dontSelect: true, onClick: ScriptField.MakeScript(script) }); + const bd = Docs.Create.ButtonDocument({ _width: 150, _height: 50, title, isButton: true, onClick: ScriptField.MakeScript(script) }); params.map(p => Object.keys(vars).indexOf(p) !== -1 && (Doc.GetProto(bd)[p] = new PrefetchProxy(vars[p] as Doc))); initialize?.(bd); bd.buttonParams = new List<string>(params); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 2d56f00d5..c74b9ad6d 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -9,7 +9,6 @@ import 'react-image-lightbox-with-rotate/style.css'; // This only needs to be im import { DateField } from '../../../new_fields/DateField'; import { Doc, DocListCast, DataSym } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; -import { listSpec } from '../../../new_fields/Schema'; import { BoolCast, Cast, StrCast, NumCast } from '../../../new_fields/Types'; import { ImageField } from '../../../new_fields/URLField'; import { TraceMobx } from '../../../new_fields/util'; @@ -76,6 +75,7 @@ export namespace CollectionViewType { ]); export const valueOf = (value: string) => stringMapping.get(value.toLowerCase()); + export const stringFor = (value: number) => Array.from(stringMapping.entries()).find(entry => entry[1] === value)[0]; } export interface CollectionRenderProps { diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 19a14976c..428897ac4 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -27,7 +27,6 @@ outline-color: black; border: none; padding: 12px 10px 11px 10px; - margin-left: 50px; } .collectionViewBaseChrome-viewPicker:active { @@ -62,7 +61,6 @@ // margin-top: 10px; } .collectionViewBaseChrome-template { - margin-left: 10px; display: grid; background: rgb(238, 238, 238); color:grey; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 689d3674f..5ab61645f 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -8,7 +8,7 @@ import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; import { ScriptField } from "../../../new_fields/ScriptField"; import { BoolCast, Cast, NumCast, StrCast } from "../../../new_fields/Types"; -import { Utils, emptyFunction } from "../../../Utils"; +import { Utils, emptyFunction, setupMoveUpEvents } from "../../../Utils"; import { DragManager } from "../../util/DragManager"; import { undoBatch } from "../../util/UndoManager"; import { EditableView } from "../EditableView"; @@ -82,6 +82,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro } private _picker: any; private _commandRef = React.createRef<HTMLInputElement>(); + private _viewRef = React.createRef<HTMLInputElement>(); private _autosuggestRef = React.createRef<Autosuggest>(); @observable private _currentKey: string = ""; @observable private _viewSpecsOpen: boolean = false; @@ -344,8 +345,21 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro private _startDragPosition: { x: number, y: number } = { x: 0, y: 0 }; private _sensitivity: number = 16; + dragViewDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, (e, down, delta) => { + const vtype = NumCast(this.props.CollectionView.props.Document._viewType) as CollectionViewType; + const c = { + params: ["target"], title: CollectionViewType.stringFor(vtype), + script: `this.target._viewType = ${NumCast(this.props.CollectionView.props.Document._viewType)}`, + immediate: (source: Doc[]) => Doc.setChildLayout(this.target, source?.[0]), + initialize: emptyFunction, + }; + DragManager.StartButtonDrag([this._viewRef.current!], c.script, c.title, + { target: this.props.CollectionView.props.Document }, c.params, c.initialize, e.clientX, e.clientY); + return true; + }, emptyFunction, emptyFunction); + } dragCommandDown = (e: React.PointerEvent) => { - this._startDragPosition = { x: e.clientX, y: e.clientY }; document.addEventListener("pointermove", this.dragPointerMove); document.addEventListener("pointerup", this.dragPointerUp); @@ -368,13 +382,17 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro dragPointerUp = (e: PointerEvent) => { document.removeEventListener("pointermove", this.dragPointerMove); document.removeEventListener("pointerup", this.dragPointerUp); - } render() { const collapsed = this.props.CollectionView.props.Document._chromeStatus !== "enabled"; return ( - <div className="collectionViewChrome-cont" style={{ top: collapsed ? -70 : 0, height: collapsed ? 0 : undefined }}> + <div className="collectionViewChrome-cont" style={{ + top: collapsed ? -70 : 0, height: collapsed ? 0 : undefined, + transform: collapsed ? "" : `scale(${Math.min(1, this.props.CollectionView.props.ScreenToLocalTransform().Scale)})`, + transformOrigin: "top left", + width: `${100 / Math.min(1, this.props.CollectionView.props.ScreenToLocalTransform().Scale)}%` + }}> <div className="collectionViewChrome" style={{ border: "unset" }}> <div className="collectionViewBaseChrome"> <button className="collectionViewBaseChrome-collapse" @@ -386,23 +404,29 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro }} title="Collapse collection chrome" onClick={this.toggleCollapse}> <FontAwesomeIcon icon="caret-up" size="2x" /> - </button> - <select - className="collectionViewBaseChrome-viewPicker" - onPointerDown={stopPropagation} - onChange={this.viewChanged} - style={{ display: collapsed ? "none" : undefined }} - value={NumCast(this.props.CollectionView.props.Document._viewType)}> - <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="1">Freeform</option> - <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="2">Schema</option> - <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="4">Tree</option> - <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking</option> - <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry</option> - <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="7">MultiCol</option> - <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="8">MultiRow</option> - <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="9">Pivot/Time</option> - <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="10">Carousel</option> - </select> + </button><div className="collectionViewBaseChrome-template" style={{ marginLeft: 50, display: collapsed ? "none" : undefined }}> + <div className="commandEntry-outerDiv" title="drop document to apply or drag to create button" ref={this._viewRef} onPointerDown={this.dragViewDown}> + <div className="commandEntry-drop"> + <FontAwesomeIcon icon="bullseye" size="2x"></FontAwesomeIcon> + </div> + <select + className="collectionViewBaseChrome-viewPicker" + onPointerDown={stopPropagation} + onChange={this.viewChanged} + style={{ display: collapsed ? "none" : undefined }} + value={NumCast(this.props.CollectionView.props.Document._viewType)}> + <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="1">Freeform</option> + <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="2">Schema</option> + <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="4">Tree</option> + <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking</option> + <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry</option> + <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="7">MultiCol</option> + <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="8">MultiRow</option> + <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="9">Pivot/Time</option> + <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="10">Carousel</option> + </select> + </div> + </div> <div className="collectionViewBaseChrome-viewSpecs" title="filter documents to show" style={{ display: collapsed ? "none" : "grid" }}> <div className="collectionViewBaseChrome-filterIcon" onPointerDown={this.openViewSpecs} > <FontAwesomeIcon icon="filter" size="2x" /> @@ -449,7 +473,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro <div className="collectionViewBaseChrome-template" ref={this.createDropTarget} style={{ display: collapsed ? "none" : undefined }}> <div className="commandEntry-outerDiv" title="drop document to apply or drag to create button" ref={this._commandRef} onPointerDown={this.dragCommandDown}> <div className="commandEntry-drop"> - <FontAwesomeIcon icon="bullseye" size="2x"></FontAwesomeIcon> + <FontAwesomeIcon icon="bullseye" size="2x" /> </div> <select className="collectionViewBaseChrome-cmdPicker" diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 3ccbbe2bf..c558a1da7 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -293,7 +293,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu UndoManager.RunInBatch(() => this.onClickHandler!.script.run({ this: this.Document.isTemplateForField && this.props.DataDoc ? this.props.DataDoc : this.props.Document, // try this.props.Document.expandedTemplate || this.props.Document containingCollection: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey - }, console.log) && !BoolCast(this.props.Document.dontSelect) && this.select(false), "on click"); + }, console.log) && !this.props.Document.dontSelect && !this.props.Document.isButton && this.select(false), "on click"); } else if (this.Document.type === DocumentType.BUTTON) { UndoManager.RunInBatch(() => ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", e.clientX, e.clientY), "on button click"); } else if (this.Document.isButton) { |