From b9483279f4a778e0cc997e304b4f0b87e6ec1e5d Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 15 Apr 2020 00:29:00 -0400 Subject: changed collection chrome filter to just open filter sidebar. fixed scrollbar to make sure that all datapoints are included. simplified filter documents to have only a datadocument. --- .../views/collections/CollectionTreeView.tsx | 11 +- src/client/views/collections/CollectionView.tsx | 20 +- .../views/collections/CollectionViewChromes.scss | 3 +- .../views/collections/CollectionViewChromes.tsx | 316 ++++++--------------- 4 files changed, 100 insertions(+), 250 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index b96ee4bc4..9ec8c4c5b 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -840,12 +840,11 @@ Scripting.addGlobal(function readFacetData(layoutDoc: Doc, dataDoc: Doc, dataKey } }); const facetValueDocSet = (nonNumbers / facetValues.length > .1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2))).map(facetValue => - Docs.Create.TextDocument("", { - title: facetValue.toString(), - treeViewChecked: ComputedField.MakeFunction("determineCheckedState(layoutDoc, facetHeader, facetValue)", - {}, - { layoutDoc, facetHeader, facetValue }) - })); + { const doc = new Doc(); + doc.title = facetValue.toString(); + doc.treeViewChecked = ComputedField.MakeFunction("determineCheckedState(layoutDoc, facetHeader, facetValue)",{},{ layoutDoc, facetHeader, facetValue }); + return doc; + }); return new List(facetValueDocSet); }); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 13a657800..831691f8c 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -45,8 +45,6 @@ import { ScriptField, ComputedField } from '../../../new_fields/ScriptField'; import { InteractionUtils } from '../../util/InteractionUtils'; import { ObjectField } from '../../../new_fields/ObjectField'; import CollectionMapView from './CollectionMapView'; -import { ClientUtils } from '../../util/ClientUtils'; -import { GoogleApiWrapper } from 'google-maps-react'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -279,7 +277,8 @@ export class CollectionView extends Touchable { onMovePrevRequest={action(() => this._curLightboxImg = (this._curLightboxImg + images.length - 1) % images.length)} onMoveNextRequest={action(() => this._curLightboxImg = (this._curLightboxImg + 1) % images.length)} />); } - @observable _facetWidth = 0; + get _facetWidth() { return NumCast(this.props.Document._facetWidth) } + set _facetWidth(value) { this.props.Document._facetWidth = value; } bodyPanelWidth = () => this.props.PanelWidth() - this.facetWidth(); getTransform = () => this.props.ScreenToLocalTransform().translate(-this.facetWidth(), 0); @@ -365,17 +364,22 @@ export class CollectionView extends Touchable { Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox newFacet.treeViewExpandedView = "layout"; newFacet.treeViewOpen = true; - newFacet[newFacetField + "-min"] = ranged === undefined ? minVal : ranged[0]; - newFacet[newFacetField + "-max"] = ranged === undefined ? maxVal : ranged[1]; - Doc.GetProto(newFacet)[newFacetField + "-minThumb"] = minVal; - Doc.GetProto(newFacet)[newFacetField + "-maxThumb"] = maxVal; + const extendedMinVal = minVal - Math.min(1, Math.abs(maxVal - minVal) * .05); + const extendedMaxVal = maxVal + Math.min(1, Math.abs(maxVal - minVal) * .05); + newFacet[newFacetField + "-min"] = ranged === undefined ? extendedMinVal : ranged[0]; + newFacet[newFacetField + "-max"] = ranged === undefined ? extendedMaxVal : ranged[1]; + Doc.GetProto(newFacet)[newFacetField + "-minThumb"] = extendedMinVal; + Doc.GetProto(newFacet)[newFacetField + "-maxThumb"] = extendedMaxVal; newFacet.target = this.props.Document; const scriptText = `setDocFilterRange(this.target, "${facetHeader}", range)`; newFacet.onThumbChanged = ScriptField.MakeScript(scriptText, { this: Doc.name, range: "number" }); Doc.AddDocToList(facetCollection, this.props.fieldKey + "-filter", newFacet); } else { - newFacet = Docs.Create.TreeDocument([], { title: facetHeader, treeViewOpen: true, isFacetFilter: true }); + newFacet = new Doc(); + newFacet.title = facetHeader; + newFacet.treeViewOpen = true; + newFacet.type = DocumentType.COL; const capturedVariables = { layoutDoc: this.props.Document, dataDoc: this.dataDoc }; newFacet.data = ComputedField.MakeFunction(`readFacetData(layoutDoc, dataDoc, "${this.props.fieldKey}", "${facetHeader}")`, {}, capturedVariables); } diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index a691b4805..9529ef525 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -67,10 +67,11 @@ color:grey; margin-top:auto; margin-bottom:auto; + margin-left: 5px; } .collectionViewBaseChrome-viewSpecs { - margin-left: 10px; + margin-left: 25px; display: grid; .collectionViewBaseChrome-filterIcon { diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 66f627083..cef85e148 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -6,7 +6,6 @@ import { Doc, DocListCast } from "../../../new_fields/Doc"; import { Id } from "../../../new_fields/FieldSymbols"; 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, setupMoveUpEvents } from "../../../Utils"; import { DragManager } from "../../util/DragManager"; @@ -16,8 +15,6 @@ import { COLLECTION_BORDER_WIDTH } from "../globalCssVariables.scss"; import { CollectionViewType } from "./CollectionView"; import { CollectionView } from "./CollectionView"; import "./CollectionViewChromes.scss"; -import * as Autosuggest from 'react-autosuggest'; -import KeyRestrictionRow from "./KeyRestrictionRow"; const datepicker = require('js-datepicker'); interface CollectionViewChromeProps { @@ -84,62 +81,10 @@ export class CollectionViewBaseChrome extends React.Component(); private _viewRef = React.createRef(); - private _autosuggestRef = React.createRef(); @observable private _currentKey: string = ""; - @observable private _viewSpecsOpen: boolean = false; - @observable private _dateWithinValue: string = ""; - @observable private _dateValue: Date | string = ""; - @observable private _keyRestrictions: [JSX.Element, string][] = []; - @observable private suggestions: string[] = []; - @computed private get filterValue() { return Cast(this.props.CollectionView.props.Document.viewSpecScript, ScriptField); } - - getFilters = (script: string) => { - const re: any = /(!)?\(\(\(doc\.(\w+)\s+&&\s+\(doc\.\w+\s+as\s+\w+\)\.includes\(\"(\w+)\"\)/g; - const arr: any[] = re.exec(script); - const toReturn: Filter[] = []; - if (arr !== null) { - const filter: Filter = { - key: arr[2], - value: arr[3], - contains: (arr[1] === "!") ? false : true, - }; - toReturn.push(filter); - script = script.replace(arr[0], ""); - if (re.exec(script) !== null) { - toReturn.push(...this.getFilters(script)); - } - else { return toReturn; } - } - return toReturn; - } - - addKeyRestrictions = (fields: Filter[]) => { - - if (fields.length !== 0) { - for (let i = 0; i < fields.length; i++) { - this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[i][1] = value)} />, ""]); - - } - if (this._keyRestrictions.length === 1) { - this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]); - } - } - else { - this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[0][1] = value)} />, ""]); - this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]); - } - } componentDidMount = () => { - - let fields: Filter[] = []; - if (this.filterValue) { - const string = this.filterValue.script.originalScript; - fields = this.getFilters(string); - } - runInAction(() => { - this.addKeyRestrictions(fields); // chrome status is one of disabled, collapsed, or visible. this determines initial state from document const chromeStatus = this.props.CollectionView.props.Document._chromeStatus; if (chromeStatus) { @@ -158,7 +103,7 @@ export class CollectionViewBaseChrome extends React.Component { //@ts-ignore - this.props.CollectionView.props.Document._viewType = e.target.selectedOptions[0].value; + this.document._viewType = e.target.selectedOptions[0].value; } commandChanged = (e: React.ChangeEvent) => { @@ -167,104 +112,93 @@ export class CollectionViewBaseChrome extends React.Component { - if (this._viewSpecsOpen) this.closeViewSpecs(); - else { - this._viewSpecsOpen = true; - - //@ts-ignore - if (!e.target?.classList[0]?.startsWith("qs")) { - this.closeDatePicker(); - } - - e.stopPropagation(); - document.removeEventListener("pointerdown", this.closeViewSpecs); - document.addEventListener("pointerdown", this.closeViewSpecs); - } + toggleViewSpecs = (e: React.SyntheticEvent) => { + this.document._facetWidth = this.document._facetWidth ? 0 : 200; + e.stopPropagation(); } @action closeViewSpecs = () => { - this._viewSpecsOpen = false; - document.removeEventListener("pointerdown", this.closeViewSpecs); - } - - @action - openDatePicker = (e: React.PointerEvent) => { - this.openViewSpecs(e); - if (this._picker) { - this._picker.alwaysShow = true; - this._picker.show(); - // TODO: calendar is offset when zoomed in/out - // this._picker.calendar.style.position = "absolute"; - // let transform = this.props.CollectionView.props.ScreenToLocalTransform(); - // let x = parseInt(this._picker.calendar.style.left) / transform.Scale; - // let y = parseInt(this._picker.calendar.style.top) / transform.Scale; - // this._picker.calendar.style.left = x; - // this._picker.calendar.style.top = y; - - e.stopPropagation(); - } - } - - @action - addKeyRestriction = (e: React.MouseEvent) => { - const index = this._keyRestrictions.length; - this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[index][1] = value)} />, ""]); - - this.openViewSpecs(e); - } - - @action.bound - applyFilter = (e: React.MouseEvent) => { - - this.openViewSpecs(e); - - const keyRestrictionScript = "(" + this._keyRestrictions.map(i => i[1]).filter(i => i.length > 0).join(" && ") + ")"; - const yearOffset = this._dateWithinValue[1] === 'y' ? 1 : 0; - const monthOffset = this._dateWithinValue[1] === 'm' ? parseInt(this._dateWithinValue[0]) : 0; - const weekOffset = this._dateWithinValue[1] === 'w' ? parseInt(this._dateWithinValue[0]) : 0; - const dayOffset = (this._dateWithinValue[1] === 'd' ? parseInt(this._dateWithinValue[0]) : 0) + weekOffset * 7; - let dateRestrictionScript = ""; - if (this._dateValue instanceof Date) { - const lowerBound = new Date(this._dateValue.getFullYear() - yearOffset, this._dateValue.getMonth() - monthOffset, this._dateValue.getDate() - dayOffset); - const upperBound = new Date(this._dateValue.getFullYear() + yearOffset, this._dateValue.getMonth() + monthOffset, this._dateValue.getDate() + dayOffset + 1); - dateRestrictionScript = `((doc.creationDate as any).date >= ${lowerBound.valueOf()} && (doc.creationDate as any).date <= ${upperBound.valueOf()})`; - } - else { - const createdDate = new Date(this._dateValue); - if (!isNaN(createdDate.getTime())) { - const lowerBound = new Date(createdDate.getFullYear() - yearOffset, createdDate.getMonth() - monthOffset, createdDate.getDate() - dayOffset); - const upperBound = new Date(createdDate.getFullYear() + yearOffset, createdDate.getMonth() + monthOffset, createdDate.getDate() + dayOffset + 1); - dateRestrictionScript = `((doc.creationDate as any).date >= ${lowerBound.valueOf()} && (doc.creationDate as any).date <= ${upperBound.valueOf()})`; - } - } - const fullScript = dateRestrictionScript.length || keyRestrictionScript.length ? dateRestrictionScript.length ? - `${dateRestrictionScript} ${keyRestrictionScript.length ? "&&" : ""} (${keyRestrictionScript})` : - `(${keyRestrictionScript}) ${dateRestrictionScript.length ? "&&" : ""} ${dateRestrictionScript}` : - "true"; + this.document._facetWidth = 0; + } + + // @action + // openDatePicker = (e: React.PointerEvent) => { + // if (this._picker) { + // this._picker.alwaysShow = true; + // this._picker.show(); + // // TODO: calendar is offset when zoomed in/out + // // this._picker.calendar.style.position = "absolute"; + // // let transform = this.props.CollectionView.props.ScreenToLocalTransform(); + // // let x = parseInt(this._picker.calendar.style.left) / transform.Scale; + // // let y = parseInt(this._picker.calendar.style.top) / transform.Scale; + // // this._picker.calendar.style.left = x; + // // this._picker.calendar.style.top = y; + + // e.stopPropagation(); + // } + // } + + // runInAction(() => this._dateValue = e.target.value)} + // onPointerDown={this.openDatePicker} + // placeholder="Value" /> + // @action.bound + // applyFilter = (e: React.MouseEvent) => { + // const keyRestrictionScript = "(" + this._keyRestrictions.map(i => i[1]).filter(i => i.length > 0).join(" && ") + ")"; + // const yearOffset = this._dateWithinValue[1] === 'y' ? 1 : 0; + // const monthOffset = this._dateWithinValue[1] === 'm' ? parseInt(this._dateWithinValue[0]) : 0; + // const weekOffset = this._dateWithinValue[1] === 'w' ? parseInt(this._dateWithinValue[0]) : 0; + // const dayOffset = (this._dateWithinValue[1] === 'd' ? parseInt(this._dateWithinValue[0]) : 0) + weekOffset * 7; + // let dateRestrictionScript = ""; + // if (this._dateValue instanceof Date) { + // const lowerBound = new Date(this._dateValue.getFullYear() - yearOffset, this._dateValue.getMonth() - monthOffset, this._dateValue.getDate() - dayOffset); + // const upperBound = new Date(this._dateValue.getFullYear() + yearOffset, this._dateValue.getMonth() + monthOffset, this._dateValue.getDate() + dayOffset + 1); + // dateRestrictionScript = `((doc.creationDate as any).date >= ${lowerBound.valueOf()} && (doc.creationDate as any).date <= ${upperBound.valueOf()})`; + // } + // else { + // const createdDate = new Date(this._dateValue); + // if (!isNaN(createdDate.getTime())) { + // const lowerBound = new Date(createdDate.getFullYear() - yearOffset, createdDate.getMonth() - monthOffset, createdDate.getDate() - dayOffset); + // const upperBound = new Date(createdDate.getFullYear() + yearOffset, createdDate.getMonth() + monthOffset, createdDate.getDate() + dayOffset + 1); + // dateRestrictionScript = `((doc.creationDate as any).date >= ${lowerBound.valueOf()} && (doc.creationDate as any).date <= ${upperBound.valueOf()})`; + // } + // } + // const fullScript = dateRestrictionScript.length || keyRestrictionScript.length ? dateRestrictionScript.length ? + // `${dateRestrictionScript} ${keyRestrictionScript.length ? "&&" : ""} (${keyRestrictionScript})` : + // `(${keyRestrictionScript}) ${dateRestrictionScript.length ? "&&" : ""} ${dateRestrictionScript}` : + // "true"; + + // this.props.CollectionView.props.Document.viewSpecScript = ScriptField.MakeFunction(fullScript, { doc: Doc.name }); + // } + + // datePickerRef = (node: HTMLInputElement) => { + // if (node) { + // try { + // this._picker = datepicker("#" + node.id, { + // disabler: (date: Date) => date > new Date(), + // onSelect: (instance: any, date: Date) => runInAction(() => {}), // this._dateValue = date), + // dateSelected: new Date() + // }); + // } catch (e) { + // console.log("date picker exception:" + e); + // } + // } + // } - this.props.CollectionView.props.Document.viewSpecScript = ScriptField.MakeFunction(fullScript, { doc: Doc.name }); - } - - @action - closeDatePicker = () => { - if (this._picker) { - this._picker.alwaysShow = false; - this._picker.hide(); - } - document.removeEventListener("pointerdown", this.closeDatePicker); - } @action toggleCollapse = () => { - this.props.CollectionView.props.Document._chromeStatus = this.props.CollectionView.props.Document._chromeStatus === "enabled" ? "collapsed" : "enabled"; + this.document._chromeStatus = this.document._chromeStatus === "enabled" ? "collapsed" : "enabled"; if (this.props.collapse) { this.props.collapse(this.props.CollectionView.props.Document._chromeStatus !== "enabled"); } } subChrome = () => { - const collapsed = this.props.CollectionView.props.Document._chromeStatus !== "enabled"; + const collapsed = this.document._chromeStatus !== "enabled"; if (collapsed) return null; switch (this.props.type) { case CollectionViewType.Stacking: return (); @@ -279,13 +213,6 @@ export class CollectionViewBaseChrome extends React.Component { - this.props.CollectionView.props.Document.viewSpecScript = ScriptField.MakeFunction("true", { doc: Doc.name }); - this._keyRestrictions = []; - this.addKeyRestrictions([]); - } - private dropDisposer?: DragManager.DragDropDisposer; protected createDropTarget = (ele: HTMLDivElement) => { this.dropDisposer && this.dropDisposer(); @@ -304,48 +231,6 @@ export class CollectionViewBaseChrome extends React.Component { - if (node) { - try { - this._picker = datepicker("#" + node.id, { - disabler: (date: Date) => date > new Date(), - onSelect: (instance: any, date: Date) => runInAction(() => this._dateValue = date), - dateSelected: new Date() - }); - } catch (e) { - console.log("date picker exception:" + e); - } - } - } - - renderSuggestion = (suggestion: string) => { - return

{suggestion}

; - } - getSuggestionValue = (suggestion: string) => suggestion; - - @action - onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => { - this._currentKey = newValue; - } - onSuggestionFetch = async ({ value }: { value: string }) => { - const sugg = await this.getKeySuggestions(value); - runInAction(() => this.suggestions = sugg); - } - @action - onSuggestionClear = () => { - this.suggestions = []; - } - getKeySuggestions = async (value: string): Promise => { - return this._buttonizableCommands.filter(c => c.title.indexOf(value) !== -1).map(c => c.title); - } - - autoSuggestDown = (e: React.PointerEvent) => { - e.stopPropagation(); - } - - 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 = this.props.CollectionView.collectionViewType; @@ -367,7 +252,6 @@ export class CollectionViewBaseChrome extends React.Component -
+
+
+ +
+
+
@@ -414,49 +303,6 @@ export class CollectionViewBaseChrome extends React.Component
-
-
- -
-
- {this._keyRestrictions.map(i => i[0])} -
-
- CREATED WITHIN: -
- - runInAction(() => this._dateValue = e.target.value)} - onPointerDown={this.openDatePicker} - placeholder="Value" /> -
-
- - - -
-
-
-- cgit v1.2.3-70-g09d2 From d5c0ed9a29593583a4180973f854106dc10d4b30 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 15 Apr 2020 02:32:47 -0400 Subject: moved filter to right side of collection. got rid of back button in pivot view - click background. --- src/Utils.ts | 10 +++-- .../views/collections/CollectionTimeView.tsx | 30 +++++++-------- src/client/views/collections/CollectionView.scss | 4 +- src/client/views/collections/CollectionView.tsx | 43 +++++++++++++++------- .../views/collections/CollectionViewChromes.scss | 8 +++- .../views/collections/CollectionViewChromes.tsx | 12 +++--- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 + .../views/nodes/CollectionFreeFormDocumentView.tsx | 3 +- 8 files changed, 69 insertions(+), 43 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/Utils.ts b/src/Utils.ts index a8cde0624..58f272ba5 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -475,7 +475,9 @@ export function setupMoveUpEvents( e: React.PointerEvent, moveEvent: (e: PointerEvent, down: number[], delta: number[]) => boolean, upEvent: (e: PointerEvent) => void, - clickEvent: (e: PointerEvent) => void) { + clickEvent: (e: PointerEvent) => void, + stopPropagation: boolean = true +) { (target as any)._downX = (target as any)._lastX = e.clientX; (target as any)._downY = (target as any)._lastY = e.clientY; @@ -499,8 +501,10 @@ export function setupMoveUpEvents( document.removeEventListener("pointermove", _moveEvent); document.removeEventListener("pointerup", _upEvent); }; - e.stopPropagation(); - e.preventDefault(); + if (stopPropagation) { + e.stopPropagation(); + e.preventDefault(); + } document.removeEventListener("pointermove", _moveEvent); document.removeEventListener("pointerup", _upEvent); document.addEventListener("pointermove", _moveEvent); diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index 31b720b81..1760e2419 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -72,8 +72,22 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) { }), returnFalse, emptyFunction); } + contentsDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, returnFalse, returnFalse, action(() => { + let prevFilterIndex = NumCast(this.props.Document._prevFilterIndex); + if (prevFilterIndex > 0) { + prevFilterIndex--; + this.props.Document._docFilters = ObjectField.MakeCopy(this.props.Document["_prevDocFilter" + prevFilterIndex] as ObjectField); + this.props.Document._docRangeFilters = ObjectField.MakeCopy(this.props.Document["_prevDocRangeFilters" + prevFilterIndex] as ObjectField); + this.props.Document._prevFilterIndex = prevFilterIndex; + } else { + this.props.Document._docFilters = new List([]); + } + }), false); + } + @computed get contents() { - return
+ return
; } @@ -132,20 +146,6 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) { color: "#f1efeb" // this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; }; return
-
; } diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index a0b73b90f..d43dd387a 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -20,7 +20,7 @@ top: 55%; border: 1px black solid; z-index: 2; - left: -10px; + right: -10px; } .collectionTimeView-treeView { display: flex; @@ -28,7 +28,7 @@ width: 200px; height: 100%; position: absolute; - left: 0; + right: 0; top: 0; .collectionTimeView-addfacet { diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 831691f8c..0a3577bc7 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -13,7 +13,7 @@ import { List } from '../../../new_fields/List'; import { BoolCast, Cast, NumCast, StrCast, ScriptCast } from '../../../new_fields/Types'; import { ImageField } from '../../../new_fields/URLField'; import { TraceMobx } from '../../../new_fields/util'; -import { Utils, setupMoveUpEvents, returnFalse, returnZero } from '../../../Utils'; +import { Utils, setupMoveUpEvents, returnFalse, returnZero, emptyPath, emptyFunction, returnOne } from '../../../Utils'; import { DocumentType } from '../../documents/DocumentTypes'; import { DocumentManager } from '../../util/DocumentManager'; import { ImageUtils } from '../../util/Import & Export/ImageUtils'; @@ -45,6 +45,7 @@ import { ScriptField, ComputedField } from '../../../new_fields/ScriptField'; import { InteractionUtils } from '../../util/InteractionUtils'; import { ObjectField } from '../../../new_fields/ObjectField'; import CollectionMapView from './CollectionMapView'; +import { Transform } from 'prosemirror-transform'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -281,7 +282,6 @@ export class CollectionView extends Touchable { set _facetWidth(value) { this.props.Document._facetWidth = value; } bodyPanelWidth = () => this.props.PanelWidth() - this.facetWidth(); - getTransform = () => this.props.ScreenToLocalTransform().translate(-this.facetWidth(), 0); facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth)); @computed get dataDoc() { @@ -389,7 +389,7 @@ export class CollectionView extends Touchable { onPointerDown = (e: React.PointerEvent) => { setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - this._facetWidth = Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0); + this._facetWidth = this.props.PanelWidth() - Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0); return false; }), returnFalse, action(() => this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0)); } @@ -415,27 +415,44 @@ export class CollectionView extends Touchable {
e.stopPropagation()}>
- Facet Filters + Facet Filters
- @@ -461,7 +478,7 @@ export class CollectionView extends Touchable { }} onContextMenu={this.onContextMenu}> {this.showIsTagged()} -
+
{this.collectionViewType !== undefined ? this.SubView(this.collectionViewType, props) : (null)}
{this.lightbox(DocListCast(this.props.Document[this.props.fieldKey]).filter(d => d.type === DocumentType.IMG).map(d => @@ -471,9 +488,7 @@ export class CollectionView extends Touchable { : ""))} {!this.props.isSelected() || this.props.PanelHeight() < 100 || this.props.Document.hideFilterView ? (null) : -
- -
+
} {this.filterView}
); diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 9529ef525..5203eb55f 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -61,7 +61,8 @@ pointer-events: all; // margin-top: 10px; } - .collectionViewBaseChrome-template { + .collectionViewBaseChrome-template, + .collectionViewBaseChrome-viewModes { display: grid; background: rgb(238, 238, 238); color:grey; @@ -69,9 +70,12 @@ margin-bottom:auto; margin-left: 5px; } + .collectionViewBaseChrome-viewModes { + margin-left: 25px; + } .collectionViewBaseChrome-viewSpecs { - margin-left: 25px; + margin-left: 5px; display: grid; .collectionViewBaseChrome-filterIcon { diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index cef85e148..7315d2c4e 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -276,12 +276,7 @@ export class CollectionViewBaseChrome extends React.Component -
-
- -
-
-
+
@@ -303,6 +298,11 @@ export class CollectionViewBaseChrome extends React.Component
+
+
+ +
+
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index a77f09163..d98fe190c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -907,6 +907,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u onViewDefDivClick = (e: React.MouseEvent, payload: any) => { (this.props.Document.onViewDefDivClick as ScriptField)?.script.run({ this: this.props.Document, payload }); + e.stopPropagation(); } private viewDefToJSX(viewDef: ViewDefBounds): Opt { const { x, y, z } = viewDef; @@ -991,6 +992,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u {...this.getChildDocumentViewProps(pair.layout, pair.data)} dataProvider={this.childDataProvider} LayoutDoc={this.childLayoutDocFunc} + pointerEvents={this.props.layoutEngine?.() !== undefined ? "none" : undefined} jitterRotation={NumCast(this.props.Document.jitterRotation)} fitToBox={this.props.fitToBox || BoolCast(this.props.freezeChildDimensions)} FreezeDimensions={BoolCast(this.props.freezeChildDimensions)} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index e7cb2c015..05ad98c43 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -22,6 +22,7 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { width?: number; height?: number; jitterRotation: number; + pointerEvents?: "none"; transition?: string; fitToBox?: boolean; } @@ -92,7 +93,7 @@ export class CollectionFreeFormDocumentView extends DocComponent {!this.props.fitToBox ? -- cgit v1.2.3-70-g09d2 From a6d17ef79fb94334735998d3d11f7ea068dea93a Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 15 Apr 2020 03:15:25 -0400 Subject: cleaned up some more of the pivot view event handling api --- .../views/collections/CollectionTimeView.tsx | 23 ++++++++++------------ src/client/views/collections/CollectionView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 7 +++++-- 3 files changed, 16 insertions(+), 16 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index 1760e2419..e05223ca0 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -1,6 +1,6 @@ import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { Doc } from "../../../new_fields/Doc"; +import { Doc, Opt, DocCastAsync } from "../../../new_fields/Doc"; import { List } from "../../../new_fields/List"; import { ObjectField } from "../../../new_fields/ObjectField"; import { RichTextField } from "../../../new_fields/RichTextField"; @@ -26,18 +26,15 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) { _changing = false; @observable _layoutEngine = "pivot"; @observable _collapsed: boolean = false; - componentWillUnmount() { - this.props.Document.onChildClick = undefined; - } + @observable _childClickedScript: Opt; + @observable _viewDefDivClick: Opt; async componentDidMount() { - const childText = "const alias = getAlias(this); switchView(alias, thisContainer.childDetailView); alias.dropAction='alias'; alias.removeDropProperties=new List(['dropAction']); useRightSplit(alias, shiftKey); "; - this.props.Document.onChildClick = ScriptField.MakeScript(childText, { this: Doc.name, heading: "string", thisContainer: Doc.name, shiftKey: "boolean" }); - this.props.Document._fitToBox = true; - if (!this.props.Document.onViewDefClick) { - this.props.Document.onViewDefDivClick = ScriptField.MakeScript("pivotColumnClick(this,payload)", { payload: "any" }); - } - this.props.Document.childDetailView = Cast(this.props.Document.childDetailView, Doc, null) ||// bcz: needs to be here to make sure the childDetailView layout template has been loaded when the first item is clicked; - DocumentView.findTemplate("detailView", StrCast(this.props.Document.type), ""); + const detailView = (await DocCastAsync(this.props.Document.childDetailView)) || DocumentView.findTemplate("detailView", StrCast(this.props.Document.type), ""); + const childText = "const alias = getAlias(this); switchView(alias, detailView); alias.dropAction='alias'; alias.removeDropProperties=new List(['dropAction']); useRightSplit(alias, shiftKey); "; + runInAction(() => { + this._childClickedScript = ScriptField.MakeScript(childText, { this: Doc.name, shiftKey: "boolean" }, { detailView: detailView! }); + this._viewDefDivClick = ScriptField.MakeScript("pivotColumnClick(this,payload)", { payload: "any" }); + }); } layoutEngine = () => this._layoutEngine; @@ -88,7 +85,7 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) { @computed get contents() { return
- +
; } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 0a3577bc7..19e235ff2 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -278,7 +278,7 @@ export class CollectionView extends Touchable { onMovePrevRequest={action(() => this._curLightboxImg = (this._curLightboxImg + images.length - 1) % images.length)} onMoveNextRequest={action(() => this._curLightboxImg = (this._curLightboxImg + 1) % images.length)} />); } - get _facetWidth() { return NumCast(this.props.Document._facetWidth) } + get _facetWidth() { return NumCast(this.props.Document._facetWidth); } set _facetWidth(value) { this.props.Document._facetWidth = value; } bodyPanelWidth = () => this.props.PanelWidth() - this.facetWidth(); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index d98fe190c..f19181a20 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -44,6 +44,7 @@ import MarqueeOptionsMenu from "./MarqueeOptionsMenu"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); import { CollectionViewType } from "../CollectionView"; +import { Script } from "vm"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); @@ -69,6 +70,8 @@ type PanZoomDocument = makeInterface<[typeof panZoomSchema, typeof documentSchem const PanZoomDocument = makeInterface(panZoomSchema, documentSchema, positionSchema, pageSchema); export type collectionFreeformViewProps = { forceScaling?: boolean; // whether to force scaling of content (needed by ImageBox) + childClickScript?: ScriptField; + viewDefDivClick?: ScriptField; }; @observer @@ -847,7 +850,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u } @computed get libraryPath() { return this.props.LibraryPath ? [...this.props.LibraryPath, this.props.Document] : []; } - @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } + @computed get onChildClickHandler() { return this.props.childClickScript || ScriptCast(this.Document.onChildClick); } backgroundHalo = () => BoolCast(this.Document.useClusters); getChildDocumentViewProps(childLayout: Doc, childData?: Doc): DocumentViewProps { @@ -906,7 +909,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u } onViewDefDivClick = (e: React.MouseEvent, payload: any) => { - (this.props.Document.onViewDefDivClick as ScriptField)?.script.run({ this: this.props.Document, payload }); + (this.props.viewDefDivClick || ScriptCast(this.props.Document.onViewDefDivClick))?.script.run({ this: this.props.Document, payload }); e.stopPropagation(); } private viewDefToJSX(viewDef: ViewDefBounds): Opt { -- cgit v1.2.3-70-g09d2 From 142cb372c6dec9fa641786784cbdd6dca6896d33 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 15 Apr 2020 00:42:07 -0700 Subject: added robust error checking for lat, lng and address values, reverts to previous on invalid entry or zero results --- src/client/views/collections/CollectionMapView.tsx | 63 +++++++++++++++------- 1 file changed, 44 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index 64946e59e..5b8b6e75a 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -12,6 +12,7 @@ import { DocumentManager } from "../../util/DocumentManager"; import { UndoManager, undoBatch } from "../../util/UndoManager"; import { IReactionDisposer, reaction, computed, runInAction } from "mobx"; import requestPromise = require("request-promise"); +import { emptyFunction } from "../../../Utils"; type MapSchema = makeInterface<[typeof documentSchema]>; const MapSchema = makeInterface(documentSchema); @@ -119,11 +120,11 @@ class CollectionMapView extends CollectionSubView & } private respondToAddressChange = async (newAddress: string, doc: Doc) => { - const { results } = await query(newAddress); - if (!results?.length) { - return; + const response = await query(newAddress); + if (!response || response.status === "ZERO_RESULTS") { + return false; } - const { geometry, formatted_address } = results[0]; + const { geometry, formatted_address } = response.results[0]; const { lat, lng } = geometry.location; runInAction(() => { if (doc["mapLocation-lat"] !== lat || doc["mapLocation-lng"] !== lng) { @@ -136,18 +137,20 @@ class CollectionMapView extends CollectionSubView & Doc.SetInPlace(doc, "mapLocation-address", formatted_address, true); } }); + return true; } private respondToLocationChange = async (newLat: FieldResult, newLng: FieldResult, doc: Doc) => { - const { results } = await query({ lat: NumCast(newLat), lng: NumCast(newLng) }); - if (!results?.length) { - return; + const response = await query({ lat: NumCast(newLat), lng: NumCast(newLng) }); + if (!response || response.status === "ZERO_RESULTS") { + return false; } - const { formatted_address } = results[0]; + const { formatted_address } = response.results[0]; if (formatted_address !== doc["mapLocation-address"]) { this._cancelAddrReq.set(doc[Id], true); Doc.SetInPlace(doc, "mapLocation-address", formatted_address, true); } + return true; } @computed get contents() { @@ -156,23 +159,45 @@ class CollectionMapView extends CollectionSubView & this.latlngUpdaters.forEach(disposer => disposer()); this.latlngUpdaters = []; return this.childLayoutPairs.map(({ layout }) => { + const id = layout[Id]; this.addressUpdaters.push(reaction( () => ({ lat: layout["mapLocation-lat"], lng: layout["mapLocation-lng"] }), - ({ lat, lng }) => { - if (this._cancelLocReq.get(layout[Id])) { - this._cancelLocReq.set(layout[Id], false); - } else if (lat !== undefined && lng !== undefined) { - this.respondToLocationChange(lat, lng, layout); + emptyFunction, + { + equals: (previous, { lat, lng }) => { + if (this._cancelLocReq.get(id)) { + this._cancelLocReq.set(id, false); + } else if (lat !== undefined && lng !== undefined) { + this.respondToLocationChange(lat, lng, layout).then(success => { + if (!success) { + this._cancelLocReq.set(id, true); + runInAction(() => { + layout["mapLocation-lat"] = previous.lat; + layout["mapLocation-lng"] = previous.lng; + }); + } + }); + } + return previous === { lat, lng }; } } )); this.latlngUpdaters.push(reaction( - () => ({ address: Cast(layout["mapLocation-address"], "string", null) }), - ({ address }) => { - if (this._cancelAddrReq.get(layout[Id])) { - this._cancelAddrReq.set(layout[Id], false); - } else if (address?.length) { - this.respondToAddressChange(address, layout); + () => Cast(layout["mapLocation-address"], "string", null), + emptyFunction, + { + equals: (previous, address) => { + if (this._cancelAddrReq.get(id)) { + this._cancelAddrReq.set(id, false); + } else if (address?.length) { + this.respondToAddressChange(address, layout).then(success => { + if (!success) { + this._cancelAddrReq.set(id, true); + layout["mapLocation-address"] = previous; + } + }); + } + return previous === address; } } )); -- cgit v1.2.3-70-g09d2 From 15f3a7898268b8fc6eded456515726a2c40b6b46 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 15 Apr 2020 01:22:18 -0700 Subject: using interesting mobx paradigm to manage value interception --- src/client/views/collections/CollectionMapView.tsx | 49 ++++++++++------------ 1 file changed, 21 insertions(+), 28 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index 5b8b6e75a..4fbccac33 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -10,7 +10,7 @@ import { CollectionSubView } from "./CollectionSubView"; import React = require("react"); import { DocumentManager } from "../../util/DocumentManager"; import { UndoManager, undoBatch } from "../../util/UndoManager"; -import { IReactionDisposer, reaction, computed, runInAction } from "mobx"; +import { IReactionDisposer, reaction, computed, runInAction, Lambda } from "mobx"; import requestPromise = require("request-promise"); import { emptyFunction } from "../../../Utils"; @@ -42,8 +42,8 @@ class CollectionMapView extends CollectionSubView & private _cancelAddrReq = new Map(); private _cancelLocReq = new Map(); private _initialLookupPending = new Map(); - private addressUpdaters: IReactionDisposer[] = []; - private latlngUpdaters: IReactionDisposer[] = []; + private addressUpdaters: Lambda[] = []; + private latlngUpdaters: Lambda[] = []; /** * Note that all the uses of runInAction below are not included @@ -153,18 +153,17 @@ class CollectionMapView extends CollectionSubView & return true; } - @computed get contents() { + @computed get reactiveContents() { this.addressUpdaters.forEach(disposer => disposer()); this.addressUpdaters = []; this.latlngUpdaters.forEach(disposer => disposer()); this.latlngUpdaters = []; return this.childLayoutPairs.map(({ layout }) => { const id = layout[Id]; - this.addressUpdaters.push(reaction( - () => ({ lat: layout["mapLocation-lat"], lng: layout["mapLocation-lng"] }), - emptyFunction, - { - equals: (previous, { lat, lng }) => { + this.addressUpdaters.push( + computed(() => ({ lat: layout["mapLocation-lat"], lng: layout["mapLocation-lng"] })) + .observe(({ oldValue, newValue }) => { + const { lat, lng } = newValue; if (this._cancelLocReq.get(id)) { this._cancelLocReq.set(id, false); } else if (lat !== undefined && lng !== undefined) { @@ -172,35 +171,29 @@ class CollectionMapView extends CollectionSubView & if (!success) { this._cancelLocReq.set(id, true); runInAction(() => { - layout["mapLocation-lat"] = previous.lat; - layout["mapLocation-lng"] = previous.lng; + layout["mapLocation-lat"] = oldValue ? oldValue.lat : undefined; + layout["mapLocation-lng"] = oldValue ? oldValue.lng : undefined; }); } }); } - return previous === { lat, lng }; - } - } - )); - this.latlngUpdaters.push(reaction( - () => Cast(layout["mapLocation-address"], "string", null), - emptyFunction, - { - equals: (previous, address) => { + }) + ); + this.latlngUpdaters.push( + computed(() => Cast(layout["mapLocation-address"], "string", null)) + .observe(({ oldValue, newValue }) => { if (this._cancelAddrReq.get(id)) { this._cancelAddrReq.set(id, false); - } else if (address?.length) { - this.respondToAddressChange(address, layout).then(success => { + } else if (newValue?.length) { + this.respondToAddressChange(newValue, layout).then(success => { if (!success) { this._cancelAddrReq.set(id, true); - layout["mapLocation-address"] = previous; + layout["mapLocation-address"] = oldValue; } }); } - return previous === address; - } - } - )); + }) + ); return this.renderMarker(layout); }); } @@ -233,7 +226,7 @@ class CollectionMapView extends CollectionSubView & }); })} > - {this.contents} + {this.reactiveContents}
; -- cgit v1.2.3-70-g09d2 From a3e2d21f848bae54b0de8d3a81a996f2f551c84f Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 15 Apr 2020 11:50:36 -0400 Subject: fixed onCheckedClick to use scriptingBox --- src/client/documents/Documents.ts | 2 ++ .../views/collections/CollectionTreeView.tsx | 27 +++++++++++----------- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/ScriptingBox.tsx | 4 ++-- .../authentication/models/current_user_utils.ts | 6 +++-- 5 files changed, 23 insertions(+), 18 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 129ab0403..608bd28ae 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -116,6 +116,8 @@ export interface DocumentOptions { boxShadow?: string; dontRegisterChildren?: boolean; "onClick-rawScript"?: string; // onClick script in raw text form + "onCheckedClick-rawScript"?: string; // onChecked script in raw text form + "onCheckedClick-params"?: List; // parameter list for onChecked treeview functions _pivotField?: string; // field key used to determine headings for sections in stacking, masonry, pivot views schemaColumns?: List; dockingConfig?: string; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 9ec8c4c5b..d2c8cc3ad 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -19,7 +19,7 @@ import { makeTemplate } from '../../util/DropConverter'; import { Scripting } from '../../util/Scripting'; import { SelectionManager } from '../../util/SelectionManager'; import { Transform } from '../../util/Transform'; -import { undoBatch } from '../../util/UndoManager'; +import { undoBatch, UndoManager } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from "../EditableView"; @@ -397,11 +397,13 @@ class TreeView extends React.Component { } } + get onCheckedClick() { return this.props.onCheckedClick || ScriptCast(this.props.document.onCheckedClick); } + @action bulletClick = (e: React.MouseEvent) => { - if (this.props.onCheckedClick && this.props.document.type !== DocumentType.COL) { + if (this.onCheckedClick && this.props.document.type !== DocumentType.COL) { // this.props.document.treeViewChecked = this.props.document.treeViewChecked === "check" ? "x" : this.props.document.treeViewChecked === "x" ? undefined : "check"; - ScriptCast(this.props.onCheckedClick).script.run({ + this.onCheckedClick.script.run({ this: this.props.document.isTemplateForField && this.props.dataDoc ? this.props.dataDoc : this.props.document, heading: this.props.containingCollection.title, checked: this.props.document.treeViewChecked === "check" ? "x" : this.props.document.treeViewChecked === "x" ? undefined : "check", @@ -415,7 +417,7 @@ class TreeView extends React.Component { @computed get renderBullet() { - const checked = this.props.document.type === DocumentType.COL ? undefined : this.props.onCheckedClick ? (this.props.document.treeViewChecked ? this.props.document.treeViewChecked : "unchecked") : undefined; + const checked = this.props.document.type === DocumentType.COL ? undefined : this.onCheckedClick ? (this.props.document.treeViewChecked ? this.props.document.treeViewChecked : "unchecked") : undefined; return
{}
; @@ -764,8 +766,7 @@ export class CollectionTreeView extends CollectionSubView(Document, undefined as const existingOnClick = ContextMenu.Instance.findByDescription("OnClick..."); const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; onClicks.push({ - description: "Edit onChecked Script", icon: "edit", event: (obj: any) => ScriptBox.EditButtonScript("On Checked Changed ...", this.props.Document, - "onCheckedClick", obj.x, obj.y, { heading: "boolean", checked: "boolean", treeViewContainer: Doc.name }) + description: "Edit onChecked Script", event: () => UndoManager.RunInBatch(() => DocumentView.makeCustomViewClicked(this.props.Document, undefined, "onCheckedClick"), "edit onCheckedClick"), icon: "edit" }); !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); } @@ -818,7 +819,7 @@ export class CollectionTreeView extends CollectionSubView(Document, undefined as TreeView.GetChildElements(childDocs, this.props.Document, this.props.Document, this.props.DataDoc, this.props.fieldKey, this.props.ContainingCollectionDoc, undefined, addDoc, this.remove, moveDoc, dropAction, this.props.addDocTab, this.props.pinToPres, this.props.backgroundColor, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.ChromeHeight, this.props.renderDepth, () => this.props.treeViewHideHeaderFields || BoolCast(this.props.Document.treeViewHideHeaderFields), - BoolCast(this.props.Document.treeViewPreventOpen), [], this.props.LibraryPath, this.props.onCheckedClick || ScriptCast(this.props.Document.onCheckedClick), + BoolCast(this.props.Document.treeViewPreventOpen), [], this.props.LibraryPath, this.props.onCheckedClick, this.props.onChildClick || ScriptCast(this.props.Document.onChildClick), this.props.ignoreFields) } @@ -839,12 +840,12 @@ Scripting.addGlobal(function readFacetData(layoutDoc: Doc, dataDoc: Doc, dataKey nonNumbers++; } }); - const facetValueDocSet = (nonNumbers / facetValues.length > .1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2))).map(facetValue => - { const doc = new Doc(); - doc.title = facetValue.toString(); - doc.treeViewChecked = ComputedField.MakeFunction("determineCheckedState(layoutDoc, facetHeader, facetValue)",{},{ layoutDoc, facetHeader, facetValue }); - return doc; - }); + const facetValueDocSet = (nonNumbers / facetValues.length > .1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2))).map(facetValue => { + const doc = new Doc(); + doc.title = facetValue.toString(); + doc.treeViewChecked = ComputedField.MakeFunction("determineCheckedState(layoutDoc, facetHeader, facetValue)", {}, { layoutDoc, facetHeader, facetValue }); + return doc; + }); return new List(facetValueDocSet); }); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index cb7811fbb..54e4d549e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -746,7 +746,7 @@ export class DocumentView extends DocComponent(Docu onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" }); onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" }); onClicks.push({ description: this.Document.isLinkButton || this.Document.onClick ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); - onClicks.push({ description: "Edit onClick Script", icon: "edit", event: (obj: any) => ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", obj.x, obj.y) }); + onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocumentView.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); !existingOnClick && cm.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); const funcs: ContextMenuProps[] = []; diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx index a257898ab..c607d6614 100644 --- a/src/client/views/nodes/ScriptingBox.tsx +++ b/src/client/views/nodes/ScriptingBox.tsx @@ -28,8 +28,8 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent { target && docCast(this.source).then((source) => { target.proto.data = new List([source || this]); } ); } )", { target: Doc.name }), { title: "On Child Clicked (open in target)", _width: 300, _height: 200 }); - const onClick = Docs.Create.ScriptingDocument(ScriptField.MakeScript("console.log('click')"), { title: "onClick", isTemplateDoc: true, isTemplateForField: "onClick", _width: 300, _height: 200 }, "onClick"); + const onClick = Docs.Create.ScriptingDocument(undefined, { title: "onClick", "onClick-rawScript": "console.log('click')", isTemplateDoc: true, isTemplateForField: "onClick", _width: 300, _height: 200 }, "onClick"); + const onCheckedClick = Docs.Create.ScriptingDocument(undefined, + { title: "onCheckedClick", "onCheckedClick-rawScript": "console.log(heading + checked + containingTreeView)", "onCheckedClick-params": new List(["heading", "checked", "containingTreeView"]), isTemplateDoc: true, isTemplateForField: "onCheckedClick", _width: 300, _height: 200 }, "onCheckedClick"); doc.childClickFuncs = Docs.Create.TreeDocument([openInTarget], { title: "on Child Click function templates" }); - doc.clickFuncs = Docs.Create.TreeDocument([onClick], { title: "onClick funcs" }); + doc.clickFuncs = Docs.Create.TreeDocument([onClick, onCheckedClick], { title: "onClick funcs" }); } static updateUserDocument(doc: Doc) { -- cgit v1.2.3-70-g09d2 From 86885c0e97322ae99f331e594a5c67cf04cb4ec2 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 15 Apr 2020 12:33:21 -0400 Subject: extended getLocation to work with the map itself in addition to makers so that document titles can be used to indicate locations. --- src/client/views/collections/CollectionMapView.tsx | 35 +++++++++++----------- 1 file changed, 17 insertions(+), 18 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index 4fbccac33..583594057 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -1,18 +1,17 @@ import { GoogleApiWrapper, Map as GeoMap, MapProps, Marker } from "google-maps-react"; +import { computed, Lambda, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { Doc, Opt, DocListCast, FieldResult } from "../../../new_fields/Doc"; +import { Doc, DocListCast, FieldResult, Opt } from "../../../new_fields/Doc"; import { documentSchema } from "../../../new_fields/documentSchemas"; import { Id } from "../../../new_fields/FieldSymbols"; import { makeInterface } from "../../../new_fields/Schema"; import { Cast, NumCast, ScriptCast, StrCast } from "../../../new_fields/Types"; +import { DocumentManager } from "../../util/DocumentManager"; +import { undoBatch, UndoManager } from "../../util/UndoManager"; import "./CollectionMapView.scss"; import { CollectionSubView } from "./CollectionSubView"; import React = require("react"); -import { DocumentManager } from "../../util/DocumentManager"; -import { UndoManager, undoBatch } from "../../util/UndoManager"; -import { IReactionDisposer, reaction, computed, runInAction, Lambda } from "mobx"; import requestPromise = require("request-promise"); -import { emptyFunction } from "../../../Utils"; type MapSchema = makeInterface<[typeof documentSchema]>; const MapSchema = makeInterface(documentSchema); @@ -58,15 +57,15 @@ class CollectionMapView extends CollectionSubView & const lat: Opt = Cast(doc[fieldKey + "-lat"], "number", null) || (Cast(doc[fieldKey + "-lat"], "string", null) && Number(Cast(doc[fieldKey + "-lat"], "string", null))) || undefined; const lng: Opt = Cast(doc[fieldKey + "-lng"], "number", null) || (Cast(doc[fieldKey + "-lng"], "string", null) && Number(Cast(doc[fieldKey + "-lng"], "string", null))) || undefined; const zoom: Opt = Cast(doc[fieldKey + "-zoom"], "number", null) || (Cast(doc[fieldKey + "-zoom"], "string", null) && Number(Cast(doc[fieldKey + "-zoom"], "string", null))) || undefined; - const address: Opt = Cast(doc[fieldKey + "-address"], "string", null); + const address: Opt = Cast(doc[fieldKey + "-address"], "string", (lat === undefined || lng === undefined ? Cast(doc.title, "string", null) : null)); if (lat !== undefined && lng !== undefined) { return ({ lat, lng, zoom }); } else if (address) { const id = doc[Id]; if (!this._initialLookupPending.get(id)) { - this._initialLookupPending.set(id, true); + this._initialLookupPending.set(id, true); `` setTimeout(() => { - this.respondToAddressChange(address, doc).then(() => this._initialLookupPending.delete(id)); + this.respondToAddressChange(address, fieldKey, doc).then(() => this._initialLookupPending.delete(id)); }); } return defaultLocation; @@ -119,7 +118,7 @@ class CollectionMapView extends CollectionSubView & />; } - private respondToAddressChange = async (newAddress: string, doc: Doc) => { + private respondToAddressChange = async (newAddress: string, fieldKey: string, doc: Doc) => { const response = await query(newAddress); if (!response || response.status === "ZERO_RESULTS") { return false; @@ -127,28 +126,28 @@ class CollectionMapView extends CollectionSubView & const { geometry, formatted_address } = response.results[0]; const { lat, lng } = geometry.location; runInAction(() => { - if (doc["mapLocation-lat"] !== lat || doc["mapLocation-lng"] !== lng) { + if (doc[fieldKey + "-lat"] !== lat || doc[fieldKey + "-lng"] !== lng) { this._cancelLocReq.set(doc[Id], true); - Doc.SetInPlace(doc, "mapLocation-lat", lat, true); - Doc.SetInPlace(doc, "mapLocation-lng", lng, true); + Doc.SetInPlace(doc, fieldKey + "-lat", lat, true); + Doc.SetInPlace(doc, fieldKey + "-lng", lng, true); } if (formatted_address !== newAddress) { this._cancelAddrReq.set(doc[Id], true); - Doc.SetInPlace(doc, "mapLocation-address", formatted_address, true); + Doc.SetInPlace(doc, fieldKey + "-address", formatted_address, true); } }); return true; } - private respondToLocationChange = async (newLat: FieldResult, newLng: FieldResult, doc: Doc) => { + private respondToLocationChange = async (newLat: FieldResult, newLng: FieldResult, fieldKey: string, doc: Doc) => { const response = await query({ lat: NumCast(newLat), lng: NumCast(newLng) }); if (!response || response.status === "ZERO_RESULTS") { return false; } const { formatted_address } = response.results[0]; - if (formatted_address !== doc["mapLocation-address"]) { + if (formatted_address !== doc[fieldKey + "-address"]) { this._cancelAddrReq.set(doc[Id], true); - Doc.SetInPlace(doc, "mapLocation-address", formatted_address, true); + Doc.SetInPlace(doc, fieldKey + "-address", formatted_address, true); } return true; } @@ -167,7 +166,7 @@ class CollectionMapView extends CollectionSubView & if (this._cancelLocReq.get(id)) { this._cancelLocReq.set(id, false); } else if (lat !== undefined && lng !== undefined) { - this.respondToLocationChange(lat, lng, layout).then(success => { + this.respondToLocationChange(lat, lng, "mapLocation", layout).then(success => { if (!success) { this._cancelLocReq.set(id, true); runInAction(() => { @@ -185,7 +184,7 @@ class CollectionMapView extends CollectionSubView & if (this._cancelAddrReq.get(id)) { this._cancelAddrReq.set(id, false); } else if (newValue?.length) { - this.respondToAddressChange(newValue, layout).then(success => { + this.respondToAddressChange(newValue, "mapLocation", layout).then(success => { if (!success) { this._cancelAddrReq.set(id, true); layout["mapLocation-address"] = oldValue; -- cgit v1.2.3-70-g09d2 From 531aab6465459557055c0c02e35b1029192263b4 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 15 Apr 2020 10:19:58 -0700 Subject: final cleanup --- src/client/views/collections/CollectionMapView.tsx | 83 +++++++++++----------- 1 file changed, 42 insertions(+), 41 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index 4fbccac33..062419b74 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -1,6 +1,6 @@ import { GoogleApiWrapper, Map as GeoMap, MapProps, Marker } from "google-maps-react"; import { observer } from "mobx-react"; -import { Doc, Opt, DocListCast, FieldResult } from "../../../new_fields/Doc"; +import { Doc, Opt, DocListCast, FieldResult, Field } from "../../../new_fields/Doc"; import { documentSchema } from "../../../new_fields/documentSchemas"; import { Id } from "../../../new_fields/FieldSymbols"; import { makeInterface } from "../../../new_fields/Schema"; @@ -10,9 +10,8 @@ import { CollectionSubView } from "./CollectionSubView"; import React = require("react"); import { DocumentManager } from "../../util/DocumentManager"; import { UndoManager, undoBatch } from "../../util/UndoManager"; -import { IReactionDisposer, reaction, computed, runInAction, Lambda } from "mobx"; +import { computed, runInAction, Lambda } from "mobx"; import requestPromise = require("request-promise"); -import { emptyFunction } from "../../../Utils"; type MapSchema = makeInterface<[typeof documentSchema]>; const MapSchema = makeInterface(documentSchema); @@ -23,8 +22,14 @@ export type LocationData = google.maps.LatLngLiteral & { zoom?: number; }; +interface DocLatLng { + lat: FieldResult; + lng: FieldResult; +} + // Nowhere, Oklahoma const defaultLocation = { lat: 35.1592238, lng: -98.444512, zoom: 15 }; +const noResults = "ZERO_RESULTS"; const query = async (data: string | google.maps.LatLngLiteral) => { const contents = typeof data === "string" ? `address=${data.replace(/\s+/g, "+")}` : `latlng=${data.lat},${data.lng}`; @@ -42,8 +47,7 @@ class CollectionMapView extends CollectionSubView & private _cancelAddrReq = new Map(); private _cancelLocReq = new Map(); private _initialLookupPending = new Map(); - private addressUpdaters: Lambda[] = []; - private latlngUpdaters: Lambda[] = []; + private responders: { location: Lambda, address: Lambda }[] = []; /** * Note that all the uses of runInAction below are not included @@ -66,7 +70,7 @@ class CollectionMapView extends CollectionSubView & if (!this._initialLookupPending.get(id)) { this._initialLookupPending.set(id, true); setTimeout(() => { - this.respondToAddressChange(address, doc).then(() => this._initialLookupPending.delete(id)); + this.respondToAddressChange(doc, address).then(() => this._initialLookupPending.delete(id)); }); } return defaultLocation; @@ -119,30 +123,45 @@ class CollectionMapView extends CollectionSubView & />; } - private respondToAddressChange = async (newAddress: string, doc: Doc) => { + private respondToAddressChange = async (doc: Doc, newAddress: string, oldAddress?: string) => { + if (newAddress === oldAddress) { + return false; + } const response = await query(newAddress); - if (!response || response.status === "ZERO_RESULTS") { + const id = doc[Id]; + if (!response || response.status === noResults) { + this._cancelAddrReq.set(id, true); + doc["mapLocation-address"] = oldAddress; return false; } const { geometry, formatted_address } = response.results[0]; const { lat, lng } = geometry.location; runInAction(() => { if (doc["mapLocation-lat"] !== lat || doc["mapLocation-lng"] !== lng) { - this._cancelLocReq.set(doc[Id], true); + this._cancelLocReq.set(id, true); Doc.SetInPlace(doc, "mapLocation-lat", lat, true); Doc.SetInPlace(doc, "mapLocation-lng", lng, true); } if (formatted_address !== newAddress) { - this._cancelAddrReq.set(doc[Id], true); + this._cancelAddrReq.set(id, true); Doc.SetInPlace(doc, "mapLocation-address", formatted_address, true); } }); return true; } - private respondToLocationChange = async (newLat: FieldResult, newLng: FieldResult, doc: Doc) => { - const response = await query({ lat: NumCast(newLat), lng: NumCast(newLng) }); - if (!response || response.status === "ZERO_RESULTS") { + private respondToLocationChange = async (doc: Doc, newLatLng: DocLatLng, oldLatLng: Opt) => { + if (newLatLng === oldLatLng) { + return false; + } + const response = await query({ lat: NumCast(newLatLng.lat), lng: NumCast(newLatLng.lng) }); + const id = doc[Id]; + if (!response || response.status === noResults) { + this._cancelLocReq.set(id, true); + runInAction(() => { + doc["mapLocation-lat"] = oldLatLng?.lat; + doc["mapLocation-lng"] = oldLatLng?.lng; + }); return false; } const { formatted_address } = response.results[0]; @@ -154,46 +173,28 @@ class CollectionMapView extends CollectionSubView & } @computed get reactiveContents() { - this.addressUpdaters.forEach(disposer => disposer()); - this.addressUpdaters = []; - this.latlngUpdaters.forEach(disposer => disposer()); - this.latlngUpdaters = []; + this.responders.forEach(({ location, address }) => { location(); address(); }); + this.responders = []; return this.childLayoutPairs.map(({ layout }) => { const id = layout[Id]; - this.addressUpdaters.push( - computed(() => ({ lat: layout["mapLocation-lat"], lng: layout["mapLocation-lng"] })) + this.responders.push({ + location: computed(() => ({ lat: layout["mapLocation-lat"], lng: layout["mapLocation-lng"] })) .observe(({ oldValue, newValue }) => { - const { lat, lng } = newValue; if (this._cancelLocReq.get(id)) { this._cancelLocReq.set(id, false); - } else if (lat !== undefined && lng !== undefined) { - this.respondToLocationChange(lat, lng, layout).then(success => { - if (!success) { - this._cancelLocReq.set(id, true); - runInAction(() => { - layout["mapLocation-lat"] = oldValue ? oldValue.lat : undefined; - layout["mapLocation-lng"] = oldValue ? oldValue.lng : undefined; - }); - } - }); + } else if (newValue.lat !== undefined && newValue.lng !== undefined) { + this.respondToLocationChange(layout, newValue, oldValue); } - }) - ); - this.latlngUpdaters.push( - computed(() => Cast(layout["mapLocation-address"], "string", null)) + }), + address: computed(() => Cast(layout["mapLocation-address"], "string", null)) .observe(({ oldValue, newValue }) => { if (this._cancelAddrReq.get(id)) { this._cancelAddrReq.set(id, false); } else if (newValue?.length) { - this.respondToAddressChange(newValue, layout).then(success => { - if (!success) { - this._cancelAddrReq.set(id, true); - layout["mapLocation-address"] = oldValue; - } - }); + this.respondToAddressChange(layout, newValue, oldValue); } }) - ); + }); return this.renderMarker(layout); }); } -- cgit v1.2.3-70-g09d2 From 9a2d00da67b0436d28dd64f8a25aa8a2b1a5140d Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 15 Apr 2020 10:40:07 -0700 Subject: syntax --- src/client/views/collections/CollectionMapView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index 1d8ad2458..b5043d1c5 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -207,7 +207,7 @@ class CollectionMapView extends CollectionSubView & const { Document, fieldKey, active, google } = this.props; let center = this.getLocation(Document, `${fieldKey}-mapCenter`); if (center === undefined) { - center = childLayoutPairs.map(pair => this.getLocation(pair.layout, fieldKey)).find(layout => layout); + center = childLayoutPairs.map(({ layout }) => this.getLocation(layout, fieldKey)).find(layout => layout); if (center === undefined) { center = defaultLocation; } -- cgit v1.2.3-70-g09d2 From da6d058cd842209bdfd0f618e1cc19c99139135b Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 15 Apr 2020 14:14:57 -0400 Subject: improved title support for map entries using @ to reset address. added lockedPosition support for maps... kinda. --- src/client/views/collections/CollectionMapView.tsx | 43 ++++++++++++++-------- 1 file changed, 28 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index 583594057..f533a3874 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -1,5 +1,5 @@ import { GoogleApiWrapper, Map as GeoMap, MapProps, Marker } from "google-maps-react"; -import { computed, Lambda, runInAction } from "mobx"; +import { computed, Lambda, runInAction, action } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, FieldResult, Opt } from "../../../new_fields/Doc"; import { documentSchema } from "../../../new_fields/documentSchemas"; @@ -54,22 +54,22 @@ class CollectionMapView extends CollectionSubView & private getLocation = (doc: Opt, fieldKey: string): Opt => { if (doc) { - const lat: Opt = Cast(doc[fieldKey + "-lat"], "number", null) || (Cast(doc[fieldKey + "-lat"], "string", null) && Number(Cast(doc[fieldKey + "-lat"], "string", null))) || undefined; - const lng: Opt = Cast(doc[fieldKey + "-lng"], "number", null) || (Cast(doc[fieldKey + "-lng"], "string", null) && Number(Cast(doc[fieldKey + "-lng"], "string", null))) || undefined; - const zoom: Opt = Cast(doc[fieldKey + "-zoom"], "number", null) || (Cast(doc[fieldKey + "-zoom"], "string", null) && Number(Cast(doc[fieldKey + "-zoom"], "string", null))) || undefined; - const address: Opt = Cast(doc[fieldKey + "-address"], "string", (lat === undefined || lng === undefined ? Cast(doc.title, "string", null) : null)); - if (lat !== undefined && lng !== undefined) { - return ({ lat, lng, zoom }); - } else if (address) { + const titleLoc = StrCast(doc.title).startsWith("@") ? StrCast(doc.title).substring(1) : undefined; + const lat = Cast(doc[fieldKey + "-lat"], "number", null) || (Cast(doc[fieldKey + "-lat"], "string", null) && Number(Cast(doc[fieldKey + "-lat"], "string", null))) || undefined; + const lng = Cast(doc[fieldKey + "-lng"], "number", null) || (Cast(doc[fieldKey + "-lng"], "string", null) && Number(Cast(doc[fieldKey + "-lng"], "string", null))) || undefined; + const zoom = Cast(doc[fieldKey + "-zoom"], "number", null) || (Cast(doc[fieldKey + "-zoom"], "string", null) && Number(Cast(doc[fieldKey + "-zoom"], "string", null))) || undefined; + const address = titleLoc || StrCast(doc[fieldKey + "-address"], StrCast(doc.title)); + if (titleLoc || (address && (lat === undefined || lng === undefined))) { const id = doc[Id]; if (!this._initialLookupPending.get(id)) { - this._initialLookupPending.set(id, true); `` + this._initialLookupPending.set(id, true); setTimeout(() => { + titleLoc && Doc.SetInPlace(doc, "title", titleLoc, true); this.respondToAddressChange(address, fieldKey, doc).then(() => this._initialLookupPending.delete(id)); }); } - return defaultLocation; } + return (lat === undefined || lng === undefined) ? defaultLocation : { lat, lng, zoom }; } return undefined; } @@ -217,12 +217,25 @@ class CollectionMapView extends CollectionSubView & zoom={center.zoom || 10} initialCenter={center} center={center} + onIdle={(_props: any, map: any) => { + if (this.layoutDoc.lockedTransform) { + map.setZoom(center?.zoom || 10); + } else { + center?.zoom !== map.getZoom() && undoBatch(action(() => { + Document[fieldKey + "-mapCenter-zoom"] = map.getZoom(); + }))(); + } + }} onDragend={undoBatch((_props: MapProps, map: google.maps.Map) => { - const { lat, lng } = map.getCenter(); - runInAction(() => { - Document[fieldKey + "-mapCenter-lat"] = lat(); - Document[fieldKey + "-mapCenter-lng"] = lng(); - }); + if (this.layoutDoc.lockedTransform) { + center?.lat && center.lng && map.setCenter(center); + } else { + const { lat, lng } = map.getCenter(); + runInAction(() => { + Document[fieldKey + "-mapCenter-lat"] = lat(); + Document[fieldKey + "-mapCenter-lng"] = lng(); + }); + } })} > {this.reactiveContents} -- cgit v1.2.3-70-g09d2 From 4d1782cbb359de2b672786df24985fbcf4be238a Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 15 Apr 2020 14:49:57 -0400 Subject: fixed bug just added with initial location of map --- src/client/views/collections/CollectionMapView.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index 3051b1ae7..2cb25fd9a 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -57,13 +57,13 @@ class CollectionMapView extends CollectionSubView & * and address–updating reactions. */ - private getLocation = (doc: Opt, fieldKey: string): Opt => { + private getLocation = (doc: Opt, fieldKey: string, returnDefault: boolean = true): Opt => { if (doc) { const titleLoc = StrCast(doc.title).startsWith("@") ? StrCast(doc.title).substring(1) : undefined; const lat = Cast(doc[`${fieldKey}-lat`], "number", null) || (Cast(doc[`${fieldKey}-lat`], "string", null) && Number(Cast(doc[`${fieldKey}-lat`], "string", null))) || undefined; const lng = Cast(doc[`${fieldKey}-lng`], "number", null) || (Cast(doc[`${fieldKey}-lng`], "string", null) && Number(Cast(doc[`${fieldKey}-lng`], "string", null))) || undefined; const zoom = Cast(doc[`${fieldKey}-zoom`], "number", null) || (Cast(doc[`${fieldKey}-zoom`], "string", null) && Number(Cast(doc[`${fieldKey}-zoom`], "string", null))) || undefined; - const address = titleLoc || StrCast(doc[`${fieldKey}-address`], StrCast(doc.title)); + const address = titleLoc || StrCast(doc[`${fieldKey}-address`], StrCast(doc.title).replace(/^-/, "")); if (titleLoc || (address && (lat === undefined || lng === undefined))) { const id = doc[Id]; if (!this._initialLookupPending.get(id)) { @@ -74,7 +74,7 @@ class CollectionMapView extends CollectionSubView & }); } } - return (lat === undefined || lng === undefined) ? defaultLocation : { lat, lng, zoom }; + return (lat === undefined || lng === undefined) ? (returnDefault ? defaultLocation : undefined) : { lat, lng, zoom }; } return undefined; } @@ -205,9 +205,9 @@ class CollectionMapView extends CollectionSubView & render() { const { childLayoutPairs } = this; const { Document, fieldKey, active, google } = this.props; - let center = this.getLocation(Document, `${fieldKey}-mapCenter`); + let center = this.getLocation(Document, `${fieldKey}-mapCenter`, false); if (center === undefined) { - center = childLayoutPairs.map(({ layout }) => this.getLocation(layout, fieldKey)).find(layout => layout); + center = childLayoutPairs.map(({ layout }) => this.getLocation(layout, fieldKey, false)).find(layout => layout); if (center === undefined) { center = defaultLocation; } -- cgit v1.2.3-70-g09d2 From 7d3b2880bebf034607b946360c3e08338cf1d115 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 15 Apr 2020 14:04:13 -0700 Subject: fixed fieldKey errors: --- src/client/views/collections/CollectionMapView.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index 2cb25fd9a..c80555a2e 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -99,8 +99,9 @@ class CollectionMapView extends CollectionSubView & } private renderMarkerIcon = (layout: Doc) => { - const { Document, fieldKey } = this.props; - const iconUrl = StrCast(Document.mapIconUrl, null); + const { Document } = this.props; + const fieldKey = Doc.LayoutFieldKey(layout); + const iconUrl = StrCast(layout.mapIconUrl, StrCast(Document.mapIconUrl)); if (iconUrl) { const iconWidth = NumCast(layout[`${fieldKey}-iconWidth`], 45); const iconHeight = NumCast(layout[`${fieldKey}-iconHeight`], 45); @@ -114,7 +115,7 @@ class CollectionMapView extends CollectionSubView & } private renderMarker = (layout: Doc) => { - const location = this.getLocation(layout, this.props.fieldKey); + const location = this.getLocation(layout, Doc.LayoutFieldKey(layout)); return !location ? (null) : & } @computed get reactiveContents() { - const { fieldKey } = this.props; this.responders.forEach(({ location, address }) => { location(); address(); }); this.responders = []; return this.childLayoutPairs.map(({ layout }) => { + const fieldKey = Doc.LayoutFieldKey(layout); const id = layout[Id]; this.responders.push({ location: computed(() => ({ lat: layout[`${fieldKey}-lat`], lng: layout[`${fieldKey}-lng`] })) @@ -207,7 +208,7 @@ class CollectionMapView extends CollectionSubView & const { Document, fieldKey, active, google } = this.props; let center = this.getLocation(Document, `${fieldKey}-mapCenter`, false); if (center === undefined) { - center = childLayoutPairs.map(({ layout }) => this.getLocation(layout, fieldKey, false)).find(layout => layout); + center = childLayoutPairs.map(({ layout }) => this.getLocation(layout, Doc.LayoutFieldKey(layout), false)).find(layout => layout); if (center === undefined) { center = defaultLocation; } -- cgit v1.2.3-70-g09d2 From e0f16b89cba102a4fcd156bb3d4148432eca2ab7 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 15 Apr 2020 19:10:09 -0400 Subject: removed lock icon from top-level documents. made schema functions compile without typechecking. metadata #'s starting with a # are now numbers. --- src/client/util/RichTextRules.ts | 3 ++- src/client/views/collections/CollectionSchemaView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/util/RichTextRules.ts b/src/client/util/RichTextRules.ts index 6bbe81115..3746199ba 100644 --- a/src/client/util/RichTextRules.ts +++ b/src/client/util/RichTextRules.ts @@ -110,7 +110,8 @@ export class RichTextRules { return state.tr; } if (value !== "" && value !== undefined) { - this.Document[DataSym][fieldKey] = value === "true" ? true : value === "false" ? false : value; + const num = value.match(/^[0-9.]/); + this.Document[DataSym][fieldKey] = value === "true" ? true : value === "false" ? false : (num ? Number(value) : value); } const fieldView = state.schema.nodes.dashField.create({ fieldKey, docid }); return state.tr.deleteRange(start, end).insert(start, fieldView); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 57be77fdd..380d91d2f 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -736,7 +736,7 @@ export class SchemaTable extends React.Component { return (doc as any)[key][row + ${row}][(doc as any).schemaColumns[col + ${col}].heading]; } return ${script}`; - const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: true, transformer: this.createTransformer(row, col) }); + const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) }); if (compiled.compiled) { doc[field] = new ComputedField(compiled); return true; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e6ae2d801..c0d530160 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1163,7 +1163,7 @@ export class DocumentView extends DocComponent(Docu
: this.innards} - {this.Document.isBackground !== undefined || this.isSelected(false) ?
this.toggleBackground(true)}>
: (null)} + {(this.Document.isBackground !== undefined || this.isSelected(false)) && this.props.renderDepth > 0 ?
this.toggleBackground(true)}>
: (null)}
; { this._showKPQuery ? : undefined; } } -- cgit v1.2.3-70-g09d2 From 35a31253ed3c7f4d31cebc2d1f2d6b1b4084108c Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 15 Apr 2020 22:27:38 -0700 Subject: cleanup --- src/client/views/collections/CollectionMapView.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index c80555a2e..7b7828d7d 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -208,10 +208,8 @@ class CollectionMapView extends CollectionSubView & const { Document, fieldKey, active, google } = this.props; let center = this.getLocation(Document, `${fieldKey}-mapCenter`, false); if (center === undefined) { - center = childLayoutPairs.map(({ layout }) => this.getLocation(layout, Doc.LayoutFieldKey(layout), false)).find(layout => layout); - if (center === undefined) { - center = defaultLocation; - } + const childLocations = childLayoutPairs.map(({ layout }) => this.getLocation(layout, Doc.LayoutFieldKey(layout), false)); + center = childLocations.find(location => location) || defaultLocation; } return
& center={center} onIdle={(_props?: MapProps, map?: google.maps.Map) => { if (this.layoutDoc.lockedTransform) { - map?.setZoom(center?.zoom || 10); // reset zoom (probably can tell the map to disallow zooming somehow) + // reset zoom (ideally, we could probably can tell the map to disallow zooming somehow instead) + map?.setZoom(center?.zoom || 10); + map?.setCenter({ lat: center?.lat!, lng: center?.lng! }); } else { const zoom = map?.getZoom(); - center?.zoom !== zoom && undoBatch(action(() => { + (center?.zoom !== zoom) && undoBatch(action(() => { Document[`${fieldKey}-mapCenter-zoom`] = zoom; }))(); } }} onDragend={(_props?: MapProps, map?: google.maps.Map) => { if (this.layoutDoc.lockedTransform) { - map?.setCenter({ lat: center?.lat!, lng: center?.lng! }); // reset the drag (probably can tell the map to disallow dragging somehow) + // reset the drag (ideally, we could probably can tell the map to disallow dragging somehow instead) + map?.setCenter({ lat: center?.lat!, lng: center?.lng! }); } else { undoBatch(action(({ lat, lng }) => { Document[`${fieldKey}-mapCenter-lat`] = lat(); -- cgit v1.2.3-70-g09d2 From ab007b636b99de38f7dee8ff08d1259dfc47e02a Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 16 Apr 2020 21:47:56 -0400 Subject: fixed detail view for pivot views for templates --- src/client/views/collections/CollectionTimeView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index e05223ca0..1d1949c99 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -30,7 +30,7 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) { @observable _viewDefDivClick: Opt; async componentDidMount() { const detailView = (await DocCastAsync(this.props.Document.childDetailView)) || DocumentView.findTemplate("detailView", StrCast(this.props.Document.type), ""); - const childText = "const alias = getAlias(this); switchView(alias, detailView); alias.dropAction='alias'; alias.removeDropProperties=new List(['dropAction']); useRightSplit(alias, shiftKey); "; + const childText = "const alias = getAlias(self); switchView(alias, detailView); alias.dropAction='alias'; alias.removeDropProperties=new List(['dropAction']); useRightSplit(alias, shiftKey); "; runInAction(() => { this._childClickedScript = ScriptField.MakeScript(childText, { this: Doc.name, shiftKey: "boolean" }, { detailView: detailView! }); this._viewDefDivClick = ScriptField.MakeScript("pivotColumnClick(this,payload)", { payload: "any" }); -- cgit v1.2.3-70-g09d2 From ac40232e5bbbb98680912eb3c505bab994079074 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 17 Apr 2020 09:39:25 -0400 Subject: fixed auto focus to work on clicked pt --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 4 ++-- src/client/views/nodes/DocumentView.tsx | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index f19181a20..02f9bd487 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -31,7 +31,7 @@ import { ContextMenu } from "../../ContextMenu"; import { ContextMenuProps } from "../../ContextMenuItem"; import { InkingControl } from "../../InkingControl"; import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView"; -import { DocumentViewProps } from "../../nodes/DocumentView"; +import { DocumentViewProps, DocumentView } from "../../nodes/DocumentView"; import { FormattedTextBox } from "../../nodes/FormattedTextBox"; import { pageSchema } from "../../nodes/ImageBox"; import PDFMenu from "../../pdf/PDFMenu"; @@ -822,7 +822,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u if (!willZoom) { Doc.BrushDoc(this.props.Document); - !doc.z && this.scaleAtPt([NumCast(doc.x), NumCast(doc.y)], 1); + !doc.z && this.scaleAtPt(DocumentView._focusHack, 1); // [NumCast(doc.x), NumCast(doc.y)], 1); } else { if (DocListCast(this.dataDoc[this.props.fieldKey]).includes(doc)) { if (!doc.z) this.setPan(newPanX, newPanY, "Ease", true); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c0d530160..fb0b1d4f4 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -317,6 +317,9 @@ export class DocumentView extends DocComponent(Docu if ((this.props.Document.onDragStart || (this.props.Document.rootDocument && this.props.Document.isTemplateForField)) && !(e.ctrlKey || e.button > 0)) { // onDragStart implies a button doc that we don't want to select when clicking. RootDocument & isTEmplaetForField implies we're clicking on part of a template instance and we want to select the whole template, not the part stopPropagate = false; // don't stop propagation for field templates -- want the selection to propagate up to the root document of the template } else { + DocumentView._focusHack = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY) || [0, 0]; + DocumentView._focusHack = [DocumentView._focusHack[0] + NumCast(this.props.Document.x), DocumentView._focusHack[1] + NumCast(this.props.Document.y)]; + this.props.focus(this.props.Document, false); SelectionManager.SelectDoc(this, e.ctrlKey); } @@ -326,6 +329,7 @@ export class DocumentView extends DocComponent(Docu preventDefault && e.preventDefault(); } } + static _focusHack: number[] = []; // bcz :this will get fixed... // follows a link - if the target is on screen, it highlights/pans to it. // if the target isn't onscreen, then it will open up the target in a tab, on the right, or in place -- cgit v1.2.3-70-g09d2 From 67c56296339bd1c760b704c1d14710ec6f575d49 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 17 Apr 2020 22:55:10 -0400 Subject: added freeze button for web boxes. cleaned up pointerevent setting throughout code. --- src/client/views/InkingStroke.scss | 8 +++- src/client/views/InkingStroke.tsx | 5 +-- src/client/views/Main.scss | 1 - src/client/views/MainView.scss | 1 + .../views/collections/CollectionTreeView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 2 +- .../collectionFreeForm/MarqueeView.scss | 1 - src/client/views/nodes/DocumentView.tsx | 4 +- src/client/views/nodes/FormattedTextBox.scss | 1 - src/client/views/nodes/FormattedTextBox.tsx | 2 +- src/client/views/nodes/ImageBox.scss | 1 - src/client/views/nodes/KeyValueBox.scss | 1 - src/client/views/nodes/LabelBox.scss | 1 - src/client/views/nodes/LinkAnchorBox.scss | 1 - src/client/views/nodes/PresBox.scss | 1 - src/client/views/nodes/QueryBox.scss | 1 - src/client/views/nodes/ScreenshotBox.scss | 5 --- src/client/views/nodes/ScriptingBox.scss | 1 - src/client/views/nodes/SliderBox.scss | 1 - src/client/views/nodes/VideoBox.scss | 7 ++-- src/client/views/nodes/WebBox.scss | 15 ++++---- src/client/views/nodes/WebBox.tsx | 44 +++++++++------------- 22 files changed, 42 insertions(+), 64 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/InkingStroke.scss b/src/client/views/InkingStroke.scss index cdbfdcff3..433433a42 100644 --- a/src/client/views/InkingStroke.scss +++ b/src/client/views/InkingStroke.scss @@ -1,3 +1,7 @@ -.inkingStroke-marker { - mix-blend-mode: multiply +.inkingStroke { + mix-blend-mode: multiply; + stroke-linejoin: round; + stroke-linecap: round; + overflow: visible !important; + transform-origin: top left; } \ No newline at end of file diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index f66c04e1f..7a318d5c2 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -1,4 +1,3 @@ -import { computed } from "mobx"; import { observer } from "mobx-react"; import { documentSchema } from "../../new_fields/documentSchemas"; import { InkData, InkField, InkTool } from "../../new_fields/InkField"; @@ -47,14 +46,12 @@ export class InkingStroke extends ViewBoxBaseComponent { ContextMenu.Instance.addItem({ diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 4709e7ef2..a2a9ceca5 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -24,7 +24,6 @@ body { .jsx-parser { width: 100%; height: 100%; - pointer-events: none; border-radius: inherit; position: inherit; // background: inherit; diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index e95802e54..e9f2248ad 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -28,6 +28,7 @@ width: 100%; height: 100%; position: absolute; + pointer-events: all; top: 0; left: 0; z-index: 1; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index d2c8cc3ad..510c9924b 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -453,7 +453,7 @@ class TreeView extends React.Component { fontWeight: this.props.document.searchMatch ? "bold" : undefined, textDecoration: Doc.GetT(this.props.document, "title", "string", true) ? "underline" : undefined, outline: BoolCast(this.props.document.workspaceBrush) ? "dashed 1px #06123232" : undefined, - pointerEvents: this.props.active() || SelectionManager.GetIsDragging() ? "all" : "none" + pointerEvents: this.props.active() || SelectionManager.GetIsDragging() ? undefined : "none" }} > {Doc.GetT(this.props.document, "editTitle", "boolean", true) ? this.editableView("title") : diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 19e235ff2..877e4355f 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -472,7 +472,7 @@ export class CollectionView extends Touchable { }; return (
(Docu const titleView = (!showTitle ? (null) :
(Docu transformOrigin: this._animate ? "center center" : undefined, transform: this._animate ? `scale(${this._animate})` : undefined, transition: !this._animate ? StrCast(this.Document.transition) : this._animate < 1 ? "transform 0.5s ease-in" : "transform 0.5s ease-out", - pointerEvents: this.ignorePointerEvents ? "none" : "all", + pointerEvents: this.ignorePointerEvents ? "none" : undefined, color: StrCast(this.layoutDoc.color, "inherit"), outline: highlighting && !borderRounding ? `${highlightColors[fullDegree]} ${highlightStyles[fullDegree]} ${localScale}px` : "solid 0px", border: highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined, diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss index 7d40b3149..7a05ec3a3 100644 --- a/src/client/views/nodes/FormattedTextBox.scss +++ b/src/client/views/nodes/FormattedTextBox.scss @@ -25,7 +25,6 @@ overflow-x: hidden; color: initial; height: 100%; - pointer-events: all; max-height: 100%; display: flex; flex-direction: row; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index d641dc791..62911dc5c 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -1185,7 +1185,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp background: this.props.hideOnLeave ? "rgba(0,0,0 ,0.4)" : StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"]), opacity: this.props.hideOnLeave ? (this._entered ? 1 : 0.1) : 1, color: this.props.hideOnLeave ? "white" : "inherit", - pointerEvents: interactive ? "none" : "all", + pointerEvents: interactive ? "none" : undefined, fontSize: NumCast(this.layoutDoc.fontSize, 13), fontFamily: StrCast(this.layoutDoc.fontFamily, "Crimson Text"), }} diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index 7bbf4a368..49425c2c2 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -1,6 +1,5 @@ .imageBox, .imageBox-dragging { - pointer-events: all; border-radius: inherit; width: 100%; height: 100%; diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss index a26880c9e..eb7c2f32b 100644 --- a/src/client/views/nodes/KeyValueBox.scss +++ b/src/client/views/nodes/KeyValueBox.scss @@ -8,7 +8,6 @@ border-radius: $border-radius; box-sizing: border-box; display: inline-block; - pointer-events: all; cursor: default; .imageBox-cont img { width: auto; diff --git a/src/client/views/nodes/LabelBox.scss b/src/client/views/nodes/LabelBox.scss index ab5b2c6b3..56dd86ff9 100644 --- a/src/client/views/nodes/LabelBox.scss +++ b/src/client/views/nodes/LabelBox.scss @@ -1,7 +1,6 @@ .labelBox-outerDiv { width: 100%; height: 100%; - pointer-events: all; border-radius: inherit; display: flex; flex-direction: column; diff --git a/src/client/views/nodes/LinkAnchorBox.scss b/src/client/views/nodes/LinkAnchorBox.scss index 7b6093ebd..24f9c1ea0 100644 --- a/src/client/views/nodes/LinkAnchorBox.scss +++ b/src/client/views/nodes/LinkAnchorBox.scss @@ -4,7 +4,6 @@ width: 15; height: 15; border-radius: 20px; - pointer-events: all; user-select: none; .linkAnchorBox-linkCloser { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index ba8389fda..6676d8cd2 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -10,7 +10,6 @@ letter-spacing: 2px; overflow: hidden; transition: 0.7s opacity ease; - pointer-events: all; .presBox-buttons { padding: 10px; diff --git a/src/client/views/nodes/QueryBox.scss b/src/client/views/nodes/QueryBox.scss index 82f64054c..b5f90aa1e 100644 --- a/src/client/views/nodes/QueryBox.scss +++ b/src/client/views/nodes/QueryBox.scss @@ -2,5 +2,4 @@ width: 100%; height: 100%; position: absolute; - pointer-events: all; } \ No newline at end of file diff --git a/src/client/views/nodes/ScreenshotBox.scss b/src/client/views/nodes/ScreenshotBox.scss index 6cc184948..141960f60 100644 --- a/src/client/views/nodes/ScreenshotBox.scss +++ b/src/client/views/nodes/ScreenshotBox.scss @@ -1,5 +1,4 @@ .screenshotBox { - pointer-events: all; transform-origin: top left; background: white; color: black; @@ -21,10 +20,6 @@ height: Auto; } -.screenshotBox-content-interactive, .screenshotBox-content-fullScreen { - pointer-events: all; -} - .screenshotBox-uiButtons { background:dimgray; border: orange solid 1px; diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss index 678a1a22d..43695f00d 100644 --- a/src/client/views/nodes/ScriptingBox.scss +++ b/src/client/views/nodes/ScriptingBox.scss @@ -3,7 +3,6 @@ height: 100%; display: flex; flex-direction: column; - pointer-events: all; background-color: rgb(241, 239, 235); padding: 10px; .scriptingBox-inputDiv { diff --git a/src/client/views/nodes/SliderBox.scss b/src/client/views/nodes/SliderBox.scss index 4ef277d8c..78015bd70 100644 --- a/src/client/views/nodes/SliderBox.scss +++ b/src/client/views/nodes/SliderBox.scss @@ -1,7 +1,6 @@ .sliderBox-outerDiv { width: 100%; height: 100%; - pointer-events: all; border-radius: inherit; display: flex; flex-direction: column; diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index fabbf5196..0c0854ac2 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -1,5 +1,4 @@ .videoBox { - pointer-events: all; transform-origin: top left; .videoBox-viewer { opacity: 0.99; // hack! overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger @@ -24,9 +23,9 @@ height: 100%; } -.videoBox-content-interactive, .videoBox-content-fullScreen, .videoBox-content-YouTube-fullScreen { - pointer-events: all; -} +// .videoBox-content-interactive, .videoBox-content-fullScreen, .videoBox-content-YouTube-fullScreen { +// pointer-events: all; +// } .videoBox-time{ color : white; diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 3014b9425..cdeac4bd1 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -18,8 +18,7 @@ display:none; } } -.webBox-cont, -.webBox-cont-dragging { +.webBox-cont { padding: 0vw; position: absolute; top: 0; @@ -32,8 +31,6 @@ } .webBox-cont-interactive { - pointer-events: all; - span { user-select: text !important; } @@ -49,7 +46,6 @@ width: 100%; height: 100%; position: absolute; - pointer-events: all; } .webBox-button { @@ -59,7 +55,7 @@ height: 100%; } -.webView-urlEditor { +.webBox-urlEditor { position: relative; opacity: 0.9; z-index: 9001; @@ -74,6 +70,12 @@ padding-bottom: 10px; overflow: hidden; + .webBox-freeze { + display: flex; + align-items: center; + justify-content: center; + } + .editorBase { display: flex; @@ -115,7 +117,6 @@ width: 100%; height: 100%; position: absolute; - pointer-events: all; .indicator { position: absolute; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index b48437464..26e947f5b 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -1,5 +1,5 @@ import { library } from "@fortawesome/fontawesome-svg-core"; -import { faStickyNote } from '@fortawesome/free-solid-svg-icons'; +import { faStickyNote, faLock, faUnlock } from '@fortawesome/free-solid-svg-icons'; import { action, computed, observable, trace } from "mobx"; import { observer } from "mobx-react"; import { Doc, FieldResult } from "../../../new_fields/Doc"; @@ -23,6 +23,7 @@ import React = require("react"); import * as WebRequest from 'web-request'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; +import { DocumentView } from "./DocumentView"; const htmlToText = require("html-to-text"); library.add(faStickyNote); @@ -116,31 +117,21 @@ export class WebBox extends ViewBoxAnnotatableComponent { - let url: string = ""; - const field = Cast(this.rootDoc[this.props.fieldKey], WebField); - if (field) url = field.url.href; - - const newBox = Docs.Create.TextDocument(url, { - x: NumCast(this.rootDoc.x), - y: NumCast(this.rootDoc.y), - title: url, - _width: 200, - _height: 70, - }); - - SelectionManager.SelectedDocuments().map(dv => { - dv.props.addDocument?.(newBox); - dv.props.removeDocument?.(dv.rootDoc); - }); - - Doc.BrushDoc(newBox); + toggleNativeDimensions = () => { + if (this.Document._nativeWidth || this.Document._nativeHeight) { + DocumentView.unfreezeNativeDimensions(this.layoutDoc); + this.layoutDoc.lockedTransform = false; + } + else { + Doc.freezeNativeDimensions(this.layoutDoc, this.props.PanelWidth(), this.props.PanelHeight()); + this.layoutDoc.lockedTransform = true; + } } urlEditor() { + const frozen = this.layoutDoc._nativeWidth && this.layoutDoc._nativeHeight; return ( -
+
-
- +
+
@@ -331,7 +322,8 @@ export class WebBox extends ViewBoxAnnotatableComponent {!frozen ? (null) : -
+
@@ -350,7 +342,7 @@ export class WebBox extends ViewBoxAnnotatableComponent {this.content}
e.stopPropagation()} onScroll={e => { if (this._iframeRef.current!.contentDocument!.children[0].scrollTop !== this._outerRef.current!.scrollTop) { -- cgit v1.2.3-70-g09d2 From d3aebc8404685496673a8611a6d72ff7695ad191 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 18 Apr 2020 13:42:03 -0400 Subject: several pointerevent fixes broken by last change. added scroll to target for webBox links. --- src/client/util/DocumentManager.ts | 13 ++- .../views/collections/CollectionTreeView.tsx | 1 - .../collectionFreeForm/CollectionFreeFormView.tsx | 6 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 1 - src/client/views/nodes/DocumentView.scss | 10 -- src/client/views/nodes/DocumentView.tsx | 118 ++++++++++----------- src/client/views/nodes/FormattedTextBoxComment.tsx | 4 +- src/client/views/nodes/LinkAnchorBox.scss | 1 + src/client/views/nodes/LinkAnchorBox.tsx | 2 + src/client/views/nodes/LinkBox.tsx | 1 - src/client/views/nodes/WebBox.tsx | 22 ++-- src/client/views/pdf/Annotation.tsx | 4 +- src/client/views/pdf/PDFViewer.tsx | 8 +- 13 files changed, 100 insertions(+), 91 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 2d6078cf3..e66e67723 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -156,7 +156,12 @@ export class DocumentManager { let annotatedDoc = await Cast(targetDoc.annotationOn, Doc); if (annotatedDoc) { const first = getFirstDocView(annotatedDoc); - if (first) annotatedDoc = first.props.Document; + if (first) { + annotatedDoc = first.props.Document; + if (docView) { + docView.props.focus(annotatedDoc, false); + } + } } if (docView) { // we have a docView already and aren't forced to create a new one ... just focus on the document. TODO move into view if necessary otherwise just highlight? docView.props.focus(docView.props.Document, willZoom, undefined, focusAndFinish); @@ -219,9 +224,9 @@ export class DocumentManager { if (linkDoc) { const target = (doc === linkDoc.anchor1 ? linkDoc.anchor2 : doc === linkDoc.anchor2 ? linkDoc.anchor1 : (Doc.AreProtosEqual(doc, linkDoc.anchor1 as Doc) ? linkDoc.anchor2 : linkDoc.anchor1)) as Doc; - const targetTimecode = (doc === linkDoc.anchor1 ? Cast(linkDoc.anchor2_timecode, "number") : - doc === linkDoc.anchor2 ? Cast(linkDoc.anchor1_timecode, "number"): - (Doc.AreProtosEqual(doc, linkDoc.anchor1 as Doc) ? Cast(linkDoc.anchor2_timecode, "number"):Cast(linkDoc.anchor1_timecode, "number"))); + const targetTimecode = (doc === linkDoc.anchor1 ? Cast(linkDoc.anchor2_timecode, "number") : + doc === linkDoc.anchor2 ? Cast(linkDoc.anchor1_timecode, "number") : + (Doc.AreProtosEqual(doc, linkDoc.anchor1 as Doc) ? Cast(linkDoc.anchor2_timecode, "number") : Cast(linkDoc.anchor1_timecode, "number"))); if (target) { const containerDoc = (await Cast(target.annotationOn, Doc)) || target; containerDoc.currentTimecode = targetTimecode; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 510c9924b..5ff8c11ee 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -145,7 +145,6 @@ class TreeView extends React.Component { ele && (this._treedropDisposer = DragManager.MakeDropTarget(ele, this.treeDrop.bind(this))); } - onPointerDown = (e: React.PointerEvent) => e.stopPropagation(); onPointerEnter = (e: React.PointerEvent): void => { this.props.active(true) && Doc.BrushDoc(this.dataDoc); if (e.buttons === 1 && SelectionManager.GetIsDragging()) { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 02f9bd487..b3409bd57 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -804,7 +804,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u if (!annotOn) { this.props.focus(doc); } else { - const contextHgt = Doc.AreProtosEqual(annotOn, this.props.Document) && this.props.VisibleHeight ? this.props.VisibleHeight() : NumCast(annotOn.height); + const contextHgt = Doc.AreProtosEqual(annotOn, this.props.Document) && this.props.VisibleHeight ? this.props.VisibleHeight() : NumCast(annotOn._height); const offset = annotOn && (contextHgt / 2 * 96 / 72); this.props.Document.scrollY = NumCast(doc.y) - offset; } @@ -820,7 +820,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u const savedState = { px: this.Document._panX, py: this.Document._panY, s: this.Document.scale, pt: this.Document.panTransformType }; - if (!willZoom) { + if (!willZoom && DocumentView._focusHack.length) { Doc.BrushDoc(this.props.Document); !doc.z && this.scaleAtPt(DocumentView._focusHack, 1); // [NumCast(doc.x), NumCast(doc.y)], 1); } else { @@ -995,7 +995,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u {...this.getChildDocumentViewProps(pair.layout, pair.data)} dataProvider={this.childDataProvider} LayoutDoc={this.childLayoutDocFunc} - pointerEvents={this.props.layoutEngine?.() !== undefined ? "none" : undefined} + pointerEvents={this.props.layoutEngine?.() !== undefined ? false : undefined} jitterRotation={NumCast(this.props.Document.jitterRotation)} fitToBox={this.props.fitToBox || BoolCast(this.props.freezeChildDimensions)} FreezeDimensions={BoolCast(this.props.freezeChildDimensions)} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 05ad98c43..e325a70c0 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -22,7 +22,6 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { width?: number; height?: number; jitterRotation: number; - pointerEvents?: "none"; transition?: string; fitToBox?: boolean; } diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index fc9ee1201..81ae36cc0 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -38,16 +38,6 @@ display:flex; overflow: hidden; } - .documentView-linkAnchorBoxWrapper { - pointer-events: none; - position: absolute; - transform-origin: top left; - width: 100%; - height: 100%; - top:0; - left:0; - z-index: 1; - } .documentView-lock { width: 20; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 2f22488e4..2bae2fa96 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -80,6 +80,7 @@ export interface DocumentViewProps { ContentScaling: () => number; PanelWidth: () => number; PanelHeight: () => number; + pointerEvents?: boolean; focus: (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: DocFocusFunc) => void; parentActive: (outsideReaction: boolean) => boolean; whenActiveChanged: (isActive: boolean) => void; @@ -994,38 +995,42 @@ export class DocumentView extends DocComponent(Docu screenToLocalTransform = () => this.props.ScreenToLocalTransform(); @computed get contents() { TraceMobx(); - return (); + return (<> + + {this.anchors} + + ); } linkEndpoint = (linkDoc: Doc) => Doc.LinkEndpoint(linkDoc, this.props.Document); @@ -1049,20 +1054,19 @@ export class DocumentView extends DocComponent(Docu @computed get anchors() { TraceMobx(); return this.layoutDoc.presBox ? (null) : DocListCast(this.Document.links).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) => -
- -
); + ); } @computed get innards() { TraceMobx(); @@ -1101,22 +1105,18 @@ export class DocumentView extends DocComponent(Docu SetValue={undoBatch((value: string) => (Doc.GetProto(this.props.DataDoc || this.props.Document)[showTitle] = value) ? true : true)} />
); - return <> - {this.anchors} - {!showTitle && !showCaption ? - this.contents : -
-
- {this.contents} -
- {titleView} - {captionView} + return !showTitle && !showCaption ? + this.contents : +
+
+ {this.contents}
- } - ; + {titleView} + {captionView} +
; } @computed get ignorePointerEvents() { - return (this.Document.isBackground && !this.isSelected() && !SelectionManager.GetIsDragging()) || this.props.layoutKey?.includes("layout_key") || (this.Document.type === DocumentType.INK && InkingControl.Instance.selectedTool !== InkTool.None); + return this.props.pointerEvents === false || (this.Document.isBackground && !this.isSelected() && !SelectionManager.GetIsDragging()) || (this.Document.type === DocumentType.INK && InkingControl.Instance.selectedTool !== InkTool.None); } @observable _animate = 0; diff --git a/src/client/views/nodes/FormattedTextBoxComment.tsx b/src/client/views/nodes/FormattedTextBoxComment.tsx index 35304033f..41df5b3c1 100644 --- a/src/client/views/nodes/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/FormattedTextBoxComment.tsx @@ -16,6 +16,7 @@ import React = require("react"); import { Docs } from "../../documents/Documents"; import wiki from "wikijs"; import { DocumentType } from "../../documents/DocumentTypes"; +import { DocumentView } from "./DocumentView"; export let formattedTextBoxCommentPlugin = new Plugin({ view(editorView) { return new FormattedTextBoxComment(editorView); } @@ -85,8 +86,9 @@ export class FormattedTextBoxComment { const textBox = FormattedTextBoxComment.textBox; if (FormattedTextBoxComment.linkDoc && !keep && textBox) { if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { - textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab":"onRight"); + textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); } else { + DocumentView._focusHack = []; DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); } diff --git a/src/client/views/nodes/LinkAnchorBox.scss b/src/client/views/nodes/LinkAnchorBox.scss index 24f9c1ea0..710f2178b 100644 --- a/src/client/views/nodes/LinkAnchorBox.scss +++ b/src/client/views/nodes/LinkAnchorBox.scss @@ -5,6 +5,7 @@ height: 15; border-radius: 20px; user-select: none; + pointer-events: all; .linkAnchorBox-linkCloser { position: absolute; diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index 13ffc6956..3b1ced815 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -17,6 +17,7 @@ import { LinkEditor } from "../linking/LinkEditor"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { SelectionManager } from "../../util/SelectionManager"; import { TraceMobx } from "../../../new_fields/util"; +import { DocumentView } from "./DocumentView"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -74,6 +75,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent { + DocumentView._focusHack = []; DocumentManager.Instance.FollowLink(this.rootDoc, anchorContainerDoc, document => this.props.addDocTab(document, StrCast(this.layoutDoc.linkOpenLocation, "inTab")), false); this._editing = false; }), 300 - (Date.now() - this._lastTap)); diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index af4bf420f..740f2ef04 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -17,7 +17,6 @@ export class LinkBox extends ViewBoxBaseComponent( public static LayoutString(fieldKey: string) { return FieldView.LayoutString(LinkBox, fieldKey); } render() { return
e.button === 0 && !e.ctrlKey && e.stopPropagation()} style={{ background: this.props.backgroundColor?.(this.props.Document) }} > (); private _iframeRef = React.createRef(); private _iframeIndicatorRef = React.createRef(); private _iframeDragRef = React.createRef(); - @observable private _pressX: number = 0; - @observable private _pressY: number = 0; - private _scrollTop = 0; + private _reactionDisposer?: IReactionDisposer; private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean) => void); iframeLoaded = action((e: any) => { @@ -53,6 +52,16 @@ export class WebBox extends ViewBoxAnnotatableComponent this.layoutDoc.scrollY, + (scrollY) => { + if (scrollY !== undefined) { + this._outerRef.current!.scrollTop = scrollY; + this.layoutDoc.scrollY = undefined; + } + }, + { fireImmediately: true } + ); }); setPreviewCursor = (func?: (x: number, y: number, drag: boolean) => void) => this._setPreviewCursor = func; iframedown = (e: PointerEvent) => { @@ -60,7 +69,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { const scroll = (e.target as any)?.children?.[0].scrollTop; - this.layoutDoc.scrollTop = this._outerRef.current!.scrollTop = this._scrollTop = scroll; + this.layoutDoc.scrollTop = this._outerRef.current!.scrollTop = scroll; } async componentDidMount() { @@ -87,6 +96,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { else if (e.button === 0) { const annoGroup = await Cast(this.props.document.group, Doc); if (annoGroup) { - DocumentManager.Instance.FollowLink(undefined, annoGroup, (doc, followLinkLocation) => this.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation), false, undefined); + DocumentView._focusHack = []; + DocumentManager.Instance.FollowLink(undefined, annoGroup, (doc, followLinkLocation) => this.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation), false, undefined); e.stopPropagation(); } } diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 948d2300d..75be08e9f 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -9,7 +9,7 @@ import { List } from "../../../new_fields/List"; import { makeInterface, createSchema } from "../../../new_fields/Schema"; import { ScriptField, ComputedField } from "../../../new_fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../new_fields/Types"; -import { smoothScroll, Utils, emptyFunction, returnOne, intersectRect, addStyleSheet, addStyleSheetRule, clearStyleSheetRules, returnZero } from "../../../Utils"; +import { smoothScroll, Utils, emptyFunction, returnOne, intersectRect, addStyleSheet, addStyleSheetRule, clearStyleSheetRules, returnZero, emptyPath } from "../../../Utils"; import { Docs, DocUtils } from "../../documents/Documents"; import { DragManager } from "../../util/DragManager"; import { CompiledScript, CompileScript } from "../../util/Scripting"; @@ -607,7 +607,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { - if (!this.props.Document[HeightSym]() || !this.props.Document.nativeHeight) { + if (!this.props.Document[HeightSym]() || !this.props.Document._nativeHeight) { setTimeout((() => { this.Document._height = this.Document[WidthSym]() * this._coverPath.height / this._coverPath.width; this.Document._nativeHeight = (this.Document._nativeWidth || 0) * this._coverPath.height / this._coverPath.width; @@ -632,7 +632,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent + return
{this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map((anno, index) => )}
; @@ -643,7 +643,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent Date: Sat, 18 Apr 2020 17:42:09 -0400 Subject: cleaned up webbox - fit width by default. native dimensions by default. toggle buttons for annotate/interact. --- src/client/documents/Documents.ts | 4 +- .../views/collections/CollectionDockingView.tsx | 30 ++++++--- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/PDFBox.scss | 3 - src/client/views/nodes/WebBox.scss | 21 +++--- src/client/views/nodes/WebBox.tsx | 78 ++++++++++++---------- src/client/views/pdf/PDFViewer.scss | 4 -- src/client/views/pdf/PDFViewer.tsx | 7 +- 8 files changed, 77 insertions(+), 72 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 968e3d4dc..baaee09ea 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -590,7 +590,7 @@ export namespace Docs { } export function WebDocument(url: string, options: DocumentOptions = {}) { - return InstanceFromProto(Prototypes.get(DocumentType.WEB), new WebField(new URL(url)), options); + return InstanceFromProto(Prototypes.get(DocumentType.WEB), new WebField(new URL(url)), { _fitWidth: true, ...options }); } export function HtmlDocument(html: string, options: DocumentOptions = {}) { @@ -914,7 +914,7 @@ export namespace Docs { }); } ctor = Docs.Create.WebDocument; - options = { _height: options._width, ...options, title: path, _nativeWidth: undefined }; + options = { ...options, _nativeWidth: 850, _nativeHeight: 962, _width: 500, _height: 566, title: path, }; } return ctor ? ctor(path, options) : undefined; } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index d77ef812f..c74f5555b 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -739,19 +739,27 @@ export class DockedFrameRenderer extends React.Component { nativeHeight = () => !this.layoutDoc!._fitWidth ? NumCast(this.layoutDoc!._nativeHeight) || this._panelHeight : 0; contentScaling = () => { - if (this.layoutDoc!.type === DocumentType.PDF) { - if ((this.layoutDoc && this.layoutDoc._fitWidth) || - this._panelHeight / NumCast(this.layoutDoc!._nativeHeight) > this._panelWidth / NumCast(this.layoutDoc!._nativeWidth)) { - return this._panelWidth / NumCast(this.layoutDoc!._nativeWidth); - } else { - return this._panelHeight / NumCast(this.layoutDoc!._nativeHeight); - } - } const nativeH = this.nativeHeight(); const nativeW = this.nativeWidth(); - if (!nativeW || !nativeH) return 1; - const wscale = this.panelWidth() / nativeW; - return wscale * nativeH > this._panelHeight ? this._panelHeight / nativeH : wscale; + let scaling = 1; + if (!this.layoutDoc?._fitWidth && (!nativeW || !nativeH)) { + scaling = 1; + } else if ((this.layoutDoc?._fitWidth) || + this._panelHeight / NumCast(this.layoutDoc!._nativeHeight) > this._panelWidth / NumCast(this.layoutDoc!._nativeWidth)) { + scaling = this._panelWidth / NumCast(this.layoutDoc!._nativeWidth); + } else { + // if (this.layoutDoc!.type === DocumentType.PDF || this.layoutDoc!.type === DocumentType.WEB) { + // if ((this.layoutDoc?._fitWidth) || + // this._panelHeight / NumCast(this.layoutDoc!._nativeHeight) > this._panelWidth / NumCast(this.layoutDoc!._nativeWidth)) { + // return this._panelWidth / NumCast(this.layoutDoc!._nativeWidth); + // } else { + // return this._panelHeight / NumCast(this.layoutDoc!._nativeHeight); + // } + // } + const wscale = this.panelWidth() / nativeW; + scaling = wscale * nativeH > this._panelHeight ? this._panelHeight / nativeH : wscale; + } + return scaling; } ScreenToLocalTransform = () => { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b3409bd57..87cf716e5 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -822,7 +822,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u if (!willZoom && DocumentView._focusHack.length) { Doc.BrushDoc(this.props.Document); - !doc.z && this.scaleAtPt(DocumentView._focusHack, 1); // [NumCast(doc.x), NumCast(doc.y)], 1); + !doc.z && NumCast(this.layoutDoc.scale) < 1 && this.scaleAtPt(DocumentView._focusHack, 1); // [NumCast(doc.x), NumCast(doc.y)], 1); } else { if (DocListCast(this.dataDoc[this.props.fieldKey]).includes(doc)) { if (!doc.z) this.setPan(newPanX, newPanY, "Ease", true); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 7a3d2e92b..bccf0f291 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -199,9 +199,6 @@ .pdfBox { pointer-events: none; - .collectionFreeFormView-none { - pointer-events: none; - } .pdfViewer-text { .textLayer { span { diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index cdeac4bd1..af84a7d95 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -48,11 +48,17 @@ position: absolute; } -.webBox-button { - padding: 0vw; - border: none; +.webBox-buttons { + margin-left: 44; + background:lightGray; width: 100%; - height: 100%; +} +.webBox-freeze { + display: flex; + align-items: center; + justify-content: center; + margin-right: 5px; + width: 30px; } .webBox-urlEditor { @@ -60,7 +66,6 @@ opacity: 0.9; z-index: 9001; transition: top .5s; - background: lightgrey; padding: 10px; @@ -70,12 +75,6 @@ padding-bottom: 10px; overflow: hidden; - .webBox-freeze { - display: flex; - align-items: center; - justify-content: center; - } - .editorBase { display: flex; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 510e6be0c..0a7772044 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -1,5 +1,5 @@ import { library } from "@fortawesome/fontawesome-svg-core"; -import { faStickyNote, faLock, faUnlock } from '@fortawesome/free-solid-svg-icons'; +import { faStickyNote, faPen, faMousePointer } from '@fortawesome/free-solid-svg-icons'; import { action, computed, observable, trace, IReactionDisposer, reaction } from "mobx"; import { observer } from "mobx-react"; import { Doc, FieldResult } from "../../../new_fields/Doc"; @@ -34,8 +34,8 @@ const WebDocument = makeInterface(documentSchema); export class WebBox extends ViewBoxAnnotatableComponent(WebDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(WebBox, fieldKey); } - @observable private collapsed: boolean = true; - @observable private url: string = "hello"; + @observable private _collapsed: boolean = true; + @observable private _url: string = "hello"; @observable private _pressX: number = 0; @observable private _pressY: number = 0; @@ -105,19 +105,19 @@ export class WebBox extends ViewBoxAnnotatableComponent) => { - this.url = e.target.value; + this._url = e.target.value; } @action submitURL = () => { - this.dataDoc[this.props.fieldKey] = new WebField(new URL(this.url)); + this.dataDoc[this.props.fieldKey] = new WebField(new URL(this._url)); } @action setURL() { const urlField: FieldResult = Cast(this.dataDoc[this.props.fieldKey], WebField); - if (urlField) this.url = urlField.url.toString(); - else this.url = ""; + if (urlField) this._url = urlField.url.toString(); + else this._url = ""; } onValueKeyDown = async (e: React.KeyboardEvent) => { @@ -128,36 +128,44 @@ export class WebBox extends ViewBoxAnnotatableComponent { - if (this.Document._nativeWidth || this.Document._nativeHeight) { - DocumentView.unfreezeNativeDimensions(this.layoutDoc); + if (!this.layoutDoc.isAnnotating) { + //DocumentView.unfreezeNativeDimensions(this.layoutDoc); this.layoutDoc.lockedTransform = false; + this.layoutDoc.isAnnotating = true; } else { - Doc.freezeNativeDimensions(this.layoutDoc, this.props.PanelWidth(), this.props.PanelHeight()); + //Doc.freezeNativeDimensions(this.layoutDoc, this.props.PanelWidth(), this.props.PanelHeight()); this.layoutDoc.lockedTransform = true; + this.layoutDoc.isAnnotating = false; } } urlEditor() { - const frozen = this.layoutDoc._nativeWidth && this.layoutDoc._nativeHeight; + const frozen = this.layoutDoc._nativeWidth && this.layoutDoc.isAnnotating; return ( -
+
-
+
+
+ +
+
+ +
@@ -170,9 +178,6 @@ export class WebBox extends ViewBoxAnnotatableComponent SUBMIT -
- -
@@ -183,7 +188,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { - this.collapsed = !this.collapsed; + this._collapsed = !this._collapsed; } _ignore = 0; @@ -326,20 +331,19 @@ export class WebBox extends ViewBoxAnnotatableComponent -
- {content} -
- {!frozen ? (null) : -
-
-
-
-
-
} - ); + return (<> +
+ {content} +
+ {!frozen ? (null) : +
+
+
+
+
+
} + ); } scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.props.Document.scrollTop)) render() { @@ -352,7 +356,7 @@ export class WebBox extends ViewBoxAnnotatableComponent {this.content}
e.stopPropagation()} onScroll={e => { if (this._iframeRef.current!.contentDocument!.children[0].scrollTop !== this._outerRef.current!.scrollTop) { diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index 5cd2c4fe4..26c31a80e 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -30,10 +30,6 @@ .page { position: relative; } - .collectionfreeformview-container { - pointer-events: none; - } - .pdfViewer-text-selected { .textLayer{ pointer-events: all; diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 75be08e9f..d54390236 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -282,7 +282,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { // creates annotation documents for current highlights const annotationDoc = this.makeAnnotationDocument(color); - annotationDoc && this.props.addDocument && this.props.addDocument(annotationDoc); + annotationDoc && this.props?.addDocument(annotationDoc); return annotationDoc; } @@ -585,6 +584,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { if (!e.aborted && e.annoDragData && !e.annoDragData.linkedToDoc) { const link = DocUtils.MakeLink({ doc: annotationDoc }, { doc: e.annoDragData.dropDocument }, "Annotation"); + annotationDoc.isLinkButton = true; if (link) link.followLinkLocation = "onRight"; } } @@ -641,7 +641,8 @@ export class PDFViewer extends ViewBoxAnnotatableComponent (this.Document.scrollHeight || this.Document._nativeHeight || 0); panelHeight = () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : (this.Document._nativeWidth || 0); @computed get overlayLayer() { - return
+ return