From 1bbbb660e8f1f5e0165e4ab6d3d4ac1340cb2e23 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 8 Apr 2020 23:23:52 -0700 Subject: menu no longer buried under search resuslts, filter booleans now passed onto new search docs, and minor ui tweaks --- src/client/documents/Documents.ts | 4 +-- src/client/views/nodes/QueryBox.tsx | 2 +- src/client/views/search/SearchBox.scss | 8 ++++-- src/client/views/search/SearchBox.tsx | 51 +++++++++++++++++++++++++--------- 4 files changed, 46 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1a2969cf5..8676abbfd 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -41,7 +41,7 @@ import { ComputedField, ScriptField } from "../../new_fields/ScriptField"; import { ProxyField } from "../../new_fields/Proxy"; import { DocumentType } from "./DocumentTypes"; import { RecommendationsBox } from "../views/RecommendationsBox"; -import { SearchBox } from "../views/search/SearchBox"; +import { filterData} from "../views/search/SearchBox"; //import { PresBox } from "../views/nodes/PresBox"; //import { PresField } from "../../new_fields/PresField"; @@ -166,7 +166,7 @@ export interface DocumentOptions { syntaxColor?: string; // can be applied to text for syntax highlighting all matches in the text searchText?: string, //for searchbox searchQuery?: string, // for queryBox - filterQuery?: string, + filterQuery?: filterData, linearViewIsExpanded?: boolean; // is linear view expanded } diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx index 7016b4f04..419768719 100644 --- a/src/client/views/nodes/QueryBox.tsx +++ b/src/client/views/nodes/QueryBox.tsx @@ -28,7 +28,7 @@ export class QueryBox extends DocAnnotatableComponent e.stopPropagation()} > - + ; } } \ No newline at end of file diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index f0223ca76..804a623f7 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -44,9 +44,11 @@ &.searchBox-filter { align-self: stretch; + button{ + transform:none; + } button:hover{ - transform:scale(1.0); - background:"#121721"; + transform:none; } } @@ -95,7 +97,7 @@ background: #121721; flex-direction: column; transform-origin: top; - transition: height 0.3s ease, display 0.6s ease; + transition: height 0.3s ease, display 0.6s ease, overflow 0.6s ease; height:0px; overflow:hidden; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 49b6b18ca..bc77bff2e 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -19,13 +19,14 @@ import { FieldView } from '../nodes/FieldView'; import { DocumentType } from "../../documents/DocumentTypes"; import { DocumentView } from '../nodes/DocumentView'; import { SelectionManager } from '../../util/SelectionManager'; +import { FilterQuery } from 'mongodb'; library.add(faTimes); export interface SearchProps { id: string; searchQuery?: string; - filterQquery?: string; + filterQuery?: filterData; } export enum Keys { @@ -34,6 +35,13 @@ export enum Keys { DATA = "data" } +export interface filterData{ + deletedDocsStatus: boolean; + authorFieldStatus: boolean; + titleFieldStatus:boolean; + basicWordStatus:boolean; + icons: string[]; +} @observer export class SearchBox extends React.Component { @@ -65,6 +73,7 @@ export class SearchBox extends React.Component { @observable private _nodeStatus: boolean = false; @observable private _keyStatus: boolean = false; + @observable private newAssign: boolean = true; constructor(props: any) { super(props); @@ -77,9 +86,18 @@ export class SearchBox extends React.Component { this.inputRef.current.focus(); runInAction(() => this._searchbarOpen = true); } - if (this.props.searchQuery && this.props.filterQquery) { + if (this.props.searchQuery && this.props.filterQuery && this.newAssign) { console.log(this.props.searchQuery); const sq = this.props.searchQuery; + runInAction(() => { + + this._deletedDocsStatus=this.props.filterQuery!.deletedDocsStatus; + this._authorFieldStatus=this.props.filterQuery!.authorFieldStatus + this._titleFieldStatus=this.props.filterQuery!.titleFieldStatus; + this._basicWordStatus=this.props.filterQuery!.basicWordStatus; + this._icons=this.props.filterQuery!.icons; + this.newAssign=false; + }); runInAction(() => { this._searchString = sq; this.submitSearch(); @@ -166,10 +184,10 @@ export class SearchBox extends React.Component { } //if should be searched in a specific collection - if (this._collectionStatus) { - query = this.addCollectionFilter(query); - query = query.replace(/\s+/g, ' ').trim(); - } + // if (this._collectionStatus) { + // query = this.addCollectionFilter(query); + // query = query.replace(/\s+/g, ' ').trim(); + // } return query; } @@ -416,7 +434,14 @@ export class SearchBox extends React.Component { y += 300; } } - return Docs.Create.QueryDocument({ _autoHeight: true, title: this._searchString, filterQuery: this.filterQuery, searchQuery: this._searchString }); + const filter : filterData = { + deletedDocsStatus: this._deletedDocsStatus, + authorFieldStatus: this._authorFieldStatus, + titleFieldStatus: this._titleFieldStatus, + basicWordStatus: this._basicWordStatus, + icons: this._icons, + } + return Docs.Create.QueryDocument({ _autoHeight: true, title: this._searchString, filterQuery: filter, searchQuery: this._searchString }); } @action.bound @@ -450,10 +475,10 @@ export class SearchBox extends React.Component { const scrollY = e ? e.currentTarget.scrollTop : this._resultsRef.current ? this._resultsRef.current.scrollTop : 0; const itemHght = 53; const startIndex = Math.floor(Math.max(0, scrollY / itemHght)); - const endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (this._resultsRef.current.getBoundingClientRect().height / itemHght))); - + //const endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (this._resultsRef.current.getBoundingClientRect().height / itemHght))); + const endIndex= 30; this._endIndex = endIndex === -1 ? 12 : endIndex; - + this._endIndex=30; if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { this._visibleElements = [
No Search Results
]; return; @@ -649,11 +674,11 @@ export class SearchBox extends React.Component { - + -
-
+
0 ? {overflow:"visible"} : {overflow:"hidden"}}> +
-- cgit v1.2.3-70-g09d2 From 5cad16a30c983690f5a2b9c14fa59779df933df3 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 14 Apr 2020 22:14:47 -0700 Subject: adding linear doc wrapper to docs in seaarch menu --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/views/SearchDocBox.tsx | 432 ---------------------------------- src/client/views/nodes/QueryBox.tsx | 2 +- src/client/views/search/SearchBox.tsx | 97 +++++++- 4 files changed, 95 insertions(+), 438 deletions(-) delete mode 100644 src/client/views/SearchDocBox.tsx (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 5fee47e8f..657969121 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -81262 +5763 diff --git a/src/client/views/SearchDocBox.tsx b/src/client/views/SearchDocBox.tsx deleted file mode 100644 index cd9666af8..000000000 --- a/src/client/views/SearchDocBox.tsx +++ /dev/null @@ -1,432 +0,0 @@ -import { library } from "@fortawesome/fontawesome-svg-core"; -import { faBullseye, faLink } from "@fortawesome/free-solid-svg-icons"; -import { action, computed, observable, runInAction } from "mobx"; -import { observer } from "mobx-react"; -//import "./SearchBoxDoc.scss"; -import { Doc, DocListCast } from "../../new_fields/Doc"; -import { Id } from "../../new_fields/FieldSymbols"; -import { BoolCast, Cast, NumCast, StrCast } from "../../new_fields/Types"; -import { returnFalse } from "../../Utils"; -import { Docs } from "../documents/Documents"; -import { SearchUtil } from "../util/SearchUtil"; -import { EditableView } from "./EditableView"; -import { ContentFittingDocumentView } from "./nodes/ContentFittingDocumentView"; -import { FieldView, FieldViewProps } from "./nodes/FieldView"; -import { FilterBox } from "./search/FilterBox"; -import { SearchItem } from "./search/SearchItem"; -import React = require("react"); - -export interface RecProps { - documents: { preview: Doc, similarity: number }[]; - node: Doc; - -} - -library.add(faBullseye, faLink); -export const keyPlaceholder = "Query"; - -@observer -export class SearchDocBox extends React.Component { - - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchDocBox, fieldKey); } - - // @observable private _display: boolean = false; - @observable private _pageX: number = 0; - @observable private _pageY: number = 0; - @observable private _width: number = 0; - @observable private _height: number = 0; - @observable.shallow private _docViews: JSX.Element[] = []; - // @observable private _documents: { preview: Doc, score: number }[] = []; - private previewDocs: Doc[] = []; - - constructor(props: FieldViewProps) { - super(props); - this.editingMetadata = this.editingMetadata || false; - //SearchBox.Instance = this; - this.resultsScrolled = this.resultsScrolled.bind(this); - } - - - @computed - private get editingMetadata() { - return BoolCast(this.props.Document.editingMetadata); - } - - private set editingMetadata(value: boolean) { - this.props.Document.editingMetadata = value; - } - - static readonly buffer = 20; - - componentDidMount() { - runInAction(() => { - console.log("didit" - ); - this.query = StrCast(this.props.Document.searchText); - this.content = (Docs.Create.TreeDocument(DocListCast(Doc.GetProto(this.props.Document).data), { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query })); - - }); - if (this.inputRef.current) { - this.inputRef.current.focus(); - runInAction(() => { - this._searchbarOpen = true; - }); - } - } - - @observable - private content: Doc | undefined; - - @action - updateKey = async (newKey: string) => { - this.query = newKey; - if (newKey.length > 1) { - let newdocs = await this.getAllResults(this.query); - let things = newdocs.docs - console.log(things); - console.log(this.content); - runInAction(() => { - this.content = Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query }); - }); - console.log(this.content); - } - - - //this.keyRef.current && this.keyRef.current.setIsFocused(false); - //this.query.length === 0 && (this.query = keyPlaceholder); - return true; - } - - @computed - public get query() { - return StrCast(this.props.Document.query); - } - - public set query(value: string) { - this.props.Document.query = value; - } - - @observable private _searchString: string = ""; - @observable private _resultsOpen: boolean = false; - @observable private _searchbarOpen: boolean = false; - @observable private _results: [Doc, string[], string[]][] = []; - private _resultsSet = new Map(); - @observable private _openNoResults: boolean = false; - @observable private _visibleElements: JSX.Element[] = []; - - private resultsRef = React.createRef(); - public inputRef = React.createRef(); - - private _isSearch: ("search" | "placeholder" | undefined)[] = []; - private _numTotalResults = -1; - private _endIndex = -1; - - - private _maxSearchIndex: number = 0; - private _curRequest?: Promise = undefined; - - @action - getViews = async (doc: Doc) => { - const results = await SearchUtil.GetViewsOfDocument(doc); - let toReturn: Doc[] = []; - await runInAction(() => { - toReturn = results; - }); - return toReturn; - } - - @action.bound - onChange(e: React.ChangeEvent) { - this._searchString = e.target.value; - - this._openNoResults = false; - this._results = []; - this._resultsSet.clear(); - this._visibleElements = []; - this._numTotalResults = -1; - this._endIndex = -1; - this._curRequest = undefined; - this._maxSearchIndex = 0; - } - - enter = async (e: React.KeyboardEvent) => { - console.log(e.key); - if (e.key === "Enter") { - let newdocs = await this.getAllResults(this.query) - let things = newdocs.docs - console.log(things); - this.content = Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs: "Results"` }); - - } - } - - - @action - submitSearch = async () => { - let query = this._searchString; - query = FilterBox.Instance.getFinalQuery(query); - this._results = []; - this._resultsSet.clear(); - this._isSearch = []; - this._visibleElements = []; - FilterBox.Instance.closeFilter(); - - //if there is no query there should be no result - if (query === "") { - return; - } - else { - this._endIndex = 12; - this._maxSearchIndex = 0; - this._numTotalResults = -1; - await this.getResults(query); - } - - runInAction(() => { - this._resultsOpen = true; - this._searchbarOpen = true; - this._openNoResults = true; - this.resultsScrolled(); - }); - } - - getAllResults = async (query: string) => { - return SearchUtil.Search(query, true, { fq: this.filterQuery, start: 0, rows: 10000000 }); - } - - private get filterQuery() { - const types = FilterBox.Instance.filterTypes; - const includeDeleted = FilterBox.Instance.getDataStatus(); - return "NOT baseProto_b:true" + (includeDeleted ? "" : " AND NOT deleted_b:true") + (types ? ` AND (${types.map(type => `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}" OR type_t:"extension"`).join(" ")})` : ""); - } - - - private NumResults = 25; - private lockPromise?: Promise; - getResults = async (query: string) => { - if (this.lockPromise) { - await this.lockPromise; - } - this.lockPromise = new Promise(async res => { - while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { - this._curRequest = SearchUtil.Search(query, true, { fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*" }).then(action(async (res: SearchUtil.DocSearchResult) => { - - // happens at the beginning - if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) { - this._numTotalResults = res.numFound; - } - - const highlighting = res.highlighting || {}; - const highlightList = res.docs.map(doc => highlighting[doc[Id]]); - const lines = new Map(); - res.docs.map((doc, i) => lines.set(doc[Id], res.lines[i])); - const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc)); - const highlights: typeof res.highlighting = {}; - docs.forEach((doc, index) => highlights[doc[Id]] = highlightList[index]); - const filteredDocs = FilterBox.Instance.filterDocsByType(docs); - runInAction(() => { - // this._results.push(...filteredDocs); - filteredDocs.forEach(doc => { - const index = this._resultsSet.get(doc); - const highlight = highlights[doc[Id]]; - const line = lines.get(doc[Id]) || []; - const hlights = highlight ? Object.keys(highlight).map(key => key.substring(0, key.length - 2)) : []; - if (index === undefined) { - this._resultsSet.set(doc, this._results.length); - this._results.push([doc, hlights, line]); - } else { - this._results[index][1].push(...hlights); - this._results[index][2].push(...line); - } - }); - }); - - this._curRequest = undefined; - })); - this._maxSearchIndex += this.NumResults; - - await this._curRequest; - } - this.resultsScrolled(); - res(); - }); - return this.lockPromise; - } - - collectionRef = React.createRef(); - startDragCollection = async () => { - const res = await this.getAllResults(FilterBox.Instance.getFinalQuery(this._searchString)); - const filtered = FilterBox.Instance.filterDocsByType(res.docs); - // console.log(this._results) - const docs = filtered.map(doc => { - const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); - if (isProto) { - return Doc.MakeDelegate(doc); - } else { - return Doc.MakeAlias(doc); - } - }); - let x = 0; - let y = 0; - for (const doc of docs.map(d => Doc.Layout(d))) { - doc.x = x; - doc.y = y; - const size = 200; - const aspect = NumCast(doc._nativeHeight) / NumCast(doc._nativeWidth, 1); - if (aspect > 1) { - doc._height = size; - doc._width = size / aspect; - } else if (aspect > 0) { - doc._width = size; - doc._height = size * aspect; - } else { - doc._width = size; - doc._height = size; - } - x += 250; - if (x > 1000) { - x = 0; - y += 300; - } - } - //return Docs.Create.TreeDocument(docs, { _width: 200, _height: 400, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` }); - return Docs.Create.QueryDocument(docs, { _width: 200, _height: 400, searchText: this._searchString, title: `Query Docs: "${this._searchString}"` }); - } - - @action.bound - openSearch(e: React.SyntheticEvent) { - e.stopPropagation(); - this._openNoResults = false; - FilterBox.Instance.closeFilter(); - this._resultsOpen = true; - this._searchbarOpen = true; - FilterBox.Instance._pointerTime = e.timeStamp; - } - - @action.bound - closeSearch = () => { - FilterBox.Instance.closeFilter(); - this.closeResults(); - this._searchbarOpen = false; - } - - @action.bound - closeResults() { - this._resultsOpen = false; - this._results = []; - this._resultsSet.clear(); - this._visibleElements = []; - this._numTotalResults = -1; - this._endIndex = -1; - this._curRequest = undefined; - } - - @action - resultsScrolled = (e?: React.UIEvent) => { - if (!this.resultsRef.current) return; - const scrollY = e ? e.currentTarget.scrollTop : this.resultsRef.current ? this.resultsRef.current.scrollTop : 0; - const itemHght = 53; - const startIndex = Math.floor(Math.max(0, scrollY / itemHght)); - const endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (this.resultsRef.current.getBoundingClientRect().height / itemHght))); - - this._endIndex = endIndex === -1 ? 12 : endIndex; - - if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { - this._visibleElements = [
No Search Results
]; - return; - } - - if (this._numTotalResults <= this._maxSearchIndex) { - this._numTotalResults = this._results.length; - } - - // only hit right at the beginning - // visibleElements is all of the elements (even the ones you can't see) - else if (this._visibleElements.length !== this._numTotalResults) { - // undefined until a searchitem is put in there - this._visibleElements = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); - // indicates if things are placeholders - this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); - } - - for (let i = 0; i < this._numTotalResults; i++) { - //if the index is out of the window then put a placeholder in - //should ones that have already been found get set to placeholders? - if (i < startIndex || i > endIndex) { - if (this._isSearch[i] !== "placeholder") { - this._isSearch[i] = "placeholder"; - this._visibleElements[i] =
Loading...
; - } - } - else { - if (this._isSearch[i] !== "search") { - let result: [Doc, string[], string[]] | undefined = undefined; - if (i >= this._results.length) { - this.getResults(this._searchString); - if (i < this._results.length) result = this._results[i]; - if (result) { - const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - this._visibleElements[i] = ; - this._isSearch[i] = "search"; - } - } - else { - result = this._results[i]; - if (result) { - const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - this._visibleElements[i] = ; - this._isSearch[i] = "search"; - } - } - } - } - } - if (this._maxSearchIndex >= this._numTotalResults) { - this._visibleElements.length = this._results.length; - this._isSearch.length = this._results.length; - } - } - - @computed - get resFull() { return this._numTotalResults <= 8; } - - @computed - get resultHeight() { return this._numTotalResults * 70; } - - render() { - const isEditing = this.editingMetadata; - return ( -
- - -
{ this.editingMetadata = !this.editingMetadata })} - /> -
- ""} - /> -
-
- ); - } - -} \ No newline at end of file diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx index 419768719..1b3f6280a 100644 --- a/src/client/views/nodes/QueryBox.tsx +++ b/src/client/views/nodes/QueryBox.tsx @@ -28,7 +28,7 @@ export class QueryBox extends DocAnnotatableComponent e.stopPropagation()} > - +
; } } \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index bc77bff2e..f23525bdb 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -8,9 +8,9 @@ import * as rp from 'request-promise'; import { Doc } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; import { Cast, NumCast, StrCast } from '../../../new_fields/Types'; -import { Utils } from '../../../Utils'; -import { Docs } from '../../documents/Documents'; -import { SetupDrag } from '../../util/DragManager'; +import { Utils, returnTrue, emptyFunction, returnFalse, emptyPath, returnOne } from '../../../Utils'; +import { Docs, DocumentOptions } from '../../documents/Documents'; +import { SetupDrag, DragManager } from '../../util/DragManager'; import { SearchUtil } from '../../util/SearchUtil'; import "./SearchBox.scss"; import { SearchItem } from './SearchItem'; @@ -20,11 +20,20 @@ import { DocumentType } from "../../documents/DocumentTypes"; import { DocumentView } from '../nodes/DocumentView'; import { SelectionManager } from '../../util/SelectionManager'; import { FilterQuery } from 'mongodb'; +import { CollectionLinearView } from '../collections/CollectionLinearView'; +import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; +import { CollectionDockingView } from '../collections/CollectionDockingView'; +import { ScriptField } from '../../../new_fields/ScriptField'; +import { PrefetchProxy } from '../../../new_fields/Proxy'; +import { List } from '../../../new_fields/List'; +import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; + library.add(faTimes); export interface SearchProps { id: string; + Document: Doc; searchQuery?: string; filterQuery?: filterData; } @@ -80,8 +89,14 @@ export class SearchBox extends React.Component { SearchBox.Instance = this; this.resultsScrolled = this.resultsScrolled.bind(this); } - + @observable setupButtons =false; componentDidMount = () => { + console.log(this.setupButtons); + if (this.setupButtons==false){ + console.log("Yuh"); + this.setupDocTypeButtons(); + runInAction(()=>this.setupButtons==true); + } if (this.inputRef.current) { this.inputRef.current.focus(); runInAction(() => this._searchbarOpen = true); @@ -663,6 +678,79 @@ export class SearchBox extends React.Component { @action.bound updateDataStatus() { this._deletedDocsStatus = !this._deletedDocsStatus; } + addButtonDoc = (doc: Doc) => Doc.AddDocToList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc); + remButtonDoc = (doc: Doc) => Doc.RemoveDocFromList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc); + moveButtonDoc = (doc: Doc, targetCollection: Doc | undefined, addDocument: (document: Doc) => boolean) => this.remButtonDoc(doc) && addDocument(doc); + + @computed get docButtons() { + const nodeBtns = this.props.Document.nodeButtons; + if (nodeBtns instanceof Doc) { + return
+ +
; + } + return (null); + } + + setupDocTypeButtons() { + let doc = this.props.Document; + const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, dontDecorateSelection: true, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; + const blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, { + ...opts, + _gridGap: 5, _xMargin: 5, _yMargin: 5, _height: 42, _width: 100, boxShadow: "0 0", dontDecorateSelection: true, forceActive: true, + dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), + backgroundColor: "black", treeViewPreventOpen: true, lockedPosition: true, _chromeStatus: "disabled", linearViewIsExpanded: true + })) as any as Doc; + + + doc.None = ficon({ onClick: undefined, title: "none button", icon: "ban" }); + doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" }); + doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" }); + doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" }); + doc.Image = ficon({ onClick: undefined, title: "image button", icon: "image" }); + doc.Link = ficon({ onClick: undefined, title: "link button", icon: "link" }); + doc.PDF = ficon({ onClick: undefined, title: "pdf button", icon: "file-pdf" }); + doc.TEXT = ficon({ onClick: undefined, title: "text button", icon: "sticky-note" }); + doc.Vid = ficon({ onClick: undefined, title: "vid button", icon: "video" }); + doc.Web = ficon({ onClick: undefined, title: "web button", icon: "globe-asia" }); + + let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc, + doc.Image as Doc, doc.Link as Doc, doc.PDF as Doc, doc.TEXT as Doc, doc.Vid as Doc, doc.Web as Doc]; + + const dragCreators = Docs.Create.MasonryDocument(CurrentUserUtils.setupCreatorButtons(doc), { + _width: 500, _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", + dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _yMargin: 5 + }); + doc.nodeButtons= dragCreators; + } + render() { return ( @@ -685,6 +773,7 @@ export class SearchBox extends React.Component {
+ {this.docButtons}
-- cgit v1.2.3-70-g09d2 From c7c146adbd0b188eba56139ab914edaf73774d3f Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 15 Apr 2020 19:07:01 -0700 Subject: search menu is now partially a nested document --- src/client/views/nodes/QueryBox.tsx | 7 +++- src/client/views/search/SearchBox.tsx | 76 +++++++++++++++++------------------ 2 files changed, 44 insertions(+), 39 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx index 1b3f6280a..04f815e91 100644 --- a/src/client/views/nodes/QueryBox.tsx +++ b/src/client/views/nodes/QueryBox.tsx @@ -26,9 +26,14 @@ export class QueryBox extends DocAnnotatableComponent e.stopPropagation()} > - +
; } } \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index f23525bdb..532b151c5 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -8,7 +8,7 @@ import * as rp from 'request-promise'; import { Doc } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; import { Cast, NumCast, StrCast } from '../../../new_fields/Types'; -import { Utils, returnTrue, emptyFunction, returnFalse, emptyPath, returnOne } from '../../../Utils'; +import { Utils, returnTrue, emptyFunction, returnFalse, emptyPath, returnOne, returnEmptyString } from '../../../Utils'; import { Docs, DocumentOptions } from '../../documents/Documents'; import { SetupDrag, DragManager } from '../../util/DragManager'; import { SearchUtil } from '../../util/SearchUtil'; @@ -27,6 +27,8 @@ import { ScriptField } from '../../../new_fields/ScriptField'; import { PrefetchProxy } from '../../../new_fields/Proxy'; import { List } from '../../../new_fields/List'; import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; +import { Transform } from '../../util/Transform'; +import { MainView } from "../MainView"; library.add(faTimes); @@ -34,6 +36,7 @@ library.add(faTimes); export interface SearchProps { id: string; Document: Doc; + sideBar?: Boolean; searchQuery?: string; filterQuery?: filterData; } @@ -508,7 +511,7 @@ export class SearchBox extends React.Component { else if (this._visibleElements.length !== this._numTotalResults) { // undefined until a searchitem is put in there this._visibleElements = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); - // indicates if things are placeholders + // indicates if things are placeholders this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); } @@ -684,36 +687,37 @@ export class SearchBox extends React.Component { @computed get docButtons() { const nodeBtns = this.props.Document.nodeButtons; + let width = () => NumCast(this.props.Document.width); + if (this.props.sideBar===true){ + width = MainView.Instance.flyoutWidthFunc; + } if (nodeBtns instanceof Doc) { - return
- + return
+ 100} + renderDepth={0} + backgroundColor={returnEmptyString} + focus={emptyFunction} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + zoomToScale={emptyFunction} + getScale={returnOne} + />
; } return (null); @@ -721,16 +725,13 @@ export class SearchBox extends React.Component { setupDocTypeButtons() { let doc = this.props.Document; - const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, dontDecorateSelection: true, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; + const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, dontDecorateSelection: true, backgroundColor: "#121721", dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; const blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, { ...opts, _gridGap: 5, _xMargin: 5, _yMargin: 5, _height: 42, _width: 100, boxShadow: "0 0", dontDecorateSelection: true, forceActive: true, dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), backgroundColor: "black", treeViewPreventOpen: true, lockedPosition: true, _chromeStatus: "disabled", linearViewIsExpanded: true })) as any as Doc; - - - doc.None = ficon({ onClick: undefined, title: "none button", icon: "ban" }); doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" }); doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" }); doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" }); @@ -744,8 +745,8 @@ export class SearchBox extends React.Component { let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc, doc.Image as Doc, doc.Link as Doc, doc.PDF as Doc, doc.TEXT as Doc, doc.Vid as Doc, doc.Web as Doc]; - const dragCreators = Docs.Create.MasonryDocument(CurrentUserUtils.setupCreatorButtons(doc), { - _width: 500, _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", + const dragCreators = Docs.Create.MasonryDocument(buttons, { + _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _yMargin: 5 }); doc.nodeButtons= dragCreators; @@ -772,7 +773,6 @@ export class SearchBox extends React.Component {
- {this.docButtons}
-- cgit v1.2.3-70-g09d2 From a4ed4ba21dbbc802f3512d3c06fdc94a38f56e87 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Mon, 20 Apr 2020 22:00:39 -0700 Subject: more button menu flexibility --- src/client/views/search/SearchBox.scss | 2 - src/client/views/search/SearchBox.tsx | 73 +++++++++++++++++++++++++++++----- 2 files changed, 63 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 804a623f7..c13873b1a 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -131,7 +131,6 @@ color: grey; transform-origin: top; border-top: 0px; - //padding-top: 5px; margin-left: 10px; margin-right: 10px; overflow:hidden; @@ -145,7 +144,6 @@ color: grey; transform-origin: top; border-top: 0px; - //padding-top: 5px; margin-left: 10px; margin-right: 10px; overflow:hidden; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 90f995a8c..36dff4438 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -98,6 +98,7 @@ export class SearchBox extends React.Component { if (this.setupButtons==false){ console.log("Yuh"); this.setupDocTypeButtons(); + this.setupKeyButtons() runInAction(()=>this.setupButtons==true); } if (this.inputRef.current) { @@ -717,15 +718,48 @@ export class SearchBox extends React.Component { return (null); } + + @computed get keyButtons() { + const nodeBtns = this.props.Document.keyButtons; + let width = () => NumCast(this.props.Document.width); + if (this.props.sideBar===true){ + width = MainView.Instance.flyoutWidthFunc; + } + if (nodeBtns instanceof Doc) { + return
+ 100} + renderDepth={0} + backgroundColor={returnEmptyString} + focus={emptyFunction} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + NativeHeight={()=>100} + NativeWidth={width} + /> +
; + } + return (null); + } + setupDocTypeButtons() { let doc = this.props.Document; const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, backgroundColor: "#121721", dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; - const blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, { - ...opts, - _gridGap: 5, _xMargin: 5, _yMargin: 5, _height: 42, _width: 100, boxShadow: "0 0", forceActive: true, - dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), - backgroundColor: "black", treeViewPreventOpen: true, lockedPosition: true, _chromeStatus: "disabled", linearViewIsExpanded: true - })) as any as Doc; doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" }); doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" }); doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" }); @@ -746,6 +780,24 @@ export class SearchBox extends React.Component { doc.nodeButtons= dragCreators; } + + setupKeyButtons() { + let doc = this.props.Document; + const button = (opts: DocumentOptions) => new PrefetchProxy( Docs.Create.ButtonDocument({...opts, + _width: 35, _height: 25, fontSize: 10, + letterSpacing: "0px", textTransform: "unset", borderRounding: "16px", + }))as any as Doc; + doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); + + let buttons = [doc.title as Doc]; + + const dragCreators = Docs.Create.MasonryDocument(buttons, { + _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", + //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _yMargin: 5 + }); + doc.keyButtons= dragCreators; + } + render() { return ( @@ -770,11 +822,12 @@ export class SearchBox extends React.Component { {this.docButtons}
-
- + {/*
*/} + {/* - -
+ */} + {this.keyButtons} + {/*
*/}
Date: Wed, 22 Apr 2020 01:58:17 -0700 Subject: document buttons change on hover and click --- src/client/documents/Documents.ts | 4 ++- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/LabelBox.tsx | 15 ++++++++--- src/client/views/search/SearchBox.scss | 40 ++++++++++++++-------------- src/client/views/search/SearchBox.tsx | 46 ++++++++++++++++++++++++++------- 5 files changed, 71 insertions(+), 36 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 2b5727254..db423fc84 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -157,9 +157,11 @@ export interface DocumentOptions { selectedIndex?: number; syntaxColor?: string; // can be applied to text for syntax highlighting all matches in the text searchText?: string, //for searchbox - searchQuery?: string, // for queryBox + searchQuery?: string, // for quersyBox filterQuery?: filterData, linearViewIsExpanded?: boolean; // is linear view expanded + border?: string; //for searchbox + hovercolor?:string; } class EmptyBox { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c0d530160..40a29b6b9 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1153,7 +1153,7 @@ export class DocumentView extends DocComponent(Docu pointerEvents: this.ignorePointerEvents ? "none" : "all", 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, + border: this.layoutDoc.border ? StrCast(this.layoutDoc.border) : highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined, boxShadow: this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : undefined, background: finalColor, opacity: this.Document.opacity diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index 391e359cc..fca38763e 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -1,6 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit } from '@fortawesome/free-regular-svg-icons'; -import { action } from 'mobx'; +import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast } from '../../../new_fields/Doc'; @@ -61,17 +61,26 @@ export class LabelBox extends ViewBoxBaseComponent m + ":").join(" ") + ")") render() { const params = Cast(this.paramsDoc["onClick-paramFieldKeys"], listSpec("string"), []); const missingParams = params?.filter(p => !this.paramsDoc[p]); params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... + console.log(this.backColor); return ( -
runInAction(()=>{this.clicked=!this.clicked; this.clicked? this.backColor=StrCast(this.layoutDoc.hovercolor) : this.backColor ="unset"})} onMouseLeave={()=>runInAction(()=>{ !this.clicked ?this.backColor="unset" : null})} + onMouseOver={()=>runInAction(()=>{this.backColor=StrCast(this.layoutDoc.hovercolor);})}ref={this.createDropTarget} onContextMenu={this.specificContextMenu} style={{ boxShadow: this.layoutDoc.opacity ? StrCast(this.layoutDoc.boxShadow) : "" }}>
{ if (this.setupButtons==false){ console.log("Yuh"); this.setupDocTypeButtons(); - this.setupKeyButtons() + this.setupKeyButtons(); + this.setupDefaultButtons(); runInAction(()=>this.setupButtons==true); } if (this.inputRef.current) { @@ -563,6 +564,7 @@ export class SearchBox extends React.Component { @action.bound handleNodeChange = () => { + console.log("oi!"); this._nodeStatus = !this._nodeStatus; if (this._nodeStatus) { this.expandSection(`node${this.props.id}`); @@ -718,7 +720,6 @@ export class SearchBox extends React.Component { return (null); } - @computed get keyButtons() { const nodeBtns = this.props.Document.keyButtons; let width = () => NumCast(this.props.Document.width); @@ -726,7 +727,7 @@ export class SearchBox extends React.Component { width = MainView.Instance.flyoutWidthFunc; } if (nodeBtns instanceof Doc) { - return
+ return
{ setupDocTypeButtons() { let doc = this.props.Document; - const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, backgroundColor: "#121721", dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; + const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, + dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, + _height: 100 })) as any as Doc; + //backgroundColor: "#121721", doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" }); doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" }); doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" }); @@ -784,16 +788,39 @@ export class SearchBox extends React.Component { setupKeyButtons() { let doc = this.props.Document; const button = (opts: DocumentOptions) => new PrefetchProxy( Docs.Create.ButtonDocument({...opts, - _width: 35, _height: 25, fontSize: 10, - letterSpacing: "0px", textTransform: "unset", borderRounding: "16px", + _width: 35, _height: 30, + borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px", + fontSize: 7, }))as any as Doc; doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); + doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript(`this.handleNodeChange()`)}); + doc.author = button({ title: "Author", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); - let buttons = [doc.title as Doc]; + let buttons = [doc.title as Doc, doc.deleted as Doc, doc.author as Doc]; const dragCreators = Docs.Create.MasonryDocument(buttons, { - _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", - //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _yMargin: 5 + _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 50, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons",_yMargin: 5 + //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), + }); + doc.keyButtons= dragCreators; + } + + setupDefaultButtons() { + let doc = this.props.Document; + const button = (opts: DocumentOptions) => new PrefetchProxy( Docs.Create.ButtonDocument({...opts, + _width: 35, _height: 30, + borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px", + fontSize: 7, + }))as any as Doc; + doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); + doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript(`this.handleNodeChange`)}); + doc.nodes = button({ title: "Nodes", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); + + let buttons = [doc.title as Doc, doc.deleted as Doc, doc.author as Doc]; + + const dragCreators = Docs.Create.MasonryDocument(buttons, { + _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 50, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons",_yMargin: 5 + //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), }); doc.keyButtons= dragCreators; } @@ -827,7 +854,6 @@ export class SearchBox extends React.Component { */} {this.keyButtons} - {/*
*/}
Date: Wed, 22 Apr 2020 14:40:45 -0700 Subject: scripting buttons --- src/client/views/search/SearchBox.scss | 8 ++-- src/client/views/search/SearchBox.tsx | 71 ++++++++++++++++++++++++++++------ src/new_fields/Doc.ts | 10 ++++- 3 files changed, 72 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index e3b3de898..af67f466c 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -103,14 +103,14 @@ .filter-header { - display: flex; + //display: flex; position: relative; - flex-wrap:wrap; + //flex-wrap:wrap; right: 1px; color: grey; - flex-direction: row-reverse; + //flex-direction: row-reverse; transform-origin: top; - justify-content: space-evenly; + //justify-content: space-evenly; margin-bottom: 5px; overflow:hidden; transition:height 0.3s ease-out; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index f5be4f5aa..a33cb1e06 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -29,6 +29,7 @@ import { List } from '../../../new_fields/List'; import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; import { Transform } from '../../util/Transform'; import { MainView } from "../MainView"; +import { Scripting } from '../../util/Scripting'; library.add(faTimes); @@ -758,6 +759,44 @@ export class SearchBox extends React.Component { return (null); } + @computed get defaultButtons() { + const defBtns = this.props.Document.defaultButtons; + let width = () => NumCast(this.props.Document.width); + if (this.props.sideBar===true){ + width = MainView.Instance.flyoutWidthFunc; + } + if (defBtns instanceof Doc) { + return
+ 100} + renderDepth={0} + backgroundColor={returnEmptyString} + focus={emptyFunction} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + NativeHeight={()=>100} + NativeWidth={width} + /> +
; + } + return (null); + } + setupDocTypeButtons() { let doc = this.props.Document; const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, @@ -793,7 +832,7 @@ export class SearchBox extends React.Component { fontSize: 7, }))as any as Doc; doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); - doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript(`this.handleNodeChange()`)}); + doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript(`handleNodeChange()`)}); doc.author = button({ title: "Author", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); let buttons = [doc.title as Doc, doc.deleted as Doc, doc.author as Doc]; @@ -812,17 +851,15 @@ export class SearchBox extends React.Component { borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px", fontSize: 7, }))as any as Doc; - doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); - doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript(`this.handleNodeChange`)}); + doc.keywords=button({ title: "Keywords", onClick:ScriptField.MakeScript("handleNodeChange(this)")}); + doc.keys=button({ title: "Keys", onClick:ScriptField.MakeScript(`this.handleNodeChange`)}); doc.nodes = button({ title: "Nodes", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); - - let buttons = [doc.title as Doc, doc.deleted as Doc, doc.author as Doc]; - + let buttons = [doc.keywords as Doc, doc.keys as Doc, doc.nodes as Doc]; const dragCreators = Docs.Create.MasonryDocument(buttons, { - _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 50, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons",_yMargin: 5 + _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons",_yMargin: 5 //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), }); - doc.keyButtons= dragCreators; + doc.defaultButtons= dragCreators; } render() { @@ -841,9 +878,10 @@ export class SearchBox extends React.Component {
0 ? {overflow:"visible"} : {overflow:"hidden"}}>
- + {this.defaultButtons} + {/* - + */}
{this.docButtons} @@ -853,7 +891,7 @@ export class SearchBox extends React.Component { {/* */} - {this.keyButtons} + {this.keyButtons}
{
); } -} \ No newline at end of file +} + +// Scripting.addGlobal(function handleNodeChange(doc: any) { +// console.log("oi"); +// doc.handleNodeChange(); + +// // const dv = DocumentManager.Instance.getDocumentView(doc); +// // if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", "")); +// // else dv?.switchViews(true, layoutKey.replace("layout_", "")); +// }); \ No newline at end of file diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index bcf0d1aec..c54806f37 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -918,4 +918,12 @@ Scripting.addGlobal(function selectedDocs(container: Doc, excludeCollections: bo return docs.length ? new List(docs) : prevValue; }); Scripting.addGlobal(function setDocFilter(container: Doc, key: string, value: any, modifiers?: "check" | "x" | undefined) { Doc.setDocFilter(container, key, value, modifiers); }); -Scripting.addGlobal(function setDocFilterRange(container: Doc, key: string, range: number[]) { Doc.setDocFilterRange(container, key, range); }); \ No newline at end of file +Scripting.addGlobal(function setDocFilterRange(container: Doc, key: string, range: number[]) { Doc.setDocFilterRange(container, key, range); }); +Scripting.addGlobal(function handleNodeChange(doc: any) { + console.log("oi"); + doc.handleNodeChange(); + + // const dv = DocumentManager.Instance.getDocumentView(doc); + // if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", "")); + // else dv?.switchViews(true, layoutKey.replace("layout_", "")); +}); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 15ee40ea8da5140ba5db62185b4a26d36bf6255e Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Mon, 27 Apr 2020 15:44:43 -0700 Subject: refactored searchbox doctype out from querybox class to help with displaying search results as different collection types --- src/client/documents/DocumentTypes.ts | 2 +- src/client/documents/Documents.ts | 10 +- src/client/views/nodes/DocumentContentsView.tsx | 4 +- src/client/views/nodes/QueryBox.tsx | 7 +- src/client/views/search/SearchBox.tsx | 114 ++++++++++++++------- .../authentication/models/current_user_utils.ts | 7 +- 6 files changed, 93 insertions(+), 51 deletions(-) (limited to 'src') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index de366763b..3c34ff1c8 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -13,7 +13,7 @@ export enum DocumentType { INK = "ink", // ink stroke SCREENSHOT = "screenshot", // view of a desktop application FONTICON = "fonticonbox", // font icon - QUERY = "query", // search query + SEARCH = "search", // search query LABEL = "label", // simple text label BUTTON = "button", // onClick button WEBCAM = "webcam", // webcam diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index db423fc84..50326231c 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -39,7 +39,7 @@ import { filterData} from "../views/search/SearchBox"; //import { PresField } from "../../new_fields/PresField"; import { PresElementBox } from "../views/presentationview/PresElementBox"; import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo"; -import { QueryBox } from "../views/nodes/QueryBox"; +import { SearchBox } from "../views/search/SearchBox"; import { ColorBox } from "../views/nodes/ColorBox"; import { LinkAnchorBox } from "../views/nodes/LinkAnchorBox"; import { DocHolderBox } from "../views/nodes/DocumentBox"; @@ -191,8 +191,8 @@ export namespace Docs { layout: { view: FormattedTextBox, dataField: "text" }, options: { _height: 150, _xMargin: 10, _yMargin: 10 } }], - [DocumentType.QUERY, { - layout: { view: QueryBox, dataField: data }, + [DocumentType.SEARCH, { + layout: { view: SearchBox, dataField: data }, options: { _width: 400 } }], [DocumentType.COLOR, { @@ -534,8 +534,8 @@ export namespace Docs { return instance; } - export function QueryDocument(options: DocumentOptions = {}) { - return InstanceFromProto(Prototypes.get(DocumentType.QUERY), "", options); + export function SearchDocument(options: DocumentOptions = {}) { + return InstanceFromProto(Prototypes.get(DocumentType.SEARCH), "", options); } export function ColorDocument(options: DocumentOptions = {}) { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 7522af3a3..083638198 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -24,7 +24,7 @@ import { ImageBox } from "./ImageBox"; import { KeyValueBox } from "./KeyValueBox"; import { PDFBox } from "./PDFBox"; import { PresBox } from "./PresBox"; -import { QueryBox } from "./QueryBox"; +import { SearchBox } from "../search/SearchBox"; import { ColorBox } from "./ColorBox"; import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo"; import { LinkAnchorBox } from "./LinkAnchorBox"; @@ -111,7 +111,7 @@ export class DocumentContentsView extends React.Component e.stopPropagation()} > - + +
; } -} \ No newline at end of file +} + +// diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index a33cb1e06..327617319 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -15,7 +15,7 @@ import { SearchUtil } from '../../util/SearchUtil'; import "./SearchBox.scss"; import { SearchItem } from './SearchItem'; import { IconBar } from './IconBar'; -import { FieldView } from '../nodes/FieldView'; +import { FieldView, FieldViewProps } from '../nodes/FieldView'; import { DocumentType } from "../../documents/DocumentTypes"; import { DocumentView } from '../nodes/DocumentView'; import { SelectionManager } from '../../util/SelectionManager'; @@ -30,17 +30,31 @@ import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMu import { Transform } from '../../util/Transform'; import { MainView } from "../MainView"; import { Scripting } from '../../util/Scripting'; - +import { CollectionView, CollectionViewType } from '../collections/CollectionView'; +import { ViewBoxBaseComponent } from "../DocComponent"; +import { documentSchema } from "../../../new_fields/documentSchemas"; +import { makeInterface, createSchema } from '../../../new_fields/Schema'; library.add(faTimes); -export interface SearchProps { - id: string; - Document: Doc; - sideBar?: Boolean; - searchQuery?: string; - filterQuery?: filterData; -} +// export interface SearchProps { +// id: string; +// Document: Doc; +// sideBar?: Boolean; +// searchQuery?: string; +// filterQuery?: filterData; +// } + +export const searchSchema = createSchema({ + id: "string", + Document: Doc, + sideBar: "boolean", + searchQuery: "string", +}); + +//add back filterquery + + export enum Keys { TITLE = "title", @@ -55,8 +69,13 @@ export interface filterData{ basicWordStatus:boolean; icons: string[]; } + +type SearchBoxDocument = makeInterface<[typeof documentSchema, typeof searchSchema]>; +const SearchBoxDocument = makeInterface(documentSchema, searchSchema); + +//React.Component @observer -export class SearchBox extends React.Component { +export class SearchBox extends ViewBoxBaseComponent(SearchBoxDocument) { @observable private _searchString: string = ""; @observable private _resultsOpen: boolean = false; @@ -64,6 +83,7 @@ export class SearchBox extends React.Component { @observable private _results: [Doc, string[], string[]][] = []; @observable private _openNoResults: boolean = false; @observable private _visibleElements: JSX.Element[] = []; + @observable private _visibleDocuments: Doc[] = []; private _resultsSet = new Map(); private _resultsRef = React.createRef(); @@ -107,20 +127,20 @@ export class SearchBox extends React.Component { this.inputRef.current.focus(); runInAction(() => this._searchbarOpen = true); } - if (this.props.searchQuery && this.props.filterQuery && this.newAssign) { - console.log(this.props.searchQuery); - const sq = this.props.searchQuery; + if (this.rootDoc.searchQuery&& this.newAssign) { + console.log(this.rootDoc.searchQuery); + const sq = this.rootDoc.searchQuery; runInAction(() => { - this._deletedDocsStatus=this.props.filterQuery!.deletedDocsStatus; - this._authorFieldStatus=this.props.filterQuery!.authorFieldStatus - this._titleFieldStatus=this.props.filterQuery!.titleFieldStatus; - this._basicWordStatus=this.props.filterQuery!.basicWordStatus; - this._icons=this.props.filterQuery!.icons; + // this._deletedDocsStatus=this.props.filterQuery!.deletedDocsStatus; + // this._authorFieldStatus=this.props.filterQuery!.authorFieldStatus + // this._titleFieldStatus=this.props.filterQuery!.titleFieldStatus; + // this._basicWordStatus=this.props.filterQuery!.basicWordStatus; + // this._icons=this.props.filterQuery!.icons; this.newAssign=false; }); runInAction(() => { - this._searchString = sq; + this._searchString = StrCast(sq); this.submitSearch(); }); } @@ -334,6 +354,7 @@ export class SearchBox extends React.Component { this._resultsSet.clear(); this._isSearch = []; this._visibleElements = []; + this._visibleDocuments = []; if (query !== "") { this._endIndex = 12; this._maxSearchIndex = 0; @@ -457,7 +478,7 @@ export class SearchBox extends React.Component { basicWordStatus: this._basicWordStatus, icons: this._icons, } - return Docs.Create.QueryDocument({ _autoHeight: true, title: this._searchString, filterQuery: filter, searchQuery: this._searchString }); + return Docs.Create.SearchDocument({ _autoHeight: true, title: this._searchString, filterQuery: filter, searchQuery: this._searchString }); } @action.bound @@ -480,6 +501,7 @@ export class SearchBox extends React.Component { this._results = []; this._resultsSet.clear(); this._visibleElements = []; + this._visibleDocuments=[]; this._numTotalResults = -1; this._endIndex = -1; this._curRequest = undefined; @@ -497,6 +519,7 @@ export class SearchBox extends React.Component { this._endIndex=30; if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { this._visibleElements = [
No Search Results
]; + //this._visibleDocuments= Docs.Create. return; } @@ -509,6 +532,8 @@ export class SearchBox extends React.Component { else if (this._visibleElements.length !== this._numTotalResults) { // undefined until a searchitem is put in there this._visibleElements = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); + this._visibleDocuments = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); + // indicates if things are placeholders this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); } @@ -531,6 +556,7 @@ export class SearchBox extends React.Component { if (result) { const highlights = Array.from([...Array.from(new Set(result[1]).values())]); this._visibleElements[i] = ; + this._visibleDocuments[i]= result[0]; this._isSearch[i] = "search"; } } @@ -539,6 +565,7 @@ export class SearchBox extends React.Component { if (result) { const highlights = Array.from([...Array.from(new Set(result[1]).values())]); this._visibleElements[i] = ; + this._visibleDocuments[i] = result[0]; this._isSearch[i] = "search"; } } @@ -547,6 +574,7 @@ export class SearchBox extends React.Component { } if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; + this._visibleDocuments.length = this._results.length; this._isSearch.length = this._results.length; } } @@ -568,10 +596,10 @@ export class SearchBox extends React.Component { console.log("oi!"); this._nodeStatus = !this._nodeStatus; if (this._nodeStatus) { - this.expandSection(`node${this.props.id}`); + this.expandSection(`node${this.props.Document[Id]}`); } else { - this.collapseSection(`node${this.props.id}`); + this.collapseSection(`node${this.props.Document[Id]}`); } } @@ -579,10 +607,10 @@ export class SearchBox extends React.Component { handleKeyChange = () => { this._keyStatus = !this._keyStatus; if (this._keyStatus) { - this.expandSection(`key${this.props.id}`); + this.expandSection(`key${this.props.Document[Id]}`); } else { - this.collapseSection(`key${this.props.id}`); + this.collapseSection(`key${this.props.Document[Id]}`); } } @@ -590,11 +618,11 @@ export class SearchBox extends React.Component { handleFilterChange = () => { this._filterOpen = !this._filterOpen; if (this._filterOpen) { - this.expandSection(`filterhead${this.props.id}`); - document.getElementById(`filterhead${this.props.id}`)!.style.padding = "5"; + this.expandSection(`filterhead${this.props.Document[Id]}`); + document.getElementById(`filterhead${this.props.Document[Id]}`)!.style.padding = "5"; } else { - this.collapseSection(`filterhead${this.props.id}`); + this.collapseSection(`filterhead${this.props.Document[Id]}`); } @@ -607,7 +635,7 @@ export class SearchBox extends React.Component { collapseSection(thing: string) { - const id = this.props.id; + const id = this.props.Document[Id]; const element = document.getElementById(thing)!; // get the height of the element's inner content, regardless of its actual size const sectionHeight = element.scrollHeight; @@ -686,7 +714,7 @@ export class SearchBox extends React.Component { @computed get docButtons() { const nodeBtns = this.props.Document.nodeButtons; let width = () => NumCast(this.props.Document.width); - if (this.props.sideBar===true){ + if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } if (nodeBtns instanceof Doc) { @@ -724,7 +752,7 @@ export class SearchBox extends React.Component { @computed get keyButtons() { const nodeBtns = this.props.Document.keyButtons; let width = () => NumCast(this.props.Document.width); - if (this.props.sideBar===true){ + if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } if (nodeBtns instanceof Doc) { @@ -762,7 +790,7 @@ export class SearchBox extends React.Component { @computed get defaultButtons() { const defBtns = this.props.Document.defaultButtons; let width = () => NumCast(this.props.Document.width); - if (this.props.sideBar===true){ + if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } if (defBtns instanceof Doc) { @@ -861,11 +889,11 @@ export class SearchBox extends React.Component { }); doc.defaultButtons= dragCreators; } - + childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? Cast(Doc.UserDoc().presentationTemplate, Doc, null) : undefined; render() { return ( -
+
this._searchString ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection"> @@ -876,17 +904,17 @@ export class SearchBox extends React.Component {
-
0 ? {overflow:"visible"} : {overflow:"hidden"}}> -
+
0 ? {overflow:"visible"} : {overflow:"hidden"}}> +
{this.defaultButtons} {/* */}
-
+
{this.docButtons}
-
+
{/*
*/} {/* @@ -894,12 +922,22 @@ export class SearchBox extends React.Component { {this.keyButtons}
+ {/* */}
{this._visibleElements} + +
); @@ -910,7 +948,7 @@ export class SearchBox extends React.Component { // console.log("oi"); // doc.handleNodeChange(); -// // const dv = DocumentManager.Instance.getDocumentView(doc); +// // const dv = DocumentManager.Instance.getD ocumentView(doc); // // if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", "")); // // else dv?.switchViews(true, layoutKey.replace("layout_", "")); // }); \ No newline at end of file diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 9235a97b0..c03779002 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -87,7 +87,7 @@ export class CurrentUserUtils { { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc }, { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "pink", activePen: doc }, { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.pen = this;', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "white", activePen: doc }, - { title: "query", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.QueryDocument({ _width: 200, title: "an image of a cat" })' }, + { title: "query", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.SearchDocument({ _width: 200, title: "an image of a cat" })' }, // { title: "buxton", icon: "cloud-upload-alt", ignoreClick: true, drag: "Docs.Create.Buxton()" }, ]; return docProtoData.filter(d => !alreadyCreatedButtons?.includes(d.title)).map(data => Docs.Create.FontIconDocument({ @@ -254,7 +254,7 @@ export class CurrentUserUtils { return Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", fontSize: 10, letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: Docs.Create.QueryDocument({ title: "search stack", }), + sourcePanel: Docs.Create.SearchDocument({ title: "search stack", }), targetContainer: sidebarContainer, lockedPosition: true, onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel") @@ -279,11 +279,12 @@ export class CurrentUserUtils { })); } + // forceActive: true /// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window static setupExpandingButtons(doc: Doc) { const queryTemplate = Docs.Create.MulticolumnDocument( [ - Docs.Create.QueryDocument({ title: "query", _height: 200, forceActive: true }), + Docs.Create.SearchDocument({ title: "query", _height: 200, forceActive:true }), Docs.Create.FreeformDocument([], { title: "data", _height: 100, _LODdisable: true, forceActive: true }) ], { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, _autoHeight: false, forceActive: true, hideFilterView: true }); -- cgit v1.2.3-70-g09d2 From e4b7b54eecc307ec52f6105f92c3d87449458641 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 28 Apr 2020 02:02:40 -0700 Subject: nested collection view now in search box, search item doc type cast over stacking view, but with bugs --- src/client/documents/DocumentTypes.ts | 1 + src/client/documents/Documents.ts | 8 +++ src/client/views/nodes/FieldView.tsx | 3 + src/client/views/nodes/QueryBox.tsx | 2 +- src/client/views/search/SearchBox.tsx | 40 ++++++++++--- src/client/views/search/SearchItem.tsx | 69 ++++++++++++---------- .../authentication/models/current_user_utils.ts | 3 + 7 files changed, 86 insertions(+), 40 deletions(-) (limited to 'src') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 3c34ff1c8..36d3e1c52 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -31,6 +31,7 @@ export enum DocumentType { COLOR = "color", // color picker (view of a color picker for a color string) YOUTUBE = "youtube", // youtube directory (view of you tube search results) DOCHOLDER = "docholder", // nested document (view of a document) + SEARCHITEM= "searchitem", LINKDB = "linkdb", // database of links ??? why do we have this RECOMMENDATION = "recommendation", // view of a recommendation diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 50326231c..e5b3c8a97 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -38,6 +38,7 @@ import { filterData} from "../views/search/SearchBox"; //import { PresBox } from "../views/nodes/PresBox"; //import { PresField } from "../../new_fields/PresField"; import { PresElementBox } from "../views/presentationview/PresElementBox"; +import { SearchItem } from "../views/search/SearchItem"; import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo"; import { SearchBox } from "../views/search/SearchBox"; import { ColorBox } from "../views/nodes/ColorBox"; @@ -277,6 +278,9 @@ export namespace Docs { [DocumentType.PRESELEMENT, { layout: { view: PresElementBox, dataField: data } }], + [DocumentType.SEARCHITEM, { + layout: { view: SearchItem, dataField: data } + }], [DocumentType.INK, { layout: { view: InkingStroke, dataField: data }, options: { backgroundColor: "transparent" } @@ -671,6 +675,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) }); } + export function SearchItemBoxDocument(options?: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.SEARCHITEM), undefined, { ...(options || {}) }); + } + export function DockDocument(documents: Array, config: string, options: DocumentOptions, id?: string) { const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _viewType: CollectionViewType.Docking, dockingConfig: config }, id); Doc.GetProto(inst).data = new List(documents); diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index a3790d38b..6198212b5 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -51,6 +51,9 @@ export interface FieldViewProps { ContentScaling: () => number; ChromeHeight?: () => number; childLayoutTemplate?: () => Opt; + highlighting?: string[]; + lines?: string[]; + doc?: Doc; } @observer diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx index eb57b98d2..fb47a01d7 100644 --- a/src/client/views/nodes/QueryBox.tsx +++ b/src/client/views/nodes/QueryBox.tsx @@ -34,7 +34,7 @@ export class QueryBox extends ViewBoxAnnotatableComponent e.stopPropagation()} > - +
; } } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 327617319..5ef71ca41 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -533,7 +533,6 @@ export class SearchBox extends ViewBoxBaseComponent(this._numTotalResults === -1 ? 0 : this._numTotalResults); this._visibleDocuments = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); - // indicates if things are placeholders this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); } @@ -555,7 +554,10 @@ export class SearchBox extends ViewBoxBaseComponent; + result[0].query=this._searchString; + this._visibleElements[i] = ; + Doc.AddDocToList(this.props.Document, undefined, result[0]) + this._visibleDocuments[i]= result[0]; this._isSearch[i] = "search"; } @@ -564,8 +566,10 @@ export class SearchBox extends ViewBoxBaseComponent; + result[0].query=this._searchString; + this._visibleElements[i] = ; this._visibleDocuments[i] = result[0]; + Doc.AddDocToList(this.props.Document, undefined, result[0]) this._isSearch[i] = "search"; } } @@ -729,7 +733,7 @@ export class SearchBox extends ViewBoxBaseComponent 100} @@ -767,7 +771,7 @@ export class SearchBox extends ViewBoxBaseComponent 100} @@ -805,7 +809,7 @@ export class SearchBox extends ViewBoxBaseComponent 100} @@ -889,7 +893,23 @@ export class SearchBox extends ViewBoxBaseComponent this.layoutDoc._viewType === CollectionViewType.Stacking ? Cast(Doc.UserDoc().presentationTemplate, Doc, null) : undefined; + childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? Cast(Doc.UserDoc().searchItemTemplate, Doc, null) : undefined; + getTransform = () => { + return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight + } + panelHeight = () => { + return this.props.PanelHeight() - 50; + } + selectElement = (doc: Doc) => { + //this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.layoutDoc._itemIndex)); + } + + addDocument = (doc: Doc) => { + const newPinDoc = Doc.MakeAlias(doc); + newPinDoc.presentationTargetDoc = doc; + return Doc.AddDocToList(this.dataDoc, this.fieldKey, newPinDoc); + } + render() { return ( @@ -922,14 +942,16 @@ export class SearchBox extends ViewBoxBaseComponent
- {/* */} + ScreenToLocalTransform={this.getTransform} />
{ } + +type SearchSchema = makeInterface<[typeof documentSchema]>; +const SearchDocument = makeInterface(documentSchema); + @observer -export class SearchItem extends React.Component { +export class SearchItem extends ViewBoxBaseComponent(SearchDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchItem, fieldKey); } @observable _selected: boolean = false; onClick = () => { // I dont think this is the best functionality because clicking the name of the collection does that. Change it back if you'd like - DocumentManager.Instance.jumpToDocument(this.props.doc, false); + DocumentManager.Instance.jumpToDocument(this.props.doc!, false); } @observable _useIcons = true; @observable _displayDim = 50; componentDidMount() { - Doc.SetSearchQuery(this.props.query); - this.props.doc.searchMatch = true; + Doc.SetSearchQuery(StrCast(this.props.doc!.query)); + this.props.doc!.searchMatch = true; } componentWillUnmount() { - this.props.doc.searchMatch = undefined; + this.props.doc!.searchMatch = undefined; } //@computed @action public DocumentIcon() { - const layoutresult = StrCast(this.props.doc.type); + const layoutresult = StrCast(this.props.doc!.type); if (!this._useIcons) { const returnXDimension = () => this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); const returnYDimension = () => this._displayDim; @@ -156,10 +165,10 @@ export class SearchItem extends React.Component { })} onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} > { nextHighlight = (e: React.PointerEvent) => { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); - this.props.doc.searchMatch = false; - setTimeout(() => this.props.doc.searchMatch = true, 0); + this.props.doc!.searchMatch = false; + setTimeout(() => this.props.doc!.searchMatch = true, 0); } highlightDoc = (e: React.PointerEvent) => { - if (this.props.doc.type === DocumentType.LINK) { - if (this.props.doc.anchor1 && this.props.doc.anchor2) { + if (this.props.doc!.type === DocumentType.LINK) { + if (this.props.doc!.anchor1 && this.props.doc!.anchor2) { - const doc1 = Cast(this.props.doc.anchor1, Doc, null); - const doc2 = Cast(this.props.doc.anchor2, Doc, null); + const doc1 = Cast(this.props.doc!.anchor1, Doc, null); + const doc2 = Cast(this.props.doc!.anchor2, Doc, null); Doc.BrushDoc(doc1); Doc.BrushDoc(doc2); } } else { - Doc.BrushDoc(this.props.doc); + Doc.BrushDoc(this.props.doc!); } e.stopPropagation(); } unHighlightDoc = (e: React.PointerEvent) => { - if (this.props.doc.type === DocumentType.LINK) { - if (this.props.doc.anchor1 && this.props.doc.anchor2) { + if (this.props.doc!.type === DocumentType.LINK) { + if (this.props.doc!.anchor1 && this.props.doc!.anchor2) { - const doc1 = Cast(this.props.doc.anchor1, Doc, null); - const doc2 = Cast(this.props.doc.anchor2, Doc, null); + const doc1 = Cast(this.props.doc!.anchor1, Doc, null); + const doc2 = Cast(this.props.doc!.anchor2, Doc, null); Doc.UnBrushDoc(doc1); Doc.UnBrushDoc(doc2); } } else { - Doc.UnBrushDoc(this.props.doc); + Doc.UnBrushDoc(this.props.doc!); } } @@ -236,7 +245,7 @@ export class SearchItem extends React.Component { ContextMenu.Instance.clearItems(); ContextMenu.Instance.addItem({ description: "Copy ID", event: () => { - Utils.CopyText(this.props.doc[Id]); + Utils.CopyText(this.props.doc![Id]); }, icon: "fingerprint" }); @@ -261,7 +270,7 @@ export class SearchItem extends React.Component { Math.abs(e.clientY - this._downY) > Utils.DRAG_THRESHOLD) { document.removeEventListener("pointermove", this.onPointerMoved); document.removeEventListener("pointerup", this.onPointerUp); - const doc = Doc.IsPrototype(this.props.doc) ? Doc.MakeDelegate(this.props.doc) : this.props.doc; + const doc = Doc.IsPrototype(this.props.doc!) ? Doc.MakeDelegate(this.props.doc!) : this.props.doc!; DragManager.StartDocumentDrag([this._target], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY); } } @@ -272,29 +281,29 @@ export class SearchItem extends React.Component { @computed get contextButton() { - return CollectionDockingView.AddRightSplit(doc)} />; + return CollectionDockingView.AddRightSplit(doc)} />; } render() { - const doc1 = Cast(this.props.doc.anchor1, Doc); - const doc2 = Cast(this.props.doc.anchor2, Doc); + const doc1 = Cast(this.props.doc!.anchor1, Doc); + const doc2 = Cast(this.props.doc!.anchor2, Doc); return
-
{StrCast(this.props.doc.title)}
-
{this.props.highlighting.length ? "Matched fields:" + this.props.highlighting.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}
- {this.props.lines.filter((m, i) => i).map((l, i) =>
`${l}`
)} +
{StrCast(this.props.doc!.title)}
+
{this.props.highlighting!.length ? "Matched fields:" + this.props.highlighting!.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}
+ {this.props.lines!.filter((m, i) => i).map((l, i) =>
`${l}`
)}
{this.DocumentIcon()}
-
{this.props.doc.type ? this.props.doc.type : "Other"}
+
{this.props.doc!.type ? this.props.doc!.type : "Other"}
- {(doc1 instanceof Doc && doc2 instanceof Doc) && this.props.doc.type === DocumentType.LINK ? : + {(doc1 instanceof Doc && doc2 instanceof Doc) && this.props.doc!.type === DocumentType.LINK ? : this.contextButton}
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index c03779002..3ca6b1b3a 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -251,6 +251,7 @@ export class CurrentUserUtils { // setup the Search button which will display the search panel. static setupSearchPanel(sidebarContainer: Doc) { + return Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", fontSize: 10, letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", @@ -331,6 +332,8 @@ export class CurrentUserUtils { // the initial presentation Doc to use static setupDefaultPresentation(doc: Doc) { + doc.searchItemTemplate = new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" })); + doc.presentationTemplate = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ title: "pres element template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" })); doc.curPresentation = Docs.Create.PresDocument(new List(), { title: "Presentation", _viewType: CollectionViewType.Stacking, _LODdisable: true, _chromeStatus: "replaced", _showTitle: "title", boxShadow: "0 0" }); } -- cgit v1.2.3-70-g09d2 From 9aab1f5e7dc7438dfa8a93afe03bd5746315c994 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 29 Apr 2020 13:49:55 -0700 Subject: bugfixing --- src/client/documents/Documents.ts | 2 +- src/client/views/nodes/DocumentContentsView.tsx | 3 ++- src/client/views/search/SearchBox.tsx | 31 +++++++++++++++++-------- 3 files changed, 24 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index e5b3c8a97..d440ed287 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -539,7 +539,7 @@ export namespace Docs { } export function SearchDocument(options: DocumentOptions = {}) { - return InstanceFromProto(Prototypes.get(DocumentType.SEARCH), "", options); + return InstanceFromProto(Prototypes.get(DocumentType.SEARCH), new List([]), options); } export function ColorDocument(options: DocumentOptions = {}) { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 083638198..cb9e9f5ba 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -25,6 +25,7 @@ import { KeyValueBox } from "./KeyValueBox"; import { PDFBox } from "./PDFBox"; import { PresBox } from "./PresBox"; import { SearchBox } from "../search/SearchBox"; +import { SearchItem } from "../search/SearchItem" import { ColorBox } from "./ColorBox"; import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo"; import { LinkAnchorBox } from "./LinkAnchorBox"; @@ -111,7 +112,7 @@ export class DocumentContentsView extends React.Component { + this.dataDoc[this.fieldKey] = new List([]); const query = this._searchString; this.getFinalQuery(query); this._results = []; @@ -555,10 +556,15 @@ export class SearchBox extends ViewBoxBaseComponent; - Doc.AddDocToList(this.props.Document, undefined, result[0]) + //Make alias + result[0].lines=new List(result[2]); + result[0].highlighting=new List(highlights); - this._visibleDocuments[i]= result[0]; + this._visibleElements[i] = ; + debugger; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]) + //this.fieldkey + dash search results + //ask about document parmater in collection view this._isSearch[i] = "search"; } } @@ -567,9 +573,13 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + result[0].highlighting=new List(highlights); + this._visibleElements[i] = ; - this._visibleDocuments[i] = result[0]; - Doc.AddDocToList(this.props.Document, undefined, result[0]) + debugger; + + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]) this._isSearch[i] = "search"; } } @@ -632,6 +642,8 @@ export class SearchBox extends ViewBoxBaseComponent NumCast(this.props.Document.width); + let width = () => NumCast(this.props.Document._width); if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } @@ -755,7 +767,7 @@ export class SearchBox extends ViewBoxBaseComponent NumCast(this.props.Document.width); + let width = () => NumCast(this.props.Document._width); if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } @@ -793,7 +805,7 @@ export class SearchBox extends ViewBoxBaseComponent NumCast(this.props.Document.width); + let width = () => NumCast(this.props.Document._width); if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } @@ -909,7 +921,7 @@ export class SearchBox extends ViewBoxBaseComponent
Date: Wed, 29 Apr 2020 20:56:31 -0700 Subject: search results now display as search item docs in stacking view --- src/client/views/search/SearchBox.tsx | 39 +++++++------- src/client/views/search/SearchItem.tsx | 94 +++++++++++++++++++--------------- 2 files changed, 72 insertions(+), 61 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index a4f1b7d34..e784580e5 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -79,8 +79,9 @@ const SearchBoxDocument = makeInterface(documentSchema, searchSchema); @observer export class SearchBox extends ViewBoxBaseComponent(SearchBoxDocument) { - private get _searchString() { return this.props.searchQuery; } - private set _searchString(value) { this.props.setSearchQuery(value); } + // private get _searchString() { return this.rootDoc.searchQuery; } + // private set _searchString(value) { this.rootDoc.setSearchQuery(value); } + @observable private _searchString: string =""; @observable private _resultsOpen: boolean = false; @observable private _searchbarOpen: boolean = false; @observable private _results: [Doc, string[], string[]][] = []; @@ -340,6 +341,7 @@ export class SearchBox extends ViewBoxBaseComponent { + console.log(this._searchString); this.dataDoc[this.fieldKey] = new List([]); const query = this._searchString; this.getFinalQuery(query); @@ -368,15 +370,16 @@ export class SearchBox extends ViewBoxBaseComponent `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}"`).join(" ")})`; - // fq: type_t:collection OR {!join from=id to=proto_i}type_t:collection q:text_t:hello - const query = [baseExpr, includeDeleted, includeIcons, typeExpr].join(" AND ").replace(/AND $/, ""); - return query; - } + // const types = this.filterTypes; + // const baseExpr = "NOT baseProto_b:true"; + // const includeDeleted = this.getDataStatus() ? "" : " NOT deleted_b:true"; + // const includeIcons = this.getDataStatus() ? "" : " NOT type_t:fonticonbox"; + // const typeExpr = !types ? "" : ` (${types.map(type => `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}"`).join(" ")})`; + // // fq: type_t:collection OR {!join from=id to=proto_i}type_t:collection q:text_t:hello + // const query = [baseExpr, includeDeleted, includeIcons, typeExpr].join(" AND ").replace(/AND $/, ""); + // return query; + return ""; + } getDataStatus() { return this._deletedDocsStatus; } @@ -402,7 +405,8 @@ export class SearchBox extends ViewBoxBaseComponent (await Cast(doc.extendsDoc, Doc)) || doc)); const highlights: typeof res.highlighting = {}; docs.forEach((doc, index) => highlights[doc[Id]] = highlightList[index]); - const filteredDocs = this.filterDocsByType(docs); + const filteredDocs = docs; + //this.filterDocsByType(docs); runInAction(() => { //this._results.push(...filteredDocs); filteredDocs.forEach(doc => { @@ -556,10 +560,8 @@ export class SearchBox extends ViewBoxBaseComponent(highlights); this._visibleElements[i] = ; - debugger; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]) - //this.fieldkey + dash search results - //ask about document parmater in collection view + result[0].targetDoc=result[0]; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); this._isSearch[i] = "search"; } } @@ -572,8 +574,7 @@ export class SearchBox extends ViewBoxBaseComponent(highlights); this._visibleElements[i] = ; - debugger; - + result[0].targetDoc=result[0]; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]) this._isSearch[i] = "search"; } @@ -963,7 +964,7 @@ export class SearchBox extends ViewBoxBaseComponent - {this._visibleElements} + {this._visibleElements.length}
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index f25464eb0..fa94edb1e 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -4,7 +4,7 @@ import { faCaretUp, faChartBar, faFile, faFilePdf, faFilm, faFingerprint, faGlob import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { Doc } from "../../../new_fields/Doc"; +import { Doc, DocCastAsync } from "../../../new_fields/Doc"; import { Id } from "../../../new_fields/FieldSymbols"; import { Cast, NumCast, StrCast } from "../../../new_fields/Types"; import { emptyFunction, emptyPath, returnFalse, Utils, returnTrue } from "../../../Utils"; @@ -24,7 +24,7 @@ import "./SearchItem.scss"; import "./SelectorContextMenu.scss"; import { FieldViewProps, FieldView } from "../nodes/FieldView"; import { ViewBoxBaseComponent } from "../DocComponent"; -import { makeInterface } from "../../../new_fields/Schema"; +import { makeInterface, createSchema } from "../../../new_fields/Schema"; import { documentSchema } from "../../../new_fields/documentSchemas"; export interface SearchItemProps { @@ -128,8 +128,15 @@ export class LinkContextMenu extends React.Component { type SearchSchema = makeInterface<[typeof documentSchema]>; + +export const SearchSchema = createSchema({ + targetDoc: Doc, +}); + const SearchDocument = makeInterface(documentSchema); + + @observer export class SearchItem extends ViewBoxBaseComponent(SearchDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchItem, fieldKey); } @@ -138,23 +145,23 @@ export class SearchItem extends ViewBoxBaseComponent { // I dont think this is the best functionality because clicking the name of the collection does that. Change it back if you'd like - DocumentManager.Instance.jumpToDocument(this.props.doc!, false); + DocumentManager.Instance.jumpToDocument(this.targetDoc, false); } @observable _useIcons = true; @observable _displayDim = 50; componentDidMount() { - Doc.SetSearchQuery(StrCast(this.props.doc!.query)); - this.props.doc!.searchMatch = true; + Doc.SetSearchQuery(StrCast(this.targetDoc.query)); + this.targetDoc.searchMatch = true; } componentWillUnmount() { - this.props.doc!.searchMatch = undefined; + this.targetDoc.searchMatch = undefined; } //@computed @action public DocumentIcon() { - const layoutresult = StrCast(this.props.doc!.type); + const layoutresult = StrCast(this.targetDoc.type); if (!this._useIcons) { const returnXDimension = () => this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); const returnYDimension = () => this._displayDim; @@ -165,10 +172,10 @@ export class SearchItem extends ViewBoxBaseComponent this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} > { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); - this.props.doc!.searchMatch = false; - setTimeout(() => this.props.doc!.searchMatch = true, 0); + this.targetDoc!.searchMatch = false; + setTimeout(() => this.targetDoc!.searchMatch = true, 0); } highlightDoc = (e: React.PointerEvent) => { - if (this.props.doc!.type === DocumentType.LINK) { - if (this.props.doc!.anchor1 && this.props.doc!.anchor2) { + // if (this.targetDoc!.type === DocumentType.LINK) { + // if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { - const doc1 = Cast(this.props.doc!.anchor1, Doc, null); - const doc2 = Cast(this.props.doc!.anchor2, Doc, null); - Doc.BrushDoc(doc1); - Doc.BrushDoc(doc2); - } - } else { - Doc.BrushDoc(this.props.doc!); - } + // const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); + // const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); + // Doc.BrushDoc(doc1); + // Doc.BrushDoc(doc2); + // } + // } else { + // Doc.BrushDoc(this.targetDoc!); + // } e.stopPropagation(); } unHighlightDoc = (e: React.PointerEvent) => { - if (this.props.doc!.type === DocumentType.LINK) { - if (this.props.doc!.anchor1 && this.props.doc!.anchor2) { + // if (this.targetDoc!.type === DocumentType.LINK) { + // if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { - const doc1 = Cast(this.props.doc!.anchor1, Doc, null); - const doc2 = Cast(this.props.doc!.anchor2, Doc, null); - Doc.UnBrushDoc(doc1); - Doc.UnBrushDoc(doc2); - } - } else { - Doc.UnBrushDoc(this.props.doc!); - } + // const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); + // const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); + // Doc.UnBrushDoc(doc1); + // Doc.UnBrushDoc(doc2); + // } + // } else { + // Doc.UnBrushDoc(this.targetDoc!); + // } } onContextMenu = (e: React.MouseEvent) => { @@ -245,7 +252,7 @@ export class SearchItem extends ViewBoxBaseComponent { - Utils.CopyText(this.props.doc![Id]); + Utils.CopyText(StrCast(this.targetDoc[Id])); }, icon: "fingerprint" }); @@ -270,7 +277,7 @@ export class SearchItem extends ViewBoxBaseComponent Utils.DRAG_THRESHOLD) { document.removeEventListener("pointermove", this.onPointerMoved); document.removeEventListener("pointerup", this.onPointerUp); - const doc = Doc.IsPrototype(this.props.doc!) ? Doc.MakeDelegate(this.props.doc!) : this.props.doc!; + const doc = Doc.IsPrototype(this.targetDoc) ? Doc.MakeDelegate(this.targetDoc) : this.targetDoc; DragManager.StartDocumentDrag([this._target], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY); } } @@ -281,30 +288,33 @@ export class SearchItem extends ViewBoxBaseComponent CollectionDockingView.AddRightSplit(doc)} />; + return CollectionDockingView.AddRightSplit(doc)} />; } + @computed get searchElementDoc() { return this.rootDoc; } + @computed get targetDoc() { return this.searchElementDoc?.targetDoc as Doc; } + render() { - const doc1 = Cast(this.props.doc!.anchor1, Doc); - const doc2 = Cast(this.props.doc!.anchor2, Doc); + // const doc1 = Cast(this.targetDoc!.anchor1, Doc); + // const doc2 = Cast(this.targetDoc!.anchor2, Doc); return
-
{StrCast(this.props.doc!.title)}
-
{this.props.highlighting!.length ? "Matched fields:" + this.props.highlighting!.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}
- {this.props.lines!.filter((m, i) => i).map((l, i) =>
`${l}`
)} +
{StrCast(this.targetDoc.title)}
+ {/*
{this.props.highlighting!.length ? "Matched fields:" + this.targetDoc.highlighting!.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}
*/} + {/* {this.props.lines!.filter((m, i) => i).map((l, i) =>
`${l}`
)} */}
{this.DocumentIcon()}
-
{this.props.doc!.type ? this.props.doc!.type : "Other"}
+
{this.targetDoc.type ? this.targetDoc.type : "Other"}
- {(doc1 instanceof Doc && doc2 instanceof Doc) && this.props.doc!.type === DocumentType.LINK ? : - this.contextButton} + {/* {(doc1 instanceof Doc && doc2 instanceof Doc) && this.targetDoc!.type === DocumentType.LINK ? : + this.contextButton} */}
; -- cgit v1.2.3-70-g09d2 From a1d6cf23a902215b91433d26724a75a1844bd4dd Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 12 May 2020 23:02:23 -0700 Subject: setting up facets --- solr-8.3.1/bin/solr-8983.pid | 2 +- solr-8.3.1/server/solr/dash/conf/schema.xml | 2 + src/client/util/SearchUtil.ts | 2 + src/client/views/search/SearchBox.tsx | 63 +++++++++++++++------- src/client/views/search/SearchItem.tsx | 11 ++-- .../authentication/models/current_user_utils.ts | 1 - 6 files changed, 57 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index a873e717c..19d1e65cc 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -39661 +5999 diff --git a/solr-8.3.1/server/solr/dash/conf/schema.xml b/solr-8.3.1/server/solr/dash/conf/schema.xml index c0a4bab07..314ee8f5d 100644 --- a/solr-8.3.1/server/solr/dash/conf/schema.xml +++ b/solr-8.3.1/server/solr/dash/conf/schema.xml @@ -44,6 +44,8 @@ + + diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts index 6501da34a..c2be385ae 100644 --- a/src/client/util/SearchUtil.ts +++ b/src/client/util/SearchUtil.ts @@ -35,7 +35,9 @@ export namespace SearchUtil { export async function Search(query: string, returnDocs: boolean, options: SearchParams = {}) { query = query || "*"; //If we just have a filter query, search for * as the query const rpquery = Utils.prepend("/dashsearch"); + console.log(query); const gotten = await rp.get(rpquery, { qs: { ...options, q: query } }); + console.log(gotten); const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten); if (!returnDocs) { return result; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index e784580e5..632bcd211 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -116,12 +116,26 @@ export class SearchBox extends ViewBoxBaseComponent { console.log(this.setupButtons); if (this.setupButtons==false){ - console.log("Yuh"); this.setupDocTypeButtons(); this.setupKeyButtons(); this.setupDefaultButtons(); @@ -144,7 +158,7 @@ export class SearchBox extends ViewBoxBaseComponent { - this._searchString = StrCast(sq); + this.layoutDoc._searchString = StrCast(sq); this.submitSearch(); }); } @@ -156,7 +170,7 @@ export class SearchBox extends ViewBoxBaseComponent) { - this._searchString = e.target.value; + this.layoutDoc._searchString = e.target.value; this._openNoResults = false; this._results = []; @@ -341,9 +355,9 @@ export class SearchBox extends ViewBoxBaseComponent { - console.log(this._searchString); + console.log(StrCast(this.layoutDoc._searchString)); this.dataDoc[this.fieldKey] = new List([]); - const query = this._searchString; + const query = StrCast(this.layoutDoc._searchString); this.getFinalQuery(query); this._results = []; this._resultsSet.clear(); @@ -438,7 +452,7 @@ export class SearchBox extends ViewBoxBaseComponent(); startDragCollection = async () => { - const res = await this.getAllResults(this.getFinalQuery(this._searchString)); + const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString))); const filtered = this.filterDocsByType(res.docs); const docs = filtered.map(doc => { const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); @@ -478,7 +492,7 @@ export class SearchBox extends ViewBoxBaseComponent= this._results.length) { - this.getResults(this._searchString); + this.getResults(StrCast(this.layoutDoc._searchString)); if (i < this._results.length) result = this._results[i]; if (result) { const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - result[0].query=this._searchString; + result[0].query=StrCast(this.layoutDoc._searchString); //Make alias result[0].lines=new List(result[2]); - result[0].highlighting=new List(highlights); + result[0].highlighting=highlights.join(", "); - this._visibleElements[i] = ; + this._visibleDocuments[i] = result[0]; + //; result[0].targetDoc=result[0]; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); this._isSearch[i] = "search"; @@ -569,11 +584,12 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); - result[0].highlighting=new List(highlights); + result[0].highlighting=highlights.join(", "); - this._visibleElements[i] = ; + //this._visibleElements[i] = ; + this._visibleDocuments[i]=result[0]; result[0].targetDoc=result[0]; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]) this._isSearch[i] = "search"; @@ -901,7 +917,9 @@ export class SearchBox extends ViewBoxBaseComponent this.layoutDoc._viewType === CollectionViewType.Stacking ? Cast(Doc.UserDoc().searchItemTemplate, Doc, null) : undefined; + @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); } + + childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate: undefined; getTransform = () => { return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight } @@ -923,10 +941,10 @@ export class SearchBox extends ViewBoxBaseComponent
- this._searchString ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection"> + StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection"> - @@ -980,4 +998,13 @@ export class SearchBox extends ViewBoxBaseComponent { - // I dont think this is the best functionality because clicking the name of the collection does that. Change it back if you'd like DocumentManager.Instance.jumpToDocument(this.targetDoc, false); } @observable _useIcons = true; @observable _displayDim = 50; + @computed get query() { return StrCast(this.lookupField("query")); } + componentDidMount() { - Doc.SetSearchQuery(StrCast(this.targetDoc.query)); + + console.log(this.query); + Doc.SetSearchQuery(this.query); this.targetDoc.searchMatch = true; } componentWillUnmount() { this.targetDoc.searchMatch = undefined; } - //@computed @action public DocumentIcon() { const layoutresult = StrCast(this.targetDoc.type); @@ -308,7 +310,8 @@ export class SearchItem extends ViewBoxBaseComponent
{StrCast(this.targetDoc.title)}
- {/*
{this.props.highlighting!.length ? "Matched fields:" + this.targetDoc.highlighting!.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}
*/} +
{StrCast(this.targetDoc.highlighting).length ? "Matched fields:" + StrCast(this.targetDoc.highlighting) : //this.props.lines.length ? this.props.lines[0] : + ""}
{/* {this.props.lines!.filter((m, i) => i).map((l, i) =>
`${l}`
)} */}
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 782582930..bc024356d 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -633,7 +633,6 @@ export class CurrentUserUtils { // the initial presentation Doc to use static setupDefaultPresentation(doc: Doc) { - doc.searchItemTemplate = new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" })); if (doc["template-presentation"] === undefined) { doc["template-presentation"] = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ title: "pres element template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" -- cgit v1.2.3-70-g09d2 From 2cc452ccb09147cd56f19b5ddadd82c3e81a9123 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 13 May 2020 16:59:06 -0700 Subject: building infrastucure for buckets --- solr-8.3.1/bin/solr-8983.pid | 2 +- solr-8.3.1/server/solr/dash/conf/schema.xml | 2 +- src/client/views/search/SearchBox.tsx | 20 ++++++++-- src/client/views/search/SearchItem.tsx | 57 ++++++++++++++++++++++++++++- src/server/ApiManagers/SearchManager.ts | 5 ++- src/server/Websocket/Websocket.ts | 9 +++-- 6 files changed, 84 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 19d1e65cc..83b9efec3 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -5999 +9117 diff --git a/solr-8.3.1/server/solr/dash/conf/schema.xml b/solr-8.3.1/server/solr/dash/conf/schema.xml index 314ee8f5d..3424ee7f7 100644 --- a/solr-8.3.1/server/solr/dash/conf/schema.xml +++ b/solr-8.3.1/server/solr/dash/conf/schema.xml @@ -44,7 +44,7 @@ - + diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 632bcd211..016ff254b 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -550,6 +550,14 @@ export class SearchBox extends ViewBoxBaseComponent(this._numTotalResults === -1 ? 0 : this._numTotalResults); } + let bucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: `bucket` }); + bucket.targetDoc = bucket; + + bucket._viewType === CollectionViewType.Stacking; + + bucket.isBucket=true; + + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, bucket); for (let i = 0; i < this._numTotalResults; i++) { //if the index is out of the window then put a placeholder in @@ -562,6 +570,7 @@ export class SearchBox extends ViewBoxBaseComponent= this._results.length) { this.getResults(StrCast(this.layoutDoc._searchString)); @@ -576,7 +585,8 @@ export class SearchBox extends ViewBoxBaseComponent; result[0].targetDoc=result[0]; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); + + Doc.AddDocToList(bucket, this.props.fieldKey, result[0]); this._isSearch[i] = "search"; } } @@ -591,7 +601,8 @@ export class SearchBox extends ViewBoxBaseComponent; this._visibleDocuments[i]=result[0]; result[0].targetDoc=result[0]; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]) + + Doc.AddDocToList(bucket, this.props.fieldKey, result[0]); this._isSearch[i] = "search"; } } @@ -927,7 +938,7 @@ export class SearchBox extends ViewBoxBaseComponent { - //this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.layoutDoc._itemIndex)); + //this.gotoDocument(this.childDocs.indexOf(doc), NumCasst(this.layoutDoc._itemIndex)); } addDocument = (doc: Doc) => { @@ -972,11 +983,12 @@ export class SearchBox extends ViewBoxBaseComponent400} childLayoutTemplate={this.childLayoutTemplate} addDocument={this.addDocument} removeDocument={returnFalse} focus={this.selectElement} - ScreenToLocalTransform={this.getTransform} /> + ScreenToLocalTransform={Transform.Identity} />
{ constructor(props: SearchItemProps) { super(props); this.fetchDocuments(); + } async fetchDocuments() { @@ -139,8 +144,25 @@ const SearchDocument = makeInterface(documentSchema); @observer export class SearchItem extends ViewBoxBaseComponent(SearchDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchItem, fieldKey); } + constructor(props:any){ + super(props); + this.targetDoc._viewType= CollectionViewType.Stacking; + this.rootDoc._viewType = CollectionViewType.Stacking; + if (!this.searchItemTemplate) { // create exactly one presElmentBox template to use by any and all presentations. + Doc.UserDoc().searchItemTemplate = new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" })); + // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement + // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent + // the preselement docs from being part of multiple presentations since they would all have the same field, or we'd have to keep per-presentation data + // stored on each pres element. + (this.searchItemTemplate as Doc).lookupField = ScriptField.MakeFunction("lookupSearchBoxField(container, field, data)", + { field: "string", data: Doc.name, container: Doc.name }); + } + + } + @observable _selected: boolean = false; onClick = () => { @@ -302,9 +324,41 @@ export class SearchItem extends ViewBoxBaseComponent this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate: undefined; + getTransform = () => { + return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight + } + panelHeight = () => { + return this.props.PanelHeight(); + } + selectElement = (doc: Doc) => { + //this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.layoutDoc._itemIndex)); + } + + addDocument = (doc: Doc) => { + const newPinDoc = Doc.MakeAlias(doc); + newPinDoc.presentationTargetDoc = doc; + return Doc.AddDocToList(this.dataDoc, this.fieldKey, newPinDoc); + } render() { // const doc1 = Cast(this.targetDoc!.anchor1, Doc); // const doc2 = Cast(this.targetDoc!.anchor2, Doc); + if (this.targetDoc.isBucket === true){ + this.props.Document._viewType=CollectionViewType.Stacking; + this.props.Document._height=160; + + return + } + else { return
@@ -327,5 +381,6 @@ export class SearchItem extends ViewBoxBaseComponent
; + } } } \ No newline at end of file diff --git a/src/server/ApiManagers/SearchManager.ts b/src/server/ApiManagers/SearchManager.ts index 753c31fcf..6638c50e4 100644 --- a/src/server/ApiManagers/SearchManager.ts +++ b/src/server/ApiManagers/SearchManager.ts @@ -176,7 +176,7 @@ export namespace SolrManager { "audio": ["_t", "url"], "web": ["_t", "url"], "date": ["_d", value => new Date(value.date).toISOString()], - "proxy": ["_i", "fieldId"], + // "proxy": ["_i", "fieldId"], "list": ["_l", list => { const results = []; for (const value of list.fields) { @@ -193,8 +193,11 @@ export namespace SolrManager { if (val === null || val === undefined) { return; } + console.log(val); const type = val.__type || typeof val; + console.log(type); let suffix = suffixMap[type]; + console.log(suffix); if (!suffix) { return; } diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts index 844535056..f92c2a1f3 100644 --- a/src/server/Websocket/Websocket.ts +++ b/src/server/Websocket/Websocket.ts @@ -216,7 +216,7 @@ export namespace WebSocket { "script": ["_t", value => value.script.originalScript], "RichTextField": ["_t", value => value.Text], "date": ["_d", value => new Date(value.date).toISOString()], - "proxy": ["_i", "fieldId"], + // "proxy": ["_i", "fieldId"], "list": ["_l", list => { const results = []; for (const value of list.fields) { @@ -230,15 +230,18 @@ export namespace WebSocket { }; function ToSearchTerm(val: any): { suffix: string, value: any } | undefined { + // console.log(val); + if (val === null || val === undefined) { return; } const type = val.__type || typeof val; + // console.log(type); + let suffix = suffixMap[type]; if (!suffix) { return; } - if (Array.isArray(suffix)) { const accessor = suffix[1]; if (typeof accessor === "function") { @@ -248,7 +251,7 @@ export namespace WebSocket { } suffix = suffix[0]; } - + // console.log(suffix); return { suffix, value: val }; } -- cgit v1.2.3-70-g09d2 From 3b366a85d3544a87174d92657ad684ac46cb6117 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 13 May 2020 21:50:52 -0700 Subject: bucket ui --- .../views/collections/CollectionStackingView.tsx | 5 ++++- src/client/views/search/SearchBox.tsx | 3 +++ src/client/views/search/SearchItem.scss | 23 ++++++++++++++++++++++ src/client/views/search/SearchItem.tsx | 13 ++++++++++-- 4 files changed, 41 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 821a6d476..376e7c087 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -47,6 +47,8 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) @computed get xMargin() { return NumCast(this.props.Document._xMargin, 2 * Math.min(this.gridGap, .05 * this.props.PanelWidth())); } @computed get yMargin() { return Math.max(this.props.Document._showTitle && !this.props.Document._showTitleHover ? 30 : 0, NumCast(this.props.Document._yMargin, 0)); } // 2 * this.gridGap)); } @computed get gridGap() { return NumCast(this.props.Document._gridGap, 10); } + @computed get searchDoc() { return BoolCast(this.props.Document._searchDoc, false); } + @computed get isStackingView() { return BoolCast(this.props.Document.singleColumn, true); } @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; } @computed get showAddAGroup() { return (this.pivotField && (this.props.Document._chromeStatus !== 'view-mode' && this.props.Document._chromeStatus !== 'disabled')); } @@ -75,7 +77,8 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) const dxf = () => this.getDocTransform(d, dref.current!); this._docXfs.push({ dxf, width, height }); const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); - const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; + + const style = this.isStackingView ? { width: width(), marginTop: i || this.searchDoc? this.gridGap : 0, marginBottom: this.searchDoc? 10:0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; return
{this.getDisplayDoc(d, (!d.isTemplateDoc && !d.isTemplateForField && !d.PARAMS) ? undefined : this.props.DataDoc, dxf, width)}
; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 016ff254b..103e9a298 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -554,6 +554,7 @@ export class SearchBox extends ViewBoxBaseComponent diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss index 469f062b2..9996e0a50 100644 --- a/src/client/views/search/SearchItem.scss +++ b/src/client/views/search/SearchItem.scss @@ -160,4 +160,27 @@ .collection-item { width: 35px; +} + +.bucket-title{ + width:auto; + padding: 5px; + height: auto; + top: -18; + z-index: 55; + position: absolute; +} + +.bucket-expand{ + bottom: 0; + position: absolute; + width: 100%; + height: 15; + transform:none; + .bucket-expand:hover{ + transform:none; + } + button:hover{ + transform:none; + } } \ No newline at end of file diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 564df4232..5cef3b627 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -346,9 +346,15 @@ export class SearchItem extends ViewBoxBaseComponent +
+ {StrCast(this.rootDoc.bucketfield)} +
+ + +
} else { return
-- cgit v1.2.3-70-g09d2 From b53d19c5a09978990d6b7fd084ebf4bfbb173cec Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 14 May 2020 01:50:27 -0700 Subject: ui --- src/client/views/search/SearchBox.tsx | 52 +++++++++++++++++++++++++--------- src/client/views/search/SearchItem.tsx | 13 ++++++++- 2 files changed, 51 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 103e9a298..728ae0eae 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -81,7 +81,7 @@ export class SearchBox extends ViewBoxBaseComponent { console.log(StrCast(this.layoutDoc._searchString)); this.dataDoc[this.fieldKey] = new List([]); + this.buckets=[]; const query = StrCast(this.layoutDoc._searchString); this.getFinalQuery(query); this._results = []; @@ -364,12 +365,14 @@ export class SearchBox extends ViewBoxBaseComponent { this._resultsOpen = true; this._searchbarOpen = true; @@ -378,6 +381,26 @@ export class SearchBox extends ViewBoxBaseComponent { return SearchUtil.Search(query, true, { fq: this.filterQuery, start: 0, rows: 10000000 }); @@ -524,6 +547,8 @@ export class SearchBox extends ViewBoxBaseComponent) => { if (!this._resultsRef.current) return; + this.makebuckets(); + const scrollY = e ? e.currentTarget.scrollTop : this._resultsRef.current ? this._resultsRef.current.scrollTop : 0; const itemHght = 53; const startIndex = Math.floor(Math.max(0, scrollY / itemHght)); @@ -550,15 +575,7 @@ export class SearchBox extends ViewBoxBaseComponent(this._numTotalResults === -1 ? 0 : this._numTotalResults); } - let bucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: `bucket` }); - bucket.targetDoc = bucket; - - bucket._viewType === CollectionViewType.Stacking; - bucket.bucketfield = "Default"; - bucket.isBucket=true; - - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, bucket); for (let i = 0; i < this._numTotalResults; i++) { //if the index is out of the window then put a placeholder in @@ -577,7 +594,9 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); @@ -586,14 +605,19 @@ export class SearchBox extends ViewBoxBaseComponent; result[0].targetDoc=result[0]; - - Doc.AddDocToList(bucket, this.props.fieldKey, result[0]); + console.log(this.buckets!.length); + + Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]); this._isSearch[i] = "search"; } + } + } else { result = this._results[i]; if (result) { + if (StrCast(result[0].type)!=="search"){ + const highlights = Array.from([...Array.from(new Set(result[1]).values())]); result[0].query=StrCast(this.layoutDoc._searchString); result[0].lines=new List(result[2]); @@ -602,9 +626,11 @@ export class SearchBox extends ViewBoxBaseComponent; this._visibleDocuments[i]=result[0]; result[0].targetDoc=result[0]; + console.log(this.buckets!.length); - Doc.AddDocToList(bucket, this.props.fieldKey, result[0]); + Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]); this._isSearch[i] = "search"; + } } } } diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 5cef3b627..6e319b104 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -341,6 +341,14 @@ export class SearchItem extends ViewBoxBaseComponent{ + SearchBox.Instance._searchString=""; + SearchBox.Instance.submitSearch(); + }) + } + render() { // const doc1 = Cast(this.targetDoc!.anchor1, Doc); // const doc2 = Cast(this.targetDoc!.anchor2, Doc); @@ -357,13 +365,16 @@ export class SearchItem extends ViewBoxBaseComponent -
} -- cgit v1.2.3-70-g09d2 From 0f27d979e01c58d87f1800d7e38e41de2a2e037e Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 20 May 2020 16:18:40 -0700 Subject: faceting on height term --- solr-8.3.1/bin/solr-8983.pid | 2 +- solr-8.3.1/server/solr/dash/conf/schema.xml | 3 ++- src/server/Websocket/Websocket.ts | 17 +++++++++++++++-- 3 files changed, 18 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 83b9efec3..d53422cc2 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -9117 +17614 diff --git a/solr-8.3.1/server/solr/dash/conf/schema.xml b/solr-8.3.1/server/solr/dash/conf/schema.xml index 3424ee7f7..36e803d83 100644 --- a/solr-8.3.1/server/solr/dash/conf/schema.xml +++ b/solr-8.3.1/server/solr/dash/conf/schema.xml @@ -44,7 +44,8 @@ - + + diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts index f92c2a1f3..37a94cdd3 100644 --- a/src/server/Websocket/Websocket.ts +++ b/src/server/Websocket/Websocket.ts @@ -217,6 +217,7 @@ export namespace WebSocket { "RichTextField": ["_t", value => value.Text], "date": ["_d", value => new Date(value.date).toISOString()], // "proxy": ["_i", "fieldId"], + // "proxy": ["", "fieldId"], "list": ["_l", list => { const results = []; for (const value of list.fields) { @@ -236,7 +237,6 @@ export namespace WebSocket { return; } const type = val.__type || typeof val; - // console.log(type); let suffix = suffixMap[type]; if (!suffix) { @@ -248,8 +248,10 @@ export namespace WebSocket { val = accessor(val); } else { val = val[accessor]; + } suffix = suffix[0]; + } // console.log(suffix); return { suffix, value: val }; @@ -266,18 +268,29 @@ export namespace WebSocket { if (!docfield) { return; } + //console.log(diff); const update: any = { id: diff.id }; + console.log(update); let dynfield = false; for (let key in docfield) { if (!key.startsWith("fields.")) continue; dynfield = true; const val = docfield[key]; key = key.substring(7); - Object.values(suffixMap).forEach(suf => update[key + getSuffix(suf)] = { set: null }); + if (key==="_height"){ + Object.values(suffixMap).forEach(suf => {update[key] = { set: null };}); + } + else { + Object.values(suffixMap).forEach(suf => {update[key + getSuffix(suf)] = { set: null };}); + } const term = ToSearchTerm(val); if (term !== undefined) { const { suffix, value } = term; + if (key==="_height"){ + update[key] = { set: value }; + } update[key + suffix] = { set: value }; + console.log(update); } } if (dynfield) { -- cgit v1.2.3-70-g09d2 From 4ed8daf3bcceb8dec07d349e2da584005d4f17d5 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 20 May 2020 21:52:52 -0700 Subject: working on search syntax --- src/client/util/SearchUtil.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts index c2be385ae..1939b3e77 100644 --- a/src/client/util/SearchUtil.ts +++ b/src/client/util/SearchUtil.ts @@ -29,16 +29,21 @@ export namespace SearchUtil { rows?: number; fq?: string; allowAliases?: boolean; + } export function Search(query: string, returnDocs: true, options?: SearchParams): Promise; export function Search(query: string, returnDocs: false, options?: SearchParams): Promise; export async function Search(query: string, returnDocs: boolean, options: SearchParams = {}) { query = query || "*"; //If we just have a filter query, search for * as the query const rpquery = Utils.prepend("/dashsearch"); - console.log(query); - const gotten = await rp.get(rpquery, { qs: { ...options, q: query } }); + console.log(rpquery); + console.log(options); + query = query + '&facet=true&facet.field=_height&facet.limit=3'; + const gotten = await rp.get(rpquery+) + // const gotten = await rp.get(rpquery, { qs: { ...options, q: query } }); console.log(gotten); const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten); + console.log(result); if (!returnDocs) { return result; } -- cgit v1.2.3-70-g09d2 From d86a60f534c47773801a53f8992f9d2f3bc4db1c Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 20 May 2020 23:32:57 -0700 Subject: working on search syntax --- src/client/util/SearchUtil.ts | 9 +++++---- src/client/views/search/SearchBox.tsx | 4 +--- 2 files changed, 6 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts index 1939b3e77..77fac3711 100644 --- a/src/client/util/SearchUtil.ts +++ b/src/client/util/SearchUtil.ts @@ -4,6 +4,7 @@ import { Doc } from '../../new_fields/Doc'; import { Id } from '../../new_fields/FieldSymbols'; import { Utils } from '../../Utils'; import { DocumentType } from '../documents/DocumentTypes'; +import { StringMap } from 'libxmljs'; export namespace SearchUtil { export type HighlightingResult = { [id: string]: { [key: string]: string[] } }; @@ -29,7 +30,8 @@ export namespace SearchUtil { rows?: number; fq?: string; allowAliases?: boolean; - + "facet"?:string; + "facet.field"?: string; } export function Search(query: string, returnDocs: true, options?: SearchParams): Promise; export function Search(query: string, returnDocs: false, options?: SearchParams): Promise; @@ -38,9 +40,8 @@ export namespace SearchUtil { const rpquery = Utils.prepend("/dashsearch"); console.log(rpquery); console.log(options); - query = query + '&facet=true&facet.field=_height&facet.limit=3'; - const gotten = await rp.get(rpquery+) - // const gotten = await rp.get(rpquery, { qs: { ...options, q: query } }); + console.log({ qs: { ...options, q: query } }); + const gotten = await rp.get(rpquery, { qs: { ...options, q: query } }); console.log(gotten); const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten); console.log(result); diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 728ae0eae..a1631951e 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -383,10 +383,8 @@ export class SearchBox extends ViewBoxBaseComponent { while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { - this._curRequest = SearchUtil.Search(query, true, { fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*" }).then(action(async (res: SearchUtil.DocSearchResult) => { + this._curRequest = SearchUtil.Search(query, true, {fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*", "facet":"on", "facet.field":"_height" }).then(action(async (res: SearchUtil.DocSearchResult) => { // happens at the beginning if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) { this._numTotalResults = res.numFound; -- cgit v1.2.3-70-g09d2 From ad423a30fed48a558d655b1dc70e88d10627ee52 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 4 Jun 2020 00:54:26 -0400 Subject: bucket dictionary --- src/client/views/search/SearchBox.tsx | 41 ++++++++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 7ada7574c..2be398028 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -95,6 +95,8 @@ export class SearchBox extends ViewBoxBaseComponent(); private _isSearch: ("search" | "placeholder" | undefined)[] = []; + private _isSorted: ("sorted" | "placeholder" | undefined)[] = []; + private _numTotalResults = -1; private _endIndex = -1; @@ -104,7 +106,7 @@ export class SearchBox extends ViewBoxBaseComponent = undefined; public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchBox, fieldKey); } - + private new_buckets: { [characterName: string]: number} = {}; //if true, any keywords can be used. if false, all keywords are required. //this also serves as an indicator if the word status filter is applied @observable private _basicWordStatus: boolean = false; @@ -359,32 +361,36 @@ export class SearchBox extends ViewBoxBaseComponent([]); this.buckets=[]; + this.new_buckets={}; const query = StrCast(this.layoutDoc._searchString); this.getFinalQuery(query); this._results = []; this._resultsSet.clear(); this._isSearch = []; + this._isSorted=[]; this._visibleElements = []; this._visibleDocuments = []; console.log(query); if (query !== "") { - console.log("yes") this._endIndex = 12; this._maxSearchIndex = 0; this._numTotalResults = -1; - console.log("yesss"); await this.getResults(query); runInAction(() => { this._resultsOpen = true; this._searchbarOpen = true; this._openNoResults = true; this.resultsScrolled(); + }); } } @action private makebuckets(){ console.log(this._numTotalResults); + this._results.forEach(element => { + + }); while (this.buckets!.length highlighting[doc[Id]]); const lines = new Map(); @@ -467,6 +472,7 @@ export class SearchBox extends ViewBoxBaseComponent(this._numTotalResults === -1 ? 0 : this._numTotalResults); // indicates if things are placeholders this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); + this._isSorted = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); + } @@ -582,6 +590,7 @@ export class SearchBox extends ViewBoxBaseComponent endIndex) { if (this._isSearch[i] !== "placeholder") { this._isSearch[i] = "placeholder"; + this._isSorted[i]="placeholder"; this._visibleElements[i] =
Loading...
; } } @@ -594,6 +603,13 @@ export class SearchBox extends ViewBoxBaseComponent; result[0].targetDoc=result[0]; - console.log(this.buckets!.length); Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]); this._isSearch[i] = "search"; @@ -616,7 +631,12 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); @@ -625,9 +645,8 @@ export class SearchBox extends ViewBoxBaseComponent; this._visibleDocuments[i]=result[0]; result[0].targetDoc=result[0]; - console.log(this.buckets!.length); - Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]); + //Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]); this._isSearch[i] = "search"; } } @@ -635,6 +654,12 @@ export class SearchBox extends ViewBoxBaseComponent= this._numTotalResults) { this._visibleElements.length = this._results.length; this._visibleDocuments.length = this._results.length; -- cgit v1.2.3-70-g09d2 From c709da751cb1f98c89f3c9a3e81aa6524cc9173e Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 4 Jun 2020 17:08:00 -0400 Subject: sorting in buckets works --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/util/SearchUtil.ts | 4 -- src/client/views/search/SearchBox.tsx | 103 +++++++++++++++++++++++++++++----- 3 files changed, 89 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 448f2547b..5559899bb 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -5663 +846 diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts index 15f1f9494..ef6665c43 100644 --- a/src/client/util/SearchUtil.ts +++ b/src/client/util/SearchUtil.ts @@ -38,13 +38,9 @@ export namespace SearchUtil { export async function Search(query: string, returnDocs: boolean, options: SearchParams = {}) { query = query || "*"; //If we just have a filter query, search for * as the query const rpquery = Utils.prepend("/dashsearch"); - console.log(rpquery); - console.log(options); console.log({ qs: { ...options, q: query } }); const gotten = await rp.get(rpquery, { qs: { ...options, q: query } }); - console.log(gotten); const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten); - console.log(result); if (!returnDocs) { return result; } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 2be398028..0ae9b4bb3 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -137,7 +137,6 @@ export class SearchBox extends ViewBoxBaseComponent { - console.log(this.setupButtons); if (this.setupButtons==false){ this.setupDocTypeButtons(); this.setupKeyButtons(); @@ -149,7 +148,6 @@ export class SearchBox extends ViewBoxBaseComponent {this._searchbarOpen = true}); } if (this.rootDoc.searchQuery&& this.newAssign) { - console.log(this.rootDoc.searchQuery); const sq = this.rootDoc.searchQuery; runInAction(() => { @@ -358,7 +356,6 @@ export class SearchBox extends ViewBoxBaseComponent { - console.log(StrCast(this.layoutDoc._searchString)); this.dataDoc[this.fieldKey] = new List([]); this.buckets=[]; this.new_buckets={}; @@ -370,7 +367,6 @@ export class SearchBox extends ViewBoxBaseComponent { }); @@ -399,11 +394,67 @@ export class SearchBox extends ViewBoxBaseComponent([]); + for (var key in this.new_buckets){ + if (this.new_buckets[key]>highcount){ + secondcount===highcount; + this.secondstring=this.firststring; + highcount=this.new_buckets[key]; + this.firststring= key; + } + else if (this.new_buckets[key]>secondcount){ + secondcount=this.new_buckets[key]; + this.secondstring= key; + } + } + + let bucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: `default bucket` }); + bucket.targetDoc = bucket; + bucket._viewType === CollectionViewType.Stacking; + bucket.bucketfield = "Default"; + bucket.isBucket=true; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, bucket); + this.buckets!.push(bucket); + this.bucketcount[0]=0; + + if (this.firststring!==""){ + let firstbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.firststring }); + firstbucket.targetDoc = firstbucket; + firstbucket._viewType === CollectionViewType.Stacking; + firstbucket.bucketfield = this.firststring; + firstbucket.isBucket=true; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, firstbucket); + this.buckets!.push(firstbucket); + this.bucketcount[1]=0; + + } + + if (this.secondstring!==""){ + let secondbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.secondstring }); + secondbucket.targetDoc = secondbucket; + secondbucket._viewType === CollectionViewType.Stacking; + secondbucket.bucketfield = this.secondstring; + secondbucket.isBucket=true; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, secondbucket); + this.buckets!.push(secondbucket); + this.bucketcount[2]=0; + } + } @observable buckets:Doc[]|undefined; @@ -481,8 +532,9 @@ export class SearchBox extends ViewBoxBaseComponent(); startDragCollection = async () => { const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString))); - const filtered = this.filterDocsByType(res.docs); - const docs = filtered.map(doc => { + // const filtered = this.filterDocsByType(res.docs); + const filtered = res.docs + const docs = filtered.map(doc => { const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); if (isProto) { return Doc.MakeDelegate(doc); @@ -621,7 +673,7 @@ export class SearchBox extends ViewBoxBaseComponent; result[0].targetDoc=result[0]; - Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]); + //Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]); this._isSearch[i] = "search"; } } @@ -643,23 +695,45 @@ export class SearchBox extends ViewBoxBaseComponent; + if(i= this._numTotalResults) { this._visibleElements.length = this._results.length; this._visibleDocuments.length = this._results.length; @@ -667,6 +741,7 @@ export class SearchBox extends ViewBoxBaseComponent { - console.log("oi!"); this._nodeStatus = !this._nodeStatus; if (this._nodeStatus) { this.expandSection(`node${this.props.Document[Id]}`); @@ -754,7 +828,6 @@ export class SearchBox extends ViewBoxBaseComponent Date: Thu, 4 Jun 2020 20:16:27 -0400 Subject: highlights --- src/client/views/search/SearchBox.tsx | 54 ++++++++++++++++++++-------------- src/client/views/search/SearchItem.tsx | 9 +++--- 2 files changed, 36 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 0ae9b4bb3..c38c4c1b9 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -382,21 +382,6 @@ export class SearchBox extends ViewBoxBaseComponent { - - }); - while (this.buckets!.length { while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { - this._curRequest = SearchUtil.Search(query, true, {fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*", "facet":"on", "facet.field":"_height" }).then(action(async (res: SearchUtil.DocSearchResult) => { + this._curRequest = SearchUtil.Search(query, true, {fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*",}).then(action(async (res: SearchUtil.DocSearchResult) => { // happens at the beginning if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) { this._numTotalResults = res.numFound; @@ -604,7 +594,6 @@ export class SearchBox extends ViewBoxBaseComponent) => { if (!this._resultsRef.current) return; - this.makebuckets(); const scrollY = e ? e.currentTarget.scrollTop : this._resultsRef.current ? this._resultsRef.current.scrollTop : 0; const itemHght = 53; @@ -666,7 +655,8 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + let lines = new List(result[2]); + result[0].lines=lines result[0].highlighting=highlights.join(", "); this._visibleDocuments[i] = result[0]; @@ -708,6 +698,7 @@ export class SearchBox extends ViewBoxBaseComponent3){ this.makenewbuckets(); for (let i = 0; i < this._numTotalResults; i++) { console.log(this._isSearch[i],this._isSorted[i]); @@ -729,10 +720,31 @@ export class SearchBox extends ViewBoxBaseComponent= this._numTotalResults) { this._visibleElements.length = this._results.length; @@ -790,8 +802,6 @@ export class SearchBox extends ViewBoxBaseComponent
@@ -384,9 +384,8 @@ export class SearchItem extends ViewBoxBaseComponent
{StrCast(this.targetDoc.title)}
-
{StrCast(this.targetDoc.highlighting).length ? "Matched fields:" + StrCast(this.targetDoc.highlighting) : //this.props.lines.length ? this.props.lines[0] : - ""}
- {/* {this.props.lines!.filter((m, i) => i).map((l, i) =>
`${l}`
)} */} +
{StrCast(this.targetDoc.highlighting).length ? "Matched fields:" + StrCast(this.targetDoc.highlighting) : Cast(this.targetDoc.lines, listSpec("string"))!.length ? Cast(this.targetDoc.lines, listSpec("string"))![0] : ""}
+ {Cast(this.targetDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)}
-- cgit v1.2.3-70-g09d2 From ce716a382b83f4f05de651a96871877cd772f3af Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 4 Jun 2020 23:22:42 -0400 Subject: expand bucket --- src/client/views/search/SearchBox.tsx | 18 +++++------- src/client/views/search/SearchItem.tsx | 54 +++++++++++++++++----------------- 2 files changed, 35 insertions(+), 37 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index c38c4c1b9..525969565 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -80,9 +80,8 @@ const SearchBoxDocument = makeInterface(documentSchema, searchSchema); @observer export class SearchBox extends ViewBoxBaseComponent(SearchBoxDocument) { - // private get _searchString() { return this.rootDoc.searchQuery; } - // private set _searchString(value) { this.rootDoc.setSearchQuery(value); } - @observable _searchString: string =""; + @computed get _searchString() { return this.layoutDoc.searchQuery; } + @computed set _searchString(value) { this.layoutDoc.searchQuery=(value); } @observable private _resultsOpen: boolean = false; @observable private _searchbarOpen: boolean = false; @observable private _results: [Doc, string[], string[]][] = []; @@ -355,7 +354,12 @@ export class SearchBox extends ViewBoxBaseComponent { + submitSearch = async (reset?:boolean) => { + console.log("yes"); + if (reset){ + this.layoutDoc._searchString=""; + } + console.log(this.layoutDoc._searchString); this.dataDoc[this.fieldKey] = new List([]); this.buckets=[]; this.new_buckets={}; @@ -660,10 +664,8 @@ export class SearchBox extends ViewBoxBaseComponent; result[0].targetDoc=result[0]; - //Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]); this._isSearch[i] = "search"; } } @@ -683,13 +685,9 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); result[0].highlighting=highlights.join(", "); - - //this._visibleElements[i] = ; if(i this.targetDoc!.searchMatch = true, 0); } highlightDoc = (e: React.PointerEvent) => { - // if (this.targetDoc!.type === DocumentType.LINK) { - // if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { - - // const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); - // const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); - // Doc.BrushDoc(doc1); - // Doc.BrushDoc(doc2); - // } - // } else { - // Doc.BrushDoc(this.targetDoc!); - // } + if (this.targetDoc!.type === DocumentType.LINK) { + if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { + + const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); + const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); + Doc.BrushDoc(doc1); + Doc.BrushDoc(doc2); + } + } else { + Doc.BrushDoc(this.targetDoc!); + } e.stopPropagation(); } unHighlightDoc = (e: React.PointerEvent) => { - // if (this.targetDoc!.type === DocumentType.LINK) { - // if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { - - // const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); - // const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); - // Doc.UnBrushDoc(doc1); - // Doc.UnBrushDoc(doc2); - // } - // } else { - // Doc.UnBrushDoc(this.targetDoc!); - // } + if (this.targetDoc!.type === DocumentType.LINK) { + if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { + + const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); + const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); + Doc.UnBrushDoc(doc1); + Doc.UnBrushDoc(doc2); + } + } else { + Doc.UnBrushDoc(this.targetDoc!); + } } onContextMenu = (e: React.MouseEvent) => { @@ -345,13 +345,13 @@ export class SearchItem extends ViewBoxBaseComponent{ SearchBox.Instance._searchString=""; - SearchBox.Instance.submitSearch(); + SearchBox.Instance.submitSearch(true); }) } render() { - // const doc1 = Cast(this.targetDoc!.anchor1, Doc); - // const doc2 = Cast(this.targetDoc!.anchor2, Doc); + const doc1 = Cast(this.targetDoc!.anchor1, Doc); + const doc2 = Cast(this.targetDoc!.anchor2, Doc); if (this.targetDoc.isBucket === true){ this.props.Document._viewType=CollectionViewType.Stacking; this.props.Document._chromeStatus='disabled'; @@ -395,8 +395,8 @@ export class SearchItem extends ViewBoxBaseComponent
- {/* {(doc1 instanceof Doc && doc2 instanceof Doc) && this.targetDoc!.type === DocumentType.LINK ? : - this.contextButton} */} + {(doc1 instanceof Doc && doc2 instanceof Doc) && this.targetDoc!.type === DocumentType.LINK ? : + this.contextButton}
; -- cgit v1.2.3-70-g09d2 From b8e81dc8a87ad0e4c5147553f326f3f4931b355b Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Fri, 5 Jun 2020 22:27:17 -0400 Subject: bugfixing filtr menu --- src/client/views/search/SearchBox.tsx | 77 +++++++++++++---------------------- src/fields/Doc.ts | 16 ++++---- 2 files changed, 38 insertions(+), 55 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 525969565..15bddcd8a 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -37,17 +37,8 @@ import { documentSchema } from "../../../fields/documentSchemas"; import { makeInterface, createSchema } from '../../../fields/Schema'; import { listSpec } from '../../../fields/Schema'; - library.add(faTimes); -// export interface SearchProps { -// id: string; -// Document: Doc; -// sideBar?: Boolean; -// searchQuery?: string; -// filterQuery?: filterData; -// } - export const searchSchema = createSchema({ id: "string", Document: Doc, @@ -57,8 +48,6 @@ export const searchSchema = createSchema({ //add back filterquery - - export enum Keys { TITLE = "title", AUTHOR = "author", @@ -115,8 +104,13 @@ export class SearchBox extends ViewBoxBaseComponent `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}"`).join(" ")})`; - // // fq: type_t:collection OR {!join from=id to=proto_i}type_t:collection q:text_t:hello - // const query = [baseExpr, includeDeleted, includeIcons, typeExpr].join(" AND ").replace(/AND $/, ""); - // return query; - return ""; + // fq: type_t:collection OR {!join from=id to=proto_i}type_t:collection q:text_t:hello + const query = [baseExpr, includeDeleted, includeIcons].join(" AND ").replace(/AND $/, ""); + return query; } getDataStatus() { return this._deletedDocsStatus; } @@ -491,10 +484,8 @@ export class SearchBox extends ViewBoxBaseComponent (await Cast(doc.extendsDoc, Doc)) || doc)); const highlights: typeof res.highlighting = {}; docs.forEach((doc, index) => highlights[doc[Id]] = highlightList[index]); - const filteredDocs = docs; - //this.filterDocsByType(docs); + const filteredDocs = this.filterDocsByType(docs); runInAction(() => { - //this._results.push(...filteredDocs); filteredDocs.forEach(doc => { const index = this._resultsSet.get(doc); const highlight = highlights[doc[Id]]; @@ -526,8 +517,7 @@ export class SearchBox extends ViewBoxBaseComponent(); startDragCollection = async () => { const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString))); - // const filtered = this.filterDocsByType(res.docs); - const filtered = res.docs + const filtered = this.filterDocsByType(res.docs); const docs = filtered.map(doc => { const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); if (isProto) { @@ -1001,7 +991,6 @@ export class SearchBox extends ViewBoxBaseComponent new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; - //backgroundColor: "#121721", doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" }); doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" }); doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" }); @@ -1050,9 +1039,9 @@ export class SearchBox extends ViewBoxBaseComponent Date: Mon, 8 Jun 2020 14:22:27 -0400 Subject: fixed filtering on search, allowing buckets to expand searches --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/util/Scripting.ts | 2 +- src/client/views/search/SearchBox.tsx | 118 +++++++++++++++++++++------------ src/client/views/search/SearchItem.tsx | 13 ++-- src/fields/Doc.ts | 10 --- 5 files changed, 85 insertions(+), 60 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 5559899bb..6642ad1da 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -846 +2696 diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index ab577315c..98bbffcd7 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -93,7 +93,7 @@ export function scriptingGlobal(constructor: { new(...args: any[]): any }) { Scripting.addGlobal(constructor); } -const _scriptingGlobals: { [name: string]: any } = {}; +export const _scriptingGlobals: { [name: string]: any } = {}; let scriptingGlobals: { [name: string]: any } = _scriptingGlobals; function Run(script: string | undefined, customParams: string[], diagnostics: any[], originalScript: string, options: ScriptOptions): CompileResult { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 15bddcd8a..8e188df38 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -30,12 +30,14 @@ import { List } from '../../../fields/List'; import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; import { Transform } from '../../util/Transform'; import { MainView } from "../MainView"; -import { Scripting } from '../../util/Scripting'; +import { Scripting,_scriptingGlobals } from '../../util/Scripting'; import { CollectionView, CollectionViewType } from '../collections/CollectionView'; import { ViewBoxBaseComponent } from "../DocComponent"; import { documentSchema } from "../../../fields/documentSchemas"; import { makeInterface, createSchema } from '../../../fields/Schema'; import { listSpec } from '../../../fields/Schema'; +import * as _ from "lodash"; + library.add(faTimes); @@ -107,9 +109,18 @@ export class SearchBox extends ViewBoxBaseComponent { if (e.key === "Enter") { + runInAction(()=>{this.expandedBucket=false}); this.submitSearch(); } } @@ -348,9 +360,10 @@ export class SearchBox extends ViewBoxBaseComponent { - console.log("yes"); + console.log(this._icons); if (reset){ this.layoutDoc._searchString=""; } @@ -411,7 +424,7 @@ export class SearchBox extends ViewBoxBaseComponent3){ + if (this._numTotalResults>3 && this.expandedBucket===false){ this.makenewbuckets(); for (let i = 0; i < this._numTotalResults; i++) { console.log(this._isSearch[i],this._isSorted[i]); @@ -701,9 +714,14 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + result[0].highlighting=highlights.join(", "); + result[0].targetDoc=result[0]; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); } this._isSorted[i]="sorted"; } @@ -721,18 +739,24 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + result[0].highlighting=highlights.join(", "); + result[0].targetDoc=result[0]; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); + } + } + } if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; @@ -986,22 +1010,39 @@ export class SearchBox extends ViewBoxBaseComponent{ + if (this._icons.includes(icon)){ + _.pull(this._icons, icon); + let cap = icon.charAt(0).toUpperCase() + icon.slice(1) + console.log(cap); + let doc = await Cast(this.props.Document[cap], Doc) + doc!.backgroundColor= ""; + } + else{ + this._icons.push(icon); + let cap = icon.charAt(0).toUpperCase() + icon.slice(1) + let doc = await Cast(this.props.Document[cap], Doc) + doc!.backgroundColor= "aaaaa3"; + } + console.log(this._icons); + } + setupDocTypeButtons() { let doc = this.props.Document; const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; - doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" }); - doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" }); - doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" }); - doc.Image = ficon({ onClick: undefined, title: "image button", icon: "image" }); - doc.Link = ficon({ onClick: undefined, title: "link button", icon: "link" }); - doc.PDF = ficon({ onClick: undefined, title: "pdf button", icon: "file-pdf" }); - doc.TEXT = ficon({ onClick: undefined, title: "text button", icon: "sticky-note" }); - doc.Vid = ficon({ onClick: undefined, title: "vid button", icon: "video" }); - doc.Web = ficon({ onClick: undefined, title: "web button", icon: "globe-asia" }); - - let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc, + doc.Music = ficon({ onClick: ScriptField.MakeScript(`updateIcon("audio")`), title: "music button", icon: "music" }); + doc.Col = ficon({ onClick: ScriptField.MakeScript(`updateIcon("collection")`), title: "col button", icon: "object-group" }); + doc.Image = ficon({ onClick: ScriptField.MakeScript(`updateIcon("image")`), title: "image button", icon: "image" }); + doc.Link = ficon({ onClick: ScriptField.MakeScript(`updateIcon("link")`), title: "link button", icon: "link" }); + doc.Pdf = ficon({ onClick: ScriptField.MakeScript(`updateIcon("pdf")`), title: "pdf button", icon: "file-pdf" }); + doc.Text = ficon({ onClick: ScriptField.MakeScript(`updateIcon("rtf")`), title: "text button", icon: "sticky-note" }); + doc.Vid = ficon({ onClick: ScriptField.MakeScript(`updateIcon("video")`), title: "vid button", icon: "video" }); + doc.Web = ficon({ onClick: ScriptField.MakeScript(`updateIcon("web")`), title: "web button", icon: "globe-asia" }); + + let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc, doc.Image as Doc, doc.Link as Doc, doc.PDF as Doc, doc.TEXT as Doc, doc.Vid as Doc, doc.Web as Doc]; const dragCreators = Docs.Create.MasonryDocument(buttons, { @@ -1036,7 +1077,9 @@ export class SearchBox extends ViewBoxBaseComponent new PrefetchProxy( Docs.Create.ButtonDocument({...opts, _width: 35, _height: 30, - borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px", + borderRounding: "16px", border:"1px solid grey", color:"white", + //hovercolor: "rgb(170, 170, 163)", + letterSpacing: "2px", _fontSize: 7, }))as any as Doc; doc.keywords=button({ title: "Keywords", onClick:ScriptField.MakeScript("handleWordQueryChange(self)")}); @@ -1087,18 +1130,11 @@ export class SearchBox extends ViewBoxBaseComponent0 ? {overflow:"visible"} : {overflow:"hidden"}}>
{this.defaultButtons} - {/* - - */}
{this.docButtons}
- {/*
*/} - {/* - - */} {this.keyButtons}
@@ -1117,9 +1153,7 @@ export class SearchBox extends ViewBoxBaseComponent - {this._visibleElements.length} - - + {this._visibleElements.length}
); diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index a8d664ad8..a9a8b563b 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -344,8 +344,11 @@ export class SearchItem extends ViewBoxBaseComponent{ - SearchBox.Instance._searchString=""; - SearchBox.Instance.submitSearch(true); + if (StrCast(this.rootDoc.bucketfield)!=="results"){ + SearchBox.Instance._icons=[StrCast(this.rootDoc.bucketfield)]; + } + SearchBox.Instance.expandedBucket= true; + SearchBox.Instance.submitSearch(); }) } @@ -355,26 +358,24 @@ export class SearchItem extends ViewBoxBaseComponent
- {StrCast(this.rootDoc.bucketfield)} + {StrCast(this.rootDoc.bucketfield)==="results"? null:StrCast(this.rootDoc.bucketfield)}
-
} diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 62eac379b..e14e4996b 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1148,13 +1148,3 @@ Scripting.addGlobal(function selectedDocs(container: Doc, excludeCollections: bo }); Scripting.addGlobal(function setDocFilter(container: Doc, key: string, value: any, modifiers?: "check" | "x" | undefined) { Doc.setDocFilter(container, key, value, modifiers); }); Scripting.addGlobal(function setDocFilterRange(container: Doc, key: string, range: number[]) { Doc.setDocFilterRange(container, key, range); }); -// Scripting.addGlobal(function handleNodeChange(doc: any) { -// console.log("oi"); -// // console.log(doc); -// console.log(this); -// this.handleNodeChange(); - -// // const dv = DocumentManager.Instance.getDocumentView(doc); -// // if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", "")); -// // else dv?.switchViews(true, layoutKey.replace("layout_", "")); -// }); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 033e92675fe517a742e067bcfe5ca7a32a832b0b Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Mon, 8 Jun 2020 17:01:15 -0400 Subject: visual bugs for filter buttons --- src/client/views/search/SearchBox.tsx | 40 ++++++++++++++++++++++++---------- src/client/views/search/SearchItem.tsx | 1 + 2 files changed, 29 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 8e188df38..1d03e78a9 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -37,6 +37,7 @@ import { documentSchema } from "../../../fields/documentSchemas"; import { makeInterface, createSchema } from '../../../fields/Schema'; import { listSpec } from '../../../fields/Schema'; import * as _ from "lodash"; +import { checkIfStateModificationsAreAllowed } from 'mobx/lib/internal'; library.add(faTimes); @@ -363,7 +364,7 @@ export class SearchBox extends ViewBoxBaseComponent { - console.log(this._icons); + this.checkIcons(); if (reset){ this.layoutDoc._searchString=""; } @@ -529,7 +530,7 @@ export class SearchBox extends ViewBoxBaseComponent(); startDragCollection = async () => { - const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString))); + const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString))); const filtered = this.filterDocsByType(res.docs); const docs = filtered.map(doc => { const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); @@ -1017,15 +1018,29 @@ export class SearchBox extends ViewBoxBaseComponent{ + for (let i=0; i new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; - doc.Music = ficon({ onClick: ScriptField.MakeScript(`updateIcon("audio")`), title: "music button", icon: "music" }); - doc.Col = ficon({ onClick: ScriptField.MakeScript(`updateIcon("collection")`), title: "col button", icon: "object-group" }); + doc.Audio = ficon({ onClick: ScriptField.MakeScript(`updateIcon("audio")`), title: "music button", icon: "music" }); + doc.Collection = ficon({ onClick: ScriptField.MakeScript(`updateIcon("collection")`), title: "col button", icon: "object-group" }); doc.Image = ficon({ onClick: ScriptField.MakeScript(`updateIcon("image")`), title: "image button", icon: "image" }); doc.Link = ficon({ onClick: ScriptField.MakeScript(`updateIcon("link")`), title: "link button", icon: "link" }); doc.Pdf = ficon({ onClick: ScriptField.MakeScript(`updateIcon("pdf")`), title: "pdf button", icon: "file-pdf" }); - doc.Text = ficon({ onClick: ScriptField.MakeScript(`updateIcon("rtf")`), title: "text button", icon: "sticky-note" }); - doc.Vid = ficon({ onClick: ScriptField.MakeScript(`updateIcon("video")`), title: "vid button", icon: "video" }); + doc.Rtf = ficon({ onClick: ScriptField.MakeScript(`updateIcon("rtf")`), title: "text button", icon: "sticky-note" }); + doc.Video = ficon({ onClick: ScriptField.MakeScript(`updateIcon("video")`), title: "vid button", icon: "video" }); doc.Web = ficon({ onClick: ScriptField.MakeScript(`updateIcon("web")`), title: "web button", icon: "globe-asia" }); - let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc, - doc.Image as Doc, doc.Link as Doc, doc.PDF as Doc, doc.TEXT as Doc, doc.Vid as Doc, doc.Web as Doc]; + let buttons = [doc.None as Doc, doc.Audio as Doc, doc.Collection as Doc, + doc.Image as Doc, doc.Link as Doc, doc.Pdf as Doc, doc.Rtf as Doc, doc.Video as Doc, doc.Web as Doc]; const dragCreators = Docs.Create.MasonryDocument(buttons, { _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _yMargin: 5 }); doc.nodeButtons= dragCreators; + this.checkIcons() } @@ -1112,7 +1128,7 @@ export class SearchBox extends ViewBoxBaseComponent{ if (StrCast(this.rootDoc.bucketfield)!=="results"){ SearchBox.Instance._icons=[StrCast(this.rootDoc.bucketfield)]; + SearchBox.Instance._icons=SearchBox.Instance._icons; } SearchBox.Instance.expandedBucket= true; SearchBox.Instance.submitSearch(); -- cgit v1.2.3-70-g09d2 From 2767e06d90eeeb25283d2939208a463f8b52ee6e Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 9 Jun 2020 18:17:41 -0400 Subject: bugfixing and cosmetic changes --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/util/CurrentUserUtils.ts | 2 +- src/client/views/search/SearchBox.scss | 2 -- src/client/views/search/SearchBox.tsx | 64 ++++++++++++++++++--------------- src/client/views/search/SearchItem.scss | 10 +++--- src/client/views/search/SearchItem.tsx | 20 ++++------- src/server/websocket.ts | 5 --- 7 files changed, 48 insertions(+), 57 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 6642ad1da..4d042afa2 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -2696 +1018 diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 40e5a3451..abbcd9352 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -560,7 +560,7 @@ export class CurrentUserUtils { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", _fontSize: 10, letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ title: "search stack", })) as any as Doc, + sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ title: "sidebar search stack", })) as any as Doc, searchFileTypes: new List([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]), targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, lockedPosition: true, diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 1e71f8cb0..cd64d71ff 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -83,8 +83,6 @@ .no-result { width: 500px; background: $light-color-secondary; - border-color: $intermediate-color; - border-bottom-style: solid; padding: 10px; height: 50px; text-transform: uppercase; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 1d03e78a9..30d4fd5aa 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -45,12 +45,9 @@ library.add(faTimes); export const searchSchema = createSchema({ id: "string", Document: Doc, - sideBar: "boolean", searchQuery: "string", }); -//add back filterquery - export enum Keys { TITLE = "title", AUTHOR = "author", @@ -190,7 +187,9 @@ export class SearchBox extends ViewBoxBaseComponent { if (e.key === "Enter") { + if (this._icons!==this._allIcons){ runInAction(()=>{this.expandedBucket=false}); + } this.submitSearch(); } } @@ -651,7 +650,7 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); result[0].lines=lines result[0].highlighting=highlights.join(", "); - this._visibleDocuments[i] = result[0]; result[0].targetDoc=result[0]; @@ -678,7 +673,7 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); result[0].highlighting=highlights.join(", "); if(i3 && this.expandedBucket===false){ this.makenewbuckets(); for (let i = 0; i < this._numTotalResults; i++) { - console.log(this._isSearch[i],this._isSorted[i]); + let result = this._results[i]; + if (!this.blockedTypes.includes(StrCast(result[0].type))){ if (this._isSearch[i] === "search" && (this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) { - let result = this._results[i]; + console.log(StrCast(result[0].type)); if (StrCast(result[0].type)=== this.firststring && this.bucketcount[1]<3){ Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]); this.bucketcount[1]+=1; + console.log("1 count") } - else if (StrCast(result[0].type)=== this.secondstring && this.bucketcount[1]<3){ + else if (StrCast(result[0].type)=== this.secondstring && this.bucketcount[2]<3){ Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]); this.bucketcount[2]+=1; + console.log("2 count") } else if (this.bucketcount[0]<3){ //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]); //this.bucketcount[0]+=1; const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - result[0].query=StrCast(this.layoutDoc._searchString); result[0].lines=new List(result[2]); result[0].highlighting=highlights.join(", "); result[0].targetDoc=result[0]; @@ -727,17 +723,18 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); result[0].highlighting=highlights.join(", "); result[0].targetDoc=result[0]; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); } } + } } if (this._maxSearchIndex >= this._numTotalResults) { @@ -766,6 +765,9 @@ export class SearchBox extends ViewBoxBaseComponent NumCast(this.props.Document._width); - if (this.rootDoc.sideBar===true){ + // if (StrCast(this.props.Document.title)==="sidebar search stack"){ width = MainView.Instance.flyoutWidthFunc; - } + + // } if (nodeBtns instanceof Doc) { return
NumCast(this.props.Document._width); - if (this.rootDoc.sideBar===true){ + // if (StrCast(this.props.Document.title)==="sidebar search stack"){ width = MainView.Instance.flyoutWidthFunc; - } + // } if (nodeBtns instanceof Doc) { return
NumCast(this.props.Document._width); - if (this.rootDoc.sideBar===true){ + // if (StrCast(this.props.Document.title)==="sidebar search stack"){ width = MainView.Instance.flyoutWidthFunc; - } + // } if (defBtns instanceof Doc) { return
{ - const newPinDoc = Doc.MakeAlias(doc); - newPinDoc.presentationTargetDoc = doc; - return Doc.AddDocToList(this.dataDoc, this.fieldKey, newPinDoc); + return null; } //Make id layour document render() { - this.props.Document._gridGap=5; + if (this.expandedBucket === true){ + this.props.Document._gridGap=5; + } + else { + this.props.Document._gridGap=10; + } this.props.Document._searchDoc=true; return ( @@ -1160,7 +1166,7 @@ export class SearchBox extends ViewBoxBaseComponent400} childLayoutTemplate={this.childLayoutTemplate} - addDocument={this.addDocument} + addDocument={undefined} removeDocument={returnFalse} focus={this.selectElement} ScreenToLocalTransform={Transform.Identity} /> diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss index 9996e0a50..5ce022d41 100644 --- a/src/client/views/search/SearchItem.scss +++ b/src/client/views/search/SearchItem.scss @@ -11,15 +11,15 @@ .searchItem-overview .searchItem { width: 100%; background: $light-color-secondary; - border-color: $intermediate-color; - border-bottom-style: solid; - padding: 10px; - min-height: 50px; + padding: 8px; + min-height: 46px; + height:46px; max-height: 150px; height: auto; z-index: 0; display: flex; overflow: visible; + box-shadow: rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw; .searchItem-body { display: flex; @@ -146,7 +146,7 @@ } .searchBox-placeholder { - min-height: 50px; + min-height: 46px; margin-left: 150px; width: calc(100% - 150px); text-transform: uppercase; diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 97ca0ee69..9d5d64dca 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -336,12 +336,6 @@ export class SearchItem extends ViewBoxBaseComponent { - const newPinDoc = Doc.MakeAlias(doc); - newPinDoc.presentationTargetDoc = doc; - return Doc.AddDocToList(this.dataDoc, this.fieldKey, newPinDoc); - } - newsearch(){ runInAction(()=>{ if (StrCast(this.rootDoc.bucketfield)!=="results"){ @@ -362,9 +356,6 @@ export class SearchItem extends ViewBoxBaseComponent -
- {StrCast(this.rootDoc.bucketfield)==="results"? null:StrCast(this.rootDoc.bucketfield)} -
-
} @@ -385,9 +376,10 @@ export class SearchItem extends ViewBoxBaseComponent
-
{StrCast(this.targetDoc.title)}
-
{StrCast(this.targetDoc.highlighting).length ? "Matched fields:" + StrCast(this.targetDoc.highlighting) : Cast(this.targetDoc.lines, listSpec("string"))!.length ? Cast(this.targetDoc.lines, listSpec("string"))![0] : ""}
- {Cast(this.targetDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)} +
{StrCast(this.targetDoc.title)}
+
+ {StrCast(this.targetDoc.highlighting).length ? "Matched fields:" + StrCast(this.targetDoc.highlighting) : Cast(this.targetDoc.lines, listSpec("string"))!.length ? Cast(this.targetDoc.lines, listSpec("string"))![0] : ""}
+ {/* {Cast(this.targetDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)} */}
diff --git a/src/server/websocket.ts b/src/server/websocket.ts index 87af5fa06..19c98454c 100644 --- a/src/server/websocket.ts +++ b/src/server/websocket.ts @@ -236,7 +236,6 @@ export namespace WebSocket { }; function ToSearchTerm(val: any): { suffix: string, value: any } | undefined { - // console.log(val); if (val === null || val === undefined) { return; @@ -258,7 +257,6 @@ export namespace WebSocket { suffix = suffix[0]; } - // console.log(suffix); return { suffix, value: val }; } @@ -273,9 +271,7 @@ export namespace WebSocket { if (!docfield) { return; } - //console.log(diff); const update: any = { id: diff.id }; - console.log(update); let dynfield = false; for (let key in docfield) { if (!key.startsWith("fields.")) continue; @@ -295,7 +291,6 @@ export namespace WebSocket { update[key] = { set: value }; } update[key + suffix] = { set: value }; - console.log(update); } } if (dynfield) { -- cgit v1.2.3-70-g09d2 From 52f88acb3141e15b1063f489273d94d98447c87a Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 9 Jun 2020 19:27:47 -0400 Subject: more bugfixing' --- src/client/util/CurrentUserUtils.ts | 5 ++--- src/client/util/SearchUtil.ts | 2 -- src/client/views/search/SearchBox.tsx | 26 +++++++++++++++++++------- src/client/views/search/SearchItem.tsx | 10 ++++++++++ 4 files changed, 31 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index abbcd9352..9e19962f8 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -43,7 +43,7 @@ export class CurrentUserUtils { if (doc["template-button-query"] === undefined) { const queryTemplate = Docs.Create.MulticolumnDocument( [ - Docs.Create.SearchDocument({ title: "query", _height: 200 }), + Docs.Create.SearchDocument({ _viewType: CollectionViewType.Stacking, title: "query", _height: 200 }), Docs.Create.FreeformDocument([], { title: "data", _height: 100, _LODdisable: true }) ], { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true } @@ -342,7 +342,6 @@ export class CurrentUserUtils { { title: "Drag a document previewer", label: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc }, { title: "Toggle a Calculator REPL", label: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' }, { title: "Connect a Google Account", label: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, - { title: "query", icon: "bolt", label: "Col", ignoreClick: true, drag: 'Docs.Create.SearchDocument({ _width: 200, title: "an image of a cat" })' }, ]; } @@ -560,7 +559,7 @@ export class CurrentUserUtils { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", _fontSize: 10, letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ title: "sidebar search stack", })) as any as Doc, + sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({_viewType: CollectionViewType.Stacking, title: "sidebar search stack", })) as any as Doc, searchFileTypes: new List([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]), targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, lockedPosition: true, diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts index ef6665c43..e4c4f5fb7 100644 --- a/src/client/util/SearchUtil.ts +++ b/src/client/util/SearchUtil.ts @@ -38,7 +38,6 @@ export namespace SearchUtil { export async function Search(query: string, returnDocs: boolean, options: SearchParams = {}) { query = query || "*"; //If we just have a filter query, search for * as the query const rpquery = Utils.prepend("/dashsearch"); - console.log({ qs: { ...options, q: query } }); const gotten = await rp.get(rpquery, { qs: { ...options, q: query } }); const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten); if (!returnDocs) { @@ -132,7 +131,6 @@ export namespace SearchUtil { }); const result: IdSearchResult = JSON.parse(response); const { ids, numFound, highlighting } = result; - //console.log(ids.length); const docMap = await DocServer.GetRefFields(ids); const docs: Doc[] = []; for (const id of ids) { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 30d4fd5aa..5ec911221 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -119,9 +119,18 @@ export class SearchBox extends ViewBoxBaseComponentNo Search Results
]; //this._visibleDocuments= Docs.Create. + let noResult= Docs.Create.TextDocument("",{title:"noResult"}) + noResult.targetDoc=noResult; + noResult.isBucket =false; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, noResult); return; } @@ -893,7 +906,7 @@ export class SearchBox extends ViewBoxBaseComponent Doc.AddDocToList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc); remButtonDoc = (doc: Doc) => Doc.RemoveDocFromList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc); @@ -1079,10 +1092,10 @@ export class SearchBox extends ViewBoxBaseComponent - {this._visibleElements.length}
); diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 9d5d64dca..74750a40c 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -371,6 +371,16 @@ export class SearchItem extends ViewBoxBaseComponent
} + else if (this.targetDoc.isBucket === false){ + this.props.Document._chromeStatus='disabled'; + return
+
+
+
No Search Results
+
+
+
+ } else { return
-- cgit v1.2.3-70-g09d2 From 78227f09b30db57c6f500bd2e2d02f43d133d1da Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 10 Jun 2020 18:23:27 -0400 Subject: highlights --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 3 +++ src/client/views/search/SearchItem.tsx | 2 ++ 2 files changed, 5 insertions(+) (limited to 'src') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index fc131cd38..cb84921f8 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -253,10 +253,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true }); const res = terms.filter(t => t).map(term => this.findInNode(this._editorView!, this._editorView!.state.doc, term)); + console.log(res); let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; res.map(r => r.map(h => flattened.push(h))); + console.log(flattened); const lastSel = Math.min(flattened.length - 1, this._searchIndex); + console.log(lastSel) flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 74750a40c..35fc211af 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -248,6 +248,8 @@ export class SearchItem extends ViewBoxBaseComponent this.targetDoc!.searchMatch = true, 0); } highlightDoc = (e: React.PointerEvent) => { + console.log(Cast(this.targetDoc.lines, listSpec("string"))!.length); + if (this.targetDoc!.type === DocumentType.LINK) { if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { -- cgit v1.2.3-70-g09d2 From db97843dccf820231bec0f9a2f8d9de0b64bb71f Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 11 Jun 2020 20:56:48 -0400 Subject: ability to parse back and forth through internal seaarch results --- .../views/nodes/formattedText/FormattedTextBox.tsx | 48 ++++++++- src/client/views/pdf/PDFViewer.tsx | 11 ++ src/client/views/search/SearchItem.tsx | 115 ++++++++++++++------- 3 files changed, 130 insertions(+), 44 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index cb84921f8..aad4e82b5 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -248,24 +248,61 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._editorView.dispatch(tr.addMark(flattened[lastSel].from, flattened[lastSel].to, link)); } } - public highlightSearchTerms = (terms: string[]) => { + public highlightSearchTerms = (terms: string[])=> { if (this._editorView && (this._editorView as any).docView && terms.some(t => t)) { + const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true }); const res = terms.filter(t => t).map(term => this.findInNode(this._editorView!, this._editorView!.state.doc, term)); - console.log(res); + let length = res[0].length; let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; res.map(r => r.map(h => flattened.push(h))); - console.log(flattened); + if (this._searchIndex>1){ + this._searchIndex+=-2; + } + else if (this._searchIndex===1){ + this._searchIndex=length-1; + } + else if (this._searchIndex===0){ + this._searchIndex=length-2; + } + + const lastSel = Math.min(flattened.length - 1, this._searchIndex); + flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); + this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; + this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); + let index = this._searchIndex; + console.log(index); + + Doc.GetProto(this.dataDoc).searchIndex = index; + Doc.GetProto(this.dataDoc).length=length; + } + } + + public highlightSearchTerms2 = (terms: string[])=> { + if (this._editorView && (this._editorView as any).docView && terms.some(t => t)) { + + const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); + const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true }); + const res = terms.filter(t => t).map(term => this.findInNode(this._editorView!, this._editorView!.state.doc, term)); + let length = res[0].length; + let tr = this._editorView.state.tr; + const flattened: TextSelection[] = []; + res.map(r => r.map(h => flattened.push(h))); const lastSel = Math.min(flattened.length - 1, this._searchIndex); - console.log(lastSel) flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); + let index = this._searchIndex; + console.log(index); + + Doc.GetProto(this.dataDoc).searchIndex = index; + Doc.GetProto(this.dataDoc).length=length; } } + public unhighlightSearchTerms = () => { if (this._editorView && (this._editorView as any).docView) { const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); @@ -668,6 +705,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._disposers.search = reaction(() => this.rootDoc.searchMatch, search => search ? this.highlightSearchTerms([Doc.SearchQuery()]) : this.unhighlightSearchTerms(), { fireImmediately: true }); + this._disposers.search2 = reaction(() => this.rootDoc.searchMatch2, + search => search ? this.highlightSearchTerms2([Doc.SearchQuery()]) : this.unhighlightSearchTerms(), + { fireImmediately: true }); this._disposers.record = reaction(() => this._recording, () => { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 5bad248be..882e48de7 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -333,6 +333,10 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { this.Index = Math.min(this.Index + 1, this.allAnnotations.length - 1); this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]); + this.Document.searchIndex = this.Index; + this.Document.length=this.allAnnotations.length; + console.log(this.Index); + } @action @@ -399,6 +403,9 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { @@ -412,7 +419,11 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { - DocumentManager.Instance.jumpToDocument(this.targetDoc, false); + DocumentManager.Instance.jumpToDocument(this.rootDoc, false); } @observable _useIcons = true; @observable _displayDim = 50; @@ -175,17 +175,29 @@ export class SearchItem extends ViewBoxBaseComponent this.rootDoc.searchIndex, + search => {console.log(NumCast(search));this.searchPos=NumCast(search) },{ fireImmediately: true } + ); + Doc.SetSearchQuery(this.query); - this.targetDoc.searchMatch = true; + this.rootDoc.searchMatch = true; } componentWillUnmount() { - this.targetDoc.searchMatch = undefined; + this.rootDoc.searchMatch = undefined; + this._reactionDisposer && this._reactionDisposer(); } + + @observable searchPos: number|undefined =0; + + private _reactionDisposer?: IReactionDisposer; + + @computed get highlightPos(){return NumCast(this.rootDoc.searchIndex)} + @action public DocumentIcon() { - const layoutresult = StrCast(this.targetDoc.type); + const layoutresult = StrCast(this.rootDoc.type); if (!this._useIcons) { const returnXDimension = () => this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); const returnYDimension = () => this._displayDim; @@ -196,10 +208,10 @@ export class SearchItem extends ViewBoxBaseComponent this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} > { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); } - nextHighlight = (e: React.PointerEvent) => { + @action + nextHighlight = (e: React.MouseEvent) => { e.preventDefault(); - e.button === 0 && SearchBox.Instance.openSearch(e); - this.targetDoc!.searchMatch = false; - setTimeout(() => this.targetDoc!.searchMatch = true, 0); + //e.button === 0 && SearchBox.Instance.openSearch(e); + + this.rootDoc!.searchMatch = false; + setTimeout(() => this.rootDoc!.searchMatch = true, 0); + this.rootDoc.searchIndex=NumCast(this.rootDoc.searchIndex); + + this.searchPos=NumCast(this.rootDoc!.searchIndex); + this.length=NumCast(this.rootDoc!.length); } - highlightDoc = (e: React.PointerEvent) => { - console.log(Cast(this.targetDoc.lines, listSpec("string"))!.length); - if (this.targetDoc!.type === DocumentType.LINK) { - if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { + @action + nextHighlight2 = (e: React.MouseEvent) => { + e.preventDefault(); + //e.button === 0 && SearchBox.Instance.openSearch(e); + + this.rootDoc!.searchMatch2 = false; + setTimeout(() => this.rootDoc!.searchMatch2 = true, 0); + this.rootDoc.searchIndex=NumCast(this.rootDoc.searchIndex); + + this.searchPos=NumCast(this.rootDoc!.searchIndex); + this.length=NumCast(this.rootDoc!.length); + } - const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); - const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); + @observable length:number|undefined = 0; + + highlightDoc = (e: React.PointerEvent) => { + if (this.rootDoc!.type === DocumentType.LINK) { + if (this.rootDoc!.anchor1 && this.rootDoc!.anchor2) { + + const doc1 = Cast(this.rootDoc!.anchor1, Doc, null); + const doc2 = Cast(this.rootDoc!.anchor2, Doc, null); Doc.BrushDoc(doc1); Doc.BrushDoc(doc2); } } else { - Doc.BrushDoc(this.targetDoc!); + Doc.BrushDoc(this.rootDoc!); } e.stopPropagation(); } unHighlightDoc = (e: React.PointerEvent) => { - if (this.targetDoc!.type === DocumentType.LINK) { - if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { + if (this.rootDoc!.type === DocumentType.LINK) { + if (this.rootDoc!.anchor1 && this.rootDoc!.anchor2) { - const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); - const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); + const doc1 = Cast(this.rootDoc!.anchor1, Doc, null); + const doc2 = Cast(this.rootDoc!.anchor2, Doc, null); Doc.UnBrushDoc(doc1); Doc.UnBrushDoc(doc2); } } else { - Doc.UnBrushDoc(this.targetDoc!); + Doc.UnBrushDoc(this.rootDoc!); } } @@ -284,7 +316,7 @@ export class SearchItem extends ViewBoxBaseComponent { - Utils.CopyText(StrCast(this.targetDoc[Id])); + Utils.CopyText(StrCast(this.rootDoc[Id])); }, icon: "fingerprint" }); @@ -309,7 +341,7 @@ export class SearchItem extends ViewBoxBaseComponent Utils.DRAG_THRESHOLD) { document.removeEventListener("pointermove", this.onPointerMoved); document.removeEventListener("pointerup", this.onPointerUp); - const doc = Doc.IsPrototype(this.targetDoc) ? Doc.MakeDelegate(this.targetDoc) : this.targetDoc; + const doc = Doc.IsPrototype(this.rootDoc) ? Doc.MakeDelegate(this.rootDoc) : this.rootDoc; DragManager.StartDocumentDrag([this._target], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY); } } @@ -320,7 +352,7 @@ export class SearchItem extends ViewBoxBaseComponent CollectionDockingView.AddRightSplit(doc)} />; + return CollectionDockingView.AddRightSplit(doc)} />; } @computed get searchElementDoc() { return this.rootDoc; } @@ -350,12 +382,12 @@ export class SearchItem extends ViewBoxBaseComponent
} - else if (this.targetDoc.isBucket === false){ + else if (this.rootDoc.isBucket === false){ this.props.Document._chromeStatus='disabled'; return
@@ -385,23 +417,26 @@ export class SearchItem extends ViewBoxBaseComponent -
+
-
{StrCast(this.targetDoc.title)}
+
{StrCast(this.rootDoc.title)}
- {StrCast(this.targetDoc.highlighting).length ? "Matched fields:" + StrCast(this.targetDoc.highlighting) : Cast(this.targetDoc.lines, listSpec("string"))!.length ? Cast(this.targetDoc.lines, listSpec("string"))![0] : ""}
- {/* {Cast(this.targetDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)} */} -
+ {this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}
+ {/* {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)} */} +
{this.DocumentIcon()}
-
{this.targetDoc.type ? this.targetDoc.type : "Other"}
+
{this.rootDoc.type ? this.rootDoc.type : "Other"}
- {(doc1 instanceof Doc && doc2 instanceof Doc) && this.targetDoc!.type === DocumentType.LINK ? : + {(doc1 instanceof Doc && doc2 instanceof Doc) && this.rootDoc!.type === DocumentType.LINK ? : this.contextButton}
-- cgit v1.2.3-70-g09d2 From 0b250567b092bd388fa2db072fb802a6493e8e68 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Fri, 12 Jun 2020 13:08:18 -0400 Subject: buttons for parsing --- src/client/views/search/SearchItem.tsx | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index d6589f265..37283e0fb 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -381,6 +381,18 @@ export class SearchItem extends ViewBoxBaseComponent + {`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`} + + +
+ } + render() { const doc1 = Cast(this.rootDoc!.anchor1, Doc); const doc2 = Cast(this.rootDoc!.anchor2, Doc); @@ -424,9 +436,13 @@ export class SearchItem extends ViewBoxBaseComponent {this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}
{/* {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)} */} - + */}
-- cgit v1.2.3-70-g09d2 From c34e68b65c19df13c56f6281d48772b3ec05378b Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Fri, 12 Jun 2020 18:41:40 -0400 Subject: expanding highlights --- src/client/views/search/SearchItem.tsx | 62 +++++++++++++++++++++++++++------- 1 file changed, 50 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 37283e0fb..63baf625e 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -58,6 +58,7 @@ export class SelectorContextMenu extends React.Component { super(props); this.fetchDocuments(); + } async fetchDocuments() { @@ -180,18 +181,29 @@ export class SearchItem extends ViewBoxBaseComponent {console.log(NumCast(search));this.searchPos=NumCast(search) },{ fireImmediately: true } ); + this._reactionDisposer2 = reaction( + () => this._useIcons, + el=> {console.log("YUH"); + setTimeout(() =>(this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null), 1); + } + ); + Doc.SetSearchQuery(this.query); this.rootDoc.searchMatch = true; } componentWillUnmount() { this.rootDoc.searchMatch = undefined; this._reactionDisposer && this._reactionDisposer(); + this._reactionDisposer2 && this._reactionDisposer2(); + } @observable searchPos: number|undefined =0; private _reactionDisposer?: IReactionDisposer; + private _reactionDisposer2?: IReactionDisposer; + @computed get highlightPos(){return NumCast(this.rootDoc.searchIndex)} @@ -243,9 +255,12 @@ export class SearchItem extends ViewBoxBaseComponent { this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} > + return
{ this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} > -
; +
+
{this.rootDoc.type ? this.rootDoc.type : "Other"}
+
+ ; } collectionRef = React.createRef(); @@ -380,10 +395,36 @@ export class SearchItem extends ViewBoxBaseComponent { + this._displayLines = !this._displayLines; + //this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); + })} + //onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} + > + {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
`${l}`
)} +
;; + } + else { + return ; + } + } + + //this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); + + @observable _displayLines: boolean = true; returnButtons(){ return
- {`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`} + {this.returnLines()} + {`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`} @@ -393,6 +434,9 @@ export class SearchItem extends ViewBoxBaseComponent } + private _mainRef: React.RefObject = React.createRef(); + + render() { const doc1 = Cast(this.rootDoc!.anchor1, Doc); const doc2 = Cast(this.rootDoc!.anchor2, Doc); @@ -429,26 +473,20 @@ export class SearchItem extends ViewBoxBaseComponent -
+
{StrCast(this.rootDoc.title)}
{this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}
- {/* {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)} */} +
{NumCast(this.rootDoc.length) > 1? this.returnButtons(): null} - {/* - */} +
{this.DocumentIcon()}
-
{this.rootDoc.type ? this.rootDoc.type : "Other"}
-- cgit v1.2.3-70-g09d2 From fb5291760d908fe54ec0134cbe3868d666b02b19 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Mon, 15 Jun 2020 20:49:10 -0400 Subject: bugfixing with expading search terms within a bucket --- .../views/nodes/formattedText/FormattedTextBox.tsx | 10 ++-- src/client/views/pdf/PDFViewer.tsx | 18 +++++-- src/client/views/search/SearchBox.tsx | 32 +++++------- src/client/views/search/SearchItem.tsx | 60 +++++++++++++++++----- 4 files changed, 77 insertions(+), 43 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index aad4e82b5..dff42bcb1 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -273,7 +273,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); let index = this._searchIndex; - console.log(index); Doc.GetProto(this.dataDoc).searchIndex = index; Doc.GetProto(this.dataDoc).length=length; @@ -295,7 +294,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); let index = this._searchIndex; - console.log(index); Doc.GetProto(this.dataDoc).searchIndex = index; Doc.GetProto(this.dataDoc).length=length; @@ -702,12 +700,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.setupEditor(this.config, this.props.fieldKey); - this._disposers.search = reaction(() => this.rootDoc.searchMatch, - search => search ? this.highlightSearchTerms([Doc.SearchQuery()]) : this.unhighlightSearchTerms(), - { fireImmediately: true }); - this._disposers.search2 = reaction(() => this.rootDoc.searchMatch2, + this._disposers.search = reaction(() => this.rootDoc.searchMatch2, search => search ? this.highlightSearchTerms2([Doc.SearchQuery()]) : this.unhighlightSearchTerms(), { fireImmediately: true }); + this._disposers.search2 = reaction(() => this.rootDoc.searchMatch, + search => search ? this.highlightSearchTerms([Doc.SearchQuery()]) : this.unhighlightSearchTerms(), + { fireImmediately: true }); this._disposers.record = reaction(() => this._recording, () => { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 882e48de7..f23923279 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -107,6 +107,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent = React.createRef(); private _mainCont: React.RefObject = React.createRef(); private _selectionText: string = ""; @@ -144,6 +145,17 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._showWaiting = this._showCover = true); this.props.startupLive && this.setupPdfJsViewer(); this._searchReactionDisposer = reaction(() => this.Document.searchMatch, search => { + if (search) { + this.search(Doc.SearchQuery(), false); + this._lastSearch = Doc.SearchQuery(); + } + else { + setTimeout(() => this._lastSearch === "mxytzlaf" && this.search("mxytzlaf", true), 200); // bcz: how do we clear search highlights? + this._lastSearch && (this._lastSearch = "mxytzlaf"); + } + }, { fireImmediately: true }); + + this._searchReactionDisposer2 = reaction(() => this.Document.searchMatch2, search => { if (search) { this.search(Doc.SearchQuery(), true); this._lastSearch = Doc.SearchQuery(); @@ -325,7 +337,10 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { + console.log(this.Index); this.Index = Math.max(this.Index - 1, 0); + console.log(this.Index); + console.log(this.allAnnotations); this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]); } @@ -335,7 +350,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent NumCast(a.y) - NumCast(b.y))[this.Index]); this.Document.searchIndex = this.Index; this.Document.length=this.allAnnotations.length; - console.log(this.Index); } @@ -403,7 +417,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent([]); this.buckets=[]; this.new_buckets={}; @@ -430,7 +429,6 @@ export class SearchBox extends ViewBoxBaseComponentNo Search Results
]; //this._visibleDocuments= Docs.Create. let noResult= Docs.Create.TextDocument("",{title:"noResult"}) - noResult.targetDoc=noResult; noResult.isBucket =false; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, noResult); return; @@ -673,10 +668,9 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); - result[0].lines=lines + result[0].lines=lines; result[0].highlighting=highlights.join(", "); this._visibleDocuments[i] = result[0]; - result[0].targetDoc=result[0]; this._isSearch[i] = "search"; } @@ -694,11 +688,13 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + + let lines = new List(result[2]); + + result[0].lines= lines; result[0].highlighting=highlights.join(", "); if(i(result[2]); + let lines = new List(result[2]); + result[0].lines= lines; result[0].highlighting=highlights.join(", "); - result[0].targetDoc=result[0]; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); } this._isSorted[i]="sorted"; } } } - console.log(this.bucketcount[0]); - console.log(this.bucketcount[1]); - console.log(this.bucketcount[2]); + if (this.buckets![0]){ this.buckets![0]._height = this.bucketcount[0]*55 + 25; } @@ -760,11 +753,10 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + let lines = new List(result[2]); + result[0].lines= lines; result[0].highlighting=highlights.join(", "); - result[0].targetDoc=result[0]; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); } } diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 63baf625e..c1fd2d0b8 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -174,16 +174,40 @@ export class SearchItem extends ViewBoxBaseComponent this.rootDoc.searchIndex, search => {console.log(NumCast(search));this.searchPos=NumCast(search) },{ fireImmediately: true } ); - this._reactionDisposer2 = reaction( () => this._useIcons, - el=> {console.log("YUH"); + el=> { + if (this.rootDoc.parent){ + parent = Cast(this.rootDoc.parent, Doc, null) as Doc; + height=(NumCast(parent._height)); + }; + console.log(height); + console.log(this._oldHeight); + setTimeout(() =>{this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null; + parent!==undefined? this._mainRef.current?.getBoundingClientRect()? parent._height= -this._oldHeight + height +this._mainRef.current?.getBoundingClientRect().height : null: null; + this._mainRef.current?.getBoundingClientRect()? this._oldHeight= this._mainRef.current?.getBoundingClientRect().height : null; + // this._oldHeight 55? this._oldHeight =55:null; + }, 1); + } + ); + + this._reactionDisposer3 = reaction( + () => this._displayLines, + el=> { setTimeout(() =>(this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null), 1); } ); @@ -195,6 +219,7 @@ export class SearchItem extends ViewBoxBaseComponent this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate: undefined; @@ -398,23 +425,20 @@ export class SearchItem extends ViewBoxBaseComponent1){ if (!this._displayLines) { - return
{ this._displayLines = !this._displayLines; //this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); })} //onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} > - {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
`${l}`
)} + {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)}
;; } - else { - return ; - } + } } //this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); @@ -423,14 +447,21 @@ export class SearchItem extends ViewBoxBaseComponent - {this.returnLines()} +
+ {this.rootDoc!.type === DocumentType.PDF? : null} {`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`} +
+
+ {this.returnLines()} +
} @@ -472,6 +503,7 @@ export class SearchItem extends ViewBoxBaseComponent } else { + console.log(this.rootDoc.highlighting); return
@@ -480,7 +512,7 @@ export class SearchItem extends ViewBoxBaseComponent {this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}
- {NumCast(this.rootDoc.length) > 1? this.returnButtons(): null} + {NumCast(this.rootDoc.length) > 1 ?this.returnButtons(): null}
-- cgit v1.2.3-70-g09d2 From a0c15d84b6d5f1aff604b755ec31c66dd341b235 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 16 Jun 2020 12:56:54 -0400 Subject: seachitem ui --- src/client/views/search/SearchItem.tsx | 39 ++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index c1fd2d0b8..0c4ddf038 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -180,8 +180,10 @@ export class SearchItem extends ViewBoxBaseComponent this._displayLines, el=> { - setTimeout(() =>(this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null), 1); + if (this.rootDoc.parent){ + parent = Cast(this.rootDoc.parent, Doc, null) as Doc; + height=(NumCast(parent._height)); + }; + setTimeout(() =>{this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null; + parent!==undefined? this._mainRef.current?.getBoundingClientRect()? parent._height= -this._oldHeight + height +this._mainRef.current?.getBoundingClientRect().height : null: null; + this._mainRef.current?.getBoundingClientRect()? this._oldHeight= this._mainRef.current?.getBoundingClientRect().height : null; + }, 1); } ); @@ -298,6 +307,7 @@ export class SearchItem extends ViewBoxBaseComponent { e.preventDefault(); + e.stopPropagation(); //e.button === 0 && SearchBox.Instance.openSearch(e); this.rootDoc!.searchMatch = false; @@ -311,6 +321,8 @@ export class SearchItem extends ViewBoxBaseComponent { e.preventDefault(); + e.stopPropagation(); + //e.button === 0 && SearchBox.Instance.openSearch(e); this.rootDoc!.searchMatch2 = false; @@ -447,22 +459,23 @@ export class SearchItem extends ViewBoxBaseComponent -
- {this.rootDoc!.type === DocumentType.PDF? : null} - {`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`} - -
-
+ +
+
+
{this.returnLines()}
+
} private _mainRef: React.RefObject = React.createRef(); @@ -512,7 +525,7 @@ export class SearchItem extends ViewBoxBaseComponent {this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}
- {NumCast(this.rootDoc.length) > 1 ?this.returnButtons(): null} + {NumCast(this.rootDoc.length) > 1 || this.rootDoc!.type === DocumentType.PDF?this.returnButtons(): null}
-- cgit v1.2.3-70-g09d2 From da8b3384142b8b0714fb7fc35a5ca4a48ed94ed3 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 16 Jun 2020 14:19:53 -0400 Subject: reset --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/views/search/SearchBox.tsx | 5 ++++- src/client/views/search/SearchItem.tsx | 1 - 3 files changed, 5 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 4d042afa2..98861a8e1 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -1018 +49593 diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 596a0cac7..afc3e7c8b 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -668,6 +668,7 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + result[0]._height=46; result[0].lines=lines; result[0].highlighting=highlights.join(", "); this._visibleDocuments[i] = result[0]; @@ -690,7 +691,7 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); - + result[0]._height=46; result[0].lines= lines; result[0].highlighting=highlights.join(", "); if(i(result[2]); + result[0]._height=46; result[0].lines= lines; result[0].highlighting=highlights.join(", "); Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); @@ -755,6 +757,7 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + result[0]._height=46; result[0].lines= lines; result[0].highlighting=highlights.join(", "); Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 0c4ddf038..69a2c16cf 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -516,7 +516,6 @@ export class SearchItem extends ViewBoxBaseComponent } else { - console.log(this.rootDoc.highlighting); return
-- cgit v1.2.3-70-g09d2 From 80383a3705fdf330a41b8c4d9cc43a49f9e19f22 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 16 Jun 2020 15:39:06 -0400 Subject: test --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/views/search/SearchBox.tsx | 64 ++++++++++++++++++++++++++++------ src/client/views/search/SearchItem.tsx | 3 +- 3 files changed, 56 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 98861a8e1..6a21a128a 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -49593 +918 diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index afc3e7c8b..dd9789a45 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -785,29 +785,48 @@ export class SearchBox extends ViewBoxBaseComponent { + handleWordQueryChange = async() => { this._basicWordStatus = !this._basicWordStatus; + if (this._basicWordStatus) { + let doc = await Cast(this.props.Document.keywords, Doc) + doc!.backgroundColor= "grey"; + + } + else { + let doc = await Cast(this.props.Document.keywords, Doc) + doc!.backgroundColor= "black"; + } } @action.bound - handleNodeChange = () => { + handleNodeChange = async () => { this._nodeStatus = !this._nodeStatus; + if (this._nodeStatus) { this.expandSection(`node${this.props.Document[Id]}`); + let doc = await Cast(this.props.Document.nodes, Doc) + doc!.backgroundColor= "grey"; + } else { this.collapseSection(`node${this.props.Document[Id]}`); + let doc = await Cast(this.props.Document.nodes, Doc) + doc!.backgroundColor= "black"; } } @action.bound - handleKeyChange = () => { + handleKeyChange = async () => { this._keyStatus = !this._keyStatus; if (this._keyStatus) { this.expandSection(`key${this.props.Document[Id]}`); + let doc = await Cast(this.props.Document.keys, Doc) + doc!.backgroundColor= "grey"; } else { this.collapseSection(`key${this.props.Document[Id]}`); + let doc = await Cast(this.props.Document.keys, Doc) + doc!.backgroundColor= "black"; } } @@ -895,13 +914,40 @@ export class SearchBox extends ViewBoxBaseComponent{ this._titleFieldStatus = !this._titleFieldStatus; + if (this._titleFieldStatus){ + let doc = await Cast(this.props.Document.title, Doc) + doc!.backgroundColor= "grey"; + } + else{ + let doc = await Cast(this.props.Document.title, Doc) + doc!.backgroundColor= "black"; + } + } @action.bound - updateAuthorStatus() { this._authorFieldStatus = !this._authorFieldStatus; } + updateAuthorStatus=async () => { this._authorFieldStatus = !this._authorFieldStatus; + if (this._authorFieldStatus){ + let doc = await Cast(this.props.Document.author, Doc) + doc!.backgroundColor= "grey"; + } + else{ + let doc = await Cast(this.props.Document.author, Doc) + doc!.backgroundColor= "black"; + } + } @action.bound - updateDeletedStatus() { this._deletedDocsStatus = !this._deletedDocsStatus; } + updateDeletedStatus=async() =>{ this._deletedDocsStatus = !this._deletedDocsStatus; + if (this._deletedDocsStatus){ + let doc = await Cast(this.props.Document.deleted, Doc) + doc!.backgroundColor= "grey"; + } + else{ + let doc = await Cast(this.props.Document.deleted, Doc) + doc!.backgroundColor= "black"; + } + } addButtonDoc = (doc: Doc) => Doc.AddDocToList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc); remButtonDoc = (doc: Doc) => Doc.RemoveDocFromList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc); @@ -1087,10 +1133,9 @@ export class SearchBox extends ViewBoxBaseComponent
-
0 ? {overflow:"visible"} : {overflow:"hidden"}}>
{this.defaultButtons} diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 69a2c16cf..425e53510 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -57,8 +57,6 @@ export class SelectorContextMenu extends React.Component { constructor(props: SearchItemProps) { super(props); this.fetchDocuments(); - - } async fetchDocuments() { @@ -152,6 +150,7 @@ export class SearchItem extends ViewBoxBaseComponent Date: Wed, 17 Jun 2020 16:25:30 -0400 Subject: web doc in search --- src/client/views/search/SearchBox.tsx | 22 +++++++++++++++++----- src/client/views/search/SearchItem.tsx | 25 +++++++++++++++++++++---- 2 files changed, 38 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index dd9789a45..8ca3c8e95 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -460,6 +460,20 @@ export class SearchBox extends ViewBoxBaseComponent + +
+ } if (this.rootDoc.isBucket === true){ this.props.Document._viewType=CollectionViewType.Stacking; this.props.Document._chromeStatus='disabled'; @@ -532,10 +549,10 @@ export class SearchItem extends ViewBoxBaseComponent{this.DocumentIcon()}
-
+ {/*
{(doc1 instanceof Doc && doc2 instanceof Doc) && this.rootDoc!.type === DocumentType.LINK ? : this.contextButton} -
+
*/} ; } -- cgit v1.2.3-70-g09d2 From e23cb36795dd490730f1ff5c06081ce777133433 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 18 Jun 2020 16:09:50 -0400 Subject: refactored bucket algorithm to run much much faster --- src/client/views/search/SearchBox.tsx | 161 ++++++++++++++++----------------- src/client/views/search/SearchItem.tsx | 13 +-- 2 files changed, 83 insertions(+), 91 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 8ca3c8e95..746f32237 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -268,15 +268,15 @@ export class SearchBox extends ViewBoxBaseComponent { const layoutresult = Cast(doc.type, "string"); + if (layoutresult && !blockedTypes.includes(layoutresult)){ if (layoutresult && this._icons.includes(layoutresult)) { finalDocs.push(doc); } + } }); return finalDocs; } @@ -408,6 +408,7 @@ export class SearchBox extends ViewBoxBaseComponent; getResults = async (query: string) => { + console.log("Get"); if (this.lockPromise) { await this.lockPromise; } @@ -517,12 +519,25 @@ export class SearchBox extends ViewBoxBaseComponent highlights[doc[Id]] = highlightList[index]); const filteredDocs = this.filterDocsByType(docs); + runInAction(() => { - filteredDocs.forEach(doc => { + filteredDocs.forEach((doc,i) => { const index = this._resultsSet.get(doc); const highlight = highlights[doc[Id]]; const line = lines.get(doc[Id]) || []; const hlights = highlight ? Object.keys(highlight).map(key => key.substring(0, key.length - 2)) : []; + if (this.findCommonElements(hlights)){ + } + else{ + const layoutresult = Cast(doc.type, "string"); + if (layoutresult){ + if(this.new_buckets[layoutresult]===undefined){ + this.new_buckets[layoutresult]=1; + } + else { + this.new_buckets[layoutresult]=this.new_buckets[layoutresult]+1; + } + } if (index === undefined) { this._resultsSet.set(doc, this._results.length); this._results.push([doc, hlights, line]); @@ -530,6 +545,7 @@ export class SearchBox extends ViewBoxBaseComponent3 && this.expandedBucket===false){ + this.makenewbuckets(); + } this.resultsScrolled(); - res(); }); return this.lockPromise; @@ -652,8 +670,6 @@ export class SearchBox extends ViewBoxBaseComponent(this._numTotalResults === -1 ? 0 : this._numTotalResults); } - - for (let i = 0; i < this._numTotalResults; i++) { //if the index is out of the window then put a placeholder in //should ones that have already been found get set to placeholders? @@ -666,44 +682,50 @@ export class SearchBox extends ViewBoxBaseComponent= this._results.length) { this.getResults(StrCast(this.layoutDoc._searchString)); if (i < this._results.length) result = this._results[i]; if (result) { - if (!this.blockedTypes.includes(StrCast(result[0].type))){ - - if(this.new_buckets[StrCast(result[0].type)]===undefined){ - this.new_buckets[StrCast(result[0].type)]=1; - } - else { - this.new_buckets[StrCast(result[0].type)]=this.new_buckets[StrCast(result[0].type)]+1; - } const highlights = Array.from([...Array.from(new Set(result[1]).values())]); let lines = new List(result[2]); result[0]._height=46; result[0].lines=lines; result[0].highlighting=highlights.join(", "); this._visibleDocuments[i] = result[0]; - - this._isSearch[i] = "search"; - } - } - + this._isSearch[i] = "search"; + if (this._numTotalResults>3 && this.expandedBucket===false){ + let doctype = StrCast(result[0].type); + console.log(doctype); + if (doctype=== this.firststring){ + if (this.bucketcount[1]<3){ + result[0].parent= this.buckets![1]; + Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]); + this.bucketcount[1]+=1; + } + } + else if (doctype=== this.secondstring){ + if (this.bucketcount[2]<3){ + result[0].parent= this.buckets![2]; + Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]); + this.bucketcount[2]+=1; + } + } + else if (this.bucketcount[0]<3){ + //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]); + //this.bucketcount[0]+=1; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); + } + } + else { + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); + } + } } else { result = this._results[i]; if (result) { - if (!this.blockedTypes.includes(StrCast(result[0].type))){ - if(this.new_buckets[StrCast(result[0].type)]===undefined){ - this.new_buckets[StrCast(result[0].type)]=1; - } - else { - this.new_buckets[StrCast(result[0].type)]=this.new_buckets[StrCast(result[0].type)]+1; - } const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - let lines = new List(result[2]); result[0]._height=46; result[0].lines= lines; @@ -711,45 +733,38 @@ export class SearchBox extends ViewBoxBaseComponent3 && this.expandedBucket===false){ + + if (StrCast(result[0].type)=== this.firststring){ + if (this.bucketcount[1]<3){ + result[0].parent= this.buckets![1]; + Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]); + this.bucketcount[1]+=1; + } + } + else if (StrCast(result[0].type)=== this.secondstring){ + if (this.bucketcount[2]<3){ + result[0].parent= this.buckets![2]; + Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]); + this.bucketcount[2]+=1; + } + } + else if (this.bucketcount[0]<3){ + //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]); + //this.bucketcount[0]+=1; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); + } } + else { + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); } } + } } } } } if (this._numTotalResults>3 && this.expandedBucket===false){ - this.makenewbuckets(); - for (let i = 0; i < this._numTotalResults; i++) { - let result = this._results[i]; - if (!this.blockedTypes.includes(StrCast(result[0].type))){ - if (this._isSearch[i] === "search" && (this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) { - if (StrCast(result[0].type)=== this.firststring && this.bucketcount[1]<3){ - result[0].parent= this.buckets![1]; - Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]); - this.bucketcount[1]+=1; - } - else if (StrCast(result[0].type)=== this.secondstring && this.bucketcount[2]<3){ - result[0].parent= this.buckets![2]; - Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]); - this.bucketcount[2]+=1; - } - else if (this.bucketcount[0]<3){ - //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]); - //this.bucketcount[0]+=1; - const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - let lines = new List(result[2]); - result[0]._height=46; - result[0].lines= lines; - result[0].highlighting=highlights.join(", "); - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); - } - - this._isSorted[i]="sorted"; - } - } - } - if (this.buckets![0]){ this.buckets![0]._height = this.bucketcount[0]*55 + 25; } @@ -759,24 +774,7 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); - result[0]._height=46; - result[0].lines= lines; - result[0].highlighting=highlights.join(", "); - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); - } - } - } - } - + } if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; this._visibleDocuments.length = this._results.length; @@ -784,10 +782,11 @@ export class SearchBox extends ViewBoxBaseComponent arr2.includes(item)) + } - blockedTypes:string[]= ["preselement","docholder","collection","search","searchitem", "script", "fonticonbox", "button", "label"]; - blockedFields: string[]= ["layout"]; - @computed get resFull() { return this._numTotalResults <= 8; } diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 8bbc3180c..356100a90 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -184,10 +184,6 @@ export class SearchItem extends ViewBoxBaseComponent this.rootDoc.searchIndex, - search => {console.log(NumCast(search));this.searchPos=NumCast(search) },{ fireImmediately: true } - ); this._reactionDisposer2 = reaction( () => this._useIcons, el=> { @@ -224,16 +220,13 @@ export class SearchItem extends ViewBoxBaseComponent this.rootDoc!.searchMatch = true, 0); this.rootDoc.searchIndex=NumCast(this.rootDoc.searchIndex); - - this.searchPos=NumCast(this.rootDoc!.searchIndex); this.length=NumCast(this.rootDoc!.length); } @@ -327,7 +318,6 @@ export class SearchItem extends ViewBoxBaseComponent this.rootDoc!.searchMatch2 = true, 0); this.rootDoc.searchIndex=NumCast(this.rootDoc.searchIndex); - this.searchPos=NumCast(this.rootDoc!.searchIndex); this.length=NumCast(this.rootDoc!.length); } @@ -428,6 +418,9 @@ export class SearchItem extends ViewBoxBaseComponent Date: Wed, 24 Jun 2020 19:18:28 -0400 Subject: refreshing searches and prelimianray looks at searaching within collections --- src/client/views/search/SearchBox.tsx | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 8449f514a..37d358b02 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -258,6 +258,8 @@ export class SearchBox extends ViewBoxBaseComponent { const layout: string = StrCast(element.props.Document.layout); //checks if selected view (element) is a collection. if it is, adds to list to search through @@ -387,6 +391,14 @@ export class SearchBox extends ViewBoxBaseComponent{ + console.log("Resubmitting search"); + this.submitSearch(); + }, 10000); + if (query !== "") { this._endIndex = 12; this._maxSearchIndex = 0; @@ -401,6 +413,7 @@ export class SearchBox extends ViewBoxBaseComponent { - this._basicWordStatus = !this._basicWordStatus; - if (this._basicWordStatus) { + this._collectionStatus = !this._collectionStatus; + if (this._collectionStatus) { let doc = await Cast(this.props.Document.keywords, Doc) doc!.backgroundColor= "grey"; @@ -1207,6 +1220,7 @@ export class SearchBox extends ViewBoxBaseComponent +
StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection"> -- cgit v1.2.3-70-g09d2 From 7a291cbffb9e609633759cfff8b459e1a32b4fc3 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 25 Jun 2020 17:23:43 -0400 Subject: bugfixing search, refreshing docs, ghost buckets, etc. --- src/client/documents/Documents.ts | 1 - src/client/util/CurrentUserUtils.ts | 6 ++-- .../views/nodes/formattedText/FormattedTextBox.tsx | 15 ++++++---- src/client/views/search/SearchBox.tsx | 35 ++++++++++++++-------- 4 files changed, 35 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index c32d187a0..ebdae1ce5 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -181,7 +181,6 @@ export interface DocumentOptions { flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse"; selectedIndex?: number; syntaxColor?: string; // can be applied to text for syntax highlighting all matches in the text - searchText?: string, //for searchbox searchQuery?: string, // for quersyBox filterQuery?: filterData, linearViewIsExpanded?: boolean; // is linear view expanded diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index a7cb29815..0e0942496 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -42,10 +42,10 @@ export class CurrentUserUtils { if (doc["template-button-query"] === undefined) { const queryTemplate = Docs.Create.MulticolumnDocument( [ - Docs.Create.SearchDocument({ _viewType: CollectionViewType.Stacking, title: "query", _height: 200 }), + Docs.Create.SearchDocument({ _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: "query", _height: 200 }), Docs.Create.FreeformDocument([], { title: "data", _height: 100, _LODdisable: true }) ], - { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true } + { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true } ); queryTemplate.isTemplateDoc = makeTemplate(queryTemplate); doc["template-button-query"] = CurrentUserUtils.ficon({ @@ -628,7 +628,7 @@ export class CurrentUserUtils { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", _fontSize: 10, letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({_viewType: CollectionViewType.Stacking, title: "sidebar search stack", })) as any as Doc, + sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Stacking, title: "sidebar search stack", })) as any as Doc, searchFileTypes: new List([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]), targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, lockedPosition: true, diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 6b522f6d1..ca7db2cd4 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -261,20 +261,23 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; res.map(r => r.map(h => flattened.push(h))); + + + const lastSel = Math.min(flattened.length - 1, this._searchIndex); + flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); + this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; + this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); + + console.log(this._searchIndex, length); if (this._searchIndex>1){ this._searchIndex+=-2; } else if (this._searchIndex===1){ this._searchIndex=length-1; } - else if (this._searchIndex===0){ + else if (this._searchIndex===0 && length!==1){ this._searchIndex=length-2; } - - const lastSel = Math.min(flattened.length - 1, this._searchIndex); - flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); - this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; - this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); let index = this._searchIndex; Doc.GetProto(this.dataDoc).searchIndex = index; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 37d358b02..d1e1818c2 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -315,6 +315,7 @@ export class SearchBox extends ViewBoxBaseComponent { const layout: string = StrCast(element.props.Document.layout); + console.log(layout); //checks if selected view (element) is a collection. if it is, adds to list to search through if (layout.indexOf("Collection") > -1) { //makes sure collections aren't added more than once @@ -391,13 +392,13 @@ export class SearchBox extends ViewBoxBaseComponent{ - console.log("Resubmitting search"); - this.submitSearch(); - }, 10000); + if (StrCast(this.props.Document.searchQuery)){ + if (this._timeout){clearTimeout(this._timeout); this._timeout=undefined}; + this._timeout= setTimeout(()=>{ + console.log("Resubmitting search"); + this.submitSearch(); + }, 60000); + } if (query !== "") { this._endIndex = 12; @@ -442,7 +443,7 @@ export class SearchBox extends ViewBoxBaseComponent { @@ -539,6 +549,7 @@ export class SearchBox extends ViewBoxBaseComponent key.substring(0, key.length - 2)) : []; + doc? console.log(Cast(doc.context, Doc)) : null; if (this.findCommonElements(hlights)){ } else{ @@ -619,7 +630,7 @@ export class SearchBox extends ViewBoxBaseComponent Date: Sun, 28 Jun 2020 19:09:12 -0400 Subject: some weird pdf css was causing .pdfViewer .page styles to get added when pdfs were not -interactive. This made the page jump on deselect. so changed pdfViewer csss labels to pdfViewerDash --- src/client/views/nodes/PDFBox.scss | 4 ++-- src/client/views/pdf/PDFViewer.scss | 20 ++++++++++---------- src/client/views/pdf/PDFViewer.tsx | 22 +++++++++++----------- 3 files changed, 23 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index f55c4f7d6..c6a83b662 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -199,7 +199,7 @@ } .pdfBox { - .pdfViewer-text { + .pdfViewerDash-text { .textLayer { span { user-select: none; @@ -210,7 +210,7 @@ .pdfBox-interactive { pointer-events: all; - .pdfViewer-text { + .pdfViewerDash-text { .textLayer { span { user-select: text; diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index affffc44e..cfe0b3d4b 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -1,5 +1,5 @@ -.pdfViewer, .pdfViewer-interactive { +.pdfViewerDash, .pdfViewerDash-interactive { width: 100%; height: 100%; position: absolute; @@ -31,26 +31,26 @@ position: relative; border: unset; } - .pdfViewer-text-selected { + .pdfViewerDash-text-selected { .textLayer{ pointer-events: all; user-select: text; } } - .pdfViewer-text { + .pdfViewerDash-text { transform-origin: top left; .textLayer { will-change: transform; } } - .pdfViewer-dragAnnotationBox { + .pdfViewerDash-dragAnnotationBox { position:absolute; background-color: transparent; opacity: 0.1; } - .pdfViewer-overlay, .pdfViewer-overlay-inking { + .pdfViewerDash-overlay, .pdfViewerDash-overlay-inking { transform-origin: left top; position: absolute; top: 0px; @@ -58,11 +58,11 @@ display: inline-block; width:100%; } - .pdfViewer-overlay { + .pdfViewerDash-overlay { pointer-events: none; } - .pdfViewer-annotationLayer { + .pdfViewerDash-annotationLayer { position: absolute; transform-origin: left top; top: 0; @@ -70,12 +70,12 @@ pointer-events: none; mix-blend-mode: multiply; // bcz: makes text fuzzy! - .pdfViewer-annotationBox { + .pdfViewerDash-annotationBox { position: absolute; background-color: rgba(245, 230, 95, 0.616); } } - .pdfViewer-waiting { + .pdfViewerDash-waiting { width: 70%; height: 70%; margin : 15%; @@ -86,7 +86,7 @@ } } -.pdfViewer-interactive { +.pdfViewerDash-interactive { pointer-events: all; } \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 9f40a3ad7..8185dd67f 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -357,7 +357,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent NumCast(a.y) - NumCast(b.y))[this.Index]); this.Document.searchIndex = this.Index; - this.Document.length=this.allAnnotations.length; + this.Document.length = this.allAnnotations.length; } @@ -426,7 +426,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { @@ -441,7 +441,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent 10 || this._marqueeHeight > 10) { - const marquees = this._mainCont.current!.getElementsByClassName("pdfViewer-dragAnnotationBox"); + const marquees = this._mainCont.current!.getElementsByClassName("pdfViewerDash-dragAnnotationBox"); if (marquees && marquees.length) { // copy the marquee and convert it to a permanent annotation. const style = (marquees[0] as HTMLDivElement).style; const copy = document.createElement("div"); @@ -558,7 +558,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent + return
{this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => ) } @@ -718,13 +718,13 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; } @computed get pdfViewerDiv() { - return
; + return
; } @computed get contentScaling() { return this.props.ContentScaling(); } @computed get standinViews() { return <> {this._showCover ? this.getCoverImage() : (null)} - {this._showWaiting ? : (null)} + {this._showWaiting ? : (null)} ; } marqueeWidth = () => this._marqueeWidth; @@ -736,7 +736,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._zoomed; render() { TraceMobx(); - return
{ render() { - return !this.props.isMarqueeing() ? (null) :
Date: Thu, 2 Jul 2020 11:18:48 +0800 Subject: updated css expand inline --- src/client/views/MainView.tsx | 4 +- .../views/presentationview/PresElementBox.scss | 65 ++++++++++++++++------ .../views/presentationview/PresElementBox.tsx | 18 ++++-- 3 files changed, 63 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 200486279..a0ce052f7 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -5,7 +5,7 @@ import { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -142,7 +142,7 @@ export class MainView extends React.Component { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index ccd2e8947..e7aacb363 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -13,9 +13,10 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; + transition: all .1s; padding: 0px; padding-bottom: 3px; + .documentView-node { position: absolute; z-index: 1; @@ -43,21 +44,12 @@ box-shadow: black 2px 2px 5px; } -.presElementBox-closeIcon { - border-radius: 20px; - transform:scale(0.7); - position: absolute; - right: 0; - top: 0; - padding: 8px; -} - - .presElementBox-buttons { display: flow-root; position: relative; width: 100%; height: auto; + .presElementBox-interaction { color: gray; float: left; @@ -65,6 +57,7 @@ width: 20px; height: 20px; } + .presElementBox-interaction-selected { color: white; float: left; @@ -90,15 +83,53 @@ display: flex; width: auto; justify-content: center; - margin:auto; + margin: auto; } .presElementBox-embeddedMask { - width:100%; - height:100%; + width: 100%; + height: 100%; position: absolute; - left:0; - top:0; + left: 0; + top: 0; background: transparent; - z-index:2; + z-index: 2; +} + +.presElementBox-closeIcon { + position: absolute; + border-radius: 100%; + z-index: 300; + right: 3px; + top: 3px; + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; +} + +.presElementBox-expand { + position: absolute; + border-radius: 100%; + z-index: 300; + right: 3px; + bottom: 3px; + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; +} + +.presElementBox-expand-selected { + position: absolute; + border-radius: 100%; + right: 3px; + bottom: 3px; + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; } \ No newline at end of file diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 6b59a0563..bfbb8a18d 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -217,10 +217,19 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.indexInPres + 1}. ${this.targetDoc?.title}`} - + +
}
@@ -231,7 +240,6 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()} /> -
{this.renderEmbeddedInline}
-- cgit v1.2.3-70-g09d2 From b5d1df2ef286a615f9bad1077c33da91ac0416d9 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 2 Jul 2020 18:45:45 -0400 Subject: filtering in title text boxes of schema, also big css fixes --- .../views/collections/CollectionSchemaHeaders.tsx | 34 +++++++++++++++------- .../views/collections/CollectionSchemaView.tsx | 8 ++++- src/client/views/collections/SchemaTable.tsx | 13 +++++---- 3 files changed, 38 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index efff4db98..8ab52744a 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -288,7 +288,7 @@ export interface KeysDropdownProps { existingKeys: string[]; canAddNew: boolean; addNew: boolean; - onSelect: (oldKey: string, newKey: string, addnew: boolean) => void; + onSelect: (oldKey: string, newKey: string, addnew: boolean, filter: string) => void; setIsEditing: (isEditing: boolean) => void; width?: string; } @@ -306,7 +306,12 @@ export class KeysDropdown extends React.Component { @action onSelect = (key: string): void => { - this.props.onSelect(this._key, key, this.props.addNew); + console.log("YEE"); + let newkey = key.slice(0, this._key.length); + let filter = key.slice(this._key.length - key.length); + console.log(newkey); + console.log(filter); + this.props.onSelect(this._key, key, this.props.addNew, filter); this.setKey(key); this._isOpen = false; this.props.setIsEditing(false); @@ -314,6 +319,8 @@ export class KeysDropdown extends React.Component { @undoBatch onKeyDown = (e: React.KeyboardEvent): void => { + //if (this._key !==) + if (e.key === "Enter") { const keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1); if (keyOptions.length) { @@ -371,13 +378,15 @@ export class KeysDropdown extends React.Component { }); // if search term does not already exist as a group type, give option to create new group type - if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { - options.push(
{ this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> - Create "{this._searchTerm}" key
); + if (this._key !== this._searchTerm.slice(0, this._key.length)) { + if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { + options.push(
{ this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> + Create "{this._searchTerm}" key
); + } } return options; @@ -386,7 +395,12 @@ export class KeysDropdown extends React.Component { render() { return (
- + {this._key} +
+ : undefined} + this.onChange(e.target.value)} onClick={(e) => { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 3c42a2f1c..e8c1faff5 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -310,7 +310,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @undoBatch @action - changeColumns = (oldKey: string, newKey: string, addNew: boolean) => { + changeColumns = (oldKey: string, newKey: string, addNew: boolean, filter?: string) => { + console.log("COL"); const columns = this.columns; if (columns === undefined) { this.columns = new List([new SchemaHeaderField(newKey, "f1efeb")]); @@ -325,6 +326,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { column.setHeading(newKey); columns[index] = column; this.columns = columns; + if (filter) { + console.log(newKey); + console.log(filter); + Doc.setDocFilter(this.props.Document, newKey, filter, "match"); + } } } } diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 9e3b4d961..695965cb4 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -220,16 +220,16 @@ export class SchemaTable extends React.Component { display: "flex" }}> -
- {keysDropdown} -
+ {/*
*/} + {keysDropdown} + {/*
*/}
this.changeSorting(col)} - style={{ paddingRight: "6px", display: "inline" }}> + style={{ paddingRight: "6px", display: "inline", zIndex: 1, background: "inherit" }}>
this.props.openHeader(col, e.clientX, e.clientY)} - style={{ float: "right", paddingRight: "6px" }}> + style={{ float: "right", paddingRight: "6px", zIndex: 1, background: "inherit" }}>
; @@ -466,6 +466,7 @@ export class SchemaTable extends React.Component { sorted={this.sorted} expanded={expanded} resized={this.resized} + NoDataComponent={() => null} onResizedChange={this.props.onResizedChange} SubComponent={!hasCollectionChild ? undefined : row => (row.original.type !== "collection") ? (null) :
} -- cgit v1.2.3-70-g09d2 From 981f1f164d816e60312d50912acb8de89fbcd912 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 3 Jul 2020 13:10:44 +0800 Subject: highlight active presentation + UI Changes --- src/client/util/DocumentManager.ts | 2 +- src/client/views/MainView.tsx | 4 +- src/client/views/nodes/PresBox.scss | 91 +++++++++++++++- src/client/views/nodes/PresBox.tsx | 114 ++++++++++++++++++++- .../views/presentationview/PresElementBox.scss | 39 ++++--- .../views/presentationview/PresElementBox.tsx | 23 +++-- 6 files changed, 242 insertions(+), 31 deletions(-) (limited to 'src') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index fb5d1717e..55ee5b4cf 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -170,7 +170,7 @@ export class DocumentManager { const targetDocContextView = getFirstDocView(targetDocContext); targetDocContext._scrollY = 0; // this will force PDFs to activate and load their annotations / allow scrolling if (targetDocContextView) { // we found a context view and aren't forced to create a new one ... focus on the context first.. - targetDocContext._viewTransition = "transform 500ms"; + targetDocContext._viewTransition = "transform 10000ms"; targetDocContextView.props.focus(targetDocContextView.props.Document, willZoom); // now find the target document within the context diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index a0ce052f7..d96bcfba9 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -5,7 +5,7 @@ import { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp, faSearchPlus } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -142,7 +142,7 @@ export class MainView extends React.Component { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp, faSearchPlus); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index d48000e16..9b040e6fe 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -1,5 +1,6 @@ .presBox-cont { position: absolute; + display: block; pointer-events: inherit; z-index: 2; box-shadow: #AAAAAA .2vw .2vw .4vw; @@ -12,11 +13,82 @@ transition: 0.7s opacity ease; .presBox-listCont { - position: absolute; + position: relative; height: calc(100% - 25px); width: 100%; + margin-top: 10px; + } + + .presBox-highlight { + position: absolute; + top: 0; + height: 0; + width: 100%; + margin-top: 10px; + background-color: #ffe4b3; } + + .presBox-toolbar { + position: relative; + display: inline-flex; + align-items: center; + height: 30px; + width: 100%; + color: white; + background-color: #323232; + + .toolbar-button { + margin-left: 10px; + margin-right: 10px; + letter-spacing: 0; + display: flex; + align-items: center; + + .toolbar-dropdown { + margin-left: 5px; + } + + .toolbar-transitionTools { + display: none; + } + + .toolbar-transitionTools.active { + position: absolute; + display: block; + top: 30px; + transform: translate(-10px, 0px); + border-top: solid 3px grey; + background-color: #323232; + width: 105px; + height: max-content; + z-index: 100; + + .toolbar-transitionButtons { + display: block; + + .toolbar-transition { + display: flex; + font-size: 10; + width: 100; + background-color: rgba(0, 0, 0, 0); + min-width: max-content; + + .toolbar-icon { + margin-right: 5px; + } + } + } + } + } + + .toolbar-divider { + border-left: 1px solid white; + height: 80%; + } + } + .presBox-buttons { + position: relative; width: 100%; background: gray; padding-top: 5px; @@ -24,6 +96,7 @@ display: grid; grid-column-end: 4; grid-column-start: 1; + .presBox-viewPicker { height: 25; position: relative; @@ -31,10 +104,12 @@ grid-column: 1/2; min-width: 15px; } + select { background: #323232; color: white; } + .presBox-button { margin-right: 2.5%; margin-left: 2.5%; @@ -44,10 +119,12 @@ align-items: center; background: #323232; color: white; + svg { margin: auto; } } + .collectionViewBaseChrome-viewPicker { min-width: 50; width: 5%; @@ -56,17 +133,21 @@ display: inline-block; } } - .presBox-backward, .presBox-forward { + + .presBox-backward, + .presBox-forward { width: 25px; border-radius: 5px; - top:50%; + top: 50%; position: absolute; display: inline-block; } + .presBox-backward { - left:5; + left: 5; } + .presBox-forward { - right:5; + right: 5; } } \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 8818d375e..30b1e0058 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -20,6 +20,7 @@ import { PrefetchProxy } from "../../../fields/Proxy"; import { ScriptField } from "../../../fields/ScriptField"; import { Scripting } from "../../util/Scripting"; import { InkingStroke } from "../InkingStroke"; +import { HighlightSpanKind } from "typescript"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -35,7 +36,7 @@ export class PresBox extends ViewBoxBaseComponent super(props); if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations. Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ - title: "pres element template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" + title: "pres element template", backgroundColor: "transparent", _xMargin: 0, _height: 20, isTemplateDoc: true, isTemplateForField: "data" })); // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent @@ -209,7 +210,23 @@ export class PresBox extends ViewBoxBaseComponent this.layoutDoc.presStatus = true; this.startPresentation(index); } - + const heights: number[] = []; + this.childDocs.forEach(doc => { + if (doc.presExpandInlineButton) heights.push(155); + else heights.push(58); + }); + let sum: number = 65; + for (let i = 0; i < this.itemIndex; i++) { + sum += heights[i]; + } + const highlight = document.getElementById("presBox-hightlight"); + if (this.itemIndex === 0 && highlight) highlight.style.top = "65"; + else if (highlight) highlight.style.top = sum.toString(); + if (this.childDocs[this.itemIndex].presExpandInlineButton && highlight) highlight.style.height = "156"; + else if (highlight) highlight.style.height = "58"; + console.log(highlight?.style.top); + console.log(highlight?.className); + console.log(sum); this.navigateToElement(this.childDocs[index], fromDoc); this.hideIfNotPresented(index); this.showAfterPresented(index); @@ -296,9 +313,76 @@ export class PresBox extends ViewBoxBaseComponent active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) + + @observable private transitionTools: boolean = false; + // For toggling transition toolbar + @action + toggleTransitionTools = () => this.transitionTools = !this.transitionTools + + @undoBatch + @action + toolbarTest = () => { + const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + console.log("title: " + presTargetDoc.title); + console.log("index: " + this.itemIndex); + } + + @observable private activeItem = this.itemIndex ? this.childDocs[this.itemIndex] : null; + + + /** + * The function that is called on click to turn zoom option of docs on/off. + */ + @action + onZoomDocumentClick = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + activeItem.presZoomButton = !activeItem.presZoomButton; + if (activeItem.presZoomButton) { + activeItem.presNavButton = false; + } + } + + /** + * The function that is called on click to turn navigation option of docs on/off. + */ + @action + onNavigateDocumentClick = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + activeItem.presNavButton = !activeItem.presNavButton; + if (activeItem.presNavButton) { + activeItem.presZoomButton = false; + } + } + + /** + * The function that is called on click to turn fading document after presented option on/off. + * It also makes sure that the option swithches from hide-after to this one, since both + * can't coexist. + */ + @action + onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + activeItem.presFadeButton = !activeItem.presFadeButton; + if (!activeItem.presFadeButton) { + if (targetDoc) { + targetDoc.opacity = 1; + } + } else { + activeItem.presHideAfterButton = false; + if (this.rootDoc.presStatus && targetDoc) { + targetDoc.opacity = 0.5; + } + } + } + + render() { // console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus); - // const presOrderedDocs = DocListCast(this.rootDoc.presOrderedDocs); + // const presOrderedDocs = DocListCast(activeItem.presOrderedDocs); // if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { // this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); // } @@ -325,6 +409,30 @@ export class PresBox extends ViewBoxBaseComponent
+
+
+
+
+
+
+
+
+
+ Transitions +
e.stopPropagation()}> +
+ + + + {/* */} + {/* + + */} +
+
+
+
+
{mode !== CollectionViewType.Invalid ? [xCord, yCord]; + @action + presExpandDocumentClick = () => { + const highlight = document.getElementById("presBox-hightlight"); + this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton; + if (highlight && this.rootDoc.presExpandInlineButton) highlight.style.height = "156"; + else if (highlight && !this.rootDoc.presExpandInlineButton) highlight.style.height = "58"; + } + embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); embedWidth = () => this.props.PanelWidth() - 20; /** - * The function that is responsible for rendering the a preview or not for this + * The function that is responsible for rendering a preview or not for this * presentation element. */ @computed get renderEmbeddedInline() { @@ -214,9 +222,12 @@ export class PresElementBox extends ViewBoxBaseComponent { this.props.focus(this.rootDoc); e.stopPropagation(); }}> {treecontainer ? (null) : <> - - {`${this.indexInPres + 1}. ${this.targetDoc?.title}`} - +
+ {`${this.indexInPres + 1}.`} +
+
+ {`${this.targetDoc?.title}`} +
-
@@ -238,7 +249,7 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()} /> - + {/* */}
{this.renderEmbeddedInline} -- cgit v1.2.3-70-g09d2 From 552e340758ae187459786d742c5e9d2487446f1b Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Fri, 3 Jul 2020 13:28:35 -0400 Subject: more filtring --- solr-8.3.1/bin/solr-8983.pid | 2 +- .../views/collections/CollectionSchemaHeaders.tsx | 24 ++++++++++++---------- .../views/collections/CollectionSchemaView.tsx | 3 +++ 3 files changed, 17 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 779eb1af5..3ae9c37a1 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -17656 +15143 diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 8ab52744a..213a72a85 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -288,7 +288,7 @@ export interface KeysDropdownProps { existingKeys: string[]; canAddNew: boolean; addNew: boolean; - onSelect: (oldKey: string, newKey: string, addnew: boolean, filter: string) => void; + onSelect: (oldKey: string, newKey: string, addnew: boolean, filter?: string) => void; setIsEditing: (isEditing: boolean) => void; width?: string; } @@ -306,15 +306,17 @@ export class KeysDropdown extends React.Component { @action onSelect = (key: string): void => { - console.log("YEE"); - let newkey = key.slice(0, this._key.length); - let filter = key.slice(this._key.length - key.length); - console.log(newkey); - console.log(filter); - this.props.onSelect(this._key, key, this.props.addNew, filter); - this.setKey(key); - this._isOpen = false; - this.props.setIsEditing(false); + if (key.slice(0, this._key.length) === this._key && this._key !== key) { + let filter = key.slice(this._key.length - key.length); + this.props.onSelect(this._key, this._key, this.props.addNew, filter); + console.log("YEE"); + } + else { + this.props.onSelect(this._key, key, this.props.addNew); + this.setKey(key); + this._isOpen = false; + this.props.setIsEditing(false); + } } @undoBatch @@ -394,7 +396,7 @@ export class KeysDropdown extends React.Component { render() { return ( -
+
{this._key === this._searchTerm.slice(0, this._key.length) ?
{this._key} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index e8c1faff5..9722f8f26 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -331,6 +331,9 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { console.log(filter); Doc.setDocFilter(this.props.Document, newKey, filter, "match"); } + else { + this.props.Document._docFilters = undefined; + } } } } -- cgit v1.2.3-70-g09d2 From 2c04b0ae3689d931675151acbec24c88ea00daa1 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Sat, 4 Jul 2020 02:01:32 +0800 Subject: transition speed + viewLinks --- src/client/documents/Documents.ts | 1 + .../views/collections/CollectionStackingView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 3 +- src/client/views/nodes/PresBox.tsx | 36 ++++++++++++++++++++-- 4 files changed, 38 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 9feee0d47..b6c453847 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -128,6 +128,7 @@ export interface DocumentOptions { currentFrame?: number; // the current frame of a frame-based collection (e.g., progressive slide) lastFrame?: number; // the last frame of a frame-based collection (e.g., progressive slide) activeFrame?: number; // the active frame of a document in a frame base collection + presTransition?: number; //the time taken for the transition TO a document borderRounding?: string; boxShadow?: string; dontRegisterChildViews?: boolean; diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 7bdf5e7df..8bd32b81f 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -184,7 +184,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) if (found) { const top = found.getBoundingClientRect().top; const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top); - smoothScroll(500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop); + smoothScroll(doc.presTransition ? Number(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop); } afterFocus && setTimeout(() => { if (afterFocus?.()) { } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 546a4307c..e2d4d4459 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -910,7 +910,8 @@ export class CollectionFreeFormView extends CollectionSubView; const PresBoxDocument = makeInterface(documentSchema); @@ -327,6 +328,19 @@ export class PresBox extends ViewBoxBaseComponent console.log("index: " + this.itemIndex); } + @undoBatch + @action + viewLinks = () => { + const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + console.log(SearchUtil.GetContextsOfDocument(presTargetDoc)); + console.log(DocListCast(presTargetDoc.context)); + console.log(DocumentManager.Instance.getAllDocumentViews(presTargetDoc)); + + // if (!DocumentManager.Instance.getDocumentView(curPres)) { + // CollectionDockingView.AddRightSplit(curPres); + // } + } + @observable private activeItem = this.itemIndex ? this.childDocs[this.itemIndex] : null; @@ -379,6 +393,23 @@ export class PresBox extends ViewBoxBaseComponent } } + // @computed + // transitionTimer = (doc: Doc) => { + // const slider: HTMLInputElement = document.getElementById("toolbar-slider"); + // // let output = document.getElementById("demo"); + // // if (output && slider) output.innerHTML = slider.value; // Display the default slider value + // const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + // const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + // targetDoc.presTransition = slider ? (Number(slider.value) * 1000) : 0.5; + // } + + setTransitionTime = (number: String) => { + const timeInMS = Number(number) * 1000; + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (targetDoc) targetDoc.presTransition = timeInMS; + } + render() { // console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus); @@ -413,7 +444,7 @@ export class PresBox extends ViewBoxBaseComponent
-
+
@@ -424,6 +455,7 @@ export class PresBox extends ViewBoxBaseComponent + ) => this.setTransitionTime(e.target.value)} /> {/* */} {/* -- cgit v1.2.3-70-g09d2 From 195dde9364bf7b294d74b95e70c8c9a9dd19f891 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Fri, 3 Jul 2020 16:06:07 -0400 Subject: search works with schema, fixed sorting...stil a lot of bugs --- src/client/util/CurrentUserUtils.ts | 4 +- .../views/collections/CollectionSchemaView.scss | 2 +- .../views/collections/CollectionSchemaView.tsx | 4 + src/client/views/collections/SchemaTable.tsx | 14 +- src/client/views/search/SearchBox.tsx | 172 +++------------------ 5 files changed, 35 insertions(+), 161 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 276ad4c90..c152a4a64 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -42,7 +42,7 @@ export class CurrentUserUtils { if (doc["template-button-query"] === undefined) { const queryTemplate = Docs.Create.MulticolumnDocument( [ - Docs.Create.SearchDocument({ _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: "query", _height: 200 }), + Docs.Create.SearchDocument({ _viewType: CollectionViewType.Schema, ignoreClick: true, forceActive: true, lockedPosition: true, title: "query", _height: 200 }), Docs.Create.FreeformDocument([], { title: "data", _height: 100, _LODdisable: true }) ], { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true } @@ -631,7 +631,7 @@ export class CurrentUserUtils { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", _fontSize: 10, letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Stacking, title: "sidebar search stack", })) as any as Doc, + sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc, searchFileTypes: new List([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]), targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, lockedPosition: true, diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 5226a60f1..688099b6c 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -6,7 +6,7 @@ border-style: solid; border-radius: $border-radius; box-sizing: border-box; - position: absolute; + position: relative; top: 0; width: 100%; height: 100%; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9722f8f26..688313951 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -170,6 +170,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @action setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => { const columns = this.columns; + columns.forEach(col => { + col.setDesc(undefined); + }) + const index = columns.findIndex(c => c.heading === columnField.heading); const column = columns[index]; column.setDesc(descending); diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 695965cb4..5a73e7501 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -128,7 +128,7 @@ export class SchemaTable extends React.Component { } @computed get sorted(): SortingRule[] { return this.props.columns.reduce((sorted, shf) => { - shf.desc && sorted.push({ id: shf.heading, desc: shf.desc }); + shf.desc !== undefined && sorted.push({ id: shf.heading, desc: shf.desc }); return sorted; }, [] as SortingRule[]); } @@ -209,7 +209,7 @@ export class SchemaTable extends React.Component { }}> {col.heading}
; - const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up"; + const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up"; const header =
{ className="collectionSchemaView-menuOptions-wrapper" style={{ background: col.color, padding: "2px", - display: "flex" + display: "flex", cursor: "default" }}> {/*
{ {keysDropdown} {/*
*/}
this.changeSorting(col)} - style={{ paddingRight: "6px", display: "inline", zIndex: 1, background: "inherit" }}> - + style={{ width: 21, padding: 1, display: "inline", zIndex: 1, background: "inherit" }}> +
-
this.props.openHeader(col, e.clientX, e.clientY)} + {/*
this.props.openHeader(col, e.clientX, e.clientY)} style={{ float: "right", paddingRight: "6px", zIndex: 1, background: "inherit" }}> -
+
*/}
; return { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 5960a0502..d51d1bf0c 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -132,21 +132,21 @@ export class SearchBox extends ViewBoxBaseComponent { @@ -422,86 +422,6 @@ export class SearchBox extends ViewBoxBaseComponent([]); - for (var key in this.new_buckets) { - if (this.new_buckets[key] > highcount) { - secondcount === highcount; - this.secondstring = this.firststring; - highcount = this.new_buckets[key]; - this.firststring = key; - } - else if (this.new_buckets[key] > secondcount) { - secondcount = this.new_buckets[key]; - this.secondstring = key; - } - } - - let bucket = Docs.Create.StackingDocument([], { _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: `default bucket` }); - bucket._viewType === CollectionViewType.Stacking; - bucket._height = 185; - bucket.bucketfield = "results"; - bucket.isBucket = true; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, bucket); - this.buckets!.push(bucket); - this.bucketcount[0] = 0; - - if (this.firststring !== "") { - let firstbucket = Docs.Create.StackingDocument([], { _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: this.firststring }); - firstbucket._height = 185; - - firstbucket._viewType === CollectionViewType.Stacking; - firstbucket.bucketfield = this.firststring; - firstbucket.isBucket = true; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, firstbucket); - this.buckets!.push(firstbucket); - this.bucketcount[1] = 0; - - } - - if (this.secondstring !== "") { - let secondbucket = Docs.Create.StackingDocument([], { _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: this.secondstring }); - secondbucket._height = 185; - secondbucket._viewType === CollectionViewType.Stacking; - secondbucket.bucketfield = this.secondstring; - secondbucket.isBucket = true; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, secondbucket); - this.buckets!.push(secondbucket); - this.bucketcount[2] = 0; - } - - let webbucket = Docs.Create.StackingDocument([], { _viewType: CollectionViewType.Stacking, childDropAction: "alias", ignoreClick: true, lockedPosition: true, title: this.secondstring }); - webbucket._height = 185; - webbucket._viewType === CollectionViewType.Stacking; - webbucket.bucketfield = "webs"; - webbucket.isBucket = true; - let old = Cast(this.props.Document.webbucket, Doc) as Doc; - let old2 = Cast(this.props.Document.bing, Doc) as Doc; - if (old) { - console.log("Cleanup"); - Doc.RemoveDocFromList(old, this.props.fieldKey, old2); - } - const textDoc = Docs.Create.WebDocument(`https://bing.com/search?q=${this.layoutDoc._searchString}`, { - _width: 200, _nativeHeight: 962, _nativeWidth: 800, isAnnotating: false, - title: "bing", UseCors: true - }); - this.props.Document.bing = textDoc; - this.props.Document.webbucket = webbucket; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, webbucket); - Doc.AddDocToList(webbucket, this.props.fieldKey, textDoc); - - - } - - @observable buckets: Doc[] | undefined; getAllResults = async (query: string) => { @@ -521,7 +441,6 @@ export class SearchBox extends ViewBoxBaseComponent; getResults = async (query: string) => { @@ -581,9 +500,7 @@ export class SearchBox extends ViewBoxBaseComponent 3 && this.expandedBucket === false) { - this.makenewbuckets(); - } + this.resultsScrolled(); res(); }); @@ -632,7 +549,7 @@ export class SearchBox extends ViewBoxBaseComponent 3 && this.expandedBucket === false) { - - if (StrCast(result[0].type) === this.firststring) { - if (this.bucketcount[1] < 3) { - result[0].parent = this.buckets![1]; - Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]); - this.bucketcount[1] += 1; - } - } - else if (StrCast(result[0].type) === this.secondstring) { - if (this.bucketcount[2] < 3) { - result[0].parent = this.buckets![2]; - Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]); - this.bucketcount[2] += 1; - } - } - else if (this.bucketcount[0] < 3) { - //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]); - //this.bucketcount[0]+=1; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); - } - } - else { - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); - } + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); + } } } } } } - if (this._numTotalResults > 3 && this.expandedBucket === false) { - if (this.buckets![0]) { - this.buckets![0]._height = this.bucketcount[0] * 55 + 25; - } - if (this.buckets![1]) { - this.buckets![1]._height = this.bucketcount[1] * 55 + 25; - } - if (this.buckets![2]) { - this.buckets![2]._height = this.bucketcount[2] * 55 + 25; - } - } if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; this._visibleDocuments.length = this._results.length; @@ -1214,12 +1097,11 @@ export class SearchBox extends ViewBoxBaseComponent this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate : undefined; getTransform = () => { return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight } panelHeight = () => { - return this.props.PanelHeight() - 50; + return this.props.PanelHeight(); } selectElement = (doc: Doc) => { //this.gotoDocument(this.childDocs.indexOf(doc), NumCasst(this.layoutDoc._itemIndex)); @@ -1230,17 +1112,9 @@ export class SearchBox extends ViewBoxBaseComponent -
StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection"> @@ -1263,11 +1137,7 @@ export class SearchBox extends ViewBoxBaseComponent 400} - childLayoutTemplate={this.childLayoutTemplate} - addDocument={undefined} removeDocument={returnFalse} focus={this.selectElement} ScreenToLocalTransform={Transform.Identity} /> @@ -1284,7 +1154,7 @@ export class SearchBox extends ViewBoxBaseComponent Date: Sat, 4 Jul 2020 21:31:16 -0700 Subject: modified playOnSelect and created repeat button --- src/client/views/nodes/AudioBox.scss | 14 ++++++++++++++ src/client/views/nodes/AudioBox.tsx | 31 ++++++++++++++++++++++++------- 2 files changed, 38 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index c959b79f5..2655f2377 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -45,6 +45,15 @@ width: 100%; height: 100%; position: relative; + + .recording { + width: 100%; + height: 100%; + position: relative; + display: flex; + padding-left: 2px; + background: lightgrey; + } } .audiobox-controls { @@ -53,6 +62,7 @@ position: relative; display: flex; padding-left: 2px; + background: lightgrey; .audiobox-player { margin-top: auto; @@ -72,6 +82,10 @@ padding: 2px; } + .audiobox-playhead:hover { + background-color: darkgrey; + } + .audiobox-dictation { align-items: center; display: inherit; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index d5288fff6..78d714ca9 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -53,6 +53,7 @@ export class AudioBox extends ViewBoxBaseComponent { runInAction(() => AudioBox._scrubTime = 0); runInAction(() => AudioBox._scrubTime = timeInMillisFrom1970); }; @@ -106,8 +107,12 @@ export class AudioBox extends ViewBoxBaseComponent { - this._ele!.pause(); - this.audioState = "paused"; + if (this._repeat) { + this.playFrom(0); + } else { + this._ele!.pause(); + this.audioState = "paused"; + } }); playFromTime = (absoluteTime: number) => { @@ -222,6 +227,12 @@ export class AudioBox extends ViewBoxBaseComponent; } + @action + onRepeat = (e: React.MouseEvent) => { + this._repeat = !this._repeat; + e.stopPropagation(); + } + render() { const interactive = this.active() ? "-interactive" : ""; return
@@ -231,13 +242,19 @@ export class AudioBox extends ViewBoxBaseComponent
: -
-
-
-
+
+
+
+
+
e.stopPropagation()} onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { -- cgit v1.2.3-70-g09d2 From 52a4bf82c7207d27a267f9fded63d2d212007fbe Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sun, 5 Jul 2020 15:53:16 -0700 Subject: added things --- src/client/views/nodes/AudioBox.tsx | 37 +++++++++++-------------------------- 1 file changed, 11 insertions(+), 26 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 78d714ca9..2b24268fe 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -8,7 +8,7 @@ import { ViewBoxBaseComponent } from "../DocComponent"; import { makeInterface, createSchema } from "../../../fields/Schema"; import { documentSchema } from "../../../fields/documentSchemas"; import { Utils, returnTrue, emptyFunction, returnOne, returnTransparent, returnFalse, returnZero } from "../../../Utils"; -import { runInAction, observable, reaction, IReactionDisposer, computed, action } from "mobx"; +import { runInAction, observable, reaction, IReactionDisposer, computed, action, trace } from "mobx"; import { DateField } from "../../../fields/DateField"; import { SelectionManager } from "../../util/SelectionManager"; import { Doc, DocListCast } from "../../../fields/Doc"; @@ -53,7 +53,6 @@ export class AudioBox extends ViewBoxBaseComponent { runInAction(() => AudioBox._scrubTime = 0); runInAction(() => AudioBox._scrubTime = timeInMillisFrom1970); }; @@ -81,7 +80,7 @@ export class AudioBox extends ViewBoxBaseComponent SelectionManager.SelectedDocuments(), selected => { const sel = selected.length ? selected[0].props.Document : undefined; - this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); + //this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); }); this._scrubbingDisposer = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); @@ -107,12 +106,8 @@ export class AudioBox extends ViewBoxBaseComponent { - if (this._repeat) { - this.playFrom(0); - } else { - this._ele!.pause(); - this.audioState = "paused"; - } + this._ele!.pause(); + this.audioState = "paused"; }); playFromTime = (absoluteTime: number) => { @@ -125,6 +120,7 @@ export class AudioBox extends ViewBoxBaseComponent this.playFrom(0), -seekTimeInSeconds * 1000); } else { this.pause(); + console.log("wtf"); } } else if (seekTimeInSeconds <= this._ele.duration) { this._ele.currentTime = seekTimeInSeconds; @@ -187,6 +183,7 @@ export class AudioBox extends ViewBoxBaseComponent { + console.log("click"); this.playFrom(this._ele!.paused ? this._ele!.currentTime : -1); e.stopPropagation(); } @@ -227,12 +224,6 @@ export class AudioBox extends ViewBoxBaseComponent; } - @action - onRepeat = (e: React.MouseEvent) => { - this._repeat = !this._repeat; - e.stopPropagation(); - } - render() { const interactive = this.active() ? "-interactive" : ""; return
@@ -242,19 +233,13 @@ export class AudioBox extends ViewBoxBaseComponent
: -
-
-
-
-
+
+
+
+
e.stopPropagation()} onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { -- cgit v1.2.3-70-g09d2 From a79e9053bb167ea10561619d31b65a582b457d92 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sun, 5 Jul 2020 19:44:55 -0700 Subject: Revert "added things" This reverts commit 52a4bf82c7207d27a267f9fded63d2d212007fbe. --- src/client/views/nodes/AudioBox.tsx | 37 ++++++++++++++++++++++++++----------- 1 file changed, 26 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 2b24268fe..78d714ca9 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -8,7 +8,7 @@ import { ViewBoxBaseComponent } from "../DocComponent"; import { makeInterface, createSchema } from "../../../fields/Schema"; import { documentSchema } from "../../../fields/documentSchemas"; import { Utils, returnTrue, emptyFunction, returnOne, returnTransparent, returnFalse, returnZero } from "../../../Utils"; -import { runInAction, observable, reaction, IReactionDisposer, computed, action, trace } from "mobx"; +import { runInAction, observable, reaction, IReactionDisposer, computed, action } from "mobx"; import { DateField } from "../../../fields/DateField"; import { SelectionManager } from "../../util/SelectionManager"; import { Doc, DocListCast } from "../../../fields/Doc"; @@ -53,6 +53,7 @@ export class AudioBox extends ViewBoxBaseComponent { runInAction(() => AudioBox._scrubTime = 0); runInAction(() => AudioBox._scrubTime = timeInMillisFrom1970); }; @@ -80,7 +81,7 @@ export class AudioBox extends ViewBoxBaseComponent SelectionManager.SelectedDocuments(), selected => { const sel = selected.length ? selected[0].props.Document : undefined; - //this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); + this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); }); this._scrubbingDisposer = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); @@ -106,8 +107,12 @@ export class AudioBox extends ViewBoxBaseComponent { - this._ele!.pause(); - this.audioState = "paused"; + if (this._repeat) { + this.playFrom(0); + } else { + this._ele!.pause(); + this.audioState = "paused"; + } }); playFromTime = (absoluteTime: number) => { @@ -120,7 +125,6 @@ export class AudioBox extends ViewBoxBaseComponent this.playFrom(0), -seekTimeInSeconds * 1000); } else { this.pause(); - console.log("wtf"); } } else if (seekTimeInSeconds <= this._ele.duration) { this._ele.currentTime = seekTimeInSeconds; @@ -183,7 +187,6 @@ export class AudioBox extends ViewBoxBaseComponent { - console.log("click"); this.playFrom(this._ele!.paused ? this._ele!.currentTime : -1); e.stopPropagation(); } @@ -224,6 +227,12 @@ export class AudioBox extends ViewBoxBaseComponent; } + @action + onRepeat = (e: React.MouseEvent) => { + this._repeat = !this._repeat; + e.stopPropagation(); + } + render() { const interactive = this.active() ? "-interactive" : ""; return
@@ -233,13 +242,19 @@ export class AudioBox extends ViewBoxBaseComponent
: -
-
-
-
+
+
+
+
+
e.stopPropagation()} onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { -- cgit v1.2.3-70-g09d2 From 89f1b8b80fb84429b130329c3d94f791a7d0b3db Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Mon, 6 Jul 2020 18:27:34 -0400 Subject: dragging and general ui --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/views/collections/CollectionSchemaCells.tsx | 3 ++- .../views/collections/CollectionSchemaHeaders.tsx | 4 ++-- .../collections/CollectionSchemaMovableTableHOC.tsx | 18 +++++++++++++----- src/client/views/collections/CollectionSchemaView.scss | 11 ++++------- src/client/views/collections/CollectionSchemaView.tsx | 7 +++++++ src/client/views/collections/SchemaTable.tsx | 2 +- 7 files changed, 30 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 3ae9c37a1..3acca38af 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -15143 +1221 diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index d76b6d204..0008cfad3 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -194,7 +194,8 @@ export class CollectionSchemaCell extends React.Component { const fieldIsDoc = (type === "document" && typeof field === "object") || (typeof field === "object" && doc); const onItemDown = (e: React.PointerEvent) => { - fieldIsDoc && SetupDrag(this._focusRef, + //fieldIsDoc && + SetupDrag(this._focusRef, () => this._document[props.fieldKey] instanceof Doc ? this._document[props.fieldKey] : this._document, this._document[props.fieldKey] instanceof Doc ? (doc: Doc | Doc[], target: Doc | undefined, addDoc: (newDoc: Doc | Doc[]) => any) => addDoc(doc) : this.props.moveDocument, this._document[props.fieldKey] instanceof Doc ? "alias" : this.props.Document.schemaDoc ? "copy" : undefined)(e); diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 213a72a85..4a9bd4aa6 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -396,7 +396,7 @@ export class KeysDropdown extends React.Component { render() { return ( -
+
{this._key === this._searchTerm.slice(0, this._key.length) ?
{this._key} @@ -411,7 +411,7 @@ export class KeysDropdown extends React.Component { }} onFocus={this.onFocus} onBlur={this.onBlur}>
{this.renderOptions()} diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx index b77173b25..dade4f2f2 100644 --- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx +++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx @@ -209,6 +209,14 @@ export class MovableRow extends React.Component { return doc !== targetCollection && doc !== targetView?.props.ContainingCollectionDoc && this.props.removeDoc(doc) && addDoc(doc); } + @action + onKeyDown = (e: React.KeyboardEvent) => { + console.log("yes"); + if (e.key === "Backspace" || e.key === "Delete") { + undoBatch(() => this.props.removeDoc(this.props.rowInfo.original)); + } + } + render() { const { children = null, rowInfo } = this.props; if (!rowInfo) { @@ -227,14 +235,14 @@ export class MovableRow extends React.Component { if (this.props.rowWrapped) className += " row-wrapped"; return ( -
-
- -
+
+
+ + {/*
this.props.removeDoc(this.props.rowInfo.original))}>
this.props.addDocTab(this.props.rowInfo.original, "onRight")}>
-
+
*/} {children}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 688099b6c..f844cf8bf 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -59,9 +59,7 @@ } .rt-thead { - width: calc(100% - 52px); - margin-left: 50px; - + width: 100%; z-index: 100; overflow-y: visible; @@ -165,7 +163,7 @@ .collectionSchema-col { height: 100%; - .collectionSchema-col-wrapper { + .collectionSchema-apper { &.col-before { border-left: 2px solid red; } @@ -297,7 +295,6 @@ button.add-column { background-color: white; border: 1px solid lightgray; padding: 2px 3px; - overflow-x: hidden; &:not(:first-child) { border-top: 0; @@ -531,8 +528,8 @@ button.add-column { .reactTable-sub { padding: 10px 30px; background-color: rgb(252, 252, 252); - width: calc(100% - 50px); - margin-left: 50px; + width: 100%; + .row-dragger { background-color: rgb(252, 252, 252); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 688313951..fde3993f9 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -456,6 +456,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.props.select(false); } } + console.log("yeeeet"); } @computed @@ -605,6 +606,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } } + + + onKeyPress = (e: React.KeyboardEvent) => { + console.log("yeet2"); + } render() { TraceMobx(); const menuContent = this.renderMenuContent; @@ -630,6 +636,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { }} >
this.props.active(true) && e.stopPropagation()} onDrop={e => this.onExternalDrop(e, {})} diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 5a73e7501..878cc6f6d 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -217,7 +217,7 @@ export class SchemaTable extends React.Component { className="collectionSchemaView-menuOptions-wrapper" style={{ background: col.color, padding: "2px", - display: "flex", cursor: "default" + display: "flex", cursor: "default", height: "100%", }}> {/*
Date: Tue, 7 Jul 2020 14:09:07 -0700 Subject: pause and time --- src/client/views/nodes/AudioBox.scss | 33 ++++++++++++++++--- src/client/views/nodes/AudioBox.tsx | 61 +++++++++++++++++++++++++++++++----- 2 files changed, 81 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 2655f2377..ad4b94b91 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -46,13 +46,36 @@ height: 100%; position: relative; - .recording { - width: 100%; + + } + + .recording { + margin-top: auto; + margin-bottom: auto; + width: 100%; + height: 80%; + position: relative; + padding-right: 5px; + display: flex; + + .time { + position: relative; height: 100%; + width: 100%; + font-size: 20; + text-align: center; + } + + .buttons { position: relative; - display: flex; - padding-left: 2px; - background: lightgrey; + margin-top: auto; + margin-bottom: auto; + width: 25px; + padding: 5px; + } + + .buttons:hover { + background-color: darkgrey; } } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 78d714ca9..ec8992249 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -50,8 +50,12 @@ export class AudioBox extends ViewBoxBaseComponent { if (this.audioState === "recording") { - setTimeout(this.updateRecordTime, 30); - this.layoutDoc.currentTimecode = (new Date().getTime() - this._recordStart) / 1000; + if (this._paused) { + setTimeout(this.updateRecordTime, 30); + this._pausedTime += (new Date().getTime() - this._recordStart) / 1000; + } else { + setTimeout(this.updateRecordTime, 30); + this.layoutDoc.currentTimecode = (new Date().getTime() - this._recordStart - this.pauseTime) / 1000; + } } } @@ -172,7 +181,7 @@ export class AudioBox extends ViewBoxBaseComponent { this._recorder.stop(); this._recorder = undefined; - this.dataDoc.duration = (new Date().getTime() - this._recordStart) / 1000; + this.dataDoc.duration = (new Date().getTime() - this._recordStart - this.pauseTime) / 1000; this.audioState = "paused"; this._stream?.getAudioTracks()[0].stop(); const ind = DocUtils.ActiveRecordings.indexOf(this.props.Document); @@ -233,6 +242,28 @@ export class AudioBox extends ViewBoxBaseComponent { + this._pauseStart = new Date().getTime(); + this._paused = true; + this._recorder.pause(); + e.stopPropagation(); + + } + + @action + recordPlay = (e: React.MouseEvent) => { + this._pauseEnd = new Date().getTime(); + this._paused = false; + this._recorder.resume(); + e.stopPropagation(); + + } + + @computed get pauseTime() { + return (this._pauseEnd - this._pauseStart); + } + render() { const interactive = this.active() ? "-interactive" : ""; return
@@ -241,14 +272,28 @@ export class AudioBox extends ViewBoxBaseComponent
- +
: "RECORD"} + */} + {this.audioState === "recording" ? +
e.stopPropagation()}> +
+ +
+
+ +
+
{NumCast(this.layoutDoc.currentTimecode).toFixed(1)}
+
+ + : + }
:
-- cgit v1.2.3-70-g09d2 From 825bf223add7652860cc8cc95f48d183da2d0eb3 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 7 Jul 2020 22:01:36 -0400 Subject: ui changes from sally and new collumns on search --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/views/collections/CollectionSchemaView.scss | 3 +-- src/client/views/collections/CollectionSchemaView.tsx | 1 - src/client/views/collections/SchemaTable.tsx | 8 +++++--- src/client/views/search/SearchBox.tsx | 11 +++++++++++ 5 files changed, 18 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 3acca38af..7fb11c5fd 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -1221 +1426 diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index f844cf8bf..83fe54c82 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -25,7 +25,7 @@ .collectionSchemaView-tableContainer { width: 100%; height: 100%; - overflow: scroll; + overflow: auto; } .collectionSchemaView-dividerDragger { @@ -522,7 +522,6 @@ button.add-column { .collectionSchemaView-table { width: 100%; height: 100%; - overflow: visible; } .reactTable-sub { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index fde3993f9..50eea5059 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -628,7 +628,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { {({ measureRef }) =>
{menuContent}
}
; - return
{ //@ts-ignore expandedRowsList.forEach(row => expanded[row] = true); const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :(((( - + let overflow = "auto"; + StrCast(this.props.Document.type) === "search" ? overflow = "overlay" : "auto"; return { return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > {this.reactTable} -
this.createRow()}>+ new
+ {StrCast(this.props.Document.type) !== "search" ?
this.createRow()}>+ new
+ : undefined} {!this._showDoc ? (null) :
{ this.onOpenClick(); }} style={{ diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index d51d1bf0c..04a233809 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -38,6 +38,7 @@ import { makeInterface, createSchema } from '../../../fields/Schema'; import { listSpec } from '../../../fields/Schema'; import * as _ from "lodash"; import { checkIfStateModificationsAreAllowed } from 'mobx/lib/internal'; +import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; library.add(faTimes); @@ -635,6 +636,16 @@ export class SearchBox extends ViewBoxBaseComponent headers.push(item.heading)); + //this.props.Document._schemaHeaders = new List([]); + let schemaheaders: SchemaHeaderField[] = []; + //highlights.forEach((item) => headers.includes(item) ? undefined : schemaheaders.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb"))) + highlights.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb"))) + + this.props.Document._schemaHeaders = new List(schemaheaders); + + this._visibleDocuments[i] = result[0]; this._isSearch[i] = "search"; if (this._numTotalResults > 3 && this.expandedBucket === false) { -- cgit v1.2.3-70-g09d2 From 20bf67a41b16dd4df42e7dfc93e9acc38e910d29 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 8 Jul 2020 15:00:17 -0400 Subject: new columns on search and beginning to add highlights --- src/client/views/search/SearchBox.tsx | 54 +++++++++++------------------------ 1 file changed, 16 insertions(+), 38 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 04a233809..f120a408e 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -590,6 +590,7 @@ export class SearchBox extends ViewBoxBaseComponent(); if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { this._visibleElements = [
No Search Results
]; //this._visibleDocuments= Docs.Create. @@ -636,44 +637,10 @@ export class SearchBox extends ViewBoxBaseComponent headers.push(item.heading)); - //this.props.Document._schemaHeaders = new List([]); - let schemaheaders: SchemaHeaderField[] = []; - //highlights.forEach((item) => headers.includes(item) ? undefined : schemaheaders.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb"))) - highlights.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb"))) - - this.props.Document._schemaHeaders = new List(schemaheaders); - - + highlights.forEach((item) => headers.add(item)); this._visibleDocuments[i] = result[0]; this._isSearch[i] = "search"; - if (this._numTotalResults > 3 && this.expandedBucket === false) { - let doctype = StrCast(result[0].type); - console.log(doctype); - if (doctype === this.firststring) { - if (this.bucketcount[1] < 3) { - result[0].parent = this.buckets![1]; - Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]); - this.bucketcount[1] += 1; - } - } - else if (doctype === this.secondstring) { - if (this.bucketcount[2] < 3) { - result[0].parent = this.buckets![2]; - Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]); - this.bucketcount[2] += 1; - } - } - else if (this.bucketcount[0] < 3) { - //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]); - //this.bucketcount[0]+=1; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); - } - } - else { - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); - } + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); } } else { @@ -681,12 +648,14 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + highlights.forEach((item) => headers.add(item)); result[0]._height = 46; result[0].lines = lines; result[0].highlighting = highlights.join(", "); if (i < this._visibleDocuments.length) { this._visibleDocuments[i] = result[0]; this._isSearch[i] = "search"; + console.log("WHYYYY"); Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); } @@ -695,6 +664,12 @@ export class SearchBox extends ViewBoxBaseComponent([]); + let schemaheaders: SchemaHeaderField[] = []; + this.headerscale = headers.size; + headers.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb"))) + this.props.Document._schemaHeaders = new List(schemaheaders); if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; this._visibleDocuments.length = this._results.length; @@ -702,6 +677,8 @@ export class SearchBox extends ViewBoxBaseComponent arr2.includes(item)) @@ -1146,12 +1123,13 @@ export class SearchBox extends ViewBoxBaseComponent
- 0 ? + ScreenToLocalTransform={Transform.Identity} /> : undefined} +
Date: Wed, 8 Jul 2020 23:23:51 -0400 Subject: highlighting search results in schema --- src/client/views/EditableView.tsx | 4 +++- src/client/views/collections/CollectionSchemaCells.tsx | 10 +++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 628db366f..54b0bbe65 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -194,7 +194,9 @@ export class EditableView extends React.Component { ref={this._ref} style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }} onClick={this.onClick} placeholder={this.props.placeholder}> - {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()} + {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()} + +
); } diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 0008cfad3..5a84408f7 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -32,6 +32,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { DateField } from "../../../fields/DateField"; +import { indexOf } from "lodash"; const path = require('path'); library.add(faExpand); @@ -244,14 +245,17 @@ export class CollectionSchemaCell extends React.Component { // ); trace(); + if (type === "string") { + let search = StrCast(this.props.Document._searchString) + let start = contents.indexOf(search); + console.log(contents.slice(start, search.length)); + } - + StrCast(this.props.Document._searchString) ? console.log(StrCast(this.props.Document._searchString)) : undefined; return (
- - Date: Sat, 11 Jul 2020 15:45:48 -0700 Subject: make documents --- package.json | 2 +- src/client/views/nodes/AudioBox.scss | 27 +++++++++++++ src/client/views/nodes/AudioBox.tsx | 78 +++++++++++++++++++++++++++++++++--- 3 files changed, 100 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/package.json b/package.json index 62a554355..5a6c6f0b1 100644 --- a/package.json +++ b/package.json @@ -249,4 +249,4 @@ "xoauth2": "^1.2.0", "xregexp": "^4.3.0" } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 06498182d..b1da40287 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -196,6 +196,33 @@ } } + .audiobox-marker-container1, + .audiobox-marker-minicontainer { + position: absolute; + width: 10px; + height: 90%; + top: 2.5%; + background: gray; + border-radius: 5px; + box-shadow: black 2px 2px 1px; + opacity: 0.3; + + .audiobox-marker { + position: relative; + height: calc(100% - 15px); + margin-top: 15px; + } + + .audio-marker:hover { + border: orange 2px solid; + } + } + + .audiobox-marker-container1:hover, + .audiobox-marker-minicontainer:hover { + opacity: 1; + } + .audiobox-marker-minicontainer { width: 5px; border-radius: 1px; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index cb56ae203..9a2baf85d 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -2,13 +2,13 @@ import React = require("react"); import { FieldViewProps, FieldView } from './FieldView'; import { observer } from "mobx-react"; import "./AudioBox.scss"; -import { Cast, DateCast, NumCast } from "../../../fields/Types"; +import { Cast, DateCast, NumCast, FieldValue } from "../../../fields/Types"; import { AudioField, nullAudio } from "../../../fields/URLField"; import { ViewBoxBaseComponent } from "../DocComponent"; import { makeInterface, createSchema } from "../../../fields/Schema"; import { documentSchema } from "../../../fields/documentSchemas"; import { Utils, returnTrue, emptyFunction, returnOne, returnTransparent, returnFalse, returnZero } from "../../../Utils"; -import { runInAction, observable, reaction, IReactionDisposer, computed, action } from "mobx"; +import { runInAction, observable, reaction, IReactionDisposer, computed, action, trace } from "mobx"; import { DateField } from "../../../fields/DateField"; import { SelectionManager } from "../../util/SelectionManager"; import { Doc, DocListCast } from "../../../fields/Doc"; @@ -21,6 +21,9 @@ import { Docs, DocUtils } from "../../documents/Documents"; import { ComputedField } from "../../../fields/ScriptField"; import { Networking } from "../../Network"; import { LinkAnchorBox } from "./LinkAnchorBox"; +import { FormattedTextBox } from "./formattedText/FormattedTextBox"; +import { RichTextField } from "../../../fields/RichTextField"; + // testing testing @@ -54,7 +57,12 @@ export class AudioBox extends ViewBoxBaseComponent = [] + @observable private _markers: Array = []; @observable private _paused: boolean = false; @observable private static _scrubTime = 0; @observable private _repeat: boolean = false; @@ -122,7 +130,12 @@ export class AudioBox extends ViewBoxBaseComponent { this.recordingStart && this.playFrom((absoluteTime - this.recordingStart) / 1000); } - playFrom = (seekTimeInSeconds: number) => { + + @action + playFrom = (seekTimeInSeconds: number, endTime: number = this.dataDoc.duration) => { + let play; + clearTimeout(play); + this._duration = endTime - seekTimeInSeconds; if (this._ele && AudioBox.Enabled) { if (seekTimeInSeconds < 0) { if (seekTimeInSeconds > -1) { @@ -131,9 +144,13 @@ export class AudioBox extends ViewBoxBaseComponent this.audioState = "playing"); + if (endTime !== this.dataDoc.duration) { + play = setTimeout(() => this.pause(), (this._duration) * 1000); + } } else { this.pause(); } @@ -264,6 +281,25 @@ export class AudioBox extends ViewBoxBaseComponent @@ -304,12 +340,40 @@ export class AudioBox extends ViewBoxBaseComponent { if (e.button === 0 && !e.ctrlKey) { const rect = (e.target as any).getBoundingClientRect(); + const wasPaused = this.audioState === "paused"; this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); wasPaused && this.pause(); - e.stopPropagation(); + + } + if (e.button === 0 && e.altKey) { + this.newMarker(this._ele!.currentTime); + } + + if (e.button === 0 && e.shiftKey) { + const rect = (e.target as any).getBoundingClientRect(); + this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + this._hold ? this.end(this._ele!.currentTime) : this.start(this._ele!.currentTime); } - }} > + }}> + {this._markers.map((m, i) => { + let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false }); + let rect; + (m.length > 1) ? + + rect = +
{ this.playFrom(m[0], m[1]); e.stopPropagation() }}> + {/* */} +
+ : + rect = +
+ {/* */} +
; + return rect + })} {DocListCast(this.dataDoc.links).map((l, i) => { let la1 = l.anchor1 as Doc; let la2 = l.anchor2 as Doc; @@ -319,8 +383,10 @@ export class AudioBox extends ViewBoxBaseComponent +
Date: Sun, 12 Jul 2020 19:25:53 -0700 Subject: added change markers and formatted time and added resizer --- src/client/views/nodes/AudioBox.scss | 27 ++++++++- src/client/views/nodes/AudioBox.tsx | 96 +++++++++++++++++++++++++++++++- src/client/views/nodes/AudioResizer.scss | 11 ++++ src/client/views/nodes/AudioResizer.tsx | 48 ++++++++++++++++ 4 files changed, 178 insertions(+), 4 deletions(-) create mode 100644 src/client/views/nodes/AudioResizer.scss create mode 100644 src/client/views/nodes/AudioResizer.tsx (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index b1da40287..8eb92f126 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -118,7 +118,7 @@ .audiobox-timeline { position: relative; - height: 100%; + height: 80%; width: 100%; background: white; border: gray solid 1px; @@ -184,6 +184,8 @@ background: gray; border-radius: 5px; box-shadow: black 2px 2px 1px; + resize: horizontal; + overflow: auto; .audiobox-marker { position: relative; @@ -216,6 +218,15 @@ .audio-marker:hover { border: orange 2px solid; } + + .resizer { + position: absolute; + right: 0; + cursor: ew-resize; + height: 100%; + width: 1px; + z-index: 100; + } } .audiobox-marker-container1:hover, @@ -234,6 +245,20 @@ } } } + + .current-time { + position: absolute; + font-size: 12; + top: 70%; + left: 23%; + } + + .total-time { + position: absolute; + left: 80%; + top: 70%; + font-size: 12; + } } } } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 9a2baf85d..4dbcf7497 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -23,6 +23,7 @@ import { Networking } from "../../Network"; import { LinkAnchorBox } from "./LinkAnchorBox"; import { FormattedTextBox } from "./formattedText/FormattedTextBox"; import { RichTextField } from "../../../fields/RichTextField"; +import { AudioResizer } from "./AudioResizer"; // testing testing @@ -60,6 +61,9 @@ export class AudioBox extends ViewBoxBaseComponent = [] @observable private _markers: Array = []; @@ -300,6 +304,85 @@ export class AudioBox extends ViewBoxBaseComponent { + e.stopPropagation(); + e.preventDefault(); + this._isPointerDown = true; + console.log("click"); + this._currMarker = m; + + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + onPointerUp = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isPointerDown = false; + + const rect = (e.target as any).getBoundingClientRect(); + this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + } + + onPointerMove = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + console.log("drag"); + + if (!this._isPointerDown) { + return; + } + + // let resize = document.getElementById("audiobox-marker-container1"); + + const rect = (e.target as any).getBoundingClientRect(); + // let newWidth = parseFloat(`${(e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration)}%`); + + // if (resize) { + // console.log(parseFloat(resize.style.width)); + // console.log(newWidth); + // console.log(e.movementX); + // if (e.movementX < 0) { + // resize.style.width = `${parseFloat(resize.style.width) - (newWidth)}%`; + // } else { + // resize.style.width = `${parseFloat(resize.style.width) + (newWidth)}%`; + // } + // } + + let newTime = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + + this.changeMarker(this._currMarker, newTime); + } + + @action + changeMarker = (m: any, time: any) => { + for (let i = 0; i < this._markers.length; i++) { + if (this.isSame(this._markers[i], m)) { + this._markers[i][1] = time; + } + } + } + + isSame = (m1: any, m2: any) => { + if (m1[0] == m2[0] && m1[1] == m2[1]) { + return true; + } + return false; + } + + formatTime = (time: number) => { + let hours = Math.floor(time / 60 / 60); + let minutes = Math.floor(time / 60) - (hours * 60); + let seconds = time % 60; + + return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0'); + } + render() { const interactive = this.active() ? "-interactive" : ""; return
@@ -357,13 +440,14 @@ export class AudioBox extends ViewBoxBaseComponent {this._markers.map((m, i) => { - let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false }); + // let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false }); let rect; (m.length > 1) ? rect = -
{ this.playFrom(m[0], m[1]); e.stopPropagation() }}> +
{ this.playFrom(m[0], m[1]); e.stopPropagation() }} > {/* */} +
this.onPointerDown(e, m)}>
: rect = @@ -372,7 +456,7 @@ export class AudioBox extends ViewBoxBaseComponent */}
; - return rect + return rect; })} {DocListCast(this.dataDoc.links).map((l, i) => { let la1 = l.anchor1 as Doc; @@ -408,6 +492,12 @@ export class AudioBox extends ViewBoxBaseComponent {this.audio}
+
+ {this.formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))} +
+
+ {this.formatTime(Math.round(NumCast(this.layoutDoc.duration)))} +
} diff --git a/src/client/views/nodes/AudioResizer.scss b/src/client/views/nodes/AudioResizer.scss new file mode 100644 index 000000000..892ad21e7 --- /dev/null +++ b/src/client/views/nodes/AudioResizer.scss @@ -0,0 +1,11 @@ +.resizer { + width: 0px; + height: 100%; + position: absolute; + right: 0px; + z-index: 999; + cursor: e-resize; + content: " "; + display: inline-block; + border-left: 20px solid transparent; +} \ No newline at end of file diff --git a/src/client/views/nodes/AudioResizer.tsx b/src/client/views/nodes/AudioResizer.tsx new file mode 100644 index 000000000..f9ab8353f --- /dev/null +++ b/src/client/views/nodes/AudioResizer.tsx @@ -0,0 +1,48 @@ +import { observer } from "mobx-react" +import React = require("react"); +import "./AudioResizer.scss"; + +@observer +export class AudioResizer extends React.Component { + private _isPointerDown = false; + + onPointerDown = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isPointerDown = true; + console.log("click"); + + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + onPointerUp = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isPointerDown = false; + + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + } + + onPointerMove = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + console.log("drag"); + + if (!this._isPointerDown) { + return; + } + + let resize = document.getElementById("resizer"); + if (resize) { + resize.style.right += e.movementX; + } + } + + render() { + return
+ } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From ec1f159d60695a3cc89327561f7c60c00a06366d Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Mon, 13 Jul 2020 16:18:46 +0800 Subject: highlights, readjusted view, keyboard events --- src/client/documents/Documents.ts | 1 + src/client/views/MainView.tsx | 5 +- src/client/views/nodes/FieldView.tsx | 1 + src/client/views/nodes/PresBox.scss | 477 +++++++++++++--- src/client/views/nodes/PresBox.tsx | 611 +++++++++++++++++---- .../views/presentationview/PresElementBox.scss | 29 +- .../views/presentationview/PresElementBox.tsx | 47 +- 7 files changed, 949 insertions(+), 222 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 0e44a46d9..1aa3aef3e 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -131,6 +131,7 @@ export interface DocumentOptions { lastFrame?: number; // the last frame of a frame-based collection (e.g., progressive slide) activeFrame?: number; // the active frame of a document in a frame base collection presTransition?: number; //the time taken for the transition TO a document + presDuration?: number; //the duration of the slide in presentation view borderRounding?: string; boxShadow?: string; dontRegisterChildViews?: boolean; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e961e2e5c..440368a32 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -6,7 +6,7 @@ import { faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle, faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, - faAngleDown, faAngleUp, faSearchPlus + faAngleDown, faAngleUp, faSearchPlus, faPlayCircle, faClock, faRocket } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -144,7 +144,8 @@ export class MainView extends React.Component { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, faAngleDown, faAngleUp, faSearchPlus); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, + faAngleDown, faAngleUp, faSearchPlus, faPlayCircle, faClock, faRocket); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index c57738361..b1132ce33 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -45,6 +45,7 @@ export interface FieldViewProps { whenActiveChanged: (isActive: boolean) => void; dontRegisterView?: boolean; focus: (doc: Doc) => void; + presMultiSelect?: (doc: Doc) => void; //added for selecting multiple documents in a presentation ignoreAutoHeight?: boolean; PanelWidth: () => number; PanelHeight: () => number; diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 9c2daf5d3..07e53fa94 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -19,16 +19,11 @@ margin-top: 10px; } - .presBox-highlight { - position: absolute; - top: 0; - height: 0; - width: 100%; - margin-top: 10px; - background-color: #ffe4b3; + .presBox-toolbar { + display: none; } - .presBox-toolbar { + .presBox-toolbar.active { position: relative; display: inline-flex; align-items: center; @@ -43,115 +38,437 @@ letter-spacing: 0; display: flex; align-items: center; + transition: 0.5s; - .toolbar-dropdown { - margin-left: 5px; + @media only screen and (max-width: 400) { + .toolbar-buttonText { + display: none; + } } + } - .toolbar-transitionTools { - display: none; - } + .toolbar-button.active { + color: #AEDDF8; + } - .toolbar-transitionTools.active { - position: absolute; - display: block; - top: 30px; - transform: translate(-10px, 0px); - border-top: solid 3px grey; - background-color: #323232; - width: 105px; - height: max-content; - z-index: 100; - - .toolbar-transitionButtons { - display: block; - - .toolbar-transition { - display: flex; - font-size: 10; - width: 100; - background-color: rgba(0, 0, 0, 0); - min-width: max-content; - - .toolbar-icon { - margin-right: 5px; - } - } + .toolbar-transitionButtons { + display: block; + + .toolbar-transition { + display: flex; + font-size: 10; + width: 100; + background-color: rgba(0, 0, 0, 0); + min-width: max-content; + + .toolbar-icon { + margin-right: 5px; } } } + } + + .toolbar-moreInfo { + position: absolute; + right: 5px; + display: flex; + width: max-content; + height: 25px; + /* background-color: pink; */ + justify-content: center; + transform: rotate(90deg); + align-items: center; + transition: 0.7s ease; - .toolbar-divider { - border-left: 1px solid white; - height: 80%; + .toolbar-moreInfoBall { + width: 4px; + height: 4px; + border-radius: 100%; + background-color: white; + margin: 1px; + position: relative; } } - .presBox-buttons { + .toolbar-moreInfo.active { + transform: rotate(0deg); + } + + .toolbar-divider { + border-left: solid #ffffff70 0.5px; + height: 20px; + } +} + +.dropdown { + font-size: 10; + margin-left: 5px; + color: darkgrey; + transition: 0.5s ease; +} + +.dropdown.active { + transform: rotate(180deg); + color: #AEDDF8; + opacity: 0.8; +} + +.presBox-ribbon { + position: relative; + display: none; + background-color: white; + color: black; + width: 100%; + height: 0; + z-index: 100; + transition: 0.7s; + + .toolbar-slider { position: relative; + -webkit-appearance: none; + transform: rotateY(180deg); + background-color: #40B3D8; + margin-top: 1px; width: 100%; - background: gray; - padding-top: 5px; - padding-bottom: 5px; + max-width: 100px; + height: 2.5px; + left: 0px; + } + + .toolbar-slider:focus { + outline: none; + } + + .toolbar-slider::-webkit-slider-thumb { + -webkit-appearance: none; + background-color: #40B3D8; + border: 1px white solid; + border-radius: 100%; + width: 9px; + height: 9px; + } + + .slider-headers { + position: relative; display: grid; - grid-column-end: 4; - grid-column-start: 1; + justify-content: space-between; + width: 100%; + grid-template-columns: auto auto auto; + grid-template-rows: auto; + font-weight: 100; + margin-top: 5px; + font-size: 8px; + } - .presBox-viewPicker { - height: 25; - position: relative; - display: inline-block; - grid-column: 1/2; - min-width: 15px; + .slider-value { + font-size: 10; + position: relative; + } + + .slider-value.none, + .slider-headers.none, + .toolbar-slider.none { + display: none; + } + + .dropdown-header { + padding-bottom: 10px; + font-weight: 800; + text-align: center; + font-size: 16; + width: 90%; + color: black; + transform: translate(5%, 0px); + border-bottom: solid 2px darkgrey; + } + + + .ribbon-textInput { + border-radius: 2px; + height: 25px; + font-size: 10; + font-weight: 100; + align-self: center; + justify-self: center; + padding-left: 10px; + border: solid 1px black; + width: 100%; + } + + .ribbon-final-box { + align-self: flex-start; + display: grid; + grid-template-rows: auto auto; + padding-left: 10px; + padding-right: 10px; + letter-spacing: normal; + width: max-content; + font-size: 13; + font-weight: 600; + position: relative; + + .selectedList { + display: block; + min-width: 50; + max-width: 120; + height: 70; + overflow-y: scroll; + + .selectedList-items { + font-size: 7; + font-weight: normal; + } } - select { - background: #323232; + + .ribbon-final-button { + position: relative; + font-size: 10; + font-weight: normal; + letter-spacing: normal; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 5px; + height: 25px; color: white; + width: 100%; + max-width: 120; + padding-left: 10; + padding-right: 10; + border-radius: 10px; + background-color: #979797; } + } - .presBox-button { - margin-right: 2.5%; - margin-left: 2.5%; - height: 25px; - border-radius: 5px; + .ribbon-box { + display: grid; + grid-template-rows: max-content auto; + padding-left: 10px; + padding-right: 10px; + letter-spacing: normal; + width: max-content; + font-weight: 600; + position: relative; + font-size: 13; + border-right: solid 2px darkgrey; + + .ribbon-button { + font-size: 10; + font-weight: 200; + height: 25; + border: solid 1px black; display: flex; + border-radius: 10px; + margin-right: 5px; + width: max-content; + justify-content: center; align-items: center; - background: #323232; - color: white; + padding-right: 10px; + padding-left: 10px; + } + + .ribbon-button.active { + background-color: #5B9FDD; + } + + .ribbon-button:hover { + background-color: lightgrey; + } + + .presBox-dropdown:hover { + border: solid 1px #378AD8; + + .presBox-dropdownOption { + font-size: 10; + display: block; + padding-left: 5px; + margin-top: 3; + margin-bottom: 3; + } + + .presBox-dropdownOption:hover { + position: relative; + background-color: lightgrey; + } + + .presBox-dropdownOption.active { + position: relative; + background-color: #9CE2F8; + } + + .presBox-dropdownOptions { + position: absolute; + top: 19px; + left: -1px; + z-index: 200; + width: 85%; + display: block; + background: #FFFFFF; + border: 0.5px solid #979797; + box-sizing: border-box; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + } - svg { - margin: auto; + .presBox-dropdownIcon { + color: #378AD8; } } - .collectionViewBaseChrome-viewPicker { - min-width: 50; - width: 5%; - height: 25; + .presBox-dropdown { + display: grid; + grid-template-columns: auto 20%; position: relative; - display: inline-block; + border: solid 1px black; + font-size: 10; + height: 20; + padding-left: 5px; + align-items: center; + margin-top: 5px; + margin-bottom: 5px; + font-weight: 200; + width: 100%; + min-width: max-content; + max-width: 120; + overflow: visible; + + .presBox-dropdownOptions { + display: none; + } + + .presBox-dropdownIcon { + position: relative; + color: black; + align-self: center; + justify-self: center; + } } } +} - .presBox-backward, - .presBox-forward { - width: 25px; - border-radius: 5px; - top: 50%; - position: absolute; +.presBox-ribbon.active { + display: inline-flex; + height: 100px; + padding-top: 5px; + padding-bottom: 5px; + border: solid 1px black; +} + + + +.dropdown-play { + top: 32px; + transform: translate(-28%, 0px); + /* left: 0; */ + display: none; + border-radius: 5px; + width: 100px; + height: 100px; + z-index: 200; + background-color: black; + position: absolute; +} + +.dropdown-play.active { + display: flex; +} + +.presBox-buttons { + position: relative; + width: 100%; + background: gray; + padding-top: 5px; + padding-bottom: 5px; + display: grid; + grid-template-columns: auto auto; + + .presBox-viewPicker { + height: 25; + position: relative; display: inline-block; + grid-column: 1; + border-radius: 5px; + min-width: 15px; + max-width: 100px; } - .presBox-backward { - left: 5; + .presBox-presentPanel { + display: flex; + justify-self: end; + width: 100%; + } - .presBox-forward { - right: 5; + select { + background: #323232; + color: white; + } + + .presBox-button { + margin-right: 2.5px; + margin-left: 2.5px; + height: 25px; + border-radius: 5px; + display: none; + justify-content: center; + align-content: center; + align-items: center; + text-align: center; + letter-spacing: normal; + width: inherit; + background: #323232; + color: white; + } + + .presBox-button.active { + display: flex; + } + + .presBox-button.edit { + display: flex; + max-width: 25px; + } + + .presBox-button.present { + display: flex; + min-width: 100px; + width: 100px; + position: absolute; + right: 0px; + + .present-icon { + margin-right: 7px; + } + } + + + + .collectionViewBaseChrome-viewPicker { + min-width: 50; + width: 5%; + height: 25; + position: relative; + display: inline-block; } } +.presBox-backward, +.presBox-forward { + width: 25px; + border-radius: 5px; + top: 50%; + position: absolute; + display: inline-block; +} + +.presBox-backward { + left: 5; +} + +.presBox-forward { + right: 5; +} + // CSS adjusted for mobile devices @media only screen and (max-device-width: 480px) { .presBox-cont .presBox-buttons { @@ -197,4 +514,4 @@ .select { font-size: 100%; } -} +} \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 736551443..abf97142e 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -14,7 +14,7 @@ import { CollectionView, CollectionViewType } from "../collections/CollectionVie import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; import { ViewBoxBaseComponent } from "../DocComponent"; -import { makeInterface } from "../../../fields/Schema"; +import { makeInterface, listSpec } from "../../../fields/Schema"; import { Docs } from "../../documents/Documents"; import { PrefetchProxy } from "../../../fields/Proxy"; import { ScriptField } from "../../../fields/ScriptField"; @@ -22,6 +22,8 @@ import { Scripting } from "../../util/Scripting"; import { InkingStroke } from "../InkingStroke"; import { HighlightSpanKind } from "typescript"; import { SearchUtil } from "../../util/SearchUtil"; +import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; +import { child } from "serializr"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -29,15 +31,17 @@ const PresBoxDocument = makeInterface(documentSchema); @observer export class PresBox extends ViewBoxBaseComponent(PresBoxDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); } + static Instance: PresBox; @observable _isChildActive = false; @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } @computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); } @computed get presElement() { return Cast(Doc.UserDoc().presElement, Doc, null); } constructor(props: any) { super(props); + PresBox.Instance = this; if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations. Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ - title: "pres element template", backgroundColor: "transparent", _xMargin: 0, _height: 20, isTemplateDoc: true, isTemplateForField: "data" + title: "pres element template", backgroundColor: "transparent", _xMargin: 0, isTemplateDoc: true, isTemplateForField: "data" })); // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent @@ -53,7 +57,14 @@ export class PresBox extends ViewBoxBaseComponent this.rootDoc.presBox = this.rootDoc; this.rootDoc._forceRenderEngine = "timeline"; this.rootDoc._replacedChrome = "replaced"; + this.layoutDoc.presStatus = "edit"; + document.addEventListener("keydown", this.keyEvents, false); } + + componentWillUnmount() { + document.removeEventListener("keydown", this.keyEvents, false); + } + updateCurrentPresentation = () => Doc.UserDoc().activePresentation = this.rootDoc; @undoBatch @@ -148,7 +159,7 @@ export class PresBox extends ViewBoxBaseComponent /** * This method makes sure that cursor navigates to the element that * has the option open and last in the group. If not in the group, and it has - * te option open, navigates to that element. + * the option open, navigates to that element. */ navigateToElement = async (curDoc: Doc, fromDocIndex: number) => { this.updateCurrentPresentation(); @@ -203,47 +214,57 @@ export class PresBox extends ViewBoxBaseComponent if (index >= 0 && index < this.childDocs.length) { this.rootDoc._itemIndex = index; const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); - if (presTargetDoc.lastFrame !== undefined) { + if (presTargetDoc?.lastFrame !== undefined) { presTargetDoc.currentFrame = 0; } - - if (!this.layoutDoc.presStatus) { - this.layoutDoc.presStatus = true; - this.startPresentation(index); - } - const heights: number[] = []; - this.childDocs.forEach(doc => { - if (doc.presExpandInlineButton) heights.push(155); - else heights.push(58); - }); - let sum: number = 65; - for (let i = 0; i < this.itemIndex; i++) { - sum += heights[i]; - } - const highlight = document.getElementById("presBox-hightlight"); - if (this.itemIndex === 0 && highlight) highlight.style.top = "65"; - else if (highlight) highlight.style.top = sum.toString(); - if (this.childDocs[this.itemIndex].presExpandInlineButton && highlight) highlight.style.height = "156"; - else if (highlight) highlight.style.height = "58"; - console.log(highlight?.style.top); - console.log(highlight?.className); - console.log(sum); + // if (this.layoutDoc.presStatus === "edit") { + // this.layoutDoc.presStatus = true; + // this.startPresentation(index); + // } this.navigateToElement(this.childDocs[index], fromDoc); this.hideIfNotPresented(index); this.showAfterPresented(index); } }); + + @observable _presTimer!: NodeJS.Timeout; + //The function that starts or resets presentaton functionally, depending on status flag. + @action startOrResetPres = () => { this.updateCurrentPresentation(); - if (this.layoutDoc.presStatus) { - this.resetPresentation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + if (this._presTimer && this.layoutDoc.presStatus === "auto") { + clearInterval(this._presTimer); + this.layoutDoc.presStatus = "manual"; } else { - this.layoutDoc.presStatus = true; - this.startPresentation(0); - this.gotoDocument(0, this.itemIndex); + this.layoutDoc.presStatus = "auto"; + // this.startPresentation(0); + // this.gotoDocument(0, this.itemIndex); + this._presTimer = setInterval(() => { + if (this.itemIndex + 1 < this.childDocs.length) this.next(); + else { + clearInterval(this._presTimer); + this.layoutDoc.presStatus = "manual"; + } + }, activeItem.presDuration ? NumCast(activeItem.presDuration) : 2000); + // for (let i = this.itemIndex + 1; i <= this.childDocs.length; i++) { + // if (this.itemIndex + 1 === this.childDocs.length) { + // clearTimeout(this._presTimer); + // this.layoutDoc.presStatus = "manual"; + // } else timer = setTimeout(() => { console.log(i); this.next(); }, i * 2000); + // } + } + + // if (this.layoutDoc.presStatus) { + // this.resetPresentation(); + // } else { + // this.layoutDoc.presStatus = true; + // this.startPresentation(0); + // this.gotoDocument(0, this.itemIndex); + // } } //The function that resets the presentation by removing every action done by it. It also @@ -252,7 +273,7 @@ export class PresBox extends ViewBoxBaseComponent this.updateCurrentPresentation(); this.childDocs.forEach(doc => (doc.presentationTargetDoc as Doc).opacity = 1); this.rootDoc._itemIndex = 0; - this.layoutDoc.presStatus = false; + // this.layoutDoc.presStatus = false; } //The function that starts the presentation, also checking if actions should be applied @@ -297,6 +318,39 @@ export class PresBox extends ViewBoxBaseComponent this.updateMinimize(e, this.rootDoc._viewType = viewType); }); + @undoBatch + movementChanged = action((movement: string) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + if (movement === 'zoom') { + activeItem.presZoomButton = !activeItem.presZoomButton; + activeItem.presNavButton = false; + } else if (movement === 'nav') { + activeItem.presZoomButton = false; + activeItem.presNavButton = !activeItem.presNavButton; + } else { + activeItem.presZoomButton = false; + activeItem.presNavButton = false; + } + }); + + @undoBatch + visibilityChanged = action((visibility: string) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + if (visibility === 'fade') { + activeItem.presFadeButton = !activeItem.presFadeButton; + } else if (visibility === 'hideBefore') { + activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton; + activeItem.presHideAfterButton = false; + } else if (visibility === 'hideAfter') { + activeItem.presHideAfterButton = !activeItem.presHideAfterButton; + activeItem.presHideAfterButton = false; + } else { + activeItem.presHideAfterButton = false; + activeItem.presHideTillShownButton = false; + activeItem.presFadeButton = false; + } + }); + whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; @@ -308,17 +362,124 @@ export class PresBox extends ViewBoxBaseComponent } childLayoutTemplate = () => this.rootDoc._viewType !== CollectionViewType.Stacking ? undefined : this.presElement; removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc); - selectElement = (doc: Doc) => this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight panelHeight = () => this.props.PanelHeight() - 20; active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) + // KEYS + @observable _selectedArray: Doc[] = []; + + @computed get listOfSelected() { + const list = this._selectedArray.map((doc: Doc, index: any) => { + return ( +
{index + 1}. {doc.title}
+ ); + }); + return list; + } + + //Regular click + @action + selectElement = (doc: Doc) => { + this._selectedArray = []; + this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); + this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); + console.log(this._selectedArray); + } + + //Command click + @action + multiSelect = (doc: Doc) => { + this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); + console.log(this._selectedArray); + } + + //Shift click + @action + shiftSelect = (doc: Doc) => { + this._selectedArray = []; + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + if (activeItem) { + for (let i = Math.min(this.itemIndex, this.childDocs.indexOf(doc)); i <= Math.max(this.itemIndex, this.childDocs.indexOf(doc)); i++) { + this._selectedArray.push(this.childDocs[i]); + } + } + console.log(this._selectedArray); + } + + + + //Esc click + @action + keyEvents = (e: KeyboardEvent) => { + e.stopPropagation; + // Escape key + if (e.keyCode === 27) { + if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; + else this.layoutDoc.presStatus = "edit"; + // Ctrl-A to select all + } else if ((e.metaKey || e.altKey) && e.keyCode === 65) { + this._selectedArray = this.childDocs; + } + } + + @observable private transitionTools: boolean = false; + @observable private newDocumentTools: boolean = false; + @observable private progressivizeTools: boolean = false; + @observable private moreInfoTools: boolean = false; + @observable private playTools: boolean = false; + // For toggling transition toolbar - @action - toggleTransitionTools = () => this.transitionTools = !this.transitionTools + @action toggleTransitionTools = () => { + this.transitionTools = !this.transitionTools; + this.newDocumentTools = false; + this.progressivizeTools = false; + this.moreInfoTools = false; + this.playTools = false; + } + // For toggling the add new document dropdown + @action toggleNewDocument = () => { + this.newDocumentTools = !this.newDocumentTools; + this.transitionTools = false; + this.progressivizeTools = false; + this.moreInfoTools = false; + this.playTools = false; + } + // For toggling the tools for progressivize + @action toggleProgressivize = () => { + this.progressivizeTools = !this.progressivizeTools; + this.transitionTools = false; + this.newDocumentTools = false; + this.moreInfoTools = false; + this.playTools = false; + } + // For toggling the tools for more info + @action toggleMoreInfo = () => { + this.moreInfoTools = !this.moreInfoTools; + this.transitionTools = false; + this.newDocumentTools = false; + this.progressivizeTools = false; + this.playTools = false; + } + // For toggling the options when the user wants to select play + @action togglePlay = () => { + this.playTools = !this.playTools; + this.transitionTools = false; + this.newDocumentTools = false; + this.progressivizeTools = false; + this.moreInfoTools = false; + } + + @action toggleAllDropdowns() { + this.transitionTools = false; + this.newDocumentTools = false; + this.progressivizeTools = false; + this.moreInfoTools = false; + this.playTools = false; + } @undoBatch @action @@ -330,46 +491,26 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action - viewLinks = () => { - const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); - console.log(SearchUtil.GetContextsOfDocument(presTargetDoc)); - console.log(DocListCast(presTargetDoc.context)); - console.log(DocumentManager.Instance.getAllDocumentViews(presTargetDoc)); + viewLinks = async () => { + let docToJump = this.childDocs[0]; + // console.log(SearchUtil.GetContextsOfDocument(presTargetDoc)); + // console.log(DocListCast(presTargetDoc.context)); + // console.log(DocumentManager.Instance.getAllDocumentViews(presTargetDoc)); + const aliasOf = await DocCastAsync(docToJump.aliasOf); + const srcContext = aliasOf && await DocCastAsync(aliasOf.context); + console.log(srcContext?.title); + const viewType = srcContext?._viewType; + const fit = srcContext?._fitToBox; + if (srcContext) { + srcContext._fitToBox = true; + srcContext._viewType = "freeform"; + } // if (!DocumentManager.Instance.getDocumentView(curPres)) { // CollectionDockingView.AddRightSplit(curPres); // } } - @observable private activeItem = this.itemIndex ? this.childDocs[this.itemIndex] : null; - - - /** - * The function that is called on click to turn zoom option of docs on/off. - */ - @action - onZoomDocumentClick = (e: React.MouseEvent) => { - e.stopPropagation(); - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - activeItem.presZoomButton = !activeItem.presZoomButton; - if (activeItem.presZoomButton) { - activeItem.presNavButton = false; - } - } - - /** - * The function that is called on click to turn navigation option of docs on/off. - */ - @action - onNavigateDocumentClick = (e: React.MouseEvent) => { - e.stopPropagation(); - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - activeItem.presNavButton = !activeItem.presNavButton; - if (activeItem.presNavButton) { - activeItem.presZoomButton = false; - } - } - /** * The function that is called on click to turn fading document after presented option on/off. * It also makes sure that the option swithches from hide-after to this one, since both @@ -387,21 +528,20 @@ export class PresBox extends ViewBoxBaseComponent } } else { activeItem.presHideAfterButton = false; - if (this.rootDoc.presStatus && targetDoc) { + if (this.rootDoc.presStatus !== "edit" && targetDoc) { targetDoc.opacity = 0.5; } } } - // @computed - // transitionTimer = (doc: Doc) => { - // const slider: HTMLInputElement = document.getElementById("toolbar-slider"); - // // let output = document.getElementById("demo"); - // // if (output && slider) output.innerHTML = slider.value; // Display the default slider value - // const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - // const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - // targetDoc.presTransition = slider ? (Number(slider.value) * 1000) : 0.5; - // } + @action + dropdownToggle = (menu: string) => { + console.log('presBox' + menu + 'Dropdown'); + const dropMenu = document.getElementById('presBox' + menu + 'Dropdown'); + console.log(dropMenu); + console.log(dropMenu?.style.display); + if (dropMenu) dropMenu.style.display === 'none' ? dropMenu.style.display = 'block' : dropMenu.style.display = 'none'; + } setTransitionTime = (number: String) => { const timeInMS = Number(number) * 1000; @@ -410,13 +550,249 @@ export class PresBox extends ViewBoxBaseComponent if (targetDoc) targetDoc.presTransition = timeInMS; } + @computed get transitionDropdown() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + + if (activeItem) { + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const transitionSpeed = targetDoc ? String(Number(targetDoc.presTransition) / 1000) : 0.5; + const visibilityTime = targetDoc ? String(Number(targetDoc.presTransition) / 1000) : 0.5; + const thumbLocation = String(-9.48 * Number(transitionSpeed) + 93); + const movement = activeItem.presZoomButton ? 'Zoom' : activeItem.presNavbutton ? 'Navigate' : 'None'; + const visibility = activeItem.presFadeButton ? 'Fade' : activeItem.presHideTillShownButton ? 'Hide till shown' : activeItem.presHideAfter ? 'Hide on exit' : 'None'; + return ( +
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> +
+ Movement +
e.stopPropagation()} + // onClick={() => this.dropdownToggle('Movement')} + > + {movement} + +
e.stopPropagation()}> +
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
+
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Zoom
+
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Navigate
+
+
+
{transitionSpeed}s
+ ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> +
+
Slow
+
Medium
+
Fast
+
+
+
+ Visibility +
e.stopPropagation()} + // onClick={() => this.dropdownToggle('Movement')} + > + {visibility} + +
e.stopPropagation()}> +
e.stopPropagation()} onClick={() => this.visibilityChanged('none')}>None
+
e.stopPropagation()} onClick={() => this.visibilityChanged('fade')}>Fade on exit
+
e.stopPropagation()} onClick={() => this.visibilityChanged('hideAfter')}>Hide on exit
+
e.stopPropagation()} onClick={() => this.visibilityChanged('hideBefore')}>Hidden til presented
+
+
+
{transitionSpeed}s
+ ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> +
+
Slow
+
Medium
+
Fast
+
+ {/*
Fade After
*/} + {/*
console.log("hide before")}>Hide Before
*/} + {/*
console.log("hide after")}>Hide After
*/} +
+
+ Effects +
e.stopPropagation()} + // onClick={() => this.dropdownToggle('Movement')} + > + None + +
e.stopPropagation()}> +
e.stopPropagation()}>None
+
+
+
+
+ {this._selectedArray.length} selected +
+ {this.listOfSelected} +
+
+
+
+ Apply to selected +
+
+ Apply to all +
+
+
+ ); + } + } + + public inputRef = React.createRef(); + + + createNewSlide = (title: string, type: string) => { + let doc = null; + if (type === "text") { + doc = Docs.Create.TextDocument("", { _nativeWidth: 400, _width: 400, title: title }); + const data = Cast(this.rootDoc.data, listSpec(Doc)); + if (data) data.push(doc); + } else { + doc = Docs.Create.FreeformDocument([], { _nativeWidth: 400, _width: 400, title: title }); + const data = Cast(this.rootDoc.data, listSpec(Doc)); + if (data) data.push(doc); + } + } + + @computed get newDocumentDropdown() { + let type = ""; + let title = ""; + return ( +
+
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> +
+ Slide Title:

+ {/*
*/} + { + e.stopPropagation(); + title = e.target.value; + }}> + {/*
*/} +
+
+ Choose type: +
+
{ type = "text"; }}>Text
+
{ type = "freeform"; }}>Freeform
+
+
+
+
this.createNewSlide(title, type)}> + Create New Slide +
+
+
+
+ ); + } + + @computed get playDropdown() { + return ( +
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> + +
+ ); + } + + @computed get progressivizeDropdown() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + if (activeItem) { + return ( +
+
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> +
+
Progressivize Child Documents
+
+
+ Other progressivize features: +
Progressivize Text Bullet Points
+
Internal Navigation
+
+
+
+ ); + } + } + + @action + progressivize = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + activeItem.presProgressivize = !activeItem.presProgressivize; + const rootTarget = Cast(activeItem.presentationTargetDoc, Doc, null); + const docs = DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]); + if (this.rootDoc.presProgressivize) { + rootTarget.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); + rootTarget.lastFrame = docs.length - 1; + } + } + + @computed get moreInfoDropdown() { + return (
); + + } + + @computed get toolbar() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + + if (activeItem) { + return ( + <> +
+ +
+
+
+
+
+
+ +
  Transitions
+ +
+
+
+ +
  Progressivize
+ +
+
+
+
+
+
+
+
+
+ + ); + } else { + return ( + <> +
+ +
+
+ +
+
+
+
+
+
+
+
+ + ); + } + } render() { - // console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus); - // const presOrderedDocs = DocListCast(activeItem.presOrderedDocs); - // if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { - // this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); - // } this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; return
@@ -430,41 +806,33 @@ export class PresBox extends ViewBoxBaseComponent -
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
- Transitions -
e.stopPropagation()}> -
- - - - ) => this.setTransitionTime(e.target.value)} /> - {/* */} - {/* - - */} -
+
+
+   + +
+ { e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} /> + {this.playDropdown} +
+
this.layoutDoc.presStatus = "manual"}> + Present +
+
+ +
+
+ +
+
this.layoutDoc.presStatus = "edit"}> +
-
+
{this.toolbar}
+ {this.newDocumentDropdown} + {this.moreInfoDropdown} + {this.transitionDropdown} + {this.progressivizeDropdown}
{mode !== CollectionViewType.Invalid ? moveDocument={returnFalse} childOpacity={returnOne} childLayoutTemplate={this.childLayoutTemplate} - filterAddDocument={this.addDocumentFilter} + filterAddDocument={returnFalse} removeDocument={returnFalse} dontRegisterView={true} focus={this.selectElement} + presMultiSelect={this.multiSelect} ScreenToLocalTransform={this.getTransform} /> : (null) } @@ -493,3 +862,11 @@ Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, d if (field === 'presBox') return container; return undefined; }); + + + + // console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus); + // const presOrderedDocs = DocListCast(activeItem.presOrderedDocs); + // if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { + // this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); + // } \ No newline at end of file diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 6d37ede8a..0e58d77a0 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -1,6 +1,9 @@ .presElementBox-item { - display: inline-block; - background-color: #eeeeee; + display: grid; + grid-template-rows: max-content max-content max-content; + background-color: #d0d0d0; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + position: relative; pointer-events: all; width: 100%; height: 100%; @@ -17,6 +20,15 @@ padding: 0px; padding-bottom: 3px; + .presElementBox-highlight { + position: absolute; + transform: translate(-100px, -6px); + z-index: -1; + width: calc(100% + 200px); + height: calc(100% + 12px); + background-color: #AEDDF8; + } + .documentView-node { position: absolute; z-index: 1; @@ -38,10 +50,9 @@ } .presElementBox-active { - background: gray; color: black; border-radius: 6px; - box-shadow: black 2px 2px 5px; + border: solid 2px #5B9FDD; } .presElementBox-buttons { @@ -88,6 +99,14 @@ white-space: pre; } +.presElementBox-time { + position: relative; + font-size: 8; + font-style: italic; + letter-spacing: normal; + left: 10px; +} + .presElementBox-embedded { position: relative; display: flex; @@ -143,4 +162,4 @@ display: flex; justify-content: center; align-items: center; -} +} \ No newline at end of file diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index bca63e94d..f30ee2a5c 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -5,7 +5,7 @@ import { Doc, DataSym, DocListCast } from "../../../fields/Doc"; import { documentSchema } from '../../../fields/documentSchemas'; import { Id } from "../../../fields/FieldSymbols"; import { createSchema, makeInterface, listSpec } from '../../../fields/Schema'; -import { Cast, NumCast, BoolCast, ScriptCast } from "../../../fields/Types"; +import { Cast, NumCast, BoolCast, ScriptCast, StrCast } from "../../../fields/Types"; import { emptyFunction, emptyPath, returnFalse, returnTrue, returnOne, returnZero, numberRange } from "../../../Utils"; import { Transform } from "../../util/Transform"; import { CollectionViewType } from '../collections/CollectionView'; @@ -15,6 +15,7 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView'; import "./PresElementBox.scss"; import React = require("react"); import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; +import { PresBox } from "../nodes/PresBox"; export const presSchema = createSchema({ presentationTargetDoc: Doc, @@ -37,19 +38,18 @@ const PresDocument = makeInterface(presSchema, documentSchema); @observer export class PresElementBox extends ViewBoxBaseComponent(PresDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresElementBox, fieldKey); } - _heightDisposer: IReactionDisposer | undefined; // these fields are conditionally computed fields on the layout document that take this document as a parameter @computed get indexInPres() { return Number(this.lookupField("indexInPres")); } // the index field is where this document is in the presBox display list (since this value is different for each presentation element, the value can't be stored on the layout template which is used by all display elements) - @computed get collapsedHeight() { return Number(this.lookupField("presCollapsedHeight")); } // the collapsed height changes depending on the state of the presBox. We could store this on the presentation elemnt template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up - @computed get presStatus() { return BoolCast(this.lookupField("presStatus")); } + @computed get collapsedHeight() { return Number(this.lookupField("presCollapsedHeight")); } // the collapsed height changes depending on the state of the presBox. We could store this on the presentation element template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up + @computed get presStatus() { return StrCast(this.lookupField("presStatus")); } @computed get itemIndex() { return NumCast(this.lookupField("_itemIndex")); } @computed get presBox() { return Cast(this.lookupField("presBox"), Doc, null); } @computed get targetDoc() { return Cast(this.rootDoc.presentationTargetDoc, Doc, null) || this.rootDoc; } componentDidMount() { this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.collapsedHeight], - params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 200 : 0), { fireImmediately: true }); + params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true }); } componentWillUnmount() { this._heightDisposer?.(); @@ -68,7 +68,7 @@ export class PresElementBox extends ViewBoxBaseComponent this.itemIndex && this.targetDoc) { + if (this.presStatus !== "edit" && this.indexInPres > this.itemIndex && this.targetDoc) { this.targetDoc.opacity = 0; } } @@ -89,7 +89,7 @@ export class PresElementBox extends ViewBoxBaseComponent { - const highlight = document.getElementById("presBox-hightlight"); this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton; - if (highlight && this.rootDoc.presExpandInlineButton) highlight.style.height = "156"; - else if (highlight && !this.rootDoc.presExpandInlineButton) highlight.style.height = "58"; } - embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); + embedHeight = () => 100; embedWidth = () => this.props.PanelWidth() - 20; + // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); + // embedWidth = () => this.props.PanelWidth() - 20; /** * The function that is responsible for rendering a preview or not for this * presentation element. @@ -220,7 +219,18 @@ export class PresElementBox extends ViewBoxBaseComponent { this.props.focus(this.rootDoc); e.stopPropagation(); }}> + onClick={e => { + if (e.ctrlKey || e.metaKey) { + PresBox.Instance.multiSelect(this.rootDoc); + console.log("cmmd click"); + } else if (e.shiftKey) { + PresBox.Instance.shiftSelect(this.rootDoc); + } else { + this.props.focus(this.rootDoc); e.stopPropagation(); + console.log("normal click"); + } + }} + onPointerDown={e => e.stopPropagation()}> {treecontainer ? (null) : <>
{`${this.indexInPres + 1}.`} @@ -228,6 +238,8 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.targetDoc?.title}`}
+
{"Transition speed: " + (this.targetDoc?.presTransition) + "ms"}
+
{"Duration: " + (this.targetDoc?.presDuration) + "ms"}
-
} +
- + - {/* */} - +
{this.renderEmbeddedInline}
-- cgit v1.2.3-70-g09d2 From 11ca5a85ff8ecf7c1709331c12d75213fdfa1589 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Wed, 15 Jul 2020 22:04:59 +0800 Subject: added progressivize features --- package-lock.json | 13 ++ package.json | 4 +- .../collectionFreeForm/CollectionFreeFormView.scss | 40 ++++- .../collectionFreeForm/CollectionFreeFormView.tsx | 40 ++++- .../views/nodes/CollectionFreeFormDocumentView.tsx | 9 +- src/client/views/nodes/PresBox.scss | 142 ++++++++++------ src/client/views/nodes/PresBox.tsx | 185 +++++++++++++++++---- .../views/presentationview/PresElementBox.tsx | 3 +- 8 files changed, 344 insertions(+), 92 deletions(-) (limited to 'src') diff --git a/package-lock.json b/package-lock.json index ad181758c..1e8359fbf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14335,6 +14335,14 @@ "react-draggable": "^4.0.3" } }, + "react-reveal": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz", + "integrity": "sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==", + "requires": { + "prop-types": "^15.5.10" + } + }, "react-select": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.1.0.tgz", @@ -14800,6 +14808,11 @@ "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=", "dev": true }, + "reveal.js": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/reveal.js/-/reveal.js-4.0.2.tgz", + "integrity": "sha512-LWZSUenufF1gpD7npxJ7KfoQQFKgc1D6XrLTFgKlwWNP1BQ74hT48KONFWMAw+8R/QUeaScCLCLrBVHDfFIEiw==" + }, "right-align": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", diff --git a/package.json b/package.json index 89af3b0b5..745f7d947 100644 --- a/package.json +++ b/package.json @@ -222,11 +222,13 @@ "react-jsx-parser": "^1.25.1", "react-measure": "^2.2.4", "react-resizable": "^1.10.1", + "react-reveal": "^1.2.2", "react-select": "^3.1.0", "react-table": "^6.11.5", "readline": "^1.3.0", "request": "^2.88.0", "request-promise": "^4.2.5", + "reveal.js": "^4.0.2", "rimraf": "^3.0.0", "serializr": "^1.5.4", "sharp": "^0.23.4", @@ -248,4 +250,4 @@ "xoauth2": "^1.2.0", "xregexp": "^4.3.0" } -} \ No newline at end of file +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 92aee3776..fad90ca32 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -13,16 +13,54 @@ } .collectionfreeformview-viewdef { - > .collectionFreeFormDocumentView-container { + >.collectionFreeFormDocumentView-container { pointer-events: none; + .contentFittingDocumentDocumentView-previewDoc { pointer-events: all; } } + + svg.presPaths { + position: absolute; + z-index: 100000; + overflow: visible; + } + + svg.presPaths-hidden { + display: none; + } } .collectionfreeformview-none { touch-action: none; + + svg.presPaths { + position: absolute; + z-index: 100000; + overflow: visible; + } + + svg.presPaths-hidden { + display: none; + } +} + +.progressivizeButton { + position: absolute; + display: flex; + transform: translate(-105%, 0); + align-items: center; + border: black solid 1px; + border-radius: 3px; + justify-content: center; + width: 30; + height: 20; + background-color: #c8c8c8; +} + +.progressivizeButton:hover { + background-color: #aedef8; } .collectionFreeform-customText { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 98be2dc03..ded410a9c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,7 +1,7 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { faEye } from "@fortawesome/free-regular-svg-icons"; import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faFileUpload, faPaintBrush, faTable, faUpload } from "@fortawesome/free-solid-svg-icons"; -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, trace } from "mobx"; import { observer } from "mobx-react"; import { computedFn } from "mobx-utils"; import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../../fields/Doc"; @@ -46,6 +46,7 @@ import "./CollectionFreeFormView.scss"; import MarqueeOptionsMenu from "./MarqueeOptionsMenu"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); +import { PresBox } from "../../nodes/PresBox"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); @@ -1350,6 +1351,8 @@ export class CollectionFreeFormView extends CollectionSubView @@ -1432,11 +1435,44 @@ interface CollectionFreeFormViewPannableContentsProps { viewDefDivClick?: ScriptField; children: () => JSX.Element[]; transition?: string; + presPaths?: boolean; + progressivize?: boolean; } @observer class CollectionFreeFormViewPannableContents extends React.Component{ + @computed get progressivize() { + if (this.props.progressivize) { + console.log("should render"); + return ( + <> + {PresBox.Instance.progressivizeChildDocs} + + ); + } + } + + @computed get presPaths() { + const presPaths = "presPaths" + (this.props.presPaths ? "" : "-hidden"); + if (this.props.presPaths) { + return ( + + + + + + + + + ; + {PresBox.Instance.paths} + + ); + } + } + render() { + trace(); const freeformclass = "collectionfreeformview" + (this.props.viewDefDivClick ? "-viewDef" : "-none"); const cenx = this.props.centeringShiftX(); const ceny = this.props.centeringShiftY(); @@ -1449,6 +1485,8 @@ class CollectionFreeFormViewPannableContents extends React.Component {this.props.children()} + {this.presPaths} + {this.progressivize}
; } } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index a3020f912..52a7d4ebf 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -15,6 +15,8 @@ import { numberRange } from "../../../Utils"; import { ComputedField } from "../../../fields/ScriptField"; import { listSpec } from "../../../fields/Schema"; import { DocumentType } from "../../documents/DocumentTypes"; +// @ts-ignore +import Zoom from 'react-reveal/Zoom'; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; @@ -112,10 +114,15 @@ export class CollectionFreeFormDocumentView extends DocComponent { + if (!doc.appearFrame) doc.appearFrame = i; const curTimecode = progressivize ? i : timecode; const xlist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); const ylist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); - const olist = new List(numberRange(timecode + 1).map(t => progressivize && t < i ? 0 : 1)); + const olist = new List(numberRange(timecode + 1).map(t => progressivize && (t < NumCast(doc.appearFrame)) ? 0 : 1)); + const oarray = new List(); + oarray.fill(0, 0, NumCast(doc.appearFrame) - 1); + oarray.fill(1, NumCast(doc.appearFrame), timecode); + console.log(oarray); xlist[curTimecode] = NumCast(doc.x); ylist[curTimecode] = NumCast(doc.y); doc["x-indexed"] = xlist; diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 07e53fa94..4d1518b61 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -125,12 +125,14 @@ .toolbar-slider { position: relative; + align-self: center; + justify-self: left; -webkit-appearance: none; transform: rotateY(180deg); background-color: #40B3D8; - margin-top: 1px; + margin-top: 5px; width: 100%; - max-width: 100px; + max-width: 120px; height: 2.5px; left: 0px; } @@ -153,16 +155,19 @@ display: grid; justify-content: space-between; width: 100%; + height: max-content; + max-width: 120px; grid-template-columns: auto auto auto; - grid-template-rows: auto; + grid-template-rows: max-content; font-weight: 100; - margin-top: 5px; + /* margin-top: 5px; */ font-size: 8px; } .slider-value { - font-size: 10; - position: relative; + top: -20; + color: #2f86a2; + position: absolute; } .slider-value.none, @@ -197,29 +202,18 @@ .ribbon-final-box { align-self: flex-start; + justify-self: center; display: grid; grid-template-rows: auto auto; padding-left: 10px; padding-right: 10px; letter-spacing: normal; - width: max-content; + min-width: max-content; + width: 100%; font-size: 13; font-weight: 600; position: relative; - .selectedList { - display: block; - min-width: 50; - max-width: 120; - height: 70; - overflow-y: scroll; - - .selectedList-items { - font-size: 7; - font-weight: normal; - } - } - .ribbon-final-button { position: relative; @@ -241,41 +235,61 @@ } } + .selectedList { + display: block; + min-width: 50; + max-width: 120; + height: 70; + overflow-y: scroll; + + .selectedList-items { + font-size: 7; + font-weight: normal; + } + } + + .ribbon-button { + font-size: 10; + font-weight: 200; + height: 25; + border: solid 1px black; + display: flex; + border-radius: 10px; + margin-right: 5px; + width: max-content; + justify-content: center; + align-items: center; + padding-right: 10px; + padding-left: 10px; + } + + .ribbon-button.active { + background-color: #5B9FDD; + } + + .ribbon-button:hover { + background-color: lightgrey; + } + + svg.svg-inline--fa.fa-thumbtack.fa-w-12.toolbar-thumbtack { + right: 40; + position: absolute; + transform: rotate(45deg); + } + .ribbon-box { display: grid; grid-template-rows: max-content auto; + justify-self: center; padding-left: 10px; padding-right: 10px; letter-spacing: normal; - width: max-content; + width: 100%; font-weight: 600; position: relative; font-size: 13; border-right: solid 2px darkgrey; - .ribbon-button { - font-size: 10; - font-weight: 200; - height: 25; - border: solid 1px black; - display: flex; - border-radius: 10px; - margin-right: 5px; - width: max-content; - justify-content: center; - align-items: center; - padding-right: 10px; - padding-left: 10px; - } - - .ribbon-button.active { - background-color: #5B9FDD; - } - - .ribbon-button:hover { - background-color: lightgrey; - } - .presBox-dropdown:hover { border: solid 1px #378AD8; @@ -283,6 +297,7 @@ font-size: 10; display: block; padding-left: 5px; + padding-right: 5px; margin-top: 3; margin-bottom: 3; } @@ -303,6 +318,7 @@ left: -1px; z-index: 200; width: 85%; + min-width: max-content; display: block; background: #FFFFFF; border: 0.5px solid #979797; @@ -341,36 +357,58 @@ color: black; align-self: center; justify-self: center; + margin-right: 2px; } } } } .presBox-ribbon.active { - display: inline-flex; + display: grid; + grid-template-columns: auto auto auto auto auto; + grid-template-rows: 100%; height: 100px; padding-top: 5px; padding-bottom: 5px; border: solid 1px black; -} + ::-webkit-scrollbar { + -webkit-appearance: none; + height: 3px; + width: 8px; + } + ::-webkit-scrollbar-thumb { + border-radius: 2px; + background-color: rgb(101, 164, 220); + } +} + +.dropdown-play-button { + font-size: 10; + margin-left: 10; + margin-right: 10; + padding-top: 5px; + padding-bottom: 5px; + text-align: left; + justify-content: left; + border-bottom: solid 1px lightgrey; +} .dropdown-play { top: 32px; - transform: translate(-28%, 0px); - /* left: 0; */ display: none; border-radius: 5px; - width: 100px; - height: 100px; + width: max-content; + min-height: 20px; + height: max-content; z-index: 200; - background-color: black; + background-color: #323232; position: absolute; } .dropdown-play.active { - display: flex; + display: block; } .presBox-buttons { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index abf97142e..5c21f6656 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -25,6 +25,8 @@ import { SearchUtil } from "../../util/SearchUtil"; import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; import { child } from "serializr"; + + type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -232,7 +234,7 @@ export class PresBox extends ViewBoxBaseComponent //The function that starts or resets presentaton functionally, depending on status flag. @action - startOrResetPres = () => { + startOrResetPres = (startSlide: number) => { this.updateCurrentPresentation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (this._presTimer && this.layoutDoc.presStatus === "auto") { @@ -240,8 +242,8 @@ export class PresBox extends ViewBoxBaseComponent this.layoutDoc.presStatus = "manual"; } else { this.layoutDoc.presStatus = "auto"; - // this.startPresentation(0); - // this.gotoDocument(0, this.itemIndex); + this.startPresentation(startSlide); + this.gotoDocument(startSlide, this.itemIndex); this._presTimer = setInterval(() => { if (this.itemIndex + 1 < this.childDocs.length) this.next(); else { @@ -373,8 +375,10 @@ export class PresBox extends ViewBoxBaseComponent @computed get listOfSelected() { const list = this._selectedArray.map((doc: Doc, index: any) => { + const activeItem = Cast(doc, Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); return ( -
{index + 1}. {doc.title}
+
{index + 1}. {targetDoc.title}
); }); return list; @@ -415,13 +419,27 @@ export class PresBox extends ViewBoxBaseComponent @action keyEvents = (e: KeyboardEvent) => { e.stopPropagation; + // switch(e.keyCode) { + // case 27: console.log("escape"); + // case 65 && (e.metaKey || e.altKey): + // } // Escape key if (e.keyCode === 27) { if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; else this.layoutDoc.presStatus = "edit"; // Ctrl-A to select all } else if ((e.metaKey || e.altKey) && e.keyCode === 65) { - this._selectedArray = this.childDocs; + if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; + // left / a / up to go back + } else if (e.keyCode === 37 || 65 || 38) { + if (this.layoutDoc.presStatus !== "edit") this.back(); + // right / d / down to go to next + } else if (e.keyCode === 39 || 68 || 40) { + if (this.layoutDoc.presStatus !== "edit") this.next(); + // spacebar to 'present' or go to next slide + } else if (e.keyCode === 32) { + if (this.layoutDoc.presStatus !== "edit") this.next(); + else this.layoutDoc.presStatus = "manual"; } } @@ -432,6 +450,8 @@ export class PresBox extends ViewBoxBaseComponent @observable private moreInfoTools: boolean = false; @observable private playTools: boolean = false; + @observable private pathBoolean: boolean = false; + // For toggling transition toolbar @action toggleTransitionTools = () => { this.transitionTools = !this.transitionTools; @@ -491,26 +511,64 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action - viewLinks = async () => { - let docToJump = this.childDocs[0]; - // console.log(SearchUtil.GetContextsOfDocument(presTargetDoc)); - // console.log(DocListCast(presTargetDoc.context)); - // console.log(DocumentManager.Instance.getAllDocumentViews(presTargetDoc)); + viewPaths = async () => { + const docToJump = this.childDocs[0]; const aliasOf = await DocCastAsync(docToJump.aliasOf); const srcContext = aliasOf && await DocCastAsync(aliasOf.context); - console.log(srcContext?.title); + if (this.pathBoolean) { + console.log("true"); + if (srcContext) { + this.togglePath(); + srcContext._fitToBox = false; + srcContext._viewType = "freeform"; + srcContext.presPathView = false; + } + } else { + console.log("false"); + if (srcContext) { + this.togglePath(); + srcContext._fitToBox = true; + srcContext._viewType = "freeform"; + srcContext.presPathView = true; + } + } + console.log("view paths"); const viewType = srcContext?._viewType; const fit = srcContext?._fitToBox; - if (srcContext) { - srcContext._fitToBox = true; - srcContext._viewType = "freeform"; - } // if (!DocumentManager.Instance.getDocumentView(curPres)) { // CollectionDockingView.AddRightSplit(curPres); // } } + @computed get paths() { + const paths = []; //List of all of the paths that need to be added + console.log(this.childDocs.length - 1); + for (let i = 0; i <= this.childDocs.length - 1; i++) { + const targetDoc = Cast(this.childDocs[i].presentationTargetDoc, Doc, null); + if (this.childDocs[i + 1] && targetDoc) { + const nextTargetDoc = Cast(this.childDocs[i + 1].presentationTargetDoc, Doc, null); + const n1x = NumCast(targetDoc.x) + (NumCast(targetDoc._width) / 2); + const n1y = NumCast(targetDoc.y) + (NumCast(targetDoc._height) / 2); + const n2x = NumCast(nextTargetDoc.x) + (NumCast(targetDoc._width) / 2); + const n2y = NumCast(nextTargetDoc.y) + (NumCast(targetDoc._height) / 2); + const pathPoints = n1x + "," + n1y + " " + n2x + "," + n2y; + paths.push(); + } + } + return paths; + } + + @action togglePath = () => this.pathBoolean = !this.pathBoolean; + /** * The function that is called on click to turn fading document after presented option on/off. * It also makes sure that the option swithches from hide-after to this one, since both @@ -572,13 +630,13 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()}>
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
-
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Zoom
-
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Navigate
+
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
+
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan
-
{transitionSpeed}s
) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
+
{transitionSpeed}s
Slow
Medium
Fast
@@ -693,24 +751,48 @@ export class PresBox extends ViewBoxBaseComponent @computed get playDropdown() { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> - +
this.startOrResetPres(this.itemIndex)}> + Start from current slide +
+
this.startOrResetPres(0)}> + Start from first slide +
); } + progressivizeOptions = (viewType: string) => { + const buttons = []; + buttons.push(
Progressivize child documents
); + buttons.push(
console.log("hide after")}>Internal navigation
); + if (viewType === "rtf") { + buttons.push(
console.log("hide after")}>Bullet points
); + } + return buttons; + } + + + @computed get progressivizeDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - if (activeItem) { + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + + if (activeItem && targetDoc) { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
Progressivize Child Documents
+ {targetDoc.type} selected +
+
1. {targetDoc.title}
+
-
- Other progressivize features: -
Progressivize Text Bullet Points
-
Internal Navigation
+
+
+
Progressivize child documents
+
Edit
+
+
console.log("hide after")}>Internal navigation
@@ -718,20 +800,50 @@ export class PresBox extends ViewBoxBaseComponent } } + @action + editProgressivize = (e: React.MouseEvent) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + targetDoc.currentFrame = targetDoc.lastFrame; + if (targetDoc?.editProgressivize) { + targetDoc.editProgressivize = false; + } else { + targetDoc.editProgressivize = true; + } + } + @action progressivize = (e: React.MouseEvent) => { e.stopPropagation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); activeItem.presProgressivize = !activeItem.presProgressivize; - const rootTarget = Cast(activeItem.presentationTargetDoc, Doc, null); - const docs = DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]); - if (this.rootDoc.presProgressivize) { - rootTarget.currentFrame = 0; + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); + targetDoc.presProgressivize = !targetDoc.presProgressivize; + console.log(targetDoc.presProgressivize); + if (activeItem.presProgressivize) { + console.log("progressivize"); + targetDoc.currentFrame = 0; CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); - rootTarget.lastFrame = docs.length - 1; + targetDoc.lastFrame = docs.length - 1; } } + @computed get progressivizeChildDocs() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); + const tags: JSX.Element[] = []; + docs.forEach((doc, index) => { + tags.push( +
{doc.appearFrame}
+ ); + }); + return tags; + } + + + @computed get moreInfoDropdown() { return (
); @@ -747,8 +859,8 @@ export class PresBox extends ViewBoxBaseComponent
-
-
+
+ {/*
*/}
@@ -762,6 +874,9 @@ export class PresBox extends ViewBoxBaseComponent
+
+ +
@@ -778,7 +893,7 @@ export class PresBox extends ViewBoxBaseComponent
- +
@@ -807,10 +922,10 @@ export class PresBox extends ViewBoxBaseComponent
-
+
this.startOrResetPres(0)}>   -
+
{ e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} /> {this.playDropdown}
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index f30ee2a5c..fc040f67b 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -230,7 +230,8 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()}> + // onPointerDown={e => e.stopPropagation()} + > {treecontainer ? (null) : <>
{`${this.indexInPres + 1}.`} -- cgit v1.2.3-70-g09d2 From 1c6a596aec0a3bf933af03a754e2bf0f268e3d51 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Thu, 16 Jul 2020 08:58:45 -0700 Subject: fixed resize flicker, fixed double click, added resizer on left, added move to new row --- src/client/views/nodes/AudioBox.scss | 43 +++++++++++---- src/client/views/nodes/AudioBox.tsx | 100 ++++++++++++++++++++++++----------- 2 files changed, 100 insertions(+), 43 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 8eb92f126..4a6a471ec 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -54,10 +54,11 @@ margin-top: auto; margin-bottom: auto; width: 100%; - height: 80%; + height: 100%; position: relative; padding-right: 5px; display: flex; + background-color: red; .time { position: relative; @@ -65,6 +66,7 @@ width: 100%; font-size: 20; text-align: center; + top: 5; } .buttons { @@ -76,7 +78,7 @@ } .buttons:hover { - background-color: darkgrey; + background-color: crimson; } } @@ -86,7 +88,7 @@ position: relative; display: flex; padding-left: 2px; - background: lightgrey; + background: black; .audiobox-player { margin-top: auto; @@ -97,20 +99,28 @@ padding-right: 5px; display: flex; - .audiobox-playhead, - .audiobox-dictation { + .audiobox-playhead { position: relative; margin-top: auto; margin-bottom: auto; - width: 25px; + margin-right: 2px; + width: 30px; + height: 25px; padding: 2px; + border-radius: 50%; + background-color: dimgrey; } .audiobox-playhead:hover { - background-color: darkgrey; + background-color: white; } .audiobox-dictation { + position: relative; + margin-top: auto; + margin-bottom: auto; + width: 25px; + padding: 2px; align-items: center; display: inherit; background: dimgray; @@ -123,6 +133,7 @@ background: white; border: gray solid 1px; border-radius: 3px; + z-index: 1000; .audiobox-current { width: 1px; @@ -184,7 +195,6 @@ background: gray; border-radius: 5px; box-shadow: black 2px 2px 1px; - resize: horizontal; overflow: auto; .audiobox-marker { @@ -224,7 +234,16 @@ right: 0; cursor: ew-resize; height: 100%; - width: 1px; + width: 2px; + z-index: 100; + } + + .left-resizer { + position: absolute; + left: 0; + cursor: ew-resize; + height: 100%; + width: 2px; z-index: 100; } } @@ -250,14 +269,16 @@ position: absolute; font-size: 12; top: 70%; - left: 23%; + left: 30px; + color: white; } .total-time { position: absolute; - left: 80%; top: 70%; font-size: 12; + right: 2px; + color: white; } } } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 4dbcf7497..a4e7b0899 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -60,10 +60,13 @@ export class AudioBox extends ViewBoxBaseComponent = [] @observable private _markers: Array = []; @@ -288,6 +291,7 @@ export class AudioBox extends ViewBoxBaseComponent { + onPointerDown = (e: React.PointerEvent, m: any, left: boolean): void => { e.stopPropagation(); e.preventDefault(); this._isPointerDown = true; console.log("click"); this._currMarker = m; + let targetele = document.getElementById("timeline"); + targetele?.setPointerCapture(e.pointerId); + this._left = left; + document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); @@ -317,19 +326,24 @@ export class AudioBox extends ViewBoxBaseComponent { e.stopPropagation(); e.preventDefault(); this._isPointerDown = false; + this._dragging = false; const rect = (e.target as any).getBoundingClientRect(); this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + let targetele = document.getElementById("timeline"); + targetele?.releasePointerCapture(e.pointerId); + document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); } - onPointerMove = (e: PointerEvent): void => { + onPointerMove = async (e: PointerEvent) => { e.stopPropagation(); e.preventDefault(); console.log("drag"); @@ -338,32 +352,21 @@ export class AudioBox extends ViewBoxBaseComponent { for (let i = 0; i < this._markers.length; i++) { if (this.isSame(this._markers[i], m)) { - this._markers[i][1] = time; + this._left ? this._markers[i][0] = time : this._markers[i][1] = time; } } } @@ -383,7 +386,32 @@ export class AudioBox extends ViewBoxBaseComponent { + this._dragging = true; + } + + @action + onLeave = () => { + this._dragging = false; + } + // onMouseOver={this.onHover} onMouseLeave={this.onLeave} + + change = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + const rect = (e.target as any).getBoundingClientRect(); + + const wasPaused = this.audioState === "paused"; + this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + wasPaused && this.pause(); + console.log("double!"); + } + + // see if time is encapsulated by comparing time on both sides (for moving onto a new row in the timeline for the markers) + render() { + trace(); const interactive = this.active() ? "-interactive" : ""; return
{!this.path ? @@ -406,7 +434,7 @@ export class AudioBox extends ViewBoxBaseComponent
-
{NumCast(this.layoutDoc.currentTimecode).toFixed(1)}
+
{this.formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))}
: @@ -415,19 +443,24 @@ export class AudioBox extends ViewBoxBaseComponent}
:
+
+
-
-
-
-
e.stopPropagation()} +
+ {/*
+
*/} +
{ e.stopPropagation(); e.preventDefault(); }} onDoubleClick={e => this.change} onPointerDown={e => { + e.stopPropagation(); + e.preventDefault(); if (e.button === 0 && !e.ctrlKey) { const rect = (e.target as any).getBoundingClientRect(); - const wasPaused = this.audioState === "paused"; - this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); - wasPaused && this.pause(); - + if (e.target as HTMLElement !== document.getElementById("current")) { + const wasPaused = this.audioState === "paused"; + this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + wasPaused && this.pause(); + } } if (e.button === 0 && e.altKey) { this.newMarker(this._ele!.currentTime); @@ -442,12 +475,14 @@ export class AudioBox extends ViewBoxBaseComponent { // let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false }); let rect; + console.log(1 / this._amount * 100); (m.length > 1) ? rect = -
{ this.playFrom(m[0], m[1]); e.stopPropagation() }} > - {/* */} -
this.onPointerDown(e, m)}>
+
{ this.playFrom(m[0], m[1]); e.stopPropagation() }} > + {/* */} +
this.onPointerDown(e, m, true)}>
+
this.onPointerDown(e, m, false)}>
: rect = @@ -470,7 +505,7 @@ export class AudioBox extends ViewBoxBaseComponent +
{ if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); wasPaused && this.pause(); e.stopPropagation(); } }} />
; })} -
+
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%` }} /> {this.audio} +
{this.formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))} -- cgit v1.2.3-70-g09d2 From 9d2307cd2c367bd65d39cf48da1c31f5769ff5d1 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 16 Jul 2020 19:26:43 -0400 Subject: highlighting strings w multiple instaances --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/views/EditableView.tsx | 9 +++++++-- .../views/collections/CollectionSchemaCells.tsx | 23 +++++++++++++++++++--- 3 files changed, 28 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 7fb11c5fd..984a455bd 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -1426 +11092 diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 54b0bbe65..fd687328c 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -52,6 +52,8 @@ export interface EditableProps { color?: string | undefined; onDrop?: any; placeholder?: string; + highlight?: boolean; + positions?: number[]; } /** @@ -180,7 +182,9 @@ export class EditableView extends React.Component { placeholder={this.props.placeholder} />; } + render() { + console.log(this.props.contents.valueOf()) if (this._editing && this.props.GetValue() !== undefined) { return this.props.sizeToContent ?
@@ -194,9 +198,10 @@ export class EditableView extends React.Component { ref={this._ref} style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }} onClick={this.onClick} placeholder={this.props.placeholder}> + {this.props.highlight ? this.props.contents.forEach(el => { + console.log(el.valueOf()); + }) : undefined} {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()} - -
); } diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 5a84408f7..3fc29c46e 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -244,23 +244,40 @@ export class CollectionSchemaCell extends React.Component { //
// ); trace(); - + let positions = []; if (type === "string") { + let term = contents let search = StrCast(this.props.Document._searchString) - let start = contents.indexOf(search); - console.log(contents.slice(start, search.length)); + let start = term.indexOf(search) as number; + let tally = 0; + positions.push(start); + while (start < contents.length && start !== -1) { + console.log(start, search.length + 1); + console.log(term.slice(start, start + search.length + 1)); + term = term.slice(start + search.length + 1); + tally += start + search.length + 1; + console.log(term); + start = term.indexOf(search); + positions.push(tally + start); + console.log(start); + } + positions.pop(); + console.log(positions); } StrCast(this.props.Document._searchString) ? console.log(StrCast(this.props.Document._searchString)) : undefined; + return (
Date: Fri, 17 Jul 2020 14:38:02 +0800 Subject: pres changes --- package-lock.json | 5 + package.json | 1 + .../collectionFreeForm/CollectionFreeFormView.tsx | 36 +++--- .../views/nodes/CollectionFreeFormDocumentView.tsx | 53 ++++++--- src/client/views/nodes/PresBox.scss | 28 +++++ src/client/views/nodes/PresBox.tsx | 129 ++++++++++++++++----- src/typings/index.d.ts | 5 +- tsconfig.json | 3 +- 8 files changed, 195 insertions(+), 65 deletions(-) (limited to 'src') diff --git a/package-lock.json b/package-lock.json index 1e8359fbf..f0f40d4dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1205,6 +1205,11 @@ "@types/request": "*" } }, + "@types/reveal": { + "version": "3.3.33", + "resolved": "https://registry.npmjs.org/@types/reveal/-/reveal-3.3.33.tgz", + "integrity": "sha512-lKbezA9Oa5LfdSRwFDc/FHEGH4+FjiXh/a/PCSZAmN+KCeQJL/3ClOdAQwOxt3zdHc8XyioT+cNvIOletwRI7A==" + }, "@types/rimraf": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/rimraf/-/rimraf-2.0.4.tgz", diff --git a/package.json b/package.json index 745f7d947..eef6aae03 100644 --- a/package.json +++ b/package.json @@ -123,6 +123,7 @@ "@hig/theme-data": "^2.16.1", "@material-ui/core": "^4.11.0", "@types/google-maps": "^3.2.2", + "@types/reveal": "^3.3.33", "@types/webscopeio__react-textarea-autocomplete": "^4.6.1", "@webscopeio/react-textarea-autocomplete": "^4.7.0", "adm-zip": "^0.4.16", diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index ded410a9c..2b55008f4 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -48,6 +48,7 @@ import { MarqueeView } from "./MarqueeView"; import React = require("react"); import { PresBox } from "../../nodes/PresBox"; + library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); export const panZoomSchema = createSchema({ @@ -1352,7 +1353,7 @@ export class CollectionFreeFormView extends CollectionSubView @@ -1436,21 +1437,21 @@ interface CollectionFreeFormViewPannableContentsProps { children: () => JSX.Element[]; transition?: string; presPaths?: boolean; - progressivize?: boolean; + // progressivize?: boolean; } @observer class CollectionFreeFormViewPannableContents extends React.Component{ - @computed get progressivize() { - if (this.props.progressivize) { - console.log("should render"); - return ( - <> - {PresBox.Instance.progressivizeChildDocs} - - ); - } - } + // @computed get progressivize() { + // if (this.props.progressivize) { + // console.log("should render"); + // return ( + // <> + // {PresBox.Instance.progressivizeChildDocs} + // + // ); + // } + // } @computed get presPaths() { const presPaths = "presPaths" + (this.props.presPaths ? "" : "-hidden"); @@ -1458,11 +1459,12 @@ class CollectionFreeFormViewPannableContents extends React.Component - - + + - - + + ; {PresBox.Instance.paths} @@ -1486,7 +1488,7 @@ class CollectionFreeFormViewPannableContents extends React.Component {this.props.children()} {this.presPaths} - {this.progressivize} + {/* {this.progressivize} */}
; } } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 52a7d4ebf..f797ffe8a 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -15,8 +15,9 @@ import { numberRange } from "../../../Utils"; import { ComputedField } from "../../../fields/ScriptField"; import { listSpec } from "../../../fields/Schema"; import { DocumentType } from "../../documents/DocumentTypes"; -// @ts-ignore -import Zoom from 'react-reveal/Zoom'; +import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal'; +import { PresBox } from "./PresBox"; + export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; @@ -118,8 +119,10 @@ export class CollectionFreeFormDocumentView extends DocComponent(numberRange(timecode + 1).map(i => undefined) as any as number[]); const ylist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); - const olist = new List(numberRange(timecode + 1).map(t => progressivize && (t < NumCast(doc.appearFrame)) ? 0 : 1)); - const oarray = new List(); + const olist = new List(numberRange(timecode + 1).map(t => progressivize && t < i ? 0 : 1)); + const oarray: number[] = []; + console.log(doc.title + "AF: " + doc.appearFrame); + console.log("timecode: " + timecode); oarray.fill(0, 0, NumCast(doc.appearFrame) - 1); oarray.fill(1, NumCast(doc.appearFrame), timecode); console.log(oarray); @@ -141,6 +144,35 @@ export class CollectionFreeFormDocumentView extends DocComponent; + if (this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc) { + switch (this.layoutDoc.presEffect) { + case "Zoom": return ({node}); break; + case "Fade": return ({node}); break; + case "Flip": return ({node}); break; + case "Rotate": return ({node}); break; + case "Bounce": return ({node}); break; + case "Roll": return ({node}); break; + case "LightSpeed": return ({node}); break; + case "None": return node; break; + default: return node; break; + } + } else { + return node; + } + } + contentScaling = () => this.nativeWidth > 0 && !this.props.fitToBox && !this.freezeDimensions ? this.width / this.nativeWidth : 1; panelWidth = () => (this.sizeProvider?.width || this.props.PanelWidth?.()); panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.()); @@ -171,6 +203,7 @@ export class CollectionFreeFormDocumentView extends DocComponent + {Doc.UserDoc().renderStyle !== "comic" ? (null) :
@@ -180,17 +213,7 @@ export class CollectionFreeFormDocumentView extends DocComponent} {!this.props.fitToBox ? - + <>{this.freeformNodeDiv} : ; @@ -226,6 +226,7 @@ export class PresBox extends ViewBoxBaseComponent this.navigateToElement(this.childDocs[index], fromDoc); this.hideIfNotPresented(index); this.showAfterPresented(index); + this.onHideDocumentUntilPressClick(); } }); @@ -237,6 +238,7 @@ export class PresBox extends ViewBoxBaseComponent startOrResetPres = (startSlide: number) => { this.updateCurrentPresentation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (this._presTimer && this.layoutDoc.presStatus === "auto") { clearInterval(this._presTimer); this.layoutDoc.presStatus = "manual"; @@ -250,7 +252,7 @@ export class PresBox extends ViewBoxBaseComponent clearInterval(this._presTimer); this.layoutDoc.presStatus = "manual"; } - }, activeItem.presDuration ? NumCast(activeItem.presDuration) : 2000); + }, targetDoc.presDuration ? NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition) : 2000); // for (let i = this.itemIndex + 1; i <= this.childDocs.length; i++) { // if (this.itemIndex + 1 === this.childDocs.length) { // clearTimeout(this._presTimer); @@ -323,12 +325,15 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch movementChanged = action((movement: string) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (movement === 'zoom') { activeItem.presZoomButton = !activeItem.presZoomButton; activeItem.presNavButton = false; } else if (movement === 'nav') { activeItem.presZoomButton = false; activeItem.presNavButton = !activeItem.presNavButton; + } else if (movement === 'swap') { + targetDoc.presTransition = 0; } else { activeItem.presZoomButton = false; activeItem.presNavButton = false; @@ -443,13 +448,29 @@ export class PresBox extends ViewBoxBaseComponent } } + @action + onHideDocumentUntilPressClick = () => { + this.childDocs.forEach((doc, index) => { + const curDoc = Cast(doc, Doc, null); + const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); + if (tagDoc.presEffect === 'None' || !tagDoc.presEffect) { + tagDoc.opacity = 1; + } else { + if (index <= this.itemIndex) { + tagDoc.opacity = 1; + } else { + tagDoc.opacity = 0; + } + } + }); + } + @observable private transitionTools: boolean = false; @observable private newDocumentTools: boolean = false; @observable private progressivizeTools: boolean = false; @observable private moreInfoTools: boolean = false; @observable private playTools: boolean = false; - @observable private pathBoolean: boolean = false; // For toggling transition toolbar @@ -556,11 +577,11 @@ export class PresBox extends ViewBoxBaseComponent paths.push(); } } @@ -608,15 +629,24 @@ export class PresBox extends ViewBoxBaseComponent if (targetDoc) targetDoc.presTransition = timeInMS; } + setDurationTime = (number: String) => { + const timeInMS = Number(number) * 1000; + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (targetDoc) targetDoc.presDuration = timeInMS; + } + @computed get transitionDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (activeItem) { const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - const transitionSpeed = targetDoc ? String(Number(targetDoc.presTransition) / 1000) : 0.5; - const visibilityTime = targetDoc ? String(Number(targetDoc.presTransition) / 1000) : 0.5; - const thumbLocation = String(-9.48 * Number(transitionSpeed) + 93); + const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; + const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; + const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93); + const durationThumbLocation = String(9.48 * Number(duration)); const movement = activeItem.presZoomButton ? 'Zoom' : activeItem.presNavbutton ? 'Navigate' : 'None'; + const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; const visibility = activeItem.presFadeButton ? 'Fade' : activeItem.presHideTillShownButton ? 'Hide till shown' : activeItem.presHideAfter ? 'Hide on exit' : 'None'; return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> @@ -632,37 +662,30 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan
+
e.stopPropagation()} onClick={() => this.movementChanged('swap')}>Swap
) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
-
{transitionSpeed}s
+
{transitionSpeed}s
Slow
Medium
Fast
- Visibility + Duration
e.stopPropagation()} - // onClick={() => this.dropdownToggle('Movement')} > - {visibility} - -
e.stopPropagation()}> -
e.stopPropagation()} onClick={() => this.visibilityChanged('none')}>None
-
e.stopPropagation()} onClick={() => this.visibilityChanged('fade')}>Fade on exit
-
e.stopPropagation()} onClick={() => this.visibilityChanged('hideAfter')}>Hide on exit
-
e.stopPropagation()} onClick={() => this.visibilityChanged('hideBefore')}>Hidden til presented
-
+ {duration} seconds
-
{transitionSpeed}s
- ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> -
-
Slow
-
Medium
-
Fast
+ ) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} /> +
+
{duration}s
+
Short
+
+
Long
{/*
Fade After
*/} {/*
console.log("hide before")}>Hide Before
*/} @@ -674,12 +697,24 @@ export class PresBox extends ViewBoxBaseComponent onPointerDown={e => e.stopPropagation()} // onClick={() => this.dropdownToggle('Movement')} > - None + {effect}
e.stopPropagation()}> -
e.stopPropagation()}>None
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'None'}>None
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Fade'}>Fade In
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Flip'}>Flip
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Rotate'}>Rotate
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Bounce'}>Bounce
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Roll'}>Roll
+
+
targetDoc.presEffectDirection = 'left'}>
+
targetDoc.presEffectDirection = 'right'}>
+
targetDoc.presEffectDirection = 'top'}>
+
targetDoc.presEffectDirection = 'bottom'}>
+
targetDoc.presEffectDirection = false}>
+
{this._selectedArray.length} selected @@ -688,10 +723,10 @@ export class PresBox extends ViewBoxBaseComponent
-
+
this.applyTo(this._selectedArray)}> Apply to selected
-
+
this.applyTo(this.childDocs)}> Apply to all
@@ -700,6 +735,20 @@ export class PresBox extends ViewBoxBaseComponent } } + applyTo = (array: Doc[]) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + array.forEach((doc, index) => { + const curDoc = Cast(doc, Doc, null); + const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); + if (tagDoc && targetDoc) { + tagDoc.presTransition = targetDoc.presTransition; + tagDoc.presDuration = targetDoc.presDuration; + tagDoc.presEffect = targetDoc.presEffect; + } + }); + } + public inputRef = React.createRef(); @@ -846,7 +895,22 @@ export class PresBox extends ViewBoxBaseComponent @computed get moreInfoDropdown() { return (
); + } + + @computed get effectOpenBracket() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (targetDoc.presEffect && this.itemIndex) { + return ("<" + targetDoc.presEffect + "when=" + this.layoutDoc === PresBox.Instance.childDocs[this.itemIndex].presentationTargetDoc + ">"); + } else return; + } + @computed get effectCloseBracket() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (targetDoc.presEffect && this.itemIndex) { + return (""); + } else return; } @computed get toolbar() { @@ -895,8 +959,11 @@ export class PresBox extends ViewBoxBaseComponent
-
-
+ +

uppercase

+ +
+
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts index 452882e09..799a3ee6f 100644 --- a/src/typings/index.d.ts +++ b/src/typings/index.d.ts @@ -6,7 +6,10 @@ declare module 'cors'; declare module 'webrtc-adapter'; declare module 'bezier-curve'; -declare module 'fit-curve' +declare module 'fit-curve'; +declare module 'reveal'; +declare module 'react-reveal'; +declare module 'react-reveal/makeCarousel'; declare module '@react-pdf/renderer' { diff --git a/tsconfig.json b/tsconfig.json index 803245ca6..b06cec79f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,8 @@ "es2015" ], "typeRoots": [ - "node_modules/@types" + "node_modules/@types", + "./src/typings" ], "types": [ "youtube" -- cgit v1.2.3-70-g09d2 From b5972bca2024f2d7ac5cb8762408dbe9be56e1e1 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Fri, 17 Jul 2020 18:05:17 -0400 Subject: highlighting different cases of object types in schema view --- src/client/views/EditableView.tsx | 30 +++++++++++--- .../views/collections/CollectionSchemaCells.tsx | 47 +++++++++++++++++----- 2 files changed, 61 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index fd687328c..f5a9716cd 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -6,6 +6,8 @@ import { ObjectField } from '../../fields/ObjectField'; import { SchemaHeaderField } from '../../fields/SchemaHeaderField'; import "./EditableView.scss"; import { DragManager } from '../util/DragManager'; +import { ComputedField } from '../../fields/ScriptField'; +import { FieldValue } from '../../fields/Types'; export interface EditableProps { /** @@ -54,6 +56,8 @@ export interface EditableProps { placeholder?: string; highlight?: boolean; positions?: number[]; + search?: string; + bing?: () => string; } /** @@ -183,8 +187,26 @@ export class EditableView extends React.Component { />; } + returnHighlights() { + let results = []; + let length = this.props.search!.length + 1; + let contents = ""; + contents = this.props.bing!(); + console.log(contents); + // contents = String(this.props.contents.valueOf()); + results.push({contents ? contents.slice(0, this.props.positions![0]) : this.props.placeholder?.valueOf()}); + this.props.positions?.forEach((num, cur) => { + results.push({contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}); + let end = 0; + cur === this.props.positions!.length - 1 ? end = contents.length - 1 : end = this.props.positions![cur + 1]; + results.push({contents ? contents.slice(num + length - 1, end) : this.props.placeholder?.valueOf()}); + } + ) + + return results; + } + render() { - console.log(this.props.contents.valueOf()) if (this._editing && this.props.GetValue() !== undefined) { return this.props.sizeToContent ?
@@ -198,10 +220,8 @@ export class EditableView extends React.Component { ref={this._ref} style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }} onClick={this.onClick} placeholder={this.props.placeholder}> - {this.props.highlight ? this.props.contents.forEach(el => { - console.log(el.valueOf()); - }) : undefined} - {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()} + {this.props.highlight === undefined ? {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()} + : this.returnHighlights()}
); } diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 3fc29c46e..6fc0026e5 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -245,43 +245,67 @@ export class CollectionSchemaCell extends React.Component { // ); trace(); let positions = []; - if (type === "string") { - let term = contents + if (StrCast(this.props.Document._searchString) !== "") { + console.log(StrCast(this.props.Document._searchString)); + const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); + // if (cfield[Text]!==undefined){ + + // } + console.log(cfield?.valueOf()); + let term = StrCast(cfield); + console.log(term); let search = StrCast(this.props.Document._searchString) let start = term.indexOf(search) as number; let tally = 0; positions.push(start); while (start < contents.length && start !== -1) { - console.log(start, search.length + 1); - console.log(term.slice(start, start + search.length + 1)); term = term.slice(start + search.length + 1); tally += start + search.length + 1; - console.log(term); start = term.indexOf(search); positions.push(tally + start); - console.log(start); } - positions.pop(); console.log(positions); + if (positions.length > 1) { + positions.pop(); + } } - StrCast(this.props.Document._searchString) ? console.log(StrCast(this.props.Document._searchString)) : undefined; - return (
0 ? positions : undefined} + search={StrCast(this.props.Document._searchString) ? StrCast(this.props.Document._searchString) : undefined} editing={this._isEditing} isEditingCallback={this.isEditingCallback} display={"inline"} contents={contents ? contents : type === "number" ? "0" : "undefined"} - highlight={true} + highlight={positions.length > 0 ? true : undefined} //contents={StrCast(contents)} height={"auto"} maxHeight={Number(MAX_ROW_HEIGHT)} placeholder={"enter value"} + bing={() => { + console.log("FLAMINGO"); + if (type === "number" && (contents === 0 || contents === "0")) { + return "0"; + } else { + const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); + console.log(cfield); + // if (type === "number") { + return StrCast(cfield); + // } + // return cfield; + // const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined; + // const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1]; + // const val = cscript !== undefined ? (cfinalScript?.endsWith(";") ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` : cfinalScript) : + // Field.IsField(cfield) ? Field.toScriptString(cfield) : ""; + // return val; + + } + + }} GetValue={() => { if (type === "number" && (contents === 0 || contents === "0")) { return "0"; @@ -296,6 +320,7 @@ export class CollectionSchemaCell extends React.Component { const val = cscript !== undefined ? (cfinalScript?.endsWith(";") ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` : cfinalScript) : Field.IsField(cfield) ? Field.toScriptString(cfield) : ""; return val; + } }} -- cgit v1.2.3-70-g09d2 From ad6762c369fd0933326579707ecbc34fda42ab6c Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Mon, 20 Jul 2020 22:53:08 +0800 Subject: ui updates + progressivize features --- deploy/index.html | 1 + src/client/documents/Documents.ts | 3 + src/client/views/collections/CollectionMenu.scss | 60 +-- .../collectionFreeForm/CollectionFreeFormView.scss | 56 ++- .../collectionFreeForm/CollectionFreeFormView.tsx | 62 ++- .../views/nodes/CollectionFreeFormDocumentView.tsx | 34 +- src/client/views/nodes/PresBox.scss | 68 ++- src/client/views/nodes/PresBox.tsx | 504 +++++++++++++++------ .../views/presentationview/PresElementBox.scss | 40 +- .../views/presentationview/PresElementBox.tsx | 25 +- 10 files changed, 602 insertions(+), 251 deletions(-) (limited to 'src') diff --git a/deploy/index.html b/deploy/index.html index 82e8c53a3..990ca510d 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -3,6 +3,7 @@ Dash Web + diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 080369afe..89a7c0f18 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -133,8 +133,11 @@ export interface DocumentOptions { currentFrame?: number; // the current frame of a frame-based collection (e.g., progressive slide) lastFrame?: number; // the last frame of a frame-based collection (e.g., progressive slide) activeFrame?: number; // the active frame of a document in a frame base collection + appearFrame?: number; // the frame in which the document appears presTransition?: number; //the time taken for the transition TO a document presDuration?: number; //the duration of the slide in presentation view + // xArray?: number[]; + // yArray?: number[]; borderRounding?: string; boxShadow?: string; dontRegisterChildViews?: boolean; diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 348b9e6ea..929c22c35 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -312,44 +312,44 @@ align-items: center; .fwdKeyframe, - .numKeyframe, - .backKeyframe { - cursor: pointer; - position: absolute; - width: 20; - height: 30; - bottom: 0; - background: #121721; - display: flex; - align-items: center; - color: white; - } +.numKeyframe, +.backKeyframe { + cursor: pointer; + position: absolute; + width: 20; + height: 30; + bottom: 0; + background: #121721; + display: flex; + align-items: center; + color: white; +} - .backKeyframe { - left: 0; +.backKeyframe { + left: 0; - svg { - display: block; - margin: auto; - } + svg { + display: block; + margin: auto; } +} - .numKeyframe { - left: 20; - display: flex; - flex-direction: column; - padding: 5px; - } +.numKeyframe { + left: 20; + display: flex; + flex-direction: column; + padding: 5px; +} - .fwdKeyframe { - left: 40; +.fwdKeyframe { + left: 40; - svg { - display: block; - margin: auto; - } + svg { + display: block; + margin: auto; } } +} .collectionSchemaViewChrome-cont { display: flex; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index fad90ca32..b50a93775 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -46,21 +46,69 @@ } } +.pathOrder { + position: absolute; + z-index: 200000; + + .pathOrder-frame { + position: absolute; + width: 40; + text-align: center; + font-size: 30; + background-color: #69a6db; + font-family: Roboto; + font-weight: 300; + } +} + .progressivizeButton { position: absolute; - display: flex; + display: grid; + grid-template-columns: auto 20px auto; transform: translate(-105%, 0); align-items: center; border: black solid 1px; border-radius: 3px; justify-content: center; - width: 30; + width: 40; + z-index: 30000; height: 20; - background-color: #c8c8c8; + overflow: hidden; + background-color: #d5dce2; + transition: all 1s; + + .progressivizeButton-prev:hover { + color: #5a9edd; + } + + .progressivizeButton-frame { + justify-self: center; + text-align: center; + width: 15px; + } + + .progressivizeButton-next:hover { + color: #5a9edd; + } +} + +.progressivizeMove-frame { + width: 40px; + border-radius: 2px; + z-index: 100000; + color: white; + text-align: center; + background-color: #5a9edd; + transform: translate(-105%, -110%); } .progressivizeButton:hover { - background-color: #aedef8; + box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5); + + .progressivizeButton-frame { + background-color: #5a9edd; + color: white; + } } .collectionFreeform-customText { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 45c5c6a40..953b218b2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1408,7 +1408,7 @@ export class CollectionFreeFormView extends CollectionSubView @@ -1493,44 +1493,56 @@ interface CollectionFreeFormViewPannableContentsProps { children: () => JSX.Element[]; transition?: string; presPaths?: boolean; - // progressivize?: boolean; + progressivize?: boolean; } @observer class CollectionFreeFormViewPannableContents extends React.Component{ - // @computed get progressivize() { - // if (this.props.progressivize) { - // console.log("should render"); - // return ( - // <> - // {PresBox.Instance.progressivizeChildDocs} - // - // ); - // } - // } + @computed get progressivize() { + if (this.props.progressivize) { + console.log("should render"); + return ( + <> + {PresBox.Instance.progressivizeChildDocs} + + ); + } + } @computed get presPaths() { const presPaths = "presPaths" + (this.props.presPaths ? "" : "-hidden"); if (this.props.presPaths) { return ( - - - - - - - - - ; + <> +
{PresBox.Instance.order}
+ + + + + + + + + + + + + + + + ; {PresBox.Instance.paths} - + + ); } } render() { - trace(); + // trace(); const freeformclass = "collectionfreeformview" + (this.props.viewDefDivClick ? "-viewDef" : "-none"); const cenx = this.props.centeringShiftX(); const ceny = this.props.centeringShiftY(); @@ -1544,7 +1556,7 @@ class CollectionFreeFormViewPannableContents extends React.Component {this.props.children()} {this.presPaths} - {/* {this.progressivize} */} + {this.progressivize}
; } } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index b975e24e2..2cf2ab35d 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -119,18 +119,23 @@ export class CollectionFreeFormDocumentView extends DocComponent(numberRange(timecode + 1).map(i => undefined) as any as number[]); const ylist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); - const olist = new List(numberRange(timecode + 1).map(t => progressivize && t < i ? 0 : 1)); - const oarray: number[] = []; + const olist = new List(numberRange(timecode + 1).map(t => progressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); + let oarray: List; console.log(doc.title + "AF: " + doc.appearFrame); console.log("timecode: " + timecode); + oarray = olist; oarray.fill(0, 0, NumCast(doc.appearFrame) - 1); oarray.fill(1, NumCast(doc.appearFrame), timecode); + // oarray.fill(0, 0, NumCast(doc.appearFrame) - 1); + // oarray.fill(1, NumCast(doc.appearFrame), timecode); console.log(oarray); xlist[curTimecode] = NumCast(doc.x); ylist[curTimecode] = NumCast(doc.y); + doc.xArray = xlist; + doc.yArray = ylist; doc["x-indexed"] = xlist; doc["y-indexed"] = ylist; - doc["opacity-indexed"] = olist; + doc["opacity-indexed"] = oarray; doc.activeFrame = ComputedField.MakeFunction("self.context?.currentFrame||0"); doc.x = ComputedField.MakeInterpolated("x", "activeFrame"); doc.y = ComputedField.MakeInterpolated("y", "activeFrame"); @@ -157,14 +162,23 @@ export class CollectionFreeFormDocumentView extends DocComponent; if (this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc) { + const effectProps = { + left: this.layoutDoc.presEffectDirection === 'left', + right: this.layoutDoc.presEffectDirection === 'right', + top: this.layoutDoc.presEffectDirection === 'top', + bottom: this.layoutDoc.presEffectDirection === 'bottom', + opposite: true, + delay: this.layoutDoc.presTransition, + // when: this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc, + }; switch (this.layoutDoc.presEffect) { - case "Zoom": return ({node}); break; - case "Fade": return ({node}); break; - case "Flip": return ({node}); break; - case "Rotate": return ({node}); break; - case "Bounce": return ({node}); break; - case "Roll": return ({node}); break; - case "LightSpeed": return ({node}); break; + case "Zoom": return ({node}); break; + case "Fade": return ({node}); break; + case "Flip": return ({node}); break; + case "Rotate": return ({node}); break; + case "Bounce": return ({node}); break; + case "Roll": return ({node}); break; + case "LightSpeed": return ({node}); break; case "None": return node; break; default: return node; break; } diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index bf31f71d2..45bb4293b 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -3,6 +3,7 @@ display: block; pointer-events: inherit; z-index: 2; + font-family: Roboto; box-shadow: #AAAAAA .2vw .2vw .4vw; width: 100%; min-width: 20px; @@ -16,7 +17,7 @@ position: relative; height: calc(100% - 25px); width: 100%; - margin-top: 10px; + margin-top: 3px; } .presBox-toolbar { @@ -39,12 +40,6 @@ display: flex; align-items: center; transition: 0.5s; - - @media only screen and (max-width: 400) { - .toolbar-buttonText { - display: none; - } - } } .toolbar-button.active { @@ -116,6 +111,7 @@ .presBox-ribbon { position: relative; display: none; + font-family: Roboto; background-color: white; color: black; width: 100%; @@ -123,6 +119,10 @@ z-index: 100; transition: 0.7s; + .ribbon-doubleButton { + display: inline-flex; + } + .toolbar-slider { position: relative; align-self: center; @@ -199,16 +199,56 @@ .ribbon-textInput { border-radius: 2px; - height: 25px; + height: 20px; font-size: 10; font-weight: 100; align-self: center; justify-self: center; padding-left: 10px; border: solid 1px black; + min-width: 80px; width: 100%; } + .ribbon-frameSelector { + border: black solid 1px; + width: 60px; + height: 20px; + display: grid; + grid-template-columns: auto 27px auto; + position: relative; + border-radius: 5px; + overflow: hidden; + align-items: center; + justify-self: left; + + .fwdKeyframe, + .backKeyframe { + cursor: pointer; + position: relative; + height: 100%; + background: #d5dce2; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: black; + } + + .numKeyframe { + font-size: 10; + font-weight: 600; + position: relative; + color: black; + display: flex; + width: 100%; + height: 100%; + text-align: center; + align-items: center; + justify-content: center; + } + } + .ribbon-final-box { align-self: flex-start; justify-self: center; @@ -279,10 +319,12 @@ .ribbon-button { font-size: 10; font-weight: 200; - height: 25; + height: 20; border: solid 1px black; display: flex; - border-radius: 10px; + margin-top: 5px; + margin-bottom: 5px; + border-radius: 5px; margin-right: 5px; width: max-content; justify-content: center; @@ -326,8 +368,8 @@ display: block; padding-left: 5px; padding-right: 5px; - margin-top: 3; - margin-bottom: 3; + padding-top: 3; + padding-bottom: 3; } .presBox-dropdownOption:hover { @@ -337,7 +379,7 @@ .presBox-dropdownOption.active { position: relative; - background-color: #9CE2F8; + background-color: #aedef8; } .presBox-dropdownOptions { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index fc5e73c81..9b942c065 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -2,10 +2,10 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast, DocCastAsync } from "../../../fields/Doc"; +import { Doc, DocListCast, DocCastAsync, WidthSym } from "../../../fields/Doc"; import { InkTool } from "../../../fields/InkField"; import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; -import { returnFalse, returnOne } from "../../../Utils"; +import { returnFalse, returnOne, numberRange } from "../../../Utils"; import { documentSchema } from "../../../fields/documentSchemas"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; @@ -25,6 +25,9 @@ import { SearchUtil } from "../../util/SearchUtil"; import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; import { child } from "serializr"; import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal'; +import { List } from "../../../fields/List"; +import { Tooltip } from "@material-ui/core"; +import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; @@ -60,11 +63,21 @@ export class PresBox extends ViewBoxBaseComponent this.rootDoc._forceRenderEngine = "timeline"; this.rootDoc._replacedChrome = "replaced"; this.layoutDoc.presStatus = "edit"; - document.addEventListener("keydown", this.keyEvents, false); + // document.addEventListener("keydown", this.keyEvents, false); } - componentWillUnmount() { - document.removeEventListener("keydown", this.keyEvents, false); + // componentWillUnmount() { + // document.removeEventListener("keydown", this.keyEvents, false); + // } + + onPointerOver = () => { + document.addEventListener("keydown", this.keyEvents, true); + // document.addEventListener("keydown", this.keyEvents, false); + } + + onPointerLeave = () => { + // document.removeEventListener("keydown", this.keyEvents, false); + document.removeEventListener("keydown", this.keyEvents, true); } updateCurrentPresentation = () => Doc.UserDoc().activePresentation = this.rootDoc; @@ -114,50 +127,77 @@ export class PresBox extends ViewBoxBaseComponent } } + + @action + onHideDocumentUntilPressClick = () => { + this.childDocs.forEach((doc, index) => { + const curDoc = Cast(doc, Doc, null); + const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); + if (tagDoc.presEffect === 'None' || !tagDoc.presEffect) { + tagDoc.opacity = 1; + } else { + if (index <= this.itemIndex) { + tagDoc.opacity = 1; + } else { + tagDoc.opacity = 0; + } + } + }); + } + /** * This is the method that checks for the actions that need to be performed - * after the document has been presented, which involves 3 button options: + * before the document has been presented, which involves 3 button options: * Hide Until Presented, Hide After Presented, Fade After Presented */ - showAfterPresented = (index: number) => { + @action + hideDocumentInPres = () => { this.updateCurrentPresentation(); - this.childDocs.forEach((doc, ind) => { - const presTargetDoc = doc.presentationTargetDoc as Doc; - //the order of cases is aligned based on priority - if (doc.presHideTillShownButton && ind <= index) { - presTargetDoc.opacity = 1; - } - if (doc.presHideAfterButton && ind < index) { - presTargetDoc.opacity = 0; + this.childDocs.forEach((doc, i) => { + const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); + console.log("HB: " + doc.presHideTillShownButton); + console.log("HA: " + doc.presHideAfterButton); + if (doc.presHideTillShownButton) { + if (i < this.itemIndex) { + console.log(i + 1 + "hide before"); + tagDoc.opacity = 0; + console.log(tagDoc.opacity); + } else { + tagDoc.opacity = 1; + } } - if (doc.presFadeButton && ind < index) { - presTargetDoc.opacity = 0.5; + if (doc.presHideAfterButton) { + if (i > this.itemIndex) { + console.log(i + 1 + "hide after"); + tagDoc.opacity = 0; + console.log(tagDoc.opacity); + } else { + tagDoc.opacity = 1; + } } }); } /** * This is the method that checks for the actions that need to be performed - * before the document has been presented, which involves 3 button options: + * after the document has been presented, which involves 3 button options: * Hide Until Presented, Hide After Presented, Fade After Presented */ - hideIfNotPresented = (index: number) => { + showAfterPresented = (index: number) => { this.updateCurrentPresentation(); - this.childDocs.forEach((key, ind) => { + this.childDocs.forEach((doc, ind) => { + const presTargetDoc = doc.presentationTargetDoc as Doc; //the order of cases is aligned based on priority - const presTargetDoc = key.presentationTargetDoc as Doc; - if (key.hideAfterButton && ind >= index) { - presTargetDoc.opacity = 1; - } - if (key.fadeButton && ind >= index) { + if (doc.presHideTillShownButton && ind <= index) { presTargetDoc.opacity = 1; } - if (key.hideTillShownButton && ind > index) { + if (doc.presHideAfterButton && ind < index) { presTargetDoc.opacity = 0; } }); } + /** * This method makes sure that cursor navigates to the element that * has the option open and last in the group. If not in the group, and it has @@ -224,9 +264,10 @@ export class PresBox extends ViewBoxBaseComponent // this.startPresentation(index); // } this.navigateToElement(this.childDocs[index], fromDoc); - this.hideIfNotPresented(index); - this.showAfterPresented(index); - this.onHideDocumentUntilPressClick(); + // this.hideIfNotPresented(index); + // this.showAfterPresented(index); + this.hideDocumentInPres(); + // this.onHideDocumentUntilPressClick(); } }); @@ -340,24 +381,6 @@ export class PresBox extends ViewBoxBaseComponent } }); - @undoBatch - visibilityChanged = action((visibility: string) => { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - if (visibility === 'fade') { - activeItem.presFadeButton = !activeItem.presFadeButton; - } else if (visibility === 'hideBefore') { - activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton; - activeItem.presHideAfterButton = false; - } else if (visibility === 'hideAfter') { - activeItem.presHideAfterButton = !activeItem.presHideAfterButton; - activeItem.presHideAfterButton = false; - } else { - activeItem.presHideAfterButton = false; - activeItem.presHideTillShownButton = false; - activeItem.presFadeButton = false; - } - }); - whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; @@ -433,39 +456,21 @@ export class PresBox extends ViewBoxBaseComponent if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; else this.layoutDoc.presStatus = "edit"; // Ctrl-A to select all - } else if ((e.metaKey || e.altKey) && e.keyCode === 65) { + } if ((e.metaKey || e.altKey) && e.keyCode === 65) { if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; // left / a / up to go back - } else if (e.keyCode === 37 || 65 || 38) { + } if (e.keyCode === 37 || 65 || 38) { if (this.layoutDoc.presStatus !== "edit") this.back(); // right / d / down to go to next - } else if (e.keyCode === 39 || 68 || 40) { + } if (e.keyCode === 39 || 68 || 40) { if (this.layoutDoc.presStatus !== "edit") this.next(); // spacebar to 'present' or go to next slide - } else if (e.keyCode === 32) { + } if (e.keyCode === 32) { if (this.layoutDoc.presStatus !== "edit") this.next(); else this.layoutDoc.presStatus = "manual"; } } - @action - onHideDocumentUntilPressClick = () => { - this.childDocs.forEach((doc, index) => { - const curDoc = Cast(doc, Doc, null); - const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); - if (tagDoc.presEffect === 'None' || !tagDoc.presEffect) { - tagDoc.opacity = 1; - } else { - if (index <= this.itemIndex) { - tagDoc.opacity = 1; - } else { - tagDoc.opacity = 0; - } - } - }); - } - - @observable private transitionTools: boolean = false; @observable private newDocumentTools: boolean = false; @observable private progressivizeTools: boolean = false; @@ -562,30 +567,60 @@ export class PresBox extends ViewBoxBaseComponent // } } + @computed get order() { + const order: JSX.Element[] = []; + this.childDocs.forEach((doc, index) => { + const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); + order.push( +
+
{index + 1}
+
); + }); + return order; + } + @computed get paths() { - const paths = []; //List of all of the paths that need to be added + // const paths = []; //List of all of the paths that need to be added + let pathPoints = ""; console.log(this.childDocs.length - 1); - for (let i = 0; i <= this.childDocs.length - 1; i++) { - const targetDoc = Cast(this.childDocs[i].presentationTargetDoc, Doc, null); - if (this.childDocs[i + 1] && targetDoc) { - const nextTargetDoc = Cast(this.childDocs[i + 1].presentationTargetDoc, Doc, null); + this.childDocs.forEach((doc, index) => { + const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); + if (targetDoc) { const n1x = NumCast(targetDoc.x) + (NumCast(targetDoc._width) / 2); const n1y = NumCast(targetDoc.y) + (NumCast(targetDoc._height) / 2); - const n2x = NumCast(nextTargetDoc.x) + (NumCast(targetDoc._width) / 2); - const n2y = NumCast(nextTargetDoc.y) + (NumCast(targetDoc._height) / 2); - const pathPoints = n1x + "," + n1y + " " + n2x + "," + n2y; - paths.push(); + // const n2x = NumCast(nextTargetDoc.x) + (NumCast(targetDoc._width) / 2); + // const n2y = NumCast(nextTargetDoc.y) + (NumCast(targetDoc._height) / 2); + if (index = 0) pathPoints = n1x + "," + n1y; + else pathPoints = pathPoints + " " + n1x + "," + n1y; + // const pathPoints = n1x + "," + n1y + " " + n2x + "," + n2y; + // else pathPoints = pathPoints + " " + n1x + "," + n1y; + // paths.push(); } - } - return paths; + }); + console.log(pathPoints); + // return paths; + return (); } @action togglePath = () => this.pathBoolean = !this.pathBoolean; @@ -638,16 +673,14 @@ export class PresBox extends ViewBoxBaseComponent @computed get transitionDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - - if (activeItem) { - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + if (activeItem && targetDoc) { const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93); const durationThumbLocation = String(9.48 * Number(duration)); const movement = activeItem.presZoomButton ? 'Zoom' : activeItem.presNavbutton ? 'Navigate' : 'None'; const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; - const visibility = activeItem.presFadeButton ? 'Fade' : activeItem.presHideTillShownButton ? 'Hide till shown' : activeItem.presHideAfter ? 'Hide on exit' : 'None'; return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
@@ -669,16 +702,15 @@ export class PresBox extends ViewBoxBaseComponent
{transitionSpeed}s
Slow
-
Medium
+
Fast
- Duration -
e.stopPropagation()} - > - {duration} seconds + Visibility +
+
{"Hide before presented"}
}>
activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton}>HB
 +
{"Hide after presented"}
}>
activeItem.presHideAfterButton = !activeItem.presHideAfterButton}>HA
) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} />
@@ -709,11 +741,11 @@ export class PresBox extends ViewBoxBaseComponent
-
targetDoc.presEffectDirection = 'left'}>
-
targetDoc.presEffectDirection = 'right'}>
-
targetDoc.presEffectDirection = 'top'}>
-
targetDoc.presEffectDirection = 'bottom'}>
-
targetDoc.presEffectDirection = false}>
+
{"Enter from left"}
}>
targetDoc.presEffectDirection = 'left'}>
 +
{"Enter from right"}
}>
targetDoc.presEffectDirection = 'right'}>
 +
{"Enter from top"}
}>
targetDoc.presEffectDirection = 'top'}>
 +
{"Enter from bottom"}
}>
targetDoc.presEffectDirection = 'bottom'}>
 +
{"Enter from center"}
}>
targetDoc.presEffectDirection = false}>
@@ -782,9 +814,9 @@ export class PresBox extends ViewBoxBaseComponent
Choose type: -
-
{ type = "text"; }}>Text
-
{ type = "freeform"; }}>Freeform
+
+
{ type = "text"; })}>Text
+
{ type = "freeform"; })}>Freeform
@@ -810,17 +842,43 @@ export class PresBox extends ViewBoxBaseComponent ); } - progressivizeOptions = (viewType: string) => { - const buttons = []; - buttons.push(
Progressivize child documents
); - buttons.push(
console.log("hide after")}>Internal navigation
); - if (viewType === "rtf") { - buttons.push(
console.log("hide after")}>Bullet points
); + // progressivizeOptions = (viewType: string) => { + // const buttons = []; + // buttons.push(
Child documents
); + // buttons.push(
console.log("hide after")}>Internal zoom
); + // buttons.push(
console.log("hide after")}>Bullet points
); + // if (viewType === "rtf") { + // buttons.push(
console.log("hide after")}>Bullet points
); + // } + // return buttons; + // } + + @undoBatch + @action + nextKeyframe = (tagDoc: Doc): void => { + const childDocs = DocListCast(tagDoc[Doc.LayoutFieldKey(tagDoc)]); + const currentFrame = Cast(tagDoc.currentFrame, "number", null); + if (currentFrame === undefined) { + tagDoc.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } - return buttons; + CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); + tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1); + tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), NumCast(tagDoc.lastFrame)); } - + @undoBatch + @action + prevKeyframe = (tagDoc: Doc): void => { + const childDocs = DocListCast(tagDoc[Doc.LayoutFieldKey(tagDoc)]); + const currentFrame = Cast(tagDoc.currentFrame, "number", null); + if (currentFrame === undefined) { + tagDoc.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); + } + CollectionFreeFormDocumentView.gotoKeyframe(childDocs.slice()); + tagDoc.currentFrame = Math.max(0, (currentFrame || 0) - 1); + } @computed get progressivizeDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); @@ -832,16 +890,38 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{targetDoc.type} selected -
-
1. {targetDoc.title}
+
+
{targetDoc.title}
+
+
+
+
{ e.stopPropagation(); this.prevKeyframe(targetDoc); }}> + +
+
targetDoc.editing = !targetDoc.editing)} > + {NumCast(targetDoc.currentFrame)} +
+
{ e.stopPropagation(); this.nextKeyframe(targetDoc); }}> + +
+
+
{"Last frame"}
}>
{NumCast(targetDoc.lastFrame)}
-
-
Progressivize child documents
-
Edit
+
+
Child documents
+
Edit
+
+
+
Internal zoom
+
Edit
+
+
+
Text progressivize
+
Edit
-
console.log("hide after")}>Internal navigation
@@ -849,8 +929,38 @@ export class PresBox extends ViewBoxBaseComponent } } + //Progressivize Zoom @action - editProgressivize = (e: React.MouseEvent) => { + zoomProgressivize = (e: React.MouseEvent) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + targetDoc.currentFrame = targetDoc.lastFrame; + if (targetDoc?.zoomProgressivize) { + targetDoc.zoomProgressivize = false; + } else { + targetDoc.zoomProgressivize = true; + } + } + + @action + progressivizeZoom = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + activeItem.zoomProgressivize = !activeItem.zoomProgressivize; + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); + targetDoc.zoomProgressivize = !targetDoc.zoomProgressivize; + console.log(targetDoc.zoomProgressivize); + if (activeItem.zoomProgressivize) { + console.log("progressivize"); + targetDoc.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); + } + } + + //Progressivize Text nodes + @action + textProgressivize = (e: React.MouseEvent) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); targetDoc.currentFrame = targetDoc.lastFrame; @@ -862,7 +972,7 @@ export class PresBox extends ViewBoxBaseComponent } @action - progressivize = (e: React.MouseEvent) => { + progressivizeText = (e: React.MouseEvent) => { e.stopPropagation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); activeItem.presProgressivize = !activeItem.presProgressivize; @@ -878,67 +988,163 @@ export class PresBox extends ViewBoxBaseComponent } } + //Progressivize Child Docs + @action + editProgressivize = (e: React.MouseEvent) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + targetDoc.currentFrame = targetDoc.lastFrame; + if (targetDoc?.editProgressivize) { + targetDoc.editProgressivize = false; + } else { + targetDoc.editProgressivize = true; + } + } + + @action + progressivizeChild = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); + if (!activeItem.presProgressivize) { + activeItem.presProgressivize = true; + targetDoc.presProgressivize = true; + targetDoc.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); + targetDoc.lastFrame = docs.length - 1; + } else { + activeItem.presProgressivize = false; + targetDoc.presProgressivize = false; + docs.forEach((doc, index) => { + doc.appearFrame = 0; + }); + targetDoc.currentFrame = 0; + targetDoc.lastFrame = 0; + } + } + + @action + checkMovementLists = (doc: Doc, xlist: any, ylist: any) => { + const x: List = xlist; + const y: List = ylist; + const tags: JSX.Element[] = []; + let pathPoints = ""; //List of all of the paths that need to be added + // console.log(x); + // console.log(x.length); + // console.log(x[0]); + for (let i = 0; i < x.length - 1; i++) { + if (y[i] || x[i]) { + if (i === 0) pathPoints = (x[i] - 11) + "," + (y[i] + 33); + else pathPoints = pathPoints + " " + (x[i] - 11) + "," + (y[i] + 33); + tags.push(
{i}
); + } + } + tags.push(); + return tags; + } + + @observable + toggleDisplayMovement = (doc: Doc) => { + if (doc.displayMovement) doc.displayMovement = false; + else doc.displayMovement = true; + } + @computed get progressivizeChildDocs() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); const tags: JSX.Element[] = []; docs.forEach((doc, index) => { + if (doc["x-indexed"] && doc["y-indexed"]) { + tags.push(
{this.checkMovementLists(doc, doc["x-indexed"], doc["y-indexed"])}
); + } tags.push( -
{doc.appearFrame}
- ); +
{ if (NumCast(targetDoc.currentFrame) < NumCast(doc.appearFrame)) doc.opacity = 0; }} onPointerOver={() => { if (NumCast(targetDoc.currentFrame) < NumCast(doc.appearFrame)) doc.opacity = 0.5; }} onClick={e => { this.toggleDisplayMovement(doc); e.stopPropagation(); }} style={{ backgroundColor: doc.displayMovement ? "#aedff8" : "#c8c8c8", top: NumCast(doc.y), left: NumCast(doc.x) }}> +
{ e.stopPropagation(); this.prevAppearFrame(doc, index); }} />
+
{doc.appearFrame}
+
{ e.stopPropagation(); this.nextAppearFrame(doc, index); }} />
+
); }); return tags; } - - - @computed get moreInfoDropdown() { - return (
); + @undoBatch + @action + nextAppearFrame = (doc: Doc, i: number): void => { + console.log("next"); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const appearFrame = Cast(doc.appearFrame, "number", null); + if (appearFrame === undefined) { + doc.appearFrame = 0; + } + doc.appearFrame = appearFrame + 1; + const olist = new List(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); + doc["opacity-indexed"] = olist; + console.log(doc.appearFrame); } - @computed get effectOpenBracket() { + @undoBatch + @action + prevAppearFrame = (doc: Doc, i: number): void => { + console.log("prev"); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (targetDoc.presEffect && this.itemIndex) { - return ("<" + targetDoc.presEffect + "when=" + this.layoutDoc === PresBox.Instance.childDocs[this.itemIndex].presentationTargetDoc + ">"); - } else return; + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const appearFrame = Cast(doc.appearFrame, "number", null); + if (appearFrame === undefined) { + doc.appearFrame = 0; + } + doc.appearFrame = Math.max(0, appearFrame - 1); + const olist = new List(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); + doc["opacity-indexed"] = olist; + console.log(doc.appearFrame); } - @computed get effectCloseBracket() { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (targetDoc.presEffect && this.itemIndex) { - return (""); - } else return; + @computed get moreInfoDropdown() { + return (
); } @computed get toolbar() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - + const parent = document.getElementById('toolbarContainer'); + let width = 0; + if (parent) width = parent.offsetWidth; + console.log(width); if (activeItem) { return ( <> -
+
{"Add new slide"}
}>
-
+
-
+
{"View paths"}
}>
+ +
{/*
*/}
-
  Transitions
+
400 ? "block" : "none" }} className="toolbar-buttonText">  Transitions
-
  Progressivize
+
400 ? "block" : "none" }} className="toolbar-buttonText">  Progressivize
-
+
@@ -977,7 +1183,7 @@ export class PresBox extends ViewBoxBaseComponent render() { this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; - return
+ return
- + {/* */}
0 ? { overflow: "visible" } : { overflow: "hidden" }}>
-- cgit v1.2.3-70-g09d2 From d995b381343c9f286c80b5c8268e3697c05c2566 Mon Sep 17 00:00:00 2001 From: andy temp Date: Tue, 21 Jul 2020 18:04:16 -0400 Subject: search bar on topnpm start --- src/client/util/CurrentUserUtils.ts | 13 ++++++++- src/client/views/MainView.tsx | 42 ++++++++++++++++++++++++++++ src/client/views/collections/SchemaTable.tsx | 2 +- 3 files changed, 55 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index c152a4a64..582cc2d5c 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -657,7 +657,9 @@ export class CurrentUserUtils { const toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer); const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer); const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); - + if (doc["search-panel"] === undefined) { + doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc; + } // Finally, setup the list of buttons to display in the sidebar if (doc["tabs-buttons"] === undefined) { doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], { @@ -666,6 +668,15 @@ export class CurrentUserUtils { })); (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn }); } + + + + // new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], { + // _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode", + // title: "sidebar btn row stack", backgroundColor: "dimGray", + // })); + + } static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f6db1af66..c65c90afb 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -59,6 +59,7 @@ import { DocumentManager } from '../util/DocumentManager'; import { DocumentLinksButton } from './nodes/DocumentLinksButton'; import { LinkMenu } from './linking/LinkMenu'; import { LinkDocPreview } from './nodes/LinkDocPreview'; +import { SearchBox } from './search/SearchBox'; @observer export class MainView extends React.Component { @@ -79,6 +80,8 @@ export class MainView extends React.Component { @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } @computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } + @computed public get searchDoc() { return Cast(this.userDoc["search-panel"], Doc) as Doc; } + public isPointerDown = false; @@ -300,6 +303,39 @@ export class MainView extends React.Component { } } } + + @computed get search() { + return ; + } + + + + + @computed get mainDocView() { return ; } + @computed get dockingContent() { TraceMobx(); const mainContainer = this.mainContainer; @@ -461,6 +498,10 @@ export class MainView extends React.Component { @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; return !this.userDoc || !(sidebar instanceof Doc) ? (null) : ( +
+
+ {this.search} +
{this.dockingContent}
+
); } diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index e9f7e3c68..2b60bef1b 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -219,7 +219,7 @@ export class SchemaTable extends React.Component { background: col.color, padding: "2px", display: "flex", cursor: "default", height: "100%", }}> - + {/*
*/} {keysDropdown} -- cgit v1.2.3-70-g09d2 From fd741cddf64fe1b068b7a1de5bc3840798afe75d Mon Sep 17 00:00:00 2001 From: andy temp Date: Wed, 22 Jul 2020 14:42:32 -0400 Subject: search results open and close as panel under bar --- src/client/util/CurrentUserUtils.ts | 2 +- .../views/collections/CollectionSchemaView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 2 +- src/client/views/nodes/FieldView.tsx | 2 ++ src/client/views/search/SearchBox.scss | 2 +- src/client/views/search/SearchBox.tsx | 28 ++++++++++++++++++---- 6 files changed, 29 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 582cc2d5c..f16ef399c 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -658,7 +658,7 @@ export class CurrentUserUtils { const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer); const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); if (doc["search-panel"] === undefined) { - doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc; + doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc; } // Finally, setup the list of buttons to display in the sidebar if (doc["tabs-buttons"] === undefined) { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 50eea5059..be4f7c888 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -631,7 +631,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { return
{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 => diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 3aabd5d6b..8b83a29b2 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -48,10 +48,12 @@ export interface FieldViewProps { ignoreAutoHeight?: boolean; PanelWidth: () => number; PanelHeight: () => number; + PanelPosition: string; NativeHeight: () => number; NativeWidth: () => number; setVideoBox?: (player: VideoBox) => void; ContentScaling: () => number; + ChromeHeight?: () => number; childLayoutTemplate?: () => Opt; highlighting?: string[]; diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 4d057f782..8cd2f00b4 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -17,7 +17,7 @@ .searchBox-bar { height: 32px; display: flex; - justify-content: flex-end; + justify-content: center; align-items: center; background-color: black; .searchBox-barChild { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 884aa6a68..21f476ea4 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -199,13 +199,26 @@ export class SearchBox extends ViewBoxBaseComponent { if (e.key === "Enter") { - if (this._icons !== this._allIcons) { - runInAction(() => { this.expandedBucket = false }); + // if (this._icons !== this._allIcons) { + // runInAction(() => { this.expandedBucket = false }); + // } + console.log(StrCast(this.layoutDoc._searchString)); + if (StrCast(this.layoutDoc._searchString)!==""){ + console.log("OPEN"); + runInAction(()=>{this.open=true}); + } + else { + console.log("CLOSE"); + runInAction(()=>{this.open=false}); + } this.submitSearch(); } } + @observable open: boolean = false; + + public static async convertDataUri(imageUri: string, returnedFilename: string) { try { const posting = Utils.prepend("/uploadURI"); @@ -377,7 +390,6 @@ export class SearchBox extends ViewBoxBaseComponent { this.checkIcons(); @@ -1109,7 +1121,7 @@ export class SearchBox extends ViewBoxBaseComponent */} + style={{ width: this._searchbarOpen ? "200px" : "200px" }} /> {/* */}
0 ? { overflow: "visible" } : { overflow: "hidden" }}> @@ -1123,12 +1135,18 @@ export class SearchBox extends ViewBoxBaseComponent
+
{this.headerscale > 0 ? 200 :()=>0} + PanelWidth={this.open===true? ()=>600 : ()=>0} + PanelPosition={"absolute"} focus={this.selectElement} - ScreenToLocalTransform={Transform.Identity} /> : undefined} + ScreenToLocalTransform={Transform.Identity} + /> : undefined} +
Date: Wed, 22 Jul 2020 22:39:44 -0400 Subject: search --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/views/EditableView.tsx | 5 +- src/client/views/MainView.tsx | 14 ++++ .../views/collections/CollectionSchemaCells.tsx | 10 +-- .../views/collections/CollectionSchemaHeaders.tsx | 42 +++++++++- .../views/collections/CollectionSchemaView.tsx | 5 +- src/client/views/collections/SchemaTable.tsx | 6 +- src/client/views/nodes/FieldView.tsx | 4 +- src/client/views/search/SearchBox.tsx | 91 +++++++++++++++++----- 9 files changed, 135 insertions(+), 44 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index f16ef399c..c7cdf8545 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -658,7 +658,7 @@ export class CurrentUserUtils { const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer); const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); if (doc["search-panel"] === undefined) { - doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc; + doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc; } // Finally, setup the list of buttons to display in the sidebar if (doc["tabs-buttons"] === undefined) { diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 4c2d2f0a9..b78ed6fee 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -195,15 +195,13 @@ export class EditableView extends React.Component { if (this.props.positions!==undefined){ let positions = this.props.positions; let length = this.props.search!.length; - console.log(contents); - console.log(this.props.contents?.valueOf()); + // contents = String(this.props.contents.valueOf()); results.push({contents ? contents.slice(0, this.props.positions![0]) : this.props.placeholder?.valueOf()}); positions.forEach((num, cur) => { results.push({contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}); let end = 0; - console.log cur === positions.length-1? end = contents.length: end = positions[cur + 1]; results.push({contents ? contents.slice(num + length, end) : this.props.placeholder?.valueOf()}); } @@ -217,7 +215,6 @@ else{ } render() { - console.log(this.props.highlight === undefined); if (this._editing && this.props.GetValue() !== undefined) { return this.props.sizeToContent ?
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c65c90afb..fce3707a7 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -156,10 +156,24 @@ export class MainView extends React.Component { const targets = document.elementsFromPoint(e.x, e.y); if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) { ContextMenu.Instance.closeMenu(); + //SearchBox.Instance.closeSearch(); } if (targets && (targets.length && targets[0].className.toString() !== "timeline-menu-desc" && targets[0].className.toString() !== "timeline-menu-item" && targets[0].className.toString() !== "timeline-menu-input")) { TimelineMenu.Instance.closeMenu(); } + if (targets && targets.length && SearchBox.Instance._searchbarOpen){ + let check = false; + targets.forEach((thing)=>{ + if (thing.className.toString()==="collectionSchemaView-table" || thing.className.toString()==="beta") { + check=true; + } + }); + if (check===false){ + SearchBox.Instance.closeSearch(); + } + } + + }); globalPointerUp = () => this.isPointerDown = false; diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index b1c3705ca..11f0edf23 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -246,7 +246,6 @@ export class CollectionSchemaCell extends React.Component { trace(); let positions = []; if (StrCast(this.props.Document._searchString) !== "") { - console.log(StrCast(this.props.Document._searchString)); const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); let term = ""; if (cfield!==undefined){ @@ -262,7 +261,6 @@ export class CollectionSchemaCell extends React.Component { } let search = StrCast(this.props.Document._searchString) let start = term.indexOf(search) as number; - console.log(start); let tally = 0; if (start!==-1){ positions.push(start); @@ -277,7 +275,6 @@ export class CollectionSchemaCell extends React.Component { positions.pop(); } } - console.log(positions.length); return (
@@ -299,18 +296,14 @@ export class CollectionSchemaCell extends React.Component { // return "0"; // } else { const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); - console.log(cfield); if (cfield!==undefined){ if (cfield.Text!==undefined){ - console.log - return(cfield.Text) + return(cfield.Text); } else if (StrCast(cfield)){ - console.log("strcast"); return StrCast(cfield); } else { - console.log("numcast"); return String(NumCast(cfield)); } } @@ -325,7 +318,6 @@ export class CollectionSchemaCell extends React.Component { return "0"; } else { const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); - console.log(cfield); if (type === "number") { return StrCast(cfield); } diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 4a9bd4aa6..ec8605215 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -9,6 +9,8 @@ import { ColumnType } from "./CollectionSchemaView"; import { faFile } from "@fortawesome/free-regular-svg-icons"; import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField"; import { undoBatch } from "../../util/UndoManager"; +import { Doc } from "../../../fields/Doc"; +import { StrCast } from "../../../fields/Types"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -291,6 +293,7 @@ export interface KeysDropdownProps { onSelect: (oldKey: string, newKey: string, addnew: boolean, filter?: string) => void; setIsEditing: (isEditing: boolean) => void; width?: string; + docs?: Doc[]; } @observer export class KeysDropdown extends React.Component { @@ -309,7 +312,6 @@ export class KeysDropdown extends React.Component { if (key.slice(0, this._key.length) === this._key && this._key !== key) { let filter = key.slice(this._key.length - key.length); this.props.onSelect(this._key, this._key, this.props.addNew, filter); - console.log("YEE"); } else { this.props.onSelect(this._key, key, this.props.addNew); @@ -319,6 +321,13 @@ export class KeysDropdown extends React.Component { } } + @action + onSelect2 = (key: string): void => { + this._searchTerm=this._searchTerm.slice(0,this._key.length) +key; + this._isOpen = false; + + } + @undoBatch onKeyDown = (e: React.KeyboardEvent): void => { //if (this._key !==) @@ -394,7 +403,35 @@ export class KeysDropdown extends React.Component { return options; } + renderFilterOptions = (): JSX.Element[] | JSX.Element => { + console.log("HEHEHE") + if (!this._isOpen) return <>; + + const keyOptions:string[]=[]; + console.log(this._searchTerm.slice(this._key.length)) + let temp = this._searchTerm.slice(this._key.length); + this.props.docs?.forEach((doc)=>{ + let key = StrCast(doc[this._key]); + if (keyOptions.includes(key)===false && key.includes(temp)){ + keyOptions.push(key); + } + }); + + + const options = keyOptions.map(key => { + return
e.stopPropagation()} onClick={() => { this.onSelect2(key); }}>{key}
; + }); + + return options; + } + + render() { + console.log(this.props.docs); return (
{this._key === this._searchTerm.slice(0, this._key.length) ? @@ -414,7 +451,8 @@ export class KeysDropdown extends React.Component { width: this.props.width, maxWidth: this.props.width, }} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}> - {this.renderOptions()} + {this._key === this._searchTerm.slice(0, this._key.length) ? + this.renderFilterOptions():this.renderOptions()}
); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index be4f7c888..0b3d8e20d 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -609,7 +609,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { onKeyPress = (e: React.KeyboardEvent) => { - console.log("yeet2"); } render() { TraceMobx(); @@ -631,10 +630,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { return
this.props.active(true) && e.stopPropagation()} diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 2b60bef1b..c820cb661 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -189,7 +189,7 @@ export class SchemaTable extends React.Component { addNew={false} onSelect={this.props.changeColumns} setIsEditing={this.props.setHeaderIsEditing} - + docs={this.props.childDocs} // try commenting this out width={"100%"} />; @@ -451,10 +451,8 @@ export class SchemaTable extends React.Component { //@ts-ignore expandedRowsList.forEach(row => expanded[row] = true); const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :(((( - let overflow = "auto"; - StrCast(this.props.Document.type) === "search" ? overflow = "overlay" : "auto"; return void; ignoreAutoHeight?: boolean; - PanelWidth: () => number; - PanelHeight: () => number; + PanelWidth: () => number|string; + PanelHeight: () => number|string; PanelPosition: string; NativeHeight: () => number; NativeWidth: () => number; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 21f476ea4..ee85375e3 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -73,7 +73,7 @@ export class SearchBox extends ViewBoxBaseComponent SearchUtil.GetViewsOfDocument(doc) + + @observable newsearchstring: string =""; @action.bound onChange(e: React.ChangeEvent) { - this.layoutDoc._searchString = e.target.value; - + //this.layoutDoc._searchString = e.target.value; + this.newsearchstring= e.target.value; + if (e.target.value===""){ + console.log("CLOSE"); + runInAction(()=>{this.open=false}); + } this._openNoResults = false; this._results = []; this._resultsSet.clear(); @@ -199,10 +205,11 @@ export class SearchBox extends ViewBoxBaseComponent { if (e.key === "Enter") { + console.log(this.newsearchstring) + this.layoutDoc._searchString=this.newsearchstring; // if (this._icons !== this._allIcons) { // runInAction(() => { this.expandedBucket = false }); // } - console.log(StrCast(this.layoutDoc._searchString)); if (StrCast(this.layoutDoc._searchString)!==""){ console.log("OPEN"); runInAction(()=>{this.open=true}); @@ -392,11 +399,15 @@ export class SearchBox extends ViewBoxBaseComponent { + this.checkIcons(); if (reset) { this.layoutDoc._searchString = ""; } + this.noresults= false; this.dataDoc[this.fieldKey] = new List([]); + this.headercount=0; + this.children=0; this.buckets = []; this.new_buckets = {}; const query = StrCast(this.layoutDoc._searchString); @@ -519,7 +530,7 @@ export class SearchBox extends ViewBoxBaseComponent(); startDragCollection = async () => { const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString))); @@ -591,6 +602,7 @@ export class SearchBox extends ViewBoxBaseComponent) => { if (!this._resultsRef.current) return; @@ -604,11 +616,7 @@ export class SearchBox extends ViewBoxBaseComponent(); if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { - this._visibleElements = [
No Search Results
]; - //this._visibleDocuments= Docs.Create. - let noResult = Docs.Create.TextDocument("", { title: "noResult" }) - noResult.isBucket = false; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, noResult); + this.noresults=true; return; } @@ -653,6 +661,7 @@ export class SearchBox extends ViewBoxBaseComponent schemaheaders.push(new SchemaHeaderField(item, "#f1efeb"))) + this.headercount= schemaheaders.length; this.props.Document._schemaHeaders = new List(schemaheaders); if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; @@ -688,7 +699,7 @@ export class SearchBox extends ViewBoxBaseComponent 3 ? length = 650 : length = length * 205 + 51; + let height = this.children; + height > 8 ? height = 31+31*8: height = 31*height+ 31; return (
{/* StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection"> */} - {Doc.CurrentUserEmail}
+ + + style={{ paddingLeft:23, width: this._searchbarOpen ? "200px" : "200px" }} /> {/* */}
0 ? { overflow: "visible" } : { overflow: "hidden" }}> @@ -1135,18 +1154,52 @@ export class SearchBox extends ViewBoxBaseComponent
-
- {this.headerscale > 0 ? + {this._searchbarOpen === true ? +
+
0?length: 251, + height: 25, + borderColor: "#9c9396", + border: "1px solid", + borderRadius:"0.3em", + borderBottom:this.open===false?"1px solid":"none", + position: "absolute", + background: "rgb(241, 239, 235)", + top:29}}> +
+ +
+
+ + {this.noresults===false?
200 :()=>0} - PanelWidth={this.open===true? ()=>600 : ()=>0} + PanelHeight={this.open===true?()=> height:()=>0} + PanelWidth={this.open===true? ()=>length : ()=>0} PanelPosition={"absolute"} focus={this.selectElement} ScreenToLocalTransform={Transform.Identity} - /> : undefined} -
+ />
:
+
No search results :(
+
} +
: undefined} +
Date: Wed, 22 Jul 2020 20:54:40 -0700 Subject: turn markers into documents and kind of got linking to work --- src/client/documents/Documents.ts | 3 + src/client/views/nodes/AudioBox.scss | 8 +-- src/client/views/nodes/AudioBox.tsx | 119 +++++++++++++++++++++++++++-------- src/fields/documentSchemas.ts | 4 ++ 4 files changed, 105 insertions(+), 29 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 8e7d125b0..b94670cd5 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -189,6 +189,9 @@ export interface DocumentOptions { searchQuery?: string; // for queryBox filterQuery?: string; linearViewIsExpanded?: boolean; // is linear view expanded + isLabel?: boolean; // whether the document is a label or not (video / audio) + audioStart?: number; // the time frame where the audio should begin playing + audioEnd?: number; // the time frame where the audio should stop playing } class EmptyBox { diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 4a6a471ec..6601c6f24 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -190,10 +190,10 @@ .audiobox-marker-minicontainer { position: absolute; width: 10px; - height: 90%; + height: 10px; top: 2.5%; background: gray; - border-radius: 5px; + border-radius: 50%; box-shadow: black 2px 2px 1px; overflow: auto; @@ -268,14 +268,14 @@ .current-time { position: absolute; font-size: 12; - top: 70%; + top: calc(100% - 10px); left: 30px; color: white; } .total-time { position: absolute; - top: 70%; + top: calc(100% - 10px); font-size: 12; right: 2px; color: white; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index a4e7b0899..5863c8789 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -2,13 +2,13 @@ import React = require("react"); import { FieldViewProps, FieldView } from './FieldView'; import { observer } from "mobx-react"; import "./AudioBox.scss"; -import { Cast, DateCast, NumCast, FieldValue } from "../../../fields/Types"; +import { Cast, DateCast, NumCast, FieldValue, ScriptCast } from "../../../fields/Types"; import { AudioField, nullAudio } from "../../../fields/URLField"; -import { ViewBoxBaseComponent } from "../DocComponent"; +import { ViewBoxBaseComponent, ViewBoxAnnotatableComponent } from "../DocComponent"; import { makeInterface, createSchema } from "../../../fields/Schema"; import { documentSchema } from "../../../fields/documentSchemas"; import { Utils, returnTrue, emptyFunction, returnOne, returnTransparent, returnFalse, returnZero } from "../../../Utils"; -import { runInAction, observable, reaction, IReactionDisposer, computed, action, trace } from "mobx"; +import { runInAction, observable, reaction, IReactionDisposer, computed, action, trace, toJS } from "mobx"; import { DateField } from "../../../fields/DateField"; import { SelectionManager } from "../../util/SelectionManager"; import { Doc, DocListCast } from "../../../fields/Doc"; @@ -18,12 +18,16 @@ import { Id } from "../../../fields/FieldSymbols"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { DocumentView } from "./DocumentView"; import { Docs, DocUtils } from "../../documents/Documents"; -import { ComputedField } from "../../../fields/ScriptField"; +import { ComputedField, ScriptField } from "../../../fields/ScriptField"; import { Networking } from "../../Network"; import { LinkAnchorBox } from "./LinkAnchorBox"; import { FormattedTextBox } from "./formattedText/FormattedTextBox"; import { RichTextField } from "../../../fields/RichTextField"; import { AudioResizer } from "./AudioResizer"; +import { List } from "../../../fields/List"; +import { LabelBox } from "./LabelBox"; +import { Transform } from "../../util/Transform"; +import { Scripting } from "../../util/Scripting"; // testing testing @@ -44,10 +48,12 @@ type AudioDocument = makeInterface<[typeof documentSchema, typeof audioSchema]>; const AudioDocument = makeInterface(documentSchema, audioSchema); @observer -export class AudioBox extends ViewBoxBaseComponent(AudioDocument) { +export class AudioBox extends ViewBoxAnnotatableComponent(AudioDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); } public static Enabled = false; + static Instance: AudioBox; + _linkPlayDisposer: IReactionDisposer | undefined; _reactionDisposer: IReactionDisposer | undefined; _scrubbingDisposer: IReactionDisposer | undefined; @@ -68,7 +74,7 @@ export class AudioBox extends ViewBoxBaseComponent = [] + @observable private _rect: Array = []; @observable private _markers: Array = []; @observable private _paused: boolean = false; @observable private static _scrubTime = 0; @@ -86,6 +92,9 @@ export class AudioBox extends ViewBoxBaseComponent this.audioState = this.path ? "paused" : undefined); this._linkPlayDisposer = reaction(() => this.layoutDoc.scrollToLinkID, scrollLinkId => { @@ -289,8 +298,15 @@ export class AudioBox extends ViewBoxBaseComponent(this._markers) + } + + console.log(this.dataDoc.markers) this._amount++; } @@ -304,7 +320,13 @@ export class AudioBox extends ViewBoxBaseComponent([Docs.Create.LabelDocument({ title: "hi", isLabel: false, audioStart: this._start, audioEnd: marker, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document })]); + } + this._start = 0; this._amount++; } @@ -315,7 +337,7 @@ export class AudioBox extends ViewBoxBaseComponent { - for (let i = 0; i < this._markers.length; i++) { - if (this.isSame(this._markers[i], m)) { - this._left ? this._markers[i][0] = time : this._markers[i][1] = time; + for (let i = 0; i < this.dataDoc.markers.length; i++) { + if (this.isSame(this.dataDoc.markers[i], m)) { + // this._left ? this._markers[i][0] = time : this._markers[i][1] = time; + this._left ? this.dataDoc.markers[i].audioStart = time : this.dataDoc.markers[i].audioEnd = time; } } } isSame = (m1: any, m2: any) => { - if (m1[0] == m2[0] && m1[1] == m2[1]) { + if (m1.audioStart === m2.audioStart && m1.audioEnd === m2.audioEnd) { return true; } return false; } + @action + isOverlap = (m: any, i: number) => { + let counter = 0; + let check = []; + + if (i == 0) { + this._markers = []; + } + for (let marker of this._markers) { + if ((m.audioEnd > marker.audioStart && m.audioStart < marker.audioEnd)) { + counter++; + check.push(marker) + } + } + + + if (this.dataDoc.markerAmount < counter) { + this.dataDoc.markerAmount = counter; + } + + this._markers.push(m); + + return counter; + } + formatTime = (time: number) => { - let hours = Math.floor(time / 60 / 60); - let minutes = Math.floor(time / 60) - (hours * 60); - let seconds = time % 60; + const hours = Math.floor(time / 60 / 60); + const minutes = Math.floor(time / 60) - (hours * 60); + const seconds = time % 60; return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0'); } @@ -463,7 +511,8 @@ export class AudioBox extends ViewBoxBaseComponent - {this._markers.map((m, i) => { + {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => { + // let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false }); let rect; - console.log(1 / this._amount * 100); - (m.length > 1) ? + + (!m.isLabel) ? rect = -
{ this.playFrom(m[0], m[1]); e.stopPropagation() }} > +
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} > {/* */}
this.onPointerDown(e, m, true)}>
+ ScriptCast(ScriptField.MakeScript("this.playFrom((NumCast(m.audioStart), NumCast(m.audioEnd)))"))} + ignoreAutoHeight={false} + ScreenToLocalTransform={Transform.Identity} + bringToFront={emptyFunction} + backgroundColor={returnTransparent} /> + {/* */}
this.onPointerDown(e, m, false)}>
: rect = -
+
{/* */} @@ -539,4 +606,6 @@ export class AudioBox extends ViewBoxBaseComponent; } -} \ No newline at end of file +} + +Scripting.addGlobal(function playFrom(start: number, end: number) { return AudioBox.Instance.playFrom(start, end); }) \ No newline at end of file diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts index ddffb56c3..c77d80d76 100644 --- a/src/fields/documentSchemas.ts +++ b/src/fields/documentSchemas.ts @@ -19,6 +19,10 @@ export const documentSchema = createSchema({ currentTimecode: "number", // current play back time of a temporal document (video / audio) displayTimecode: "number", // the time that a document should be displayed (e.g., time an annotation should be displayed on a video) inOverlay: "boolean", // whether the document is rendered in an OverlayView which handles selection/dragging differently + isLabel: "boolean", // whether the document is a label or not (video / audio) + audioStart: "number", // the time frame where the audio should begin playing + audioEnd: "number", // the time frame where the audio should stop playing + markers: listSpec(Doc), // list of markers for audio / video x: "number", // x coordinate when in a freeform view y: "number", // y coordinate when in a freeform view z: "number", // z "coordinate" - non-zero specifies the overlay layer of a freeformview -- cgit v1.2.3-70-g09d2 From e2a082c8e4101d33b3e01a75ba541d1ad72dc74c Mon Sep 17 00:00:00 2001 From: andy temp Date: Thu, 23 Jul 2020 13:51:21 -0400 Subject: test --- src/client/views/MainView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index fce3707a7..0a7964cea 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -164,7 +164,7 @@ export class MainView extends React.Component { if (targets && targets.length && SearchBox.Instance._searchbarOpen){ let check = false; targets.forEach((thing)=>{ - if (thing.className.toString()==="collectionSchemaView-table" || thing.className.toString()==="beta") { + if (thing.className.toString()==="collectionSchemaView-table" || thing.className.toString()==="beta"|| thing.className.toString()==="collectionSchemaView-menuOptions-wrapper") { check=true; } }); -- cgit v1.2.3-70-g09d2 From a8ccd648f811a5049bda15d5ace9d44ef570b418 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Thu, 23 Jul 2020 14:54:55 -0700 Subject: change onClick and link kind of works --- src/client/views/nodes/AudioBox.scss | 14 +++-- src/client/views/nodes/AudioBox.tsx | 92 ++++++++++++++++++++------------- src/client/views/nodes/DocumentView.tsx | 2 + 3 files changed, 69 insertions(+), 39 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 6601c6f24..ff3f78457 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -152,7 +152,6 @@ background: gray; border-radius: 100%; opacity: 0.9; - background-color: transparent; box-shadow: black 2px 2px 1px; .linkAnchorBox-cont { @@ -199,8 +198,10 @@ .audiobox-marker { position: relative; - height: calc(100% - 15px); - margin-top: 15px; + height: 100%; + // height: calc(100% - 15px); + width: 100%; + //margin-top: 15px; } .audio-marker:hover { @@ -238,6 +239,13 @@ z-index: 100; } + .click { + position: relative; + height: 100%; + width: 100%; + z-index: 100; + } + .left-resizer { position: absolute; left: 0; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 5863c8789..fefb05d06 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -53,6 +53,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent) { + super(props); + if (!AudioBox.Script) { + AudioBox.Script = ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart), (this.audioEnd))`, { scriptContext: "any" })!; + } + } + componentWillUnmount() { this._reactionDisposer?.(); this._linkPlayDisposer?.(); @@ -95,6 +104,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.audioState = this.path ? "paused" : undefined); this._linkPlayDisposer = reaction(() => this.layoutDoc.scrollToLinkID, scrollLinkId => { @@ -299,15 +309,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent(this._markers) + this.dataDoc[this.annotationKey] = new List([marker]); } - - console.log(this.dataDoc.markers) - this._amount++; } start(marker: number) { @@ -322,9 +328,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent([Docs.Create.LabelDocument({ title: "hi", isLabel: false, audioStart: this._start, audioEnd: marker, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document })]); + this.dataDoc[this.annotationKey] = new List([Docs.Create.LabelDocument({ title: "", isLabel: false, audioStart: this._start, audioEnd: marker, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document })]); } this._start = 0; @@ -386,10 +392,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - for (let i = 0; i < this.dataDoc.markers.length; i++) { - if (this.isSame(this.dataDoc.markers[i], m)) { + for (let i = 0; i < this.dataDoc[this.annotationKey].length; i++) { + if (this.isSame(this.dataDoc[this.annotationKey][i], m)) { // this._left ? this._markers[i][0] = time : this._markers[i][1] = time; - this._left ? this.dataDoc.markers[i].audioStart = time : this.dataDoc.markers[i].audioEnd = time; + this._left ? this.dataDoc[this.annotationKey][i].audioStart = time : this.dataDoc[this.annotationKey][i].audioEnd = time; } } } @@ -456,6 +462,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox.Script; + // see if time is encapsulated by comparing time on both sides (for moving onto a new row in the timeline for the markers) render() { @@ -512,7 +520,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent ScriptCast(ScriptField.MakeScript("this.playFrom((NumCast(m.audioStart), NumCast(m.audioEnd)))"))} + onClick={this.script} ignoreAutoHeight={false} - ScreenToLocalTransform={Transform.Identity} bringToFront={emptyFunction} - backgroundColor={returnTransparent} /> + backgroundColor={returnTransparent} + scriptContext={this} /> {/* */} + {/*
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)) }}>
*/}
this.onPointerDown(e, m, false)}>
: rect =
- {/* */} +
; return rect; })} @@ -572,23 +592,23 @@ export class AudioBox extends ViewBoxAnnotatableComponent -
- -
+
e.stopPropagation()}> + {/*
*/} + + {/*
*/}
Doc.linkFollowHighlight(la1)} - onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); wasPaused && this.pause(); e.stopPropagation(); } }} /> + onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); wasPaused && this.pause(); e.stopPropagation(); e.preventDefault(); } }} />
; })}
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%` }} /> @@ -608,4 +628,4 @@ export class AudioBox extends ViewBoxAnnotatableComponent(Docu const func = () => this.onClickHandler.script.run({ this: this.layoutDoc, self: this.rootDoc, + scriptContext: this.props.scriptContext, thisContainer: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey }, console.log); if (this.props.Document !== Doc.UserDoc()["dockedBtn-undo"] && this.props.Document !== Doc.UserDoc()["dockedBtn-redo"]) { -- cgit v1.2.3-70-g09d2 From 0bdbf8bfbd4c2c2e8e7c1f4e7d530c628ad5e398 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 24 Jul 2020 14:00:58 +0800 Subject: internal nav --- package-lock.json | 170 ++++++++++- package.json | 3 + .../collectionFreeForm/CollectionFreeFormView.scss | 55 +++- .../collectionFreeForm/CollectionFreeFormView.tsx | 14 + .../views/nodes/CollectionFreeFormDocumentView.tsx | 15 + src/client/views/nodes/PresBox.tsx | 328 +++++++++++++++++---- .../views/presentationview/PresElementBox.scss | 8 + .../views/presentationview/PresElementBox.tsx | 15 +- src/typings/index.d.ts | 2 +- 9 files changed, 547 insertions(+), 63 deletions(-) (limited to 'src') diff --git a/package-lock.json b/package-lock.json index 3f596aa66..daa2ab967 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,36 @@ } } }, + "@babel/helper-annotate-as-pure": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz", + "integrity": "sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==", + "requires": { + "@babel/types": "^7.10.4" + }, + "dependencies": { + "@babel/helper-validator-identifier": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", + "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==" + }, + "@babel/types": { + "version": "7.10.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.5.tgz", + "integrity": "sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==", + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.19", + "to-fast-properties": "^2.0.0" + } + }, + "lodash": { + "version": "4.17.19", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", + "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" + } + } + }, "@babel/helper-function-name": { "version": "7.9.5", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz", @@ -2283,6 +2313,17 @@ "resolve": "^1.12.0" } }, + "babel-plugin-styled-components": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", + "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -2913,6 +2954,11 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "canvas": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.6.1.tgz", @@ -4382,6 +4428,19 @@ "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz", "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=" }, + "css-box-model": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", + "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", + "requires": { + "tiny-invariant": "^1.0.6" + } + }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-in-js-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz", @@ -4445,6 +4504,16 @@ } } }, + "css-to-react-native": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz", + "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, "css-vendor": { "version": "2.0.8", "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", @@ -7841,6 +7910,11 @@ "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=" }, + "is-what": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.10.0.tgz", + "integrity": "sha512-U4RYCXNOmATQHlOPlOCHCfXyKEFIPqvyaKDqYRuLbD6EYKcTTfc3YXkAYjzOVxO3zt34L+Wh2feIyWrYiZ7kng==" + }, "is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", @@ -8723,6 +8797,14 @@ "trim-newlines": "^1.0.0" } }, + "merge-anything": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz", + "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==", + "requires": { + "is-what": "^3.3.1" + } + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -13489,8 +13571,7 @@ "postcss-value-parser": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", - "dev": true + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" }, "prebuild-install": { "version": "5.3.3", @@ -13981,6 +14062,11 @@ "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==", "dev": true }, + "raf-schd": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.2.tgz", + "integrity": "sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==" + }, "random-bytes": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz", @@ -14104,6 +14190,20 @@ "pure-color": "^1.2.0" } }, + "react-beautiful-dnd": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz", + "integrity": "sha512-87It8sN0ineoC3nBW0SbQuTFXM6bUqM62uJGY4BtTf0yzPl8/3+bHMWkgIe0Z6m8e+gJgjWxefGRVfpE3VcdEg==", + "requires": { + "@babel/runtime": "^7.8.4", + "css-box-model": "^1.2.0", + "memoize-one": "^5.1.1", + "raf-schd": "^4.0.2", + "react-redux": "^7.1.1", + "redux": "^4.0.4", + "use-memo-one": "^1.1.1" + } + }, "react-color": { "version": "2.18.1", "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz", @@ -14336,6 +14436,18 @@ } } }, + "react-redux": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz", + "integrity": "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==", + "requires": { + "@babel/runtime": "^7.5.5", + "hoist-non-react-statics": "^3.3.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.9.0" + } + }, "react-resizable": { "version": "1.10.1", "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-1.10.1.tgz", @@ -14345,6 +14457,11 @@ "react-draggable": "^4.0.3" } }, + "react-resizable-rotatable-draggable": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/react-resizable-rotatable-draggable/-/react-resizable-rotatable-draggable-0.2.0.tgz", + "integrity": "sha512-F8TPx3z7/AcmRViySbYV3LpUWXFpHlGAmKmNcYMgPlS+h1eYFazRG3xYS8Z6e48hWY1EcCny/YNrwRNUrap8CQ==" + }, "react-reveal": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz", @@ -14570,6 +14687,15 @@ "resolved": "https://registry.npmjs.org/reduce-flatten/-/reduce-flatten-1.0.1.tgz", "integrity": "sha1-JYx479FT3fk8tWEjf2EYTzaW4yc=" }, + "redux": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", + "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", + "requires": { + "loose-envify": "^1.4.0", + "symbol-observable": "^1.2.0" + } + }, "regenerator-runtime": { "version": "0.13.5", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", @@ -16161,6 +16287,36 @@ } } }, + "styled-components": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz", + "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.0.0", + "@emotion/is-prop-valid": "^0.8.1", + "@emotion/unitless": "^0.7.0", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^2.2.2", + "memoize-one": "^5.0.0", + "merge-anything": "^2.2.4", + "prop-types": "^15.5.4", + "react-is": "^16.6.0", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^5.5.0" + } + }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -16469,6 +16625,11 @@ "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz", "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, "tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", @@ -17354,6 +17515,11 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, + "use-memo-one": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz", + "integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==" + }, "util": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", diff --git a/package.json b/package.json index b031387fc..182f47004 100644 --- a/package.json +++ b/package.json @@ -215,6 +215,7 @@ "rc-switch": "^1.9.0", "react": "^16.12.0", "react-autosuggest": "^9.4.3", + "react-beautiful-dnd": "^13.0.0", "react-color": "^2.18.1", "react-compound-slider": "^2.5.0", "react-datepicker": "^3.0.0", @@ -225,6 +226,7 @@ "react-loading": "^2.0.3", "react-measure": "^2.2.4", "react-resizable": "^1.10.1", + "react-resizable-rotatable-draggable": "^0.2.0", "react-reveal": "^1.2.2", "react-select": "^3.1.0", "react-table": "^6.11.5", @@ -240,6 +242,7 @@ "socket.io-client": "^2.3.0", "solr-node": "^1.2.1", "standard-http-error": "^2.0.1", + "styled-components": "^4.4.1", "textarea-caret": "^3.1.0", "typescript-collections": "^1.3.3", "typescript-language-server": "^0.4.0", diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index b50a93775..2b07c4efb 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -92,14 +92,65 @@ } } +.resizable { + background: rgba(0, 0, 0, 0.2); + width: 100px; + height: 100px; + position: absolute; + top: 100px; + left: 100px; + + .resizers { + width: 100%; + height: 100%; + border: 3px solid #69a6db; + box-sizing: border-box; + + .resizer { + position: absolute; + width: 10px; + height: 10px; + border-radius: 50%; + /*magic to turn square into circle*/ + background: white; + border: 3px solid #69a6db; + } + + .resizer.top-left { + left: -3px; + top: -3px; + cursor: nwse-resize; + /*resizer cursor*/ + } + + .resizer.top-right { + right: -3px; + top: -3px; + cursor: nesw-resize; + } + + .resizer.bottom-left { + left: -3px; + bottom: -3px; + cursor: nesw-resize; + } + + .resizer.bottom-right { + right: -3px; + bottom: -3px; + cursor: nwse-resize; + } + } +} + .progressivizeMove-frame { - width: 40px; + width: 20px; border-radius: 2px; z-index: 100000; color: white; text-align: center; background-color: #5a9edd; - transform: translate(-105%, -110%); + transform: translate(-110%, 110%); } .progressivizeButton:hover { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index fe9c99e32..186fd710b 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1388,6 +1388,7 @@ export class CollectionFreeFormView extends CollectionSubView @@ -1473,10 +1474,22 @@ interface CollectionFreeFormViewPannableContentsProps { transition?: string; presPaths?: boolean; progressivize?: boolean; + zoomProgressivize?: boolean; } @observer class CollectionFreeFormViewPannableContents extends React.Component{ + @computed get zoomProgressivize() { + if (this.props.zoomProgressivize) { + console.log("should render"); + return ( + <> + {PresBox.Instance.zoomProgressivizeContainer} + + ); + } + } + @computed get progressivize() { if (this.props.progressivize) { console.log("should render"); @@ -1536,6 +1549,7 @@ class CollectionFreeFormViewPannableContents extends React.Component; } } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 2cf2ab35d..3bbe3e5dd 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -113,6 +113,21 @@ export class CollectionFreeFormDocumentView extends DocComponent docs.forEach(doc => doc.dataTransition = "inherit"), 1010); } + public static setupZoom(doc: Doc, zoomProgressivize: boolean = false) { + let width = new List(); + let height = new List(); + let top = new List(); + let left = new List(); + width.push(NumCast(doc.width)); + height.push(NumCast(doc.height)); + top.push(NumCast(doc.height) / -2); + left.push(NumCast(doc.width) / -2); + doc["width-indexed"] = width; + doc["height-indexed"] = height; + doc["top-indexed"] = top; + doc["left-indexed"] = left; + } + public static setupKeyframes(docs: Doc[], timecode: number, progressivize: boolean = false) { docs.forEach((doc, i) => { if (!doc.appearFrame) doc.appearFrame = i; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 5c130e20e..7ac2dc317 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -28,7 +28,7 @@ import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal import { List } from "../../../fields/List"; import { Tooltip } from "@material-ui/core"; import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu"; - +import { conformsTo } from "lodash"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -89,12 +89,29 @@ export class PresBox extends ViewBoxBaseComponent const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); const lastFrame = Cast(presTargetDoc.lastFrame, "number", null); const curFrame = NumCast(presTargetDoc.currentFrame); + // Case 1: There are still other frames and should go through all frames before going to next slide if (lastFrame !== undefined && curFrame < lastFrame) { presTargetDoc._viewTransition = "all 1s"; setTimeout(() => presTargetDoc._viewTransition = undefined, 1010); presTargetDoc.currentFrame = curFrame + 1; - } - else if (this.childDocs[this.itemIndex + 1] !== undefined) { + if (presTargetDoc.zoomProgressivize) { + const srcContext = Cast(presTargetDoc.context, Doc, null); + if (srcContext) { + srcContext._panX = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]); + srcContext._panY = this.checkList(presTargetDoc, presTargetDoc["top-indexed"]); + srcContext._viewScale = this.checkList(presTargetDoc, presTargetDoc["width-indexed"]); + } + presTargetDoc._panY = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]); + const resize = document.getElementById('resizable'); + if (resize) { + resize.style.width = this.checkList(presTargetDoc, presTargetDoc["width-indexed"]) + 'px'; + resize.style.height = this.checkList(presTargetDoc, presTargetDoc["height-indexed"]) + 'px'; + resize.style.top = this.checkList(presTargetDoc, presTargetDoc["top-indexed"]) + 'px'; + resize.style.left = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]) + 'px'; + } + } + // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide + } else if (this.childDocs[this.itemIndex + 1] !== undefined) { let nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); @@ -197,7 +214,28 @@ export class PresBox extends ViewBoxBaseComponent }); } + checkCollection = async (curTarget: Doc, nextTarget: Doc) => { + const aliasOf = await DocCastAsync(curTarget.aliasOf); + const curContext = aliasOf && await DocCastAsync(aliasOf.context); + const aliasOfNext = await DocCastAsync(nextTarget.aliasOf); + const nextContext = aliasOfNext && await DocCastAsync(aliasOfNext.context); + if (curContext && nextContext) { + // Case: Documents are not in the same collection + if (curContext !== nextContext) { + // Current document is contained in the next collection (zoom out) + if (curContext.context === nextContext) { + console.log("current in next"); + // Next document is contained in the current collection (zoom in) + } else if (nextContext.context === curContext) { + console.log("next in current"); + } + // No change in parent collection + } else { + console.log("same collection"); + } + } + } /** * This method makes sure that cursor navigates to the element that * has the option open and last in the group. If not in the group, and it has @@ -208,26 +246,29 @@ export class PresBox extends ViewBoxBaseComponent let docToJump = curDoc; let willZoom = false; - const presDocs = DocListCast(this.dataDoc[this.props.fieldKey]); - let nextSelected = presDocs.indexOf(curDoc); - const currentDocGroups: Doc[] = []; - for (; nextSelected < presDocs.length - 1; nextSelected++) { - if (!presDocs[nextSelected + 1].groupButton) { - break; - } - currentDocGroups.push(presDocs[nextSelected]); - } + const nextTarget = curDoc; + const curTarget = this.childDocs[fromDocIndex]; + this.checkCollection(curTarget, nextTarget); + // const presDocs = DocListCast(this.dataDoc[this.props.fieldKey]); + // let nextSelected = presDocs.indexOf(curDoc); + // const currentDocGroups: Doc[] = []; + // for (; nextSelected < presDocs.length - 1; nextSelected++) { + // if (!presDocs[nextSelected + 1].groupButton) { + // break; + // } + // currentDocGroups.push(presDocs[nextSelected]); + // } - currentDocGroups.forEach((doc: Doc, index: number) => { - if (doc.presNavButton) { - docToJump = doc; - willZoom = false; - } - if (doc.presZoomButton) { - docToJump = doc; - willZoom = true; - } - }); + // currentDocGroups.forEach((doc: Doc, index: number) => { + // if (doc.presNavButton) { + // docToJump = doc; + // willZoom = false; + // } + // if (doc.presZoomButton) { + // docToJump = doc; + // willZoom = true; + // } + // }); //docToJump stayed same meaning, it was not in the group or was the last element in the group const aliasOf = await DocCastAsync(docToJump.aliasOf); @@ -264,6 +305,7 @@ export class PresBox extends ViewBoxBaseComponent // this.startPresentation(index); // } this.navigateToElement(this.childDocs[index], fromDoc); + this._selectedArray = [this.childDocs[index]]; // this.hideIfNotPresented(index); // this.showAfterPresented(index); // this.hideDocumentInPres(); @@ -369,13 +411,17 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (movement === 'zoom') { activeItem.presZoomButton = !activeItem.presZoomButton; + activeItem.presMovement = 'Zoom'; activeItem.presNavButton = false; } else if (movement === 'nav') { activeItem.presZoomButton = false; + activeItem.presMovement = 'Pan'; activeItem.presNavButton = !activeItem.presNavButton; - } else if (movement === 'swap') { + } else if (movement === 'switch') { + activeItem.presMovement = 'Switch'; targetDoc.presTransition = 0; } else { + activeItem.presMovement = 'None'; activeItem.presZoomButton = false; activeItem.presNavButton = false; } @@ -528,14 +574,6 @@ export class PresBox extends ViewBoxBaseComponent this.playTools = false; } - @undoBatch - @action - toolbarTest = () => { - const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); - console.log("title: " + presTargetDoc.title); - console.log("index: " + this.itemIndex); - } - @undoBatch @action viewPaths = async () => { @@ -614,6 +652,7 @@ export class PresBox extends ViewBoxBaseComponent opacity: 1, stroke: "#69a6db", strokeWidth: 5, + strokeDasharray: '10 5', }} fill="none" // markerStart="url(#square)" @@ -681,7 +720,6 @@ export class PresBox extends ViewBoxBaseComponent const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93); const durationThumbLocation = String(9.48 * Number(duration)); - const movement = activeItem.presZoomButton ? 'Zoom' : activeItem.presNavbutton ? 'Navigate' : 'None'; const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> @@ -691,13 +729,13 @@ export class PresBox extends ViewBoxBaseComponent onPointerDown={e => e.stopPropagation()} // onClick={() => this.dropdownToggle('Movement')} > - {movement} + {activeItem.presMovement}
e.stopPropagation()}> -
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
-
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
-
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan
-
e.stopPropagation()} onClick={() => this.movementChanged('swap')}>Swap
+
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
+
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
+
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan
+
e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Switch
) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> @@ -864,9 +902,22 @@ export class PresBox extends ViewBoxBaseComponent tagDoc.currentFrame = 0; CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } + let lastFrame: number = 0; + childDocs.forEach((doc) => { + if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame); + }); CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1); - tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), NumCast(tagDoc.lastFrame)); + tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), lastFrame); + if (tagDoc.zoomProgressivize) { + const resize = document.getElementById('resizable'); + if (resize) { + resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px'; + resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px'; + resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px'; + resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px'; + } + } } @undoBatch @@ -880,6 +931,15 @@ export class PresBox extends ViewBoxBaseComponent } CollectionFreeFormDocumentView.gotoKeyframe(childDocs.slice()); tagDoc.currentFrame = Math.max(0, (currentFrame || 0) - 1); + if (tagDoc.zoomProgressivize) { + const resize = document.getElementById('resizable'); + if (resize) { + resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px'; + resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px'; + resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px'; + resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px'; + } + } } @computed get progressivizeDropdown() { @@ -936,7 +996,6 @@ export class PresBox extends ViewBoxBaseComponent zoomProgressivize = (e: React.MouseEvent) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - targetDoc.currentFrame = targetDoc.lastFrame; if (targetDoc?.zoomProgressivize) { targetDoc.zoomProgressivize = false; } else { @@ -956,7 +1015,6 @@ export class PresBox extends ViewBoxBaseComponent if (activeItem.zoomProgressivize) { console.log("progressivize"); targetDoc.currentFrame = 0; - CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); } } @@ -1050,6 +1108,7 @@ export class PresBox extends ViewBoxBaseComponent opacity: 1, stroke: "#000000", strokeWidth: 2, + strokeDasharray: '10 5', }} fill="none" />); @@ -1062,6 +1121,167 @@ export class PresBox extends ViewBoxBaseComponent else doc.displayMovement = true; } + private _isDraggingTL = false; + private _isDraggingTR = false; + private _isDraggingBR = false; + private _isDraggingBL = false; + private _isDragging = false; + + //Adds event listener so knows pointer is down and moving + onPointerMid = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDragging = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + //Adds event listener so knows pointer is down and moving + onPointerBR = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDraggingBR = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + //Adds event listener so knows pointer is down and moving + onPointerBL = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDraggingBL = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + //Adds event listener so knows pointer is down and moving + onPointerTR = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDraggingTR = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + //Adds event listener so knows pointer is down and moving + onPointerTL = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDraggingTL = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + //Removes all event listeners + onPointerUp = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDraggingTL = false; + this._isDraggingTR = false; + this._isDraggingBL = false; + this._isDraggingBR = false; + this._isDragging = false; + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + } + + //Adjusts the value in NodeStore + onPointerMove = (e: PointerEvent): void => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + e.stopPropagation(); + e.preventDefault(); + const doc = document.getElementById('resizable'); + if (doc) { + let height = doc.offsetHeight; + let width = doc.offsetWidth; + let top = doc.offsetTop; + let left = doc.offsetLeft; + //Bottom right + if (this._isDraggingBR) { + let newHeight = height += e.movementY; + doc.style.height = newHeight + 'px'; + let newWidth = width += e.movementX; + doc.style.width = newWidth + 'px'; + // Bottom left + } else if (this._isDraggingBL) { + let newHeight = height += e.movementY; + doc.style.height = newHeight + 'px'; + let newWidth = width -= e.movementX; + doc.style.width = newWidth + 'px'; + let newLeft = left += e.movementX; + doc.style.left = newLeft + 'px'; + // Top right + } else if (this._isDraggingTR) { + let newWidth = width += e.movementX; + doc.style.width = newWidth + 'px'; + let newHeight = height -= e.movementY; + doc.style.height = newHeight + 'px'; + let newTop = top += e.movementY; + doc.style.top = newTop + 'px'; + // Top left + } else if (this._isDraggingTL) { + const newWidth = width -= e.movementX; + doc.style.width = newWidth + 'px'; + const newHeight = height -= e.movementY; + doc.style.height = newHeight + 'px'; + const newTop = top += e.movementY; + doc.style.top = newTop + 'px'; + const newLeft = left += e.movementX; + doc.style.left = newLeft + 'px'; + } else if (this._isDragging) { + let newTop = top += e.movementY; + doc.style.top = newTop + 'px'; + let newLeft = left += e.movementX; + doc.style.left = newLeft + 'px'; + } + this.updateList(targetDoc, targetDoc["width-indexed"], width); + this.updateList(targetDoc, targetDoc["height-indexed"], height); + this.updateList(targetDoc, targetDoc["top-indexed"], top); + this.updateList(targetDoc, targetDoc["left-indexed"], left); + } + } + + @action + checkList = (doc: Doc, list: any): number => { + const x: List = list; + return x[NumCast(doc.currentFrame)]; + } + + @action + updateList = (doc: Doc, list: any, val: number) => { + const x: List = list; + x[NumCast(doc.currentFrame)] = val; + list = x; + } + + @computed get zoomProgressivizeContainer() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + CollectionFreeFormDocumentView.setupZoom(targetDoc, true); + + return ( +
+
+
+
+
+
+
+
+ ); + } + @computed get progressivizeChildDocs() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); @@ -1117,12 +1337,16 @@ export class PresBox extends ViewBoxBaseComponent return (
); } + @observable + toolbarWidth = (): number => { + console.log(this.props.PanelWidth()); + const width = this.props.PanelWidth(); + return width; + } + + @computed get toolbar() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const parent = document.getElementById('toolbarContainer'); - let width = 0; - if (parent) width = parent.offsetWidth; - console.log(width); if (activeItem) { return ( <> @@ -1133,22 +1357,22 @@ export class PresBox extends ViewBoxBaseComponent
{"View paths"}
}>
 -
{this.expandBoolean ? "Minimize all" : "Expand all"}
}> -
{ this.toggleExpand(); this.childDocs.forEach((doc, ind) => { doc.presExpandInlineButton = !doc.presExpandInlineButton; }); }}> - +
{this.expandBoolean ? "Expand all" : "Minimize all"}
}> +
{ this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = false; else doc.presExpandInlineButton = true; }); }}> +
{/*
*/}
{"Transitions"}
}>
-
400 ? "block" : "none" }} className="toolbar-buttonText">  Transitions
+
380 ? "block" : "none" }} className="toolbar-buttonText">  Transitions
{"Progressivize"}
}>
-
400 ? "block" : "none" }} className="toolbar-buttonText">  Progressivize
+
380 ? "block" : "none" }} className="toolbar-buttonText">  Progressivize
@@ -1167,10 +1391,10 @@ export class PresBox extends ViewBoxBaseComponent } else { return ( <> -
+
{"Add new slide"}
}>
-
-
+
+
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 51ad6839c..c87a1583a 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -144,6 +144,9 @@ width: 20px; height: 20px; display: flex; + font-size: 75%; + background-color: black; + color: white; justify-content: center; align-items: center; } @@ -157,6 +160,9 @@ width: 20px; height: 20px; display: flex; + font-size: 75%; + background-color: black; + color: white; justify-content: center; align-items: center; } @@ -170,6 +176,8 @@ height: 20px; z-index: 200; display: flex; + background-color: black; + color: white; justify-content: center; align-items: center; } \ No newline at end of file diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 53d922cee..6c6bad06a 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -186,6 +186,7 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()} + onPointerDown={e => { + this.props.dropAction; + e.stopPropagation(); + }} > {treecontainer ? (null) : <>
@@ -258,8 +262,7 @@ export class PresElementBox extends ViewBoxBaseComponent
{"Movement speed"}
}>
{this.transition}
{"Duration of visibility"}
}>
{this.duration}
 -
{"Remove from presentation"}
}> -
{this.rootDoc.presExpandInlineButton ? "Expand" : "Minimize"}
}>
+
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> e.stopPropagation()} /> - +
}
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts index 799a3ee6f..24b70057a 100644 --- a/src/typings/index.d.ts +++ b/src/typings/index.d.ts @@ -10,7 +10,7 @@ declare module 'fit-curve'; declare module 'reveal'; declare module 'react-reveal'; declare module 'react-reveal/makeCarousel'; - +declare module 'react-resizable-rotatable-draggable'; declare module '@react-pdf/renderer' { import * as React from 'react'; -- cgit v1.2.3-70-g09d2 From b9f77b5f539e7b5f44f11e28bd72fefde34fff97 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 24 Jul 2020 15:26:29 +0800 Subject: let -> const --- src/client/views/nodes/PresBox.tsx | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index e8e788bc5..ac2288944 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -243,8 +243,8 @@ export class PresBox extends ViewBoxBaseComponent */ navigateToElement = async (curDoc: Doc, fromDocIndex: number) => { this.updateCurrentPresentation(); - let docToJump = curDoc; - let willZoom = false; + const docToJump = curDoc; + const willZoom = false; const nextTarget = curDoc; const curTarget = this.childDocs[fromDocIndex]; @@ -444,9 +444,9 @@ export class PresBox extends ViewBoxBaseComponent (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) // render() { - // const presOrderedDocs = DocListCast(this.rootDoc.presOrderedDocs); - // if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { - // this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); + // const presOrderedDocs = DocListCast(this.rootDoc.presOrderedDocs); + // if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { + // this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); // KEYS @observable _selectedArray: Doc[] = []; @@ -1213,25 +1213,25 @@ export class PresBox extends ViewBoxBaseComponent let left = doc.offsetLeft; //Bottom right if (this._isDraggingBR) { - let newHeight = height += e.movementY; + const newHeight = height += e.movementY; doc.style.height = newHeight + 'px'; - let newWidth = width += e.movementX; + const newWidth = width += e.movementX; doc.style.width = newWidth + 'px'; // Bottom left } else if (this._isDraggingBL) { - let newHeight = height += e.movementY; + const newHeight = height += e.movementY; doc.style.height = newHeight + 'px'; - let newWidth = width -= e.movementX; + const newWidth = width -= e.movementX; doc.style.width = newWidth + 'px'; - let newLeft = left += e.movementX; + const newLeft = left += e.movementX; doc.style.left = newLeft + 'px'; // Top right } else if (this._isDraggingTR) { - let newWidth = width += e.movementX; + const newWidth = width += e.movementX; doc.style.width = newWidth + 'px'; - let newHeight = height -= e.movementY; + const newHeight = height -= e.movementY; doc.style.height = newHeight + 'px'; - let newTop = top += e.movementY; + const newTop = top += e.movementY; doc.style.top = newTop + 'px'; // Top left } else if (this._isDraggingTL) { @@ -1244,9 +1244,9 @@ export class PresBox extends ViewBoxBaseComponent const newLeft = left += e.movementX; doc.style.left = newLeft + 'px'; } else if (this._isDragging) { - let newTop = top += e.movementY; + const newTop = top += e.movementY; doc.style.top = newTop + 'px'; - let newLeft = left += e.movementX; + const newLeft = left += e.movementX; doc.style.left = newLeft + 'px'; } this.updateList(targetDoc, targetDoc["width-indexed"], width); -- cgit v1.2.3-70-g09d2 From 1a3d12ea7a107df9bd4fd32b1db00eb558e93a21 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sat, 25 Jul 2020 18:15:33 -0700 Subject: fix bugs --- src/client/views/nodes/AudioBox.scss | 1 + src/client/views/nodes/AudioBox.tsx | 79 ++++++++++++++++++++++++++---------- 2 files changed, 59 insertions(+), 21 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index ff3f78457..7b0e50e60 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -195,6 +195,7 @@ border-radius: 50%; box-shadow: black 2px 2px 1px; overflow: auto; + cursor: pointer; .audiobox-marker { position: relative; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index fefb05d06..bfa48578b 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -28,6 +28,7 @@ import { List } from "../../../fields/List"; import { LabelBox } from "./LabelBox"; import { Transform } from "../../util/Transform"; import { Scripting } from "../../util/Scripting"; +import { ColorBox } from "./ColorBox"; // testing testing @@ -53,7 +54,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; private _isPointerDown = false; private _currMarker: any; @@ -76,7 +79,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; - @observable private _markers: Array = []; + @observable private _paused: boolean = false; @observable private static _scrubTime = 0; @observable private _repeat: boolean = false; @@ -90,9 +93,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent) { super(props); - if (!AudioBox.Script) { - AudioBox.Script = ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart), (this.audioEnd))`, { scriptContext: "any" })!; + if (!AudioBox.RangeScript) { + AudioBox.RangeScript = ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart), (this.audioEnd))`, { scriptContext: "any" })!; + } + + if (!AudioBox.LabelScript) { + AudioBox.LabelScript = ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart))`, { scriptContext: "any" })!; } + + } componentWillUnmount() { @@ -167,6 +176,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent -1) { setTimeout(() => this.playFrom(0), -seekTimeInSeconds * 1000); } else { + console.log("dude"); this.pause(); } } else if (seekTimeInSeconds <= this._ele.duration) { @@ -327,12 +337,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent([Docs.Create.LabelDocument({ title: "", isLabel: false, audioStart: this._start, audioEnd: marker, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document })]); + this.dataDoc[this.annotationKey] = new List([newMarker]); } + this._start = 0; this._amount++; } @@ -407,21 +420,21 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + console.log("called"); let counter = 0; - let check = []; if (i == 0) { this._markers = []; } - for (let marker of this._markers) { - if ((m.audioEnd > marker.audioStart && m.audioStart < marker.audioEnd)) { + for (let i = 0; i < this._markers.length; i++) { + if ((m.audioEnd > this._markers[i].audioStart && m.audioStart < this._markers[i].audioEnd)) { counter++; - check.push(marker) + console.log(counter); } } - + console.log(counter); + console.log(this.dataDoc.markerAmount); if (this.dataDoc.markerAmount < counter) { this.dataDoc.markerAmount = counter; @@ -432,6 +445,29 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + // if (this._markers.length < 1) { + // this._markers = new Array(Math.round(this.dataDoc.duration)).fill(0); + // } + // console.log(this._markers); + // let max = 0 + + // for (let i = Math.round(m.audioStart); i <= Math.round(m.audioEnd); i++) { + // this._markers[i] = this._markers[i] + 1; + // console.log(this._markers[i]); + + // if (this._markers[i] > max) { + // max = this._markers[i]; + // } + // } + + // console.log(max); + // if (this.dataDoc.markerAmount < max) { + // this.dataDoc.markerAmount = max; + // } + // return max + // } + formatTime = (time: number) => { const hours = Math.floor(time / 60 / 60); const minutes = Math.floor(time / 60) - (hours * 60); @@ -462,7 +498,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox.Script; + rangeScript = () => AudioBox.RangeScript; + + labelScript = () => AudioBox.LabelScript; // see if time is encapsulated by comparing time on both sides (for moving onto a new row in the timeline for the markers) @@ -533,12 +571,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} > - {/* */}
this.onPointerDown(e, m, true)}>
{/* */} {/*
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)) }}>
*/} @@ -574,13 +609,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent + bringToFront={emptyFunction} + scriptContext={this} />
; return rect; })} {DocListCast(this.dataDoc.links).map((l, i) => { + console.log("hi"); let la1 = l.anchor1 as Doc; let la2 = l.anchor2 as Doc; let linkTime = NumCast(l.anchor2_timecode); @@ -608,10 +645,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent {/*
*/}
Doc.linkFollowHighlight(la1)} - onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); wasPaused && this.pause(); e.stopPropagation(); e.preventDefault(); } }} /> + onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); this.pause(); e.stopPropagation(); e.preventDefault(); } }} />
; })} -
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%` }} /> +
{ e.stopPropagation(); e.preventDefault(); console.log("hi"); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%` }} /> {this.audio}
-- cgit v1.2.3-70-g09d2 From b83a38a3a92c0149562da460ad9c35eaaf3054ec Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Sun, 26 Jul 2020 17:41:01 +0800 Subject: download name update **not part of pres trails** --- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 10 +++++----- src/fields/Doc.ts | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index ba9385514..480abdaed 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -114,10 +114,10 @@ export class CollectionFreeFormDocumentView extends DocComponent(); - let height = new List(); - let top = new List(); - let left = new List(); + const width = new List(); + const height = new List(); + const top = new List(); + const left = new List(); width.push(NumCast(doc.width)); height.push(NumCast(doc.height)); top.push(NumCast(doc.height) / -2); @@ -176,7 +176,7 @@ export class CollectionFreeFormDocumentView extends DocComponent; - if (this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc) { + if (PresBox.Instance && this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc) { const effectProps = { left: this.layoutDoc.presEffectDirection === 'left', right: this.layoutDoc.presEffectDirection === 'right', diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index e28f6b7d2..cc90574a2 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -595,7 +595,7 @@ export namespace Doc { var zip = new JSZip(); - zip.file("doc.json", docString); + zip.file(doc.title + ".json", docString); // // Generate a directory within the Zip file structure // var img = zip.folder("images"); @@ -607,7 +607,7 @@ export namespace Doc { zip.generateAsync({ type: "blob" }) .then((content: any) => { // Force down of the Zip file - saveAs(content, "download.zip"); + saveAs(content, doc.title + ".zip"); // glr: Possibly change the name of the document to match the title? }); } // -- cgit v1.2.3-70-g09d2 From 383351a022ff7b20a46a2d492d04ac350b1f2eb3 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Sun, 26 Jul 2020 18:30:47 -0400 Subject: searching within collections : ) --- .../views/collections/CollectionSchemaHeaders.tsx | 15 +- src/client/views/search/SearchBox.tsx | 182 +++++++++++++-------- 2 files changed, 118 insertions(+), 79 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index ec8605215..0ee225407 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -323,7 +323,7 @@ export class KeysDropdown extends React.Component { @action onSelect2 = (key: string): void => { - this._searchTerm=this._searchTerm.slice(0,this._key.length) +key; + this._searchTerm = this._searchTerm.slice(0, this._key.length) + key; this._isOpen = false; } @@ -404,16 +404,15 @@ export class KeysDropdown extends React.Component { } renderFilterOptions = (): JSX.Element[] | JSX.Element => { - console.log("HEHEHE") if (!this._isOpen) return <>; - const keyOptions:string[]=[]; + const keyOptions: string[] = []; console.log(this._searchTerm.slice(this._key.length)) let temp = this._searchTerm.slice(this._key.length); - this.props.docs?.forEach((doc)=>{ + this.props.docs?.forEach((doc) => { let key = StrCast(doc[this._key]); - if (keyOptions.includes(key)===false && key.includes(temp)){ - keyOptions.push(key); + if (keyOptions.includes(key) === false && key.includes(temp)) { + keyOptions.push(key); } }); @@ -423,7 +422,7 @@ export class KeysDropdown extends React.Component { border: "1px solid lightgray", width: this.props.width, maxWidth: this.props.width, overflowX: "hidden" }} - onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect2(key); }}>{key}
; + onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect2(key); }}>{key}
; }); return options; @@ -452,7 +451,7 @@ export class KeysDropdown extends React.Component { }} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}> {this._key === this._searchTerm.slice(0, this._key.length) ? - this.renderFilterOptions():this.renderOptions()} + this.renderFilterOptions() : this.renderOptions()}
); diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index ee85375e3..ee2dab2f6 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -5,7 +5,7 @@ import { action, computed, observable, runInAction, IReactionDisposer, reaction import { observer } from 'mobx-react'; import * as React from 'react'; import * as rp from 'request-promise'; -import { Doc } from '../../../fields/Doc'; +import { Doc, DocListCast } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; import { Utils, returnTrue, emptyFunction, returnFalse, emptyPath, returnOne, returnEmptyString, returnEmptyFilter } from '../../../Utils'; @@ -24,7 +24,7 @@ import { CollectionLinearView } from '../collections/CollectionLinearView'; import { CurrentUserUtils } from '../../util/CurrentUserUtils'; import { CollectionDockingView } from '../collections/CollectionDockingView'; -import { ScriptField } from '../../../fields/ScriptField'; +import { ScriptField, ComputedField } from '../../../fields/ScriptField'; import { PrefetchProxy } from '../../../fields/Proxy'; import { List } from '../../../fields/List'; import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; @@ -184,14 +184,14 @@ export class SearchBox extends ViewBoxBaseComponent SearchUtil.GetViewsOfDocument(doc) - @observable newsearchstring: string =""; + @observable newsearchstring: string = ""; @action.bound onChange(e: React.ChangeEvent) { //this.layoutDoc._searchString = e.target.value; - this.newsearchstring= e.target.value; - if (e.target.value===""){ + this.newsearchstring = e.target.value; + if (e.target.value === "") { console.log("CLOSE"); - runInAction(()=>{this.open=false}); + runInAction(() => { this.open = false }); } this._openNoResults = false; this._results = []; @@ -206,17 +206,17 @@ export class SearchBox extends ViewBoxBaseComponent { if (e.key === "Enter") { console.log(this.newsearchstring) - this.layoutDoc._searchString=this.newsearchstring; + this.layoutDoc._searchString = this.newsearchstring; // if (this._icons !== this._allIcons) { // runInAction(() => { this.expandedBucket = false }); // } - if (StrCast(this.layoutDoc._searchString)!==""){ + if (StrCast(this.layoutDoc._searchString) !== "") { console.log("OPEN"); - runInAction(()=>{this.open=true}); + runInAction(() => { this.open = true }); } else { console.log("CLOSE"); - runInAction(()=>{this.open=false}); + runInAction(() => { this.open = false }); } this.submitSearch(); @@ -335,10 +335,12 @@ export class SearchBox extends ViewBoxBaseComponent { const layout: string = StrCast(element.props.Document.layout); - console.log(layout); + + console.log(DocListCast(element.dataDoc[Doc.LayoutFieldKey(element.dataDoc)])); + console.log(DocListCast(element.dataDoc[Doc.LayoutFieldKey(element.dataDoc)]).length); + //checks if selected view (element) is a collection. if it is, adds to list to search through if (layout.indexOf("Collection") > -1) { //makes sure collections aren't added more than once @@ -356,6 +358,34 @@ export class SearchBox extends ViewBoxBaseComponent { + let hlights: string[] = []; + const protos = Doc.GetAllPrototypes(d); + let proto = protos[protos.length - 2]; + Object.keys(proto).forEach(key => { + if (StrCast(d[key]).includes(query)) { + console.log(key, d[key]); + hlights.push(key); + } + }); + if (hlights.length > 0) { + found.push([d, hlights, []]); + }; + }); + console.log(found); + this._results = found; + this._numTotalResults = found.length; + } + + } + applyBasicFieldFilters(query: string) { let finalQuery = ""; @@ -399,15 +429,15 @@ export class SearchBox extends ViewBoxBaseComponent { - + this.checkIcons(); if (reset) { this.layoutDoc._searchString = ""; } - this.noresults= false; + this.noresults = false; this.dataDoc[this.fieldKey] = new List([]); - this.headercount=0; - this.children=0; + this.headercount = 0; + this.children = 0; this.buckets = []; this.new_buckets = {}; const query = StrCast(this.layoutDoc._searchString); @@ -422,7 +452,7 @@ export class SearchBox extends ViewBoxBaseComponent { console.log("Resubmitting search"); - this.submitSearch(); + }, 60000); } @@ -430,7 +460,7 @@ export class SearchBox extends ViewBoxBaseComponent { this._resultsOpen = true; this._searchbarOpen = true; @@ -440,6 +470,9 @@ export class SearchBox extends ViewBoxBaseComponent key.substring(0, key.length - 2)) : []; + console.log(hlights); doc ? console.log(Cast(doc.context, Doc)) : null; if (this.findCommonElements(hlights)) { } @@ -602,7 +636,7 @@ export class SearchBox extends ViewBoxBaseComponent) => { if (!this._resultsRef.current) return; @@ -616,7 +650,8 @@ export class SearchBox extends ViewBoxBaseComponent(); if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { - this.noresults=true; + console.log("TRU"); + this.noresults = true; return; } @@ -660,8 +695,9 @@ export class SearchBox extends ViewBoxBaseComponent headers.add(item)); this._visibleDocuments[i] = result[0]; this._isSearch[i] = "search"; + console.log(result[0]); Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); - this.children ++; + this.children++; } } else { @@ -677,8 +713,10 @@ export class SearchBox extends ViewBoxBaseComponent schemaheaders.push(new SchemaHeaderField(item, "#f1efeb"))) - this.headercount= schemaheaders.length; + this.headercount = schemaheaders.length; this.props.Document._schemaHeaders = new List(schemaheaders); if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; @@ -699,7 +737,7 @@ export class SearchBox extends ViewBoxBaseComponent 3 ? length = 650 : length = length * 205 + 51; let height = this.children; - height > 8 ? height = 31+31*8: height = 31*height+ 31; + height > 8 ? height = 31 + 31 * 8 : height = 31 * height + 31; return (
{/* StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection"> */} -
{Doc.CurrentUserEmail}
- +
{Doc.CurrentUserEmail}
+ + style={{ paddingLeft: 23, width: this._searchbarOpen ? "200px" : "200px" }} /> {/* */}
0 ? { overflow: "visible" } : { overflow: "hidden" }}> @@ -1154,51 +1192,53 @@ export class SearchBox extends ViewBoxBaseComponent
-
- {this._searchbarOpen === true ? -
-
0?length: 251, - height: 25, - borderColor: "#9c9396", - border: "1px solid", - borderRadius:"0.3em", - borderBottom:this.open===false?"1px solid":"none", - position: "absolute", - background: "rgb(241, 239, 235)", - top:29}}> -
: undefined}
Date: Sun, 26 Jul 2020 19:16:44 -0400 Subject: better radio buttons --- src/client/views/search/SearchBox.tsx | 48 +++++++++++++++++------------------ 1 file changed, 24 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index ee2dab2f6..0daebf0cf 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -383,6 +383,9 @@ export class SearchBox extends ViewBoxBaseComponent([]); this.headercount = 0; this.children = 0; @@ -564,7 +567,7 @@ export class SearchBox extends ViewBoxBaseComponent(); startDragCollection = async () => { const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString))); @@ -650,8 +653,9 @@ export class SearchBox extends ViewBoxBaseComponent(); if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { - console.log("TRU"); - this.noresults = true; + if (this.noresults === "") { + this.noresults = "No search results :("; + } return; } @@ -1206,27 +1210,23 @@ export class SearchBox extends ViewBoxBaseComponent -
- -
+
+
+ +
+
+ +
+
- {this.noresults === false ?
:
-
No search results :(
+
{this.noresults}
}
: undefined}
-- cgit v1.2.3-70-g09d2 From 8722fe67029f76f572eacd6e02d623690ca94793 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sun, 26 Jul 2020 22:08:13 -0700 Subject: added options to hide markers/labels --- src/client/documents/Documents.ts | 1 + src/client/views/nodes/AudioBox.tsx | 110 ++++++++++++++++++++---------------- src/fields/ScriptField.ts | 1 - 3 files changed, 62 insertions(+), 50 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 170426db3..ffc22292e 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -562,6 +562,7 @@ export namespace Docs { viewDoc.author = Doc.CurrentUserEmail; viewDoc.type !== DocumentType.LINK && DocUtils.MakeLinkToActiveAudio(viewDoc); + console.log("audio link!"); return Doc.assign(viewDoc, delegateProps, true); } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index bfa48578b..0cab0fc61 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -176,7 +176,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent -1) { setTimeout(() => this.playFrom(0), -seekTimeInSeconds * 1000); } else { - console.log("dude"); this.pause(); } } else if (seekTimeInSeconds <= this._ele.duration) { @@ -227,7 +226,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent { const funcs: ContextMenuProps[] = []; funcs.push({ description: (this.layoutDoc.playOnSelect ? "Don't play" : "Play") + " when document selected", event: () => this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" }); - + funcs.push({ description: (this.layoutDoc.hideMarkers ? "Don't hide" : "Hide") + " markers", event: () => this.layoutDoc.hideMarkers = !this.layoutDoc.hideMarkers, icon: "expand-arrows-alt" }) + funcs.push({ description: (this.layoutDoc.hideLabels ? "Don't hide" : "Hide") + " labels", event: () => this.layoutDoc.hideLabels = !this.layoutDoc.hideLabels, icon: "expand-arrows-alt" }) + funcs.push({ description: (this.layoutDoc.playOnClick ? "Don't play" : "Play") + " onClick", event: () => this.layoutDoc.playOnClick = !this.layoutDoc.playOnClick, icon: "expand-arrows-alt" }) ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } @@ -433,8 +434,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox.LabelScript; // see if time is encapsulated by comparing time on both sides (for moving onto a new row in the timeline for the markers) + check = (e: React.PointerEvent) => { + if (e.target as HTMLElement === document.getElementById("timeline")) { + return true; + } + } render() { - trace(); + //trace(); const interactive = this.active() ? "-interactive" : ""; return
{!this.path ? @@ -568,56 +572,56 @@ export class AudioBox extends ViewBoxAnnotatableComponent {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => { - // let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false }); let rect; (!m.isLabel) ? - - rect = -
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} > -
this.onPointerDown(e, m, true)}>
- - {/* */} - {/*
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)) }}>
*/} -
this.onPointerDown(e, m, false)}>
-
+ (this.layoutDoc.hideMarkers) ? (null) : + rect = +
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} > +
this.onPointerDown(e, m, true)}>
+ + {/* */} + {/*
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)) }}>
*/} +
this.onPointerDown(e, m, false)}>
+
: - rect = -
- -
; + (this.layoutDoc.hideLabels) ? (null) : + rect = +
+ +
; return rect; })} {DocListCast(this.dataDoc.links).map((l, i) => { - console.log("hi"); + let la1 = l.anchor1 as Doc; let la2 = l.anchor2 as Doc; let linkTime = NumCast(l.anchor2_timecode); @@ -627,6 +631,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent e.stopPropagation()}> @@ -648,7 +660,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); this.pause(); e.stopPropagation(); e.preventDefault(); } }} />
; })} -
{ e.stopPropagation(); e.preventDefault(); console.log("hi"); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%` }} /> +
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%` }} /> {this.audio}
diff --git a/src/fields/ScriptField.ts b/src/fields/ScriptField.ts index 4604a2132..bd08b2f32 100644 --- a/src/fields/ScriptField.ts +++ b/src/fields/ScriptField.ts @@ -53,7 +53,6 @@ async function deserializeScript(script: ScriptField) { if (script.script.originalScript === 'convertToButtons(dragData)') { return (script as any).script = (ScriptField.ConvertToButtons ?? (ScriptField.ConvertToButtons = ComputedField.MakeFunction('convertToButtons(dragData)', { dragData: "DocumentDragData" })))?.script; } - console.log(script.script.originalScript); const captures: ProxyField = (script as any).captures; if (captures) { const doc = (await captures.value())!; -- cgit v1.2.3-70-g09d2 From 61f7e5f47a02c004982640270feb8176e9407eb5 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Mon, 27 Jul 2020 17:33:01 -0400 Subject: filtering in search bar --- .../views/collections/CollectionSchemaView.tsx | 5 +- src/client/views/search/SearchBox.tsx | 110 ++++++++++++++++++--- 2 files changed, 98 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 0b3d8e20d..4ecc7ba60 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -315,7 +315,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @undoBatch @action changeColumns = (oldKey: string, newKey: string, addNew: boolean, filter?: string) => { - console.log("COL"); const columns = this.columns; if (columns === undefined) { this.columns = new List([new SchemaHeaderField(newKey, "f1efeb")]); @@ -630,10 +629,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { return
this.props.active(true) && e.stopPropagation()} diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 0daebf0cf..7601ea12e 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -39,6 +39,7 @@ import { listSpec } from '../../../fields/Schema'; import * as _ from "lodash"; import { checkIfStateModificationsAreAllowed } from 'mobx/lib/internal'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; +import { indexOf } from 'lodash'; library.add(faTimes); @@ -187,8 +188,16 @@ export class SearchBox extends ViewBoxBaseComponent) { - //this.layoutDoc._searchString = e.target.value; + this.layoutDoc._searchString = e.target.value; + console.log(e.target.value); this.newsearchstring = e.target.value; + + if (this.filter === true) { + runInAction(() => { this.open = false }); + this.submitFilter(); + } + + if (e.target.value === "") { console.log("CLOSE"); runInAction(() => { this.open = false }); @@ -205,7 +214,6 @@ export class SearchBox extends ViewBoxBaseComponent { if (e.key === "Enter") { - console.log(this.newsearchstring) this.layoutDoc._searchString = this.newsearchstring; // if (this._icons !== this._allIcons) { // runInAction(() => { this.expandedBucket = false }); @@ -219,7 +227,10 @@ export class SearchBox extends ViewBoxBaseComponent { this.open = false }); } - this.submitSearch(); + if (this.filter === false) { + this.submitSearch(); + } + } } @@ -430,6 +441,52 @@ export class SearchBox extends ViewBoxBaseComponent { + // let hlights: string[] = []; + // const protos = Doc.GetAllPrototypes(d); + // let proto = protos[protos.length - 2]; + // Object.keys(proto).forEach(key => { + // console.log(key); + // console.log(StrCast(this.layoutDoc._searchString)); + // Doc.setDocFilter(selectedCollection.props.Document, key, StrCast(this.layoutDoc._searchString), "match"); + + // // if (StrCast(d[key]).includes(query)) { + // // console.log(key, d[key]); + // // hlights.push(key); + // // } + // }); + // // if (hlights.length > 0) { + // // found.push([d, hlights, []]); + // // }; + // }); + // console.log(found); + // this._results = found; + // this._numTotalResults = found.length; + } + else { + this.noresults = "No collection selected :("; + } + + //Doc.setDocFilter(this.props.Document, newKey, filter, "match"); + } + @action submitSearch = async (reset?: boolean) => { @@ -474,7 +531,7 @@ export class SearchBox extends ViewBoxBaseComponent { return null; } + + @observable filter = false; + //Make id layour document render() { this.props.Document._chromeStatus === "disabled"; @@ -1200,7 +1260,7 @@ export class SearchBox extends ViewBoxBaseComponent
0 ? length : 251, + width: this.headercount > 0 ? length : 253, height: 25, borderColor: "#9c9396", border: "1px solid", @@ -1211,21 +1271,43 @@ export class SearchBox extends ViewBoxBaseComponent
-
-
- {this.noresults === "" ?
Date: Tue, 28 Jul 2020 23:48:12 +0800 Subject: scrollProgressivize + viewfinder --- src/client/util/DocumentManager.ts | 4 + src/client/views/.DS_Store | Bin 6148 -> 6148 bytes .../views/collections/CollectionDockingView.scss | 62 +++ .../views/collections/CollectionDockingView.tsx | 24 ++ .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 42 +- src/client/views/nodes/PresBox.scss | 118 +++++- src/client/views/nodes/PresBox.tsx | 436 +++++++++++++++------ .../views/presentationview/PresElementBox.tsx | 6 +- 9 files changed, 550 insertions(+), 146 deletions(-) (limited to 'src') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 237ea7675..d18eac374 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -127,6 +127,10 @@ export class DocumentManager { CollectionDockingView.AddRightSplit(doc); finished?.(); } + // static openInPlace = (doc: Doc, finished?: () => void) => { + // CollectionDockingView.AddTab(doc); + // finished?.(); + // } public jumpToDocument = async ( targetDoc: Doc, // document to display willZoom: boolean, // whether to zoom doc to take up most of screen diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store index 3717a2923..3ce88292c 100644 Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 1895c06a1..9b14df760 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -18,6 +18,68 @@ } } } + +.miniPres:hover { + opacity: 1; +} + +.miniPres { + position: absolute; + overflow: hidden; + right: 10; + top: 10; + opacity: 0.1; + transition: all 0.4s; + /* border: solid 1px; */ + color: white; + /* box-shadow: black 0.4vw 0.4vw 0.8vw; */ + + .miniPresOverlay { + display: grid; + grid-template-columns: auto auto auto auto auto auto auto auto; + grid-template-rows: 100%; + height: 100%; + justify-items: center; + align-items: center; + + .miniPres-button-text { + display: flex; + height: 30; + font-weight: 400; + min-width: 100%; + border-radius: 5px; + align-items: center; + justify-content: center; + transition: all 0.3s; + } + + .miniPres-divider { + width: 1px; + height: 80%; + border-right: solid 2px #5a5a5a; + } + + .miniPres-button { + display: flex; + height: 30; + min-width: 30; + border-radius: 100%; + align-items: center; + justify-content: center; + transition: all 0.3s; + } + + .miniPres-button:hover { + background-color: #5a5a5a; + } + + .miniPres-button-text:hover { + background-color: #5a5a5a; + } + } +} + + .lm_title { margin-top: 3px; border-radius: 5px; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 53b2d5254..b82a33bd8 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -31,6 +31,8 @@ import { SnappingManager } from '../../util/SnappingManager'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import { listSpec } from '../../../fields/Schema'; import { clamp } from 'lodash'; +import { PresBox } from '../nodes/PresBox'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; const _global = (window /* browser */ || global /* node */) as any; @observer @@ -838,6 +840,27 @@ export class DockedFrameRenderer extends React.Component { return false; }), emptyFunction, emptyFunction); } + getCurrentFrame = (): number => { + const presTargetDoc = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex].presentationTargetDoc, Doc, null); + const currentFrame = Cast(presTargetDoc.currentFrame, "number", null); + return currentFrame; + } + renderMiniPres() { + return
+
+
+
PresBox.Instance.startOrResetPres(PresBox.Instance.itemIndex)}>
+
+
+
Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}
+ {/*
{this.getCurrentFrame}
*/} +
+
EXIT
+
+
; + } renderMiniMap() { return
{ ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} /> {document._viewType === CollectionViewType.Freeform && !this._document?.hideMinimap ? this.renderMiniMap() : (null)} + {document._viewType === CollectionViewType.Freeform && this._document?.miniPres ? this.renderMiniPres() : (null)} ; } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index e22b400c0..79540d19e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -214,7 +214,7 @@ export class CollectionFreeFormView extends CollectionSubView diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 480abdaed..5d1db6de2 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -76,22 +76,30 @@ export class CollectionFreeFormDocumentView extends DocComponent (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), + w: Cast(doc["w-indexed"], listSpec("number"), [NumCast(doc._width)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number), opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number), }); } - public static setValues(time: number, d: Doc, x?: number, y?: number, opacity?: number) { + public static setValues(time: number, d: Doc, x?: number, y?: number, h?: number, w?: number, opacity?: number) { const timecode = Math.round(time); + const hindexed = Cast(d["h-indexed"], listSpec("number"), []).slice(); + const windexed = Cast(d["w-indexed"], listSpec("number"), []).slice(); const xindexed = Cast(d["x-indexed"], listSpec("number"), []).slice(); const yindexed = Cast(d["y-indexed"], listSpec("number"), []).slice(); const oindexed = Cast(d["opacity-indexed"], listSpec("number"), []).slice(); xindexed[timecode] = x as any as number; yindexed[timecode] = y as any as number; + hindexed[timecode] = h as any as number; + windexed[timecode] = w as any as number; oindexed[timecode] = opacity as any as number; d["x-indexed"] = new List(xindexed); d["y-indexed"] = new List(yindexed); + d["h-indexed"] = new List(hindexed); + d["w-indexed"] = new List(windexed); d["opacity-indexed"] = new List(oindexed); } public static updateKeyframe(docs: Doc[], time: number) { @@ -99,7 +107,11 @@ export class CollectionFreeFormDocumentView extends DocComponent { const xindexed = Cast(doc['x-indexed'], listSpec("number"), null); const yindexed = Cast(doc['y-indexed'], listSpec("number"), null); + const hindexed = Cast(doc['h-indexed'], listSpec("number"), null); + const windexed = Cast(doc['w-indexed'], listSpec("number"), null); const opacityindexed = Cast(doc['opacity-indexed'], listSpec("number"), null); + hindexed?.length <= timecode + 1 && hindexed.push(undefined as any as number); + windexed?.length <= timecode + 1 && windexed.push(undefined as any as number); xindexed?.length <= timecode + 1 && xindexed.push(undefined as any as number); yindexed?.length <= timecode + 1 && yindexed.push(undefined as any as number); opacityindexed?.length <= timecode + 1 && opacityindexed.push(undefined as any as number); @@ -118,14 +130,24 @@ export class CollectionFreeFormDocumentView extends DocComponent(); const top = new List(); const left = new List(); + // width.push(100); + // height.push(100); + // top.push(0); + // left.push(0); width.push(NumCast(doc.width)); height.push(NumCast(doc.height)); top.push(NumCast(doc.height) / -2); left.push(NumCast(doc.width) / -2); - doc["width-indexed"] = width; - doc["height-indexed"] = height; - doc["top-indexed"] = top; - doc["left-indexed"] = left; + doc["viewfinder-width-indexed"] = width; + doc["viewfinder-height-indexed"] = height; + doc["viewfinder-top-indexed"] = top; + doc["viewfinder-left-indexed"] = left; + } + + public static setupScroll(doc: Doc, scrollProgressivize: boolean = false) { + const scrollList = new List(); + scrollList.push(NumCast(doc._scrollTop)); + doc["scroll-indexed"] = scrollList; } public static setupKeyframes(docs: Doc[], timecode: number, progressivize: boolean = false) { @@ -134,6 +156,8 @@ export class CollectionFreeFormDocumentView extends DocComponent(numberRange(timecode + 1).map(i => undefined) as any as number[]); const ylist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); + const wlist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); + const hlist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); const olist = new List(numberRange(timecode + 1).map(t => progressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); let oarray: List; console.log(doc.title + "AF: " + doc.appearFrame); @@ -143,15 +167,21 @@ export class CollectionFreeFormDocumentView extends DocComponent; const PresBoxDocument = makeInterface(documentSchema); @@ -72,11 +72,9 @@ export class PresBox extends ViewBoxBaseComponent onPointerOver = () => { document.addEventListener("keydown", this.keyEvents, true); - // document.addEventListener("keydown", this.keyEvents, false); } onPointerLeave = () => { - // document.removeEventListener("keydown", this.keyEvents, false); document.removeEventListener("keydown", this.keyEvents, true); } @@ -96,18 +94,34 @@ export class PresBox extends ViewBoxBaseComponent presTargetDoc.currentFrame = curFrame + 1; if (presTargetDoc.zoomProgressivize) { const srcContext = Cast(presTargetDoc.context, Doc, null); - if (srcContext) { - srcContext._panX = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]); - srcContext._panY = this.checkList(presTargetDoc, presTargetDoc["top-indexed"]); - srcContext._viewScale = this.checkList(presTargetDoc, presTargetDoc["width-indexed"]); - } - presTargetDoc._panY = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]); - const resize = document.getElementById('resizable'); - if (resize) { - resize.style.width = this.checkList(presTargetDoc, presTargetDoc["width-indexed"]) + 'px'; - resize.style.height = this.checkList(presTargetDoc, presTargetDoc["height-indexed"]) + 'px'; - resize.style.top = this.checkList(presTargetDoc, presTargetDoc["top-indexed"]) + 'px'; - resize.style.left = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]) + 'px'; + const srcDocView = DocumentManager.Instance.getDocumentView(srcContext); + if (srcContext && srcDocView) { + const layoutdoc = Doc.Layout(presTargetDoc); + const panelWidth: number = srcDocView.props.PanelWidth(); + const panelHeight: number = srcDocView.props.PanelHeight(); + console.log("srcDocView: " + srcDocView.props.PanelWidth()); + // console.log("layoutdoc._width: " + layoutdoc._width); + // console.log("srcContext._width: " + srcContext._width); + const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2; + const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2; + // const newPanX = NumCast(presTargetDoc.x) + panelWidth / 2; + // const newPanY = NumCast(presTargetDoc.y) + panelHeight / 2; + let newScale = 0.9 * Math.min(Number(panelWidth) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]), Number(panelHeight) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"])); + // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); + // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); + srcContext._panX = newPanX + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); + srcContext._panY = newPanY + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); + // srcContext._panX = newPanX + // srcContext._panY = newPanY + srcContext._viewScale = newScale; + console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale); + const resize = document.getElementById('resizable'); + if (resize) { + resize.style.width = this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) + 'px'; + resize.style.height = this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) + 'px'; + resize.style.top = this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + 'px'; + resize.style.left = this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + 'px'; + } } } // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide @@ -322,8 +336,8 @@ export class PresBox extends ViewBoxBaseComponent this.updateCurrentPresentation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (this._presTimer && this.layoutDoc.presStatus === "auto") { - clearInterval(this._presTimer); + if (this.layoutDoc.presStatus === "auto") { + if (this._presTimer) clearInterval(this._presTimer); this.layoutDoc.presStatus = "manual"; } else { this.layoutDoc.presStatus = "auto"; @@ -381,28 +395,48 @@ export class PresBox extends ViewBoxBaseComponent }); } - updateMinimize = action((e: React.ChangeEvent, mode: CollectionViewType) => { - if (BoolCast(this.layoutDoc.inOverlay) !== (mode === CollectionViewType.Invalid)) { - if (this.layoutDoc.inOverlay) { + updateMinimize = async () => { + const docToJump = this.childDocs[0]; + const aliasOf = await DocCastAsync(docToJump.aliasOf); + const srcContext = aliasOf && await DocCastAsync(aliasOf.context); + if (srcContext) { + if (srcContext.miniPres) { + document.removeEventListener("keydown", this.keyEvents, true); + srcContext.miniPres = false; Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); CollectionDockingView.AddRightSplit(this.rootDoc); this.layoutDoc.inOverlay = false; } else { - const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - this.rootDoc.x = pt[0];// 500;//e.clientX + 25; - this.rootDoc.y = pt[1];////e.clientY - 25; + document.addEventListener("keydown", this.keyEvents, true); + srcContext.miniPres = true; this.props.addDocTab?.(this.rootDoc, "close"); Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); } + + } - }); + // if (srcContext) { + // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); + // CollectionDockingView.AddRightSplit(this.rootDoc); + // this.layoutDoc.inOverlay = false; + // } + // else { + // const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + // this.rootDoc.x = pt[0];// 500;//e.clientX + 25; + // this.rootDoc.y = pt[1];////e.clientY - 25; + // this.props.addDocTab?.(this.rootDoc, "close"); + // Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); + // } + // } + }; @undoBatch viewChanged = action((e: React.ChangeEvent) => { //@ts-ignore const viewType = e.target.selectedOptions[0].value as CollectionViewType; viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here - this.updateMinimize(e, this.rootDoc._viewType = viewType); + // this.updateMinimize(this.rootDoc._viewType = viewType); + if (viewType === CollectionViewType.Stacking) this.rootDoc._gridGap = 5; }); @undoBatch @@ -411,19 +445,24 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (movement === 'zoom') { activeItem.presZoomButton = !activeItem.presZoomButton; - activeItem.presMovement = 'Zoom'; + if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom'; + else activeItem.presMovement = 'None'; activeItem.presNavButton = false; } else if (movement === 'nav') { activeItem.presZoomButton = false; - activeItem.presMovement = 'Pan'; activeItem.presNavButton = !activeItem.presNavButton; + if (activeItem.presNavButton) activeItem.presMovement = 'Pan'; + else activeItem.presMovement = 'None'; } else if (movement === 'switch') { - activeItem.presMovement = 'Switch'; targetDoc.presTransition = 0; + activeItem.presSwitchButton = !activeItem.presSwitchButton; + if (activeItem.presSwitchButton) activeItem.presMovement = 'Switch'; + else activeItem.presMovement = 'None'; } else { activeItem.presMovement = 'None'; activeItem.presZoomButton = false; activeItem.presNavButton = false; + activeItem.presSwitchButton = false; } }); @@ -439,7 +478,7 @@ export class PresBox extends ViewBoxBaseComponent childLayoutTemplate = () => this.rootDoc._viewType !== CollectionViewType.Stacking ? undefined : this.presElement; removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc); getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight - panelHeight = () => this.props.PanelHeight() - 20; + panelHeight = () => this.props.PanelHeight() - 40; active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) @@ -465,9 +504,9 @@ export class PresBox extends ViewBoxBaseComponent //Regular click @action selectElement = (doc: Doc) => { - this._selectedArray = []; + // this._selectedArray = []; this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); - this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); + // this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); console.log(this._selectedArray); } @@ -508,11 +547,11 @@ export class PresBox extends ViewBoxBaseComponent // Ctrl-A to select all } if ((e.metaKey || e.altKey) && e.keyCode === 65) { if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; - // left / a / up to go back - } if (e.keyCode === 37 || 65 || 38) { + // left(37) / a(65) / up(38) to go back + } if (e.keyCode === 37) { if (this.layoutDoc.presStatus !== "edit") this.back(); - // right / d / down to go to next - } if (e.keyCode === 39 || 68 || 40) { + // right (39) / d(68) / down(40) to go to next + } if (e.keyCode === 39) { if (this.layoutDoc.presStatus !== "edit") this.next(); // spacebar to 'present' or go to next slide } if (e.keyCode === 32) { @@ -526,6 +565,7 @@ export class PresBox extends ViewBoxBaseComponent @observable private progressivizeTools: boolean = false; @observable private moreInfoTools: boolean = false; @observable private playTools: boolean = false; + @observable private presentTools: boolean = false; @observable private pathBoolean: boolean = false; @observable private expandBoolean: boolean = false; @@ -548,6 +588,10 @@ export class PresBox extends ViewBoxBaseComponent // For toggling the tools for progressivize @action toggleProgressivize = () => { this.progressivizeTools = !this.progressivizeTools; + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + targetDoc.editZoomProgressivize = false; + targetDoc.editProgressivize = false; this.transitionTools = false; this.newDocumentTools = false; this.moreInfoTools = false; @@ -570,6 +614,16 @@ export class PresBox extends ViewBoxBaseComponent this.moreInfoTools = false; } + // For toggling the options when the user wants to select play + @action togglePresent = () => { + this.presentTools = !this.presentTools; + this.playTools = false; + this.transitionTools = false; + this.newDocumentTools = false; + this.progressivizeTools = false; + this.moreInfoTools = false; + } + @action toggleAllDropdowns() { this.transitionTools = false; this.newDocumentTools = false; @@ -659,11 +713,9 @@ export class PresBox extends ViewBoxBaseComponent strokeDasharray: '10 5', }} fill="none" - // markerStart="url(#square)" - // markerEnd="url(#arrow)" - marker-start="url(#markerSquare)" - marker-mid="url(#markerSquare)" - marker-end="url(#markerArrow)" + markerStart="url(#markerSquare)" + markerMid="url(#markerSquare)" + markerEnd="url(#markerArrow)" />); } @@ -725,6 +777,7 @@ export class PresBox extends ViewBoxBaseComponent const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93); const durationThumbLocation = String(9.48 * Number(duration)); const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; + activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom'; return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
@@ -742,8 +795,8 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Switch
- ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> -
+ ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> +
{transitionSpeed}s
Slow
@@ -784,7 +837,7 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Roll'}>Roll
-
+
{"Enter from left"}
}>
targetDoc.presEffectDirection = 'left'}>
{"Enter from right"}
}>
targetDoc.presEffectDirection = 'right'}>
{"Enter from top"}
}>
targetDoc.presEffectDirection = 'top'}>
 @@ -863,6 +916,24 @@ export class PresBox extends ViewBoxBaseComponent
{ type = "freeform"; })}>Freeform
+
+ Preset layouts: +
+
+
HEADER
+
Content goes here
+
+
+
HEADER
+
Some content
+
Some more content
+
+
+
HEADER
+
Content goes here
+
+
+
this.createNewSlide(title, type)}> Create New Slide @@ -877,10 +948,23 @@ export class PresBox extends ViewBoxBaseComponent return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
this.startOrResetPres(this.itemIndex)}> - Start from current slide + Present from current slide
this.startOrResetPres(0)}> - Start from first slide + Present from first slide +
+
+ ); + } + + @computed get presentDropdown() { + return ( +
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> +
+ Minimize +
+
this.startOrResetPres(0)}> + Sidebar view
); @@ -916,10 +1000,10 @@ export class PresBox extends ViewBoxBaseComponent if (tagDoc.zoomProgressivize) { const resize = document.getElementById('resizable'); if (resize) { - resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px'; - resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px'; - resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px'; - resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px'; + resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px'; + resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px'; + resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px'; + resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px'; } } } @@ -938,10 +1022,10 @@ export class PresBox extends ViewBoxBaseComponent if (tagDoc.zoomProgressivize) { const resize = document.getElementById('resizable'); if (resize) { - resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px'; - resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px'; - resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px'; - resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px'; + resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px'; + resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px'; + resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px'; + resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px'; } } } @@ -976,18 +1060,22 @@ export class PresBox extends ViewBoxBaseComponent
-
+
Child documents
Edit
-
-
Internal zoom
-
Edit
+
+
Internal zoom
+
Edit
-
+
Text progressivize
Edit
+
+
Scroll progressivize
+
Edit
+
@@ -995,30 +1083,59 @@ export class PresBox extends ViewBoxBaseComponent } } - //Progressivize Zoom + //Toggle whether the user edits or not + @action + editZoomProgressivize = (e: React.MouseEvent) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (!targetDoc.editZoomProgressivize) { + targetDoc.editZoomProgressivize = true; + } else { + targetDoc.editZoomProgressivize = false; + } + } + + //Toggle whether the user edits or not @action - zoomProgressivize = (e: React.MouseEvent) => { + editScrollProgressivize = (e: React.MouseEvent) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (targetDoc?.zoomProgressivize) { - targetDoc.zoomProgressivize = false; + if (!targetDoc.editScrollProgressivize) { + targetDoc.editScrollProgressivize = true; } else { - targetDoc.zoomProgressivize = true; + targetDoc.editScrollProgressivize = false; } } + //Progressivize Zoom + @action + progressivizeScroll = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + activeItem.scrollProgressivize = !activeItem.scrollProgressivize; + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + targetDoc.scrollProgressivize = !targetDoc.zoomProgressivize; + CollectionFreeFormDocumentView.setupScroll(targetDoc, true); + if (targetDoc.editScrollProgressivize) { + targetDoc.editScrollProgressivize = false; + targetDoc.currentFrame = 0; + targetDoc.lastFrame = 0; + } + } + + //Progressivize Zoom @action progressivizeZoom = (e: React.MouseEvent) => { e.stopPropagation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); activeItem.zoomProgressivize = !activeItem.zoomProgressivize; const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); targetDoc.zoomProgressivize = !targetDoc.zoomProgressivize; - console.log(targetDoc.zoomProgressivize); - if (activeItem.zoomProgressivize) { - console.log("progressivize"); + CollectionFreeFormDocumentView.setupZoom(targetDoc, true); + if (targetDoc.editZoomProgressivize) { + targetDoc.editZoomProgressivize = false; targetDoc.currentFrame = 0; + targetDoc.lastFrame = 0; } } @@ -1081,9 +1198,9 @@ export class PresBox extends ViewBoxBaseComponent targetDoc.editProgressivize = false; activeItem.presProgressivize = false; targetDoc.presProgressivize = false; - docs.forEach((doc, index) => { - doc.appearFrame = 0; - }); + // docs.forEach((doc, index) => { + // doc.appearFrame = 0; + // }); targetDoc.currentFrame = 0; targetDoc.lastFrame = 0; } @@ -1130,6 +1247,21 @@ export class PresBox extends ViewBoxBaseComponent private _isDraggingBR = false; private _isDraggingBL = false; private _isDragging = false; + // private _drag = ""; + + // onPointerDown = (e: React.PointerEvent): void => { + // e.stopPropagation(); + // e.preventDefault(); + // if (e.button === 0) { + // this._drag = e.currentTarget.id; + // console.log(this._drag); + // } + // document.removeEventListener("pointermove", this.onPointerMove); + // document.addEventListener("pointermove", this.onPointerMove); + // document.removeEventListener("pointerup", this.onPointerUp); + // document.addEventListener("pointerup", this.onPointerUp); + // } + //Adds event listener so knows pointer is down and moving onPointerMid = (e: React.PointerEvent): void => { @@ -1203,87 +1335,136 @@ export class PresBox extends ViewBoxBaseComponent onPointerMove = (e: PointerEvent): void => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const tagDocView = DocumentManager.Instance.getDocumentView(targetDoc); e.stopPropagation(); e.preventDefault(); const doc = document.getElementById('resizable'); - if (doc) { + if (doc && tagDocView) { + console.log(tagDocView.props.ScreenToLocalTransform().Scale); let height = doc.offsetHeight; let width = doc.offsetWidth; let top = doc.offsetTop; let left = doc.offsetLeft; + // const newHeightB = height += (e.movementY * NumCast(targetDoc._viewScale)); + // const newHeightT = height -= (e.movementY * NumCast(targetDoc._viewScale)); + // const newWidthR = width += (e.movementX * NumCast(targetDoc._viewScale)); + // const newWidthL = width -= (e.movementX * NumCast(targetDoc._viewScale)); + // const newLeft = left += (e.movementX * NumCast(targetDoc._viewScale)); + // const newTop = top += (e.movementY * NumCast(targetDoc._viewScale)); + // switch (this._drag) { + // case "": break; + // case "resizer-br": + // doc.style.height = newHeightB + 'px'; + // doc.style.width = newWidthR + 'px'; + // break; + // case "resizer-bl": + // doc.style.height = newHeightB + 'px'; + // doc.style.width = newWidthL + 'px'; + // doc.style.left = newLeft + 'px'; + // break; + // case "resizer-tr": + // doc.style.width = newWidthR + 'px'; + // doc.style.height = newHeightT + 'px'; + // doc.style.top = newTop + 'px'; + // case "resizer-tl": + // doc.style.width = newWidthL + 'px'; + // doc.style.height = newHeightT + 'px'; + // doc.style.top = newTop + 'px'; + // doc.style.left = newLeft + 'px'; + // case "resizable": + // doc.style.top = newTop + 'px'; + // doc.style.left = newLeft + 'px'; + // } //Bottom right if (this._isDraggingBR) { - const newHeight = height += e.movementY; + const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.height = newHeight + 'px'; - const newWidth = width += e.movementX; + const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.width = newWidth + 'px'; // Bottom left } else if (this._isDraggingBL) { - const newHeight = height += e.movementY; + const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.height = newHeight + 'px'; - const newWidth = width -= e.movementX; + const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.width = newWidth + 'px'; - const newLeft = left += e.movementX; + const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.left = newLeft + 'px'; // Top right } else if (this._isDraggingTR) { - const newWidth = width += e.movementX; + const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.width = newWidth + 'px'; - const newHeight = height -= e.movementY; + const newHeight = height -= (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.height = newHeight + 'px'; - const newTop = top += e.movementY; + const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.top = newTop + 'px'; // Top left } else if (this._isDraggingTL) { - const newWidth = width -= e.movementX; + const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.width = newWidth + 'px'; - const newHeight = height -= e.movementY; + const newHeight = height -= (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.height = newHeight + 'px'; - const newTop = top += e.movementY; + const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.top = newTop + 'px'; - const newLeft = left += e.movementX; + const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.left = newLeft + 'px'; } else if (this._isDragging) { - const newTop = top += e.movementY; + const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.top = newTop + 'px'; - const newLeft = left += e.movementX; + const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.left = newLeft + 'px'; } - this.updateList(targetDoc, targetDoc["width-indexed"], width); - this.updateList(targetDoc, targetDoc["height-indexed"], height); - this.updateList(targetDoc, targetDoc["top-indexed"], top); - this.updateList(targetDoc, targetDoc["left-indexed"], left); + this.updateList(targetDoc, targetDoc["viewfinder-width-indexed"], width); + this.updateList(targetDoc, targetDoc["viewfinder-height-indexed"], height); + this.updateList(targetDoc, targetDoc["viewfinder-top-indexed"], top); + this.updateList(targetDoc, targetDoc["viewfinder-left-indexed"], left); } } @action checkList = (doc: Doc, list: any): number => { const x: List = list; - return x[NumCast(doc.currentFrame)]; + if (x && x.length >= NumCast(doc.currentFrame) + 1) { + return x[NumCast(doc.currentFrame)]; + } else { + x.length = NumCast(doc.currentFrame) + 1; + x[NumCast(doc.currentFrame)] = x[NumCast(doc.currentFrame) - 1]; + return x[NumCast(doc.currentFrame)]; + } + } @action updateList = (doc: Doc, list: any, val: number) => { const x: List = list; - x[NumCast(doc.currentFrame)] = val; - list = x; + if (x && x.length >= NumCast(doc.currentFrame) + 1) { + x[NumCast(doc.currentFrame)] = val; + list = x; + } else { + x.length = NumCast(doc.currentFrame) + 1; + x[NumCast(doc.currentFrame)] = val; + list = x; + } + } + // scale: NumCast(targetDoc._viewScale), @computed get zoomProgressivizeContainer() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); - CollectionFreeFormDocumentView.setupZoom(targetDoc, true); - - return ( -
-
-
-
-
-
-
-
- ); + if (targetDoc.editZoomProgressivize) { + return ( + <> +
+
+
+
+
+
+
+
+ + ); + } else return null; } @computed get progressivizeChildDocs() { @@ -1341,9 +1522,8 @@ export class PresBox extends ViewBoxBaseComponent return (
); } - @observable - toolbarWidth = (): number => { - console.log(this.props.PanelWidth()); + @computed + get toolbarWidth(): number { const width = this.props.PanelWidth(); return width; } @@ -1361,8 +1541,8 @@ export class PresBox extends ViewBoxBaseComponent
{"View paths"}
}>
 -
{this.expandBoolean ? "Expand all" : "Minimize all"}
}> -
{ this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = false; else doc.presExpandInlineButton = true; }); }}> +
{this.expandBoolean ? "Minimize all" : "Expand all"}
}> +
{ this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}>
@@ -1370,13 +1550,13 @@ export class PresBox extends ViewBoxBaseComponent
{"Transitions"}
}>
-
380 ? "block" : "none" }} className="toolbar-buttonText">  Transitions
+
430 ? "block" : "none" }} className="toolbar-buttonText">  Transitions
{"Progressivize"}
}>
-
380 ? "block" : "none" }} className="toolbar-buttonText">  Progressivize
+
430 ? "block" : "none" }} className="toolbar-buttonText">  Progressivize
@@ -1401,9 +1581,6 @@ export class PresBox extends ViewBoxBaseComponent
- -

uppercase

-
@@ -1425,22 +1602,29 @@ export class PresBox extends ViewBoxBaseComponent onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}> - + {/* */} - + {/* */}
-
this.startOrResetPres(0)}> -   - -
- { e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} /> - {this.playDropdown} -
-
this.layoutDoc.presStatus = "manual"}> - Present -
+ +
this.startOrResetPres(0)}> +   + +
+
{ e.stopPropagation; this.togglePlay(); }}> + + {this.playDropdown} +
+ + +
this.layoutDoc.presStatus = "manual"}>   Present
+
{ e.stopPropagation; this.togglePresent(); }}> + + {this.presentDropdown} +
+
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 6c6bad06a..4d1195808 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -260,11 +260,11 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.targetDoc?.title}`}
-
{"Movement speed"}
}>
{this.transition}
 -
{"Duration of visibility"}
}>
{this.duration}
 +
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 +
{"Duration of visibility"}
}>
300 ? "block" : "none" }}>{this.duration}
{"Remove from presentation"}
}>
e.stopPropagation()} + // onPointerDown={e => e.stopPropagation()} onClick={e => { this.props.removeDocument?.(this.rootDoc); e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From a0f266b7dd7946a12be0d17b523b0a45570c80a6 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 28 Jul 2020 17:03:53 -0400 Subject: filter and other small features --- .../views/collections/CollectionSchemaView.scss | 1 - .../views/collections/CollectionSchemaView.tsx | 1 + src/client/views/nodes/FieldView.tsx | 5 +- src/client/views/search/SearchBox.tsx | 194 +++------------------ 4 files changed, 28 insertions(+), 173 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 83fe54c82..93878d799 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -25,7 +25,6 @@ .collectionSchemaView-tableContainer { width: 100%; height: 100%; - overflow: auto; } .collectionSchemaView-dividerDragger { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 4ecc7ba60..d3c975e5d 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -628,6 +628,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
; return
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 732a254fe..c9fc99a31 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -46,9 +46,10 @@ export interface FieldViewProps { dontRegisterView?: boolean; focus: (doc: Doc) => void; ignoreAutoHeight?: boolean; - PanelWidth: () => number|string; - PanelHeight: () => number|string; + PanelWidth: () => number | string; + PanelHeight: () => number | string; PanelPosition: string; + overflow?: boolean; NativeHeight: () => number; NativeWidth: () => number; setVideoBox?: (player: VideoBox) => void; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 7601ea12e..73932896b 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -452,39 +452,22 @@ export class SearchBox extends ViewBoxBaseComponent { - // let hlights: string[] = []; - // const protos = Doc.GetAllPrototypes(d); - // let proto = protos[protos.length - 2]; - // Object.keys(proto).forEach(key => { - // console.log(key); - // console.log(StrCast(this.layoutDoc._searchString)); - // Doc.setDocFilter(selectedCollection.props.Document, key, StrCast(this.layoutDoc._searchString), "match"); - - // // if (StrCast(d[key]).includes(query)) { - // // console.log(key, d[key]); - // // hlights.push(key); - // // } - // }); - // // if (hlights.length > 0) { - // // found.push([d, hlights, []]); - // // }; - // }); - // console.log(found); - // this._results = found; - // this._numTotalResults = found.length; + let doc = undefined; + if (this.scale === false) { + doc = SelectionManager.SelectedDocuments()[0].props.Document; + } + console.log(this.scale); + if (this.scale === true) { + doc = Cast(Doc.UserDoc().myWorkspaces, Doc) as Doc; + doc = DocListCast(doc.data)[0]; + } + if (doc !== undefined) { + console.log(StrCast(doc.title)); + Doc.setDocFilter(doc, key, values, "match"); } else { this.noresults = "No collection selected :("; } - - //Doc.setDocFilter(this.props.Document, newKey, filter, "match"); } @action @@ -512,7 +495,6 @@ export class SearchBox extends ViewBoxBaseComponent { console.log("Resubmitting search"); - }, 60000); } @@ -708,7 +690,7 @@ export class SearchBox extends ViewBoxBaseComponent(); + let headers = new Set(["title", "author", "creationDate"]); if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { if (this.noresults === "") { this.noresults = "No search results :("; @@ -986,125 +968,6 @@ export class SearchBox extends ViewBoxBaseComponent Doc.RemoveDocFromList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc); moveButtonDoc = (doc: Doc, targetCollection: Doc | undefined, addDocument: (document: Doc) => boolean) => this.remButtonDoc(doc) && addDocument(doc); - @computed get docButtons() { - const nodeBtns = this.props.Document.nodeButtons; - let width = () => NumCast(this.props.Document._width); - // if (StrCast(this.props.Document.title)==="sidebar search stack"){ - width = MainView.Instance.flyoutWidthFunc; - - // } - if (nodeBtns instanceof Doc) { - return
- 100} - renderDepth={0} - backgroundColor={returnEmptyString} - focus={emptyFunction} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} - NativeHeight={() => 100} - NativeWidth={width} - /> -
; - } - return (null); - } - - @computed get keyButtons() { - const nodeBtns = this.props.Document.keyButtons; - let width = () => NumCast(this.props.Document._width); - // if (StrCast(this.props.Document.title)==="sidebar search stack"){ - width = MainView.Instance.flyoutWidthFunc; - // } - if (nodeBtns instanceof Doc) { - return
- 100} - renderDepth={0} - backgroundColor={returnEmptyString} - focus={emptyFunction} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} - NativeHeight={() => 100} - NativeWidth={width} - /> -
; - } - return (null); - } - - @computed get defaultButtons() { - const defBtns = this.props.Document.defaultButtons; - let width = () => NumCast(this.props.Document._width); - // if (StrCast(this.props.Document.title)==="sidebar search stack"){ - width = MainView.Instance.flyoutWidthFunc; - // } - if (defBtns instanceof Doc) { - return
- 100} - renderDepth={0} - backgroundColor={returnEmptyString} - focus={emptyFunction} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} - NativeHeight={() => 100} - NativeWidth={width} - /> -
; - } - return (null); - } - @action.bound updateIcon = async (icon: string) => { if (this._icons.includes(icon)) { @@ -1223,15 +1086,17 @@ export class SearchBox extends ViewBoxBaseComponent 3 ? length = 650 : length = length * 205 + 51; - let height = this.children; - height > 8 ? height = 31 + 31 * 8 : height = 31 * height + 31; + let cols = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length; + let length = 0; + cols > 5 ? length = 1076 : length = cols * 205 + 51; + let height = 0; + let rows = this.children; + rows > 8 ? height = 31 + 31 * 8 : height = 31 * rows + 31; return (
@@ -1239,28 +1104,16 @@ export class SearchBox extends ViewBoxBaseComponent */}
{Doc.CurrentUserEmail}
- + StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg" style={{ position: "relative", left: 24, padding: 1 }} /> - {/* */} -
-
0 ? { overflow: "visible" } : { overflow: "hidden" }}> -
- {this.defaultButtons} -
-
- {this.docButtons} -
-
- {this.keyButtons} -
{this._searchbarOpen === true ?
0 ? length : 253, + width: cols > 0 ? length : 253, height: 25, borderColor: "#9c9396", border: "1px solid", @@ -1315,9 +1168,10 @@ export class SearchBox extends ViewBoxBaseComponent height : () => 0} PanelWidth={this.open === true ? () => length : () => 0} PanelPosition={"absolute"} + overflow={cols > 5 || rows > 8 ? true : false} focus={this.selectElement} ScreenToLocalTransform={Transform.Identity} - />
:
+ />
:
{this.noresults}
}
: undefined} -- cgit v1.2.3-70-g09d2 From 502981833ef7f9e8179bf9c487b1e35404c6d4e1 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Tue, 28 Jul 2020 15:08:56 -0700 Subject: fix recursion bug and make link turn blue --- src/client/views/nodes/AudioBox.scss | 2 +- src/client/views/nodes/AudioBox.tsx | 34 ++++++++++++++++++---- .../views/nodes/formattedText/FormattedTextBox.tsx | 24 +++++++++++++++ 3 files changed, 54 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 7b0e50e60..6d52988bb 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -194,7 +194,7 @@ background: gray; border-radius: 50%; box-shadow: black 2px 2px 1px; - overflow: auto; + overflow: visible; cursor: pointer; .audiobox-marker { diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 0cab0fc61..02932baac 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -72,6 +72,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; + _first: boolean = false; private _isPointerDown = false; private _currMarker: any; @@ -128,6 +129,22 @@ export class AudioBox extends ViewBoxAnnotatableComponent SelectionManager.SelectedDocuments(), selected => { const sel = selected.length ? selected[0].props.Document : undefined; + // if (sel) { + // DocListCast(sel.links).map((l, i) => { + // let la1 = l.anchor1 as Doc; + // let la2 = l.anchor2 as Doc; + // let linkTime = NumCast(l.anchor2_timecode); + // if (Doc.AreProtosEqual(la1, this.dataDoc)) { + // la1 = l.anchor2 as Doc; + // la2 = l.anchor1 as Doc; + // linkTime = NumCast(l.anchor1_timecode); + // } + // console.log(linkTime); + // if (linkTime) { + // this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFrom(linkTime); + // } + // }); + // } this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); }); @@ -186,7 +203,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.pause(), (this._duration) * 1000); } - } else { + } else { // this is getting called because time is greater than duration this.pause(); } } @@ -226,9 +243,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent { const funcs: ContextMenuProps[] = []; funcs.push({ description: (this.layoutDoc.playOnSelect ? "Don't play" : "Play") + " when document selected", event: () => this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" }); - funcs.push({ description: (this.layoutDoc.hideMarkers ? "Don't hide" : "Hide") + " markers", event: () => this.layoutDoc.hideMarkers = !this.layoutDoc.hideMarkers, icon: "expand-arrows-alt" }) - funcs.push({ description: (this.layoutDoc.hideLabels ? "Don't hide" : "Hide") + " labels", event: () => this.layoutDoc.hideLabels = !this.layoutDoc.hideLabels, icon: "expand-arrows-alt" }) - funcs.push({ description: (this.layoutDoc.playOnClick ? "Don't play" : "Play") + " onClick", event: () => this.layoutDoc.playOnClick = !this.layoutDoc.playOnClick, icon: "expand-arrows-alt" }) + funcs.push({ description: (this.layoutDoc.hideMarkers ? "Don't hide" : "Hide") + " markers", event: () => this.layoutDoc.hideMarkers = !this.layoutDoc.hideMarkers, icon: "expand-arrows-alt" }); + funcs.push({ description: (this.layoutDoc.hideLabels ? "Don't hide" : "Hide") + " labels", event: () => this.layoutDoc.hideLabels = !this.layoutDoc.hideLabels, icon: "expand-arrows-alt" }); + funcs.push({ description: (this.layoutDoc.playOnClick ? "Don't play" : "Play") + " onClick", event: () => this.layoutDoc.playOnClick = !this.layoutDoc.playOnClick, icon: "expand-arrows-alt" }); ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } @@ -421,12 +438,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent { console.log("called"); let counter = 0; - if (i == 0) { + if (this._first) { this._markers = []; + this._first = false; } for (let i = 0; i < this._markers.length; i++) { if ((m.audioEnd > this._markers[i].audioStart && m.audioStart < this._markers[i].audioEnd)) { @@ -508,9 +527,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + this._first = true; + } + render() { //trace(); const interactive = this.active() ? "-interactive" : ""; + this.reset(); return
{!this.path ?
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 6b6fc5da2..b1d9be73b 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1295,6 +1295,30 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } e.stopPropagation(); if (e.key === "Tab" || e.key === "Enter") { + // console.log(this._recording); + // if (this._editorView) { + // const state = this._editorView.state; + // const now = Date.now(); + // let mark = schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(now / 1000) }); + // if (!this._break && state.selection.to !== state.selection.from) { + // for (let i = state.selection.from; i <= state.selection.to; i++) { + // const pos = state.doc.resolve(i); + // const um = Array.from(pos.marks()).find(m => m.type === schema.marks.user_mark); + // if (um) { + // mark = um; + // break; + // } + // } + // } + // const recordingStart = DateCast(this.props.Document.recordingStart).date.getTime(); + // this._break = false; + // let value = "" + (mark.attrs.modified * 1000 - recordingStart) / 1000; + // //let value = "[0:02]"; + // const from = state.selection.from; + // const inserted = state.tr.insertText(value).addMark(from, from + value.length + 1, mark); + + // this._editorView.dispatch(inserted.setSelection(TextSelection.create(inserted.doc, from, from + value.length + 1))); + // } e.preventDefault(); } if (e.key === " " || this._lastTimedMark?.attrs.userid !== Doc.CurrentUserEmail) { -- cgit v1.2.3-70-g09d2 From ea8fc6cbc6c3b976a0c345e834c6a91d338f97c5 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 28 Jul 2020 18:49:56 -0400 Subject: ui --- src/client/views/search/SearchBox.tsx | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 73932896b..05befc12f 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -199,6 +199,7 @@ export class SearchBox extends ViewBoxBaseComponent([]); console.log("CLOSE"); runInAction(() => { this.open = false }); } @@ -218,7 +219,7 @@ export class SearchBox extends ViewBoxBaseComponent { this.expandedBucket = false }); // } - if (StrCast(this.layoutDoc._searchString) !== "") { + if (StrCast(this.layoutDoc._searchString) !== "" && this.filter === false) { console.log("OPEN"); runInAction(() => { this.open = true }); } @@ -348,10 +349,6 @@ export class SearchBox extends ViewBoxBaseComponent { const layout: string = StrCast(element.props.Document.layout); - - console.log(DocListCast(element.dataDoc[Doc.LayoutFieldKey(element.dataDoc)])); - console.log(DocListCast(element.dataDoc[Doc.LayoutFieldKey(element.dataDoc)]).length); - //checks if selected view (element) is a collection. if it is, adds to list to search through if (layout.indexOf("Collection") > -1) { //makes sure collections aren't added more than once @@ -472,7 +469,6 @@ export class SearchBox extends ViewBoxBaseComponent { - this.checkIcons(); if (reset) { this.layoutDoc._searchString = ""; @@ -682,6 +678,7 @@ export class SearchBox extends ViewBoxBaseComponent) => { if (!this._resultsRef.current) return; + this.props.Document._schemaHeaders = new List([]); const scrollY = e ? e.currentTarget.scrollTop : this._resultsRef.current ? this._resultsRef.current.scrollTop : 0; const itemHght = 53; @@ -767,8 +764,6 @@ export class SearchBox extends ViewBoxBaseComponent([]); let schemaheaders: SchemaHeaderField[] = []; this.headerscale = headers.size; headers.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb"))) @@ -1126,20 +1121,28 @@ export class SearchBox extends ViewBoxBaseComponent
{this.filter === true ?
-- cgit v1.2.3-70-g09d2 From 28ab7ecd633e92619adfcbd1ce3ca72ddbba7ea8 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 29 Jul 2020 01:05:43 -0400 Subject: fixed up dot anchors on audio labels/anchors --- src/client/documents/Documents.ts | 5 ++++- .../CollectionFreeFormLinkView.tsx | 6 +++--- src/client/views/nodes/AudioBox.tsx | 25 +++++++++------------- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/LinkAnchorBox.tsx | 2 +- src/client/views/nodes/formattedText/marks_rts.ts | 6 +++--- 6 files changed, 22 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index fb9f6fe46..122383744 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -192,6 +192,7 @@ export interface DocumentOptions { filterQuery?: string; linearViewIsExpanded?: boolean; // is linear view expanded isLabel?: boolean; // whether the document is a label or not (video / audio) + useLinkSmallAnchor?: boolean; // whether links to this document should use a miniature linkAnchorBox audioStart?: number; // the time frame where the audio should begin playing audioEnd?: number; // the time frame where the audio should stop playing } @@ -627,7 +628,7 @@ export namespace Docs { } export function AudioDocument(url: string, options: DocumentOptions = {}) { - const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), options); + const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), { hideLinkButton: true, useLinkSmallAnchor: true, ...options }); Doc.GetProto(instance).backgroundColor = ComputedField.MakeFunction("this._audioState === 'playing' ? 'green':'gray'"); return instance; } @@ -925,6 +926,8 @@ export namespace DocUtils { if (target.doc === Doc.UserDoc()) return undefined; const linkDoc = Docs.Create.LinkDocument(source, target, { linkRelationship, layoutKey: "layout_linkView", description }, id); + Doc.GetProto(linkDoc)["anchor1-useLinkSmallAnchor"] = source.doc.useLinkSmallAnchor; + Doc.GetProto(linkDoc)["anchor2-useLinkSmallAnchor"] = target.doc.useLinkSmallAnchor; linkDoc.linkDisplay = true; linkDoc.hidden = true; linkDoc.layout_linkView = Cast(Cast(Doc.UserDoc()["template-button-link"], Doc, null).dragFactory, Doc, null); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index bfe569853..3a2979696 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -54,15 +54,15 @@ export class CollectionFreeFormLinkView extends React.Component ele.getAttribute("targetids")?.includes(AanchorId)); - const targetBhyperlink = linkEles.find((ele: any) => ele.getAttribute("targetids")?.includes(BanchorId)); + const targetAhyperlink = linkEles.find((ele: any) => ele.dataset.targetids?.includes(AanchorId)); + const targetBhyperlink = linkEles.find((ele: any) => ele.dataset.targetids?.includes(BanchorId)); if (!targetBhyperlink) { this.props.A.rootDoc[afield + "_x"] = (apt.point.x - abounds.left) / abounds.width * 100; this.props.A.rootDoc[afield + "_y"] = (apt.point.y - abounds.top) / abounds.height * 100; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 02932baac..34f87fc10 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -355,7 +355,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent e.stopPropagation()}> {/*
*/} @@ -672,15 +665,17 @@ export class AudioBox extends ViewBoxAnnotatableComponent - {/*
*/} -
Doc.linkFollowHighlight(la1)} + backgroundColor={returnTransparent} + ContentScaling={returnOne} + forcedBackgroundColor={returnTransparent} + pointerEvents={false} + LayoutTemplate={undefined} + LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(l, la2)}`)} + /> +
Doc.linkFollowHighlight(la1)} onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); this.pause(); e.stopPropagation(); e.preventDefault(); } }} />
; })} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 74634f837..77932d58e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1098,7 +1098,7 @@ export class DocumentView extends DocComponent(Docu return (this.props.treeViewDoc && this.props.LayoutTemplateString) || // render nothing for: tree view anchor dots this.layoutDoc.presBox || // presentationbox nodes this.props.dontRegisterView ? (null) : // view that are not registered - DocUtils.FilterDocs(LinkManager.Instance.getAllDirectLinks(this.Document), this.props.docFilters(), []).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) => + DocUtils.FilterDocs(LinkManager.Instance.getAllDirectLinks(this.Document), this.props.docFilters(), []).filter(d => !d.hidden && this.isNonTemporalLink(d)).map((d, i) => -- cgit v1.2.3-70-g09d2 From b1a7c8c965ff93eca4c002f51cf67df4b8ad21ba Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 30 Jul 2020 20:55:36 +0800 Subject: pres collection presentation is always associated with a single collection --- .../views/nodes/CollectionFreeFormDocumentView.tsx | 42 +++++--- src/client/views/nodes/PresBox.tsx | 119 +++++++++++++-------- src/client/views/pdf/PDFViewer.tsx | 9 +- 3 files changed, 109 insertions(+), 61 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 5d1db6de2..c29547eac 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -11,13 +11,15 @@ import { Document } from "../../../fields/documentSchemas"; import { TraceMobx } from "../../../fields/util"; import { ContentFittingDocumentView } from "./ContentFittingDocumentView"; import { List } from "../../../fields/List"; -import { numberRange } from "../../../Utils"; +import { numberRange, smoothScroll } from "../../../Utils"; import { ComputedField } from "../../../fields/ScriptField"; import { listSpec } from "../../../fields/Schema"; import { DocumentType } from "../../documents/DocumentTypes"; import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal'; import { PresBox } from "./PresBox"; import { InkingStroke } from "../InkingStroke"; +import { PDFViewer } from "../pdf/PDFViewer"; +import { PDFBox } from "./PDFBox"; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; @@ -76,32 +78,54 @@ export class CollectionFreeFormDocumentView extends DocComponent (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), - w: Cast(doc["w-indexed"], listSpec("number"), [NumCast(doc._width)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), + h: Cast(doc["h-indexed"], listSpec("number"), [NumCast(doc._height)]).reduce((p, h, i) => (i <= timecode && h !== undefined) || p === undefined ? h : p, undefined as any as number), + w: Cast(doc["w-indexed"], listSpec("number"), [NumCast(doc._width)]).reduce((p, w, i) => (i <= timecode && w !== undefined) || p === undefined ? w : p, undefined as any as number), x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number), + scroll: Cast(doc["scroll-indexed"], listSpec("number"), [NumCast(doc._scrollTop, 0)]).reduce((p, s, i) => (i <= timecode && s !== undefined) || p === undefined ? s : p, undefined as any as number), opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number), }); } - public static setValues(time: number, d: Doc, x?: number, y?: number, h?: number, w?: number, opacity?: number) { + public static setValues(time: number, d: Doc, x?: number, y?: number, h?: number, w?: number, scroll?: number, opacity?: number) { const timecode = Math.round(time); const hindexed = Cast(d["h-indexed"], listSpec("number"), []).slice(); const windexed = Cast(d["w-indexed"], listSpec("number"), []).slice(); const xindexed = Cast(d["x-indexed"], listSpec("number"), []).slice(); const yindexed = Cast(d["y-indexed"], listSpec("number"), []).slice(); const oindexed = Cast(d["opacity-indexed"], listSpec("number"), []).slice(); + const scrollIndexed = Cast(d["scroll-indexed"], listSpec("number"), []).slice(); xindexed[timecode] = x as any as number; yindexed[timecode] = y as any as number; hindexed[timecode] = h as any as number; windexed[timecode] = w as any as number; oindexed[timecode] = opacity as any as number; + scrollIndexed[timecode] = scroll as any as number; d["x-indexed"] = new List(xindexed); d["y-indexed"] = new List(yindexed); d["h-indexed"] = new List(hindexed); d["w-indexed"] = new List(windexed); d["opacity-indexed"] = new List(oindexed); + d["scroll-indexed"] = new List(scrollIndexed); } + + public static updateScrollframe(doc: Doc, time: number) { + let _pdfViewer: PDFViewer | undefined; + const timecode = Math.round(time); + const scrollIndexed = Cast(doc['scroll-indexed'], listSpec("number"), null); + scrollIndexed?.length <= timecode + 1 && scrollIndexed.push(undefined as any as number); + setTimeout(() => doc.dataTransition = "inherit", 1010); + } + + public static setupScroll(doc: Doc, timecode: number, scrollProgressivize: boolean = false) { + const scrollList = new List(); + scrollList[timecode] = NumCast(doc._scrollTop); + doc["scroll-indexed"] = scrollList; + doc.activeFrame = ComputedField.MakeFunction("self.currentFrame"); + doc._scrollTop = ComputedField.MakeInterpolated("scroll", "activeFrame"); + } + + public static updateKeyframe(docs: Doc[], time: number) { const timecode = Math.round(time); docs.forEach(doc => { @@ -130,10 +154,6 @@ export class CollectionFreeFormDocumentView extends DocComponent(); const top = new List(); const left = new List(); - // width.push(100); - // height.push(100); - // top.push(0); - // left.push(0); width.push(NumCast(doc.width)); height.push(NumCast(doc.height)); top.push(NumCast(doc.height) / -2); @@ -144,12 +164,6 @@ export class CollectionFreeFormDocumentView extends DocComponent(); - scrollList.push(NumCast(doc._scrollTop)); - doc["scroll-indexed"] = scrollList; - } - public static setupKeyframes(docs: Doc[], timecode: number, progressivize: boolean = false) { docs.forEach((doc, i) => { if (!doc.appearFrame) doc.appearFrame = i; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 221f1e6a0..95054205b 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -78,7 +78,15 @@ export class PresBox extends ViewBoxBaseComponent document.removeEventListener("keydown", this.keyEvents, true); } - updateCurrentPresentation = () => Doc.UserDoc().activePresentation = this.rootDoc; + updateCurrentPresentation = () => { + Doc.UserDoc().activePresentation = this.rootDoc; + if (this.itemIndex >= 0) { + const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + const srcContext = Cast(presTargetDoc.context, Doc, null); + if (srcContext) this.rootDoc.presCollection = srcContext; + else this.rootDoc.presCollection = presTargetDoc; + } + } @undoBatch @action @@ -149,9 +157,9 @@ export class PresBox extends ViewBoxBaseComponent //If so making sure to zoom out, which goes back to state before zooming action let prevSelected = this.itemIndex; let didZoom = docAtCurrent.zoomButton; - for (; !didZoom && prevSelected > 0 && this.childDocs[prevSelected].groupButton; prevSelected--) { - didZoom = this.childDocs[prevSelected].zoomButton; - } + // for (; !didZoom && prevSelected > 0 && this.childDocs[prevSelected].groupButton; prevSelected--) { + // didZoom = this.childDocs[prevSelected].zoomButton; + // } prevSelected = Math.max(0, prevSelected - 1); this.gotoDocument(prevSelected, this.itemIndex); @@ -234,13 +242,16 @@ export class PresBox extends ViewBoxBaseComponent const aliasOfNext = await DocCastAsync(nextTarget.aliasOf); const nextContext = aliasOfNext && await DocCastAsync(aliasOfNext.context); if (curContext && nextContext) { + const collectionDocView = DocumentManager.Instance.getDocumentView(Cast(this.rootDoc.presCollection, Doc, null)); // Case: Documents are not in the same collection if (curContext !== nextContext) { // Current document is contained in the next collection (zoom out) if (curContext.context === nextContext) { + if (collectionDocView) collectionDocView.props.addDocTab(curContext, "replace"); console.log("hiii"); console.log("current in next"); // Next document is contained in the current collection (zoom in) } else if (nextContext.context === curContext) { + if (collectionDocView) collectionDocView.props.addDocTab(nextContext, "replace"); console.log("hiii2"); console.log("next in current"); } // No change in parent collection @@ -395,10 +406,8 @@ export class PresBox extends ViewBoxBaseComponent }); } - updateMinimize = async () => { - const docToJump = this.childDocs[0]; - const aliasOf = await DocCastAsync(docToJump.aliasOf); - const srcContext = aliasOf && await DocCastAsync(aliasOf.context); + updateMinimize = () => { + const srcContext = Cast(this.rootDoc.presCollection, Doc, null); if (srcContext) { if (srcContext.miniPres) { document.removeEventListener("keydown", this.keyEvents, true); @@ -535,7 +544,8 @@ export class PresBox extends ViewBoxBaseComponent //Esc click @action keyEvents = (e: KeyboardEvent) => { - e.stopPropagation; + e.stopPropagation(); + e.preventDefault(); // switch(e.keyCode) { // case 27: console.log("escape"); // case 65 && (e.metaKey || e.altKey): @@ -635,9 +645,10 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action viewPaths = async () => { - const docToJump = this.childDocs[0]; - const aliasOf = await DocCastAsync(docToJump.aliasOf); - const srcContext = aliasOf && await DocCastAsync(aliasOf.context); + const srcContext = Cast(this.rootDoc.presCollection, Doc, null); + // const docToJump = this.childDocs[0]; + // const aliasOf = await DocCastAsync(docToJump.aliasOf); + // const srcContext = aliasOf && await DocCastAsync(aliasOf.context); if (this.pathBoolean) { console.log("true"); if (srcContext) { @@ -668,10 +679,18 @@ export class PresBox extends ViewBoxBaseComponent const order: JSX.Element[] = []; this.childDocs.forEach((doc, index) => { const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); - order.push( -
-
{index + 1}
-
); + const srcContext = Cast(targetDoc.context, Doc, null); + if (this.rootDoc.presCollection === srcContext) { + order.push( +
+
{index + 1}
+
); + } else { + order.push( +
+
{index + 1}
+
); + } }); return order; } @@ -682,24 +701,15 @@ export class PresBox extends ViewBoxBaseComponent console.log(this.childDocs.length - 1); this.childDocs.forEach((doc, index) => { const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); - if (targetDoc) { + const srcContext = Cast(targetDoc.context, Doc, null); + if (targetDoc && this.rootDoc.presCollection === srcContext) { const n1x = NumCast(targetDoc.x) + (NumCast(targetDoc._width) / 2); const n1y = NumCast(targetDoc.y) + (NumCast(targetDoc._height) / 2); - // const n2x = NumCast(nextTargetDoc.x) + (NumCast(targetDoc._width) / 2); - // const n2y = NumCast(nextTargetDoc.y) + (NumCast(targetDoc._height) / 2); if (index = 0) pathPoints = n1x + "," + n1y; else pathPoints = pathPoints + " " + n1x + "," + n1y; - // const pathPoints = n1x + "," + n1y + " " + n2x + "," + n2y; - // else pathPoints = pathPoints + " " + n1x + "," + n1y; - // paths.push(); + } else { + if (index = 0) pathPoints = 0 + "," + 0; + else pathPoints = pathPoints + " " + 0 + "," + 0; } }); console.log(pathPoints); @@ -988,12 +998,14 @@ export class PresBox extends ViewBoxBaseComponent const currentFrame = Cast(tagDoc.currentFrame, "number", null); if (currentFrame === undefined) { tagDoc.currentFrame = 0; + CollectionFreeFormDocumentView.setupScroll(tagDoc, 0); CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } let lastFrame: number = 0; childDocs.forEach((doc) => { if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame); }); + CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame); CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1); tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), lastFrame); @@ -1066,14 +1078,15 @@ export class PresBox extends ViewBoxBaseComponent
Internal zoom
-
Edit
+
Viewfinder
+
Snapshot
Text progressivize
-
Edit
+
Edit
-
Scroll progressivize
+
Scroll progressivize
Edit
@@ -1083,6 +1096,19 @@ export class PresBox extends ViewBoxBaseComponent } } + //Toggle whether the user edits or not + @action + editSnapZoomProgressivize = (e: React.MouseEvent) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (!targetDoc.editSnapZoomProgressivize) { + targetDoc.editSnapZoomProgressivize = true; + } else { + targetDoc.editSnapZoomProgressivize = false; + } + + } + //Toggle whether the user edits or not @action editZoomProgressivize = (e: React.MouseEvent) => { @@ -1115,7 +1141,7 @@ export class PresBox extends ViewBoxBaseComponent activeItem.scrollProgressivize = !activeItem.scrollProgressivize; const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); targetDoc.scrollProgressivize = !targetDoc.zoomProgressivize; - CollectionFreeFormDocumentView.setupScroll(targetDoc, true); + CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc.currentFrame), true); if (targetDoc.editScrollProgressivize) { targetDoc.editScrollProgressivize = false; targetDoc.currentFrame = 0; @@ -1141,14 +1167,14 @@ export class PresBox extends ViewBoxBaseComponent //Progressivize Text nodes @action - textProgressivize = (e: React.MouseEvent) => { + editTextProgressivize = (e: React.MouseEvent) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); targetDoc.currentFrame = targetDoc.lastFrame; - if (targetDoc?.editProgressivize) { - targetDoc.editProgressivize = false; + if (targetDoc?.editTextProgressivize) { + targetDoc.editTextProgressivize = false; } else { - targetDoc.editProgressivize = true; + targetDoc.editTextProgressivize = true; } } @@ -1340,7 +1366,11 @@ export class PresBox extends ViewBoxBaseComponent e.preventDefault(); const doc = document.getElementById('resizable'); if (doc && tagDocView) { - console.log(tagDocView.props.ScreenToLocalTransform().Scale); + console.log(tagDocView.props.ContentScaling()); + const transform = (tagDocView.props.ScreenToLocalTransform().scale(tagDocView.props.ContentScaling())).inverse(); + console.log(transform); + const scale = tagDocView.childScaling(); + console.log(scale); let height = doc.offsetHeight; let width = doc.offsetWidth; let top = doc.offsetTop; @@ -1377,17 +1407,17 @@ export class PresBox extends ViewBoxBaseComponent // } //Bottom right if (this._isDraggingBR) { - const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); + const newHeight = height += (e.movementY * tagDocView.props.ContentScaling()); doc.style.height = newHeight + 'px'; - const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); + const newWidth = width += (e.movementX * tagDocView.props.ContentScaling()); doc.style.width = newWidth + 'px'; // Bottom left } else if (this._isDraggingBL) { - const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); + const newHeight = height += (e.movementY * scale); doc.style.height = newHeight + 'px'; - const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); + const newWidth = width -= (e.movementX * scale); doc.style.width = newWidth + 'px'; - const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); + const newLeft = left += (e.movementX * scale); doc.style.left = newLeft + 'px'; // Top right } else if (this._isDraggingTR) { @@ -1444,7 +1474,6 @@ export class PresBox extends ViewBoxBaseComponent x[NumCast(doc.currentFrame)] = val; list = x; } - } // scale: NumCast(targetDoc._viewScale), diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 30c51d9ca..5b73b00d3 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -9,8 +9,8 @@ import { documentSchema } from "../../../fields/documentSchemas"; import { Id } from "../../../fields/FieldSymbols"; import { InkTool } from "../../../fields/InkField"; import { List } from "../../../fields/List"; -import { createSchema, makeInterface } from "../../../fields/Schema"; -import { ScriptField } from "../../../fields/ScriptField"; +import { createSchema, makeInterface, listSpec } from "../../../fields/Schema"; +import { ScriptField, ComputedField } from "../../../fields/ScriptField"; import { Cast, NumCast } from "../../../fields/Types"; import { PdfField } from "../../../fields/URLField"; import { TraceMobx } from "../../../fields/util"; @@ -343,6 +343,11 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { + this._mainCont.current && smoothScroll(duration, this._mainCont.current, top); + } + @action scrollToAnnotation = (scrollToAnnotation: Doc) => { if (scrollToAnnotation) { -- cgit v1.2.3-70-g09d2 From cab9d814b06987a43e06cf034c61b246acdec9d3 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 30 Jul 2020 23:35:06 +0800 Subject: more bug fixes --- src/client/views/nodes/PresBox.tsx | 173 ++++++--------------- .../views/presentationview/PresElementBox.tsx | 2 +- 2 files changed, 52 insertions(+), 123 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 95054205b..a22d014ca 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -81,10 +81,12 @@ export class PresBox extends ViewBoxBaseComponent updateCurrentPresentation = () => { Doc.UserDoc().activePresentation = this.rootDoc; if (this.itemIndex >= 0) { - const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); - const srcContext = Cast(presTargetDoc.context, Doc, null); - if (srcContext) this.rootDoc.presCollection = srcContext; - else this.rootDoc.presCollection = presTargetDoc; + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = activeItem.presentationTargetDoc ? Cast(activeItem.presentationTargetDoc, Doc, null) : undefined; + if (targetDoc) { + const srcContext = Cast(targetDoc.context, Doc, null); + if (srcContext) this.layoutDoc.presCollection = srcContext; + } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; } } @@ -117,8 +119,8 @@ export class PresBox extends ViewBoxBaseComponent let newScale = 0.9 * Math.min(Number(panelWidth) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]), Number(panelHeight) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"])); // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); - srcContext._panX = newPanX + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); - srcContext._panY = newPanY + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); + srcContext._panX = newPanX + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); + srcContext._panY = newPanY + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); // srcContext._panX = newPanX // srcContext._panY = newPanY srcContext._viewScale = newScale; @@ -137,13 +139,13 @@ export class PresBox extends ViewBoxBaseComponent let nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); - for (nextSelected = nextSelected + 1; nextSelected < this.childDocs.length; nextSelected++) { - if (!this.childDocs[nextSelected].groupButton) { - break; - } else { - this.gotoDocument(nextSelected, this.itemIndex); - } - } + // for (nextSelected = nextSelected + 1; nextSelected < this.childDocs.length; nextSelected++) { + // if (!this.childDocs[nextSelected].groupButton) { + // break; + // } else { + // this.gotoDocument(nextSelected, this.itemIndex); + // } + // } } } @@ -236,81 +238,45 @@ export class PresBox extends ViewBoxBaseComponent }); } - checkCollection = async (curTarget: Doc, nextTarget: Doc) => { - const aliasOf = await DocCastAsync(curTarget.aliasOf); - const curContext = aliasOf && await DocCastAsync(aliasOf.context); - const aliasOfNext = await DocCastAsync(nextTarget.aliasOf); - const nextContext = aliasOfNext && await DocCastAsync(aliasOfNext.context); - if (curContext && nextContext) { - const collectionDocView = DocumentManager.Instance.getDocumentView(Cast(this.rootDoc.presCollection, Doc, null)); - // Case: Documents are not in the same collection - if (curContext !== nextContext) { - // Current document is contained in the next collection (zoom out) - if (curContext.context === nextContext) { - if (collectionDocView) collectionDocView.props.addDocTab(curContext, "replace"); console.log("hiii"); - console.log("current in next"); - // Next document is contained in the current collection (zoom in) - } else if (nextContext.context === curContext) { - if (collectionDocView) collectionDocView.props.addDocTab(nextContext, "replace"); console.log("hiii2"); - console.log("next in current"); - } - // No change in parent collection - } else { - console.log("same collection"); - } - - } - } /** * This method makes sure that cursor navigates to the element that * has the option open and last in the group. If not in the group, and it has * the option open, navigates to that element. */ - navigateToElement = async (curDoc: Doc, fromDocIndex: number) => { + navigateToElement = (curDoc: Doc) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const srcContext = Cast(targetDoc.context, Doc, null); + const presCollection = Cast(this.rootDoc.presCollection, Doc, null); + const collectionDocView = DocumentManager.Instance.getDocumentView(presCollection); + console.log("NC: " + srcContext.title); + console.log("PC: " + presCollection.title); + if (collectionDocView) { + if (srcContext !== presCollection) { + console.log(collectionDocView); + collectionDocView.props.addDocTab(srcContext, "inPlace"); + } + } else if (srcContext) { + this.props.addDocTab(srcContext, "onRight"); + } else if (!srcContext) { + this.props.addDocTab(targetDoc, "onRight"); + } this.updateCurrentPresentation(); const docToJump = curDoc; const willZoom = false; - const nextTarget = curDoc; - const curTarget = this.childDocs[fromDocIndex]; - this.checkCollection(curTarget, nextTarget); - // const presDocs = DocListCast(this.dataDoc[this.props.fieldKey]); - // let nextSelected = presDocs.indexOf(curDoc); - // const currentDocGroups: Doc[] = []; - // for (; nextSelected < presDocs.length - 1; nextSelected++) { - // if (!presDocs[nextSelected + 1].groupButton) { - // break; - // } - // currentDocGroups.push(presDocs[nextSelected]); - // } - - // currentDocGroups.forEach((doc: Doc, index: number) => { - // if (doc.presNavButton) { - // docToJump = doc; - // willZoom = false; - // } - // if (doc.presZoomButton) { - // docToJump = doc; - // willZoom = true; - // } - // }); - //docToJump stayed same meaning, it was not in the group or was the last element in the group - const aliasOf = await DocCastAsync(docToJump.aliasOf); - const srcContext = aliasOf && await DocCastAsync(aliasOf.context); if (docToJump === curDoc) { //checking if curDoc has navigation open - const target = (await DocCastAsync(curDoc.presentationTargetDoc)) || curDoc; - if (curDoc.presNavButton && target) { - DocumentManager.Instance.jumpToDocument(target, false, undefined, srcContext); - } else if (curDoc.presZoomButton && target) { + if (curDoc.presNavButton && targetDoc) { + DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext); + } else if (curDoc.presZoomButton && targetDoc) { //awaiting jump so that new scale can be found, since jumping is async - await DocumentManager.Instance.jumpToDocument(target, true, undefined, srcContext); + DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext); } } else { //awaiting jump so that new scale can be found, since jumping is async - const presTargetDoc = await DocCastAsync(docToJump.presentationTargetDoc); - presTargetDoc && await DocumentManager.Instance.jumpToDocument(presTargetDoc, willZoom, undefined, srcContext); + targetDoc && DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext); } } @@ -325,11 +291,7 @@ export class PresBox extends ViewBoxBaseComponent if (presTargetDoc?.lastFrame !== undefined) { presTargetDoc.currentFrame = 0; } - // if (this.layoutDoc.presStatus === "edit") { - // this.layoutDoc.presStatus = true; - // this.startPresentation(index); - // } - this.navigateToElement(this.childDocs[index], fromDoc); + this.navigateToElement(this.childDocs[index]); this._selectedArray = [this.childDocs[index]]; // this.hideIfNotPresented(index); // this.showAfterPresented(index); @@ -361,22 +323,7 @@ export class PresBox extends ViewBoxBaseComponent this.layoutDoc.presStatus = "manual"; } }, targetDoc.presDuration ? NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition) : 2000); - // for (let i = this.itemIndex + 1; i <= this.childDocs.length; i++) { - // if (this.itemIndex + 1 === this.childDocs.length) { - // clearTimeout(this._presTimer); - // this.layoutDoc.presStatus = "manual"; - // } else timer = setTimeout(() => { console.log(i); this.next(); }, i * 2000); - // } - } - - // if (this.layoutDoc.presStatus) { - // this.resetPresentation(); - // } else { - // this.layoutDoc.presStatus = true; - // this.startPresentation(0); - // this.gotoDocument(0, this.itemIndex); - // } } //The function that resets the presentation by removing every action done by it. It also @@ -410,19 +357,17 @@ export class PresBox extends ViewBoxBaseComponent const srcContext = Cast(this.rootDoc.presCollection, Doc, null); if (srcContext) { if (srcContext.miniPres) { - document.removeEventListener("keydown", this.keyEvents, true); + document.removeEventListener("keydown", this.keyEvents, false); srcContext.miniPres = false; - Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); + // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); CollectionDockingView.AddRightSplit(this.rootDoc); - this.layoutDoc.inOverlay = false; + // this.layoutDoc.inOverlay = false; } else { - document.addEventListener("keydown", this.keyEvents, true); + document.addEventListener("keydown", this.keyEvents, false); srcContext.miniPres = true; this.props.addDocTab?.(this.rootDoc, "close"); - Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); + // Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); } - - } // if (srcContext) { // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); @@ -491,11 +436,6 @@ export class PresBox extends ViewBoxBaseComponent active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) - // render() { - // const presOrderedDocs = DocListCast(this.rootDoc.presOrderedDocs); - // if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { - // this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); - // KEYS @observable _selectedArray: Doc[] = []; @@ -516,14 +456,13 @@ export class PresBox extends ViewBoxBaseComponent // this._selectedArray = []; this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); // this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); - console.log(this._selectedArray); + // console.log(this._selectedArray); } //Command click @action multiSelect = (doc: Doc) => { this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); - console.log(this._selectedArray); } //Shift click @@ -536,7 +475,6 @@ export class PresBox extends ViewBoxBaseComponent this._selectedArray.push(this.childDocs[i]); } } - console.log(this._selectedArray); } @@ -646,9 +584,6 @@ export class PresBox extends ViewBoxBaseComponent @action viewPaths = async () => { const srcContext = Cast(this.rootDoc.presCollection, Doc, null); - // const docToJump = this.childDocs[0]; - // const aliasOf = await DocCastAsync(docToJump.aliasOf); - // const srcContext = aliasOf && await DocCastAsync(aliasOf.context); if (this.pathBoolean) { console.log("true"); if (srcContext) { @@ -696,7 +631,6 @@ export class PresBox extends ViewBoxBaseComponent } @computed get paths() { - // const paths = []; //List of all of the paths that need to be added let pathPoints = ""; console.log(this.childDocs.length - 1); this.childDocs.forEach((doc, index) => { @@ -713,7 +647,6 @@ export class PresBox extends ViewBoxBaseComponent } }); console.log(pathPoints); - // return paths; return (
Long
- {/*
Fade After
*/} - {/*
console.log("hide before")}>Hide Before
*/} - {/*
console.log("hide after")}>Hide After
*/}
Effects
e.stopPropagation()} - // onClick={() => this.dropdownToggle('Movement')} > {effect} @@ -1366,11 +1295,11 @@ export class PresBox extends ViewBoxBaseComponent e.preventDefault(); const doc = document.getElementById('resizable'); if (doc && tagDocView) { - console.log(tagDocView.props.ContentScaling()); - const transform = (tagDocView.props.ScreenToLocalTransform().scale(tagDocView.props.ContentScaling())).inverse(); - console.log(transform); + const scale = tagDocView.childScaling(); - console.log(scale); + console.log("childScaling: " + scale); + const scale2 = tagDocView.props.ScreenToLocalTransform().Scale; + console.log("ScreenToLocal...Scale: " + scale2); let height = doc.offsetHeight; let width = doc.offsetWidth; let top = doc.offsetTop; @@ -1407,9 +1336,9 @@ export class PresBox extends ViewBoxBaseComponent // } //Bottom right if (this._isDraggingBR) { - const newHeight = height += (e.movementY * tagDocView.props.ContentScaling()); + const newHeight = height += (e.movementY * scale2); doc.style.height = newHeight + 'px'; - const newWidth = width += (e.movementX * tagDocView.props.ContentScaling()); + const newWidth = width += (e.movementX * scale2); doc.style.width = newWidth + 'px'; // Bottom left } else if (this._isDraggingBL) { diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 4d1195808..1c04fdf56 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -277,7 +277,7 @@ export class PresElementBox extends ViewBoxBaseComponent}
- + -- cgit v1.2.3-70-g09d2 From 211beefca70ca5c869d6bf8a464fe41e94a7b4c3 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 30 Jul 2020 18:05:34 -0400 Subject: filtering correctly --- .../views/collections/CollectionSchemaView.tsx | 10 +- src/client/views/collections/CollectionSubView.tsx | 9 +- src/client/views/search/SearchBox.tsx | 192 +++++++-------------- 3 files changed, 77 insertions(+), 134 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index d3c975e5d..aceaa2bae 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -6,7 +6,7 @@ import { action, computed, observable, untracked } from "mobx"; import { observer } from "mobx-react"; import { Resize } from "react-table"; import "react-table/react-table.css"; -import { Doc } from "../../../fields/Doc"; +import { Doc, DocCastAsync } from "../../../fields/Doc"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField"; @@ -333,9 +333,17 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { console.log(newKey); console.log(filter); Doc.setDocFilter(this.props.Document, newKey, filter, "match"); + if (this.props.Document.selectedDoc !== undefined) { + let doc = Cast(this.props.Document.selectedDoc, Doc) as Doc; + Doc.setDocFilter(doc, newKey, filter, "match"); + } } else { this.props.Document._docFilters = undefined; + if (this.props.Document.selectedDoc !== undefined) { + let doc = Cast(this.props.Document.selectedDoc, Doc) as Doc; + doc._docFilters = undefined; + } } } } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index ed8535ecb..9dad9a056 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -1,7 +1,7 @@ import { action, computed, IReactionDisposer, reaction } from "mobx"; import { basename } from 'path'; import CursorField from "../../../fields/CursorField"; -import { Doc, Opt, Field } from "../../../fields/Doc"; +import { Doc, Opt, Field, DocListCast } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; @@ -130,7 +130,12 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: } const docs = rawdocs.filter(d => !(d instanceof Promise)).map(d => d as Doc); const viewSpecScript = Cast(this.props.Document.viewSpecScript, ScriptField); - const childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs; + let childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs; + + const searchDocs = DocListCast(this.props.Document._searchDocs); + if (searchDocs !== undefined && searchDocs.length > 0) { + childDocs = searchDocs; + } const filteredDocs = docFilters.length && !this.props.dontRegisterView ? childDocs.filter(d => { for (const facetKey of Object.keys(filterFacets)) { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 05befc12f..b17751d44 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -153,9 +153,7 @@ export class SearchBox extends ViewBoxBaseComponent { if (this.setupButtons == false) { - this.setupDocTypeButtons(); - this.setupKeyButtons(); - this.setupDefaultButtons(); + runInAction(() => this.setupButtons == true); } if (this.inputRef.current) { @@ -192,14 +190,15 @@ export class SearchBox extends ViewBoxBaseComponent { this.open = false }); - this.submitFilter(); - } - if (e.target.value === "") { this.props.Document._schemaHeaders = new List([]); + if (this.currentSelectedCollection !== undefined) { + this.currentSelectedCollection.props.Document._searchDocs = new List([]); + this.currentSelectedCollection = undefined; + this.props.Document.selectedDoc = undefined; + + } console.log("CLOSE"); runInAction(() => { this.open = false }); } @@ -219,7 +218,7 @@ export class SearchBox extends ViewBoxBaseComponent { this.expandedBucket = false }); // } - if (StrCast(this.layoutDoc._searchString) !== "" && this.filter === false) { + if (StrCast(this.layoutDoc._searchString) !== "") { console.log("OPEN"); runInAction(() => { this.open = true }); } @@ -228,9 +227,8 @@ export class SearchBox extends ViewBoxBaseComponent { this.open = false }); } - if (this.filter === false) { - this.submitSearch(); - } + this.submitSearch(); + } } @@ -366,13 +364,21 @@ export class SearchBox extends ViewBoxBaseComponent { let hlights: string[] = []; const protos = Doc.GetAllPrototypes(d); @@ -385,10 +391,15 @@ export class SearchBox extends ViewBoxBaseComponent 0) { found.push([d, hlights, []]); + docsforFilter.push(d); }; }); console.log(found); this._results = found; + this.docsforfilter = docsforFilter; + if (this.filter === true) { + selectedCollection.props.Document._searchDocs = new List(docsforFilter); + } this._numTotalResults = found.length; } else { @@ -437,42 +448,13 @@ export class SearchBox extends ViewBoxBaseComponent { this.checkIcons(); if (reset) { this.layoutDoc._searchString = ""; } + this.props.Document._docFilters = undefined; this.noresults = ""; this.dataDoc[this.fieldKey] = new List([]); this.headercount = 0; @@ -995,74 +977,6 @@ export class SearchBox extends ViewBoxBaseComponent new PrefetchProxy(Docs.Create.FontIconDocument({ - ...opts, - dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, - _height: 100 - })) as any as Doc; - doc.Audio = ficon({ onClick: ScriptField.MakeScript(`updateIcon("audio")`), title: "music button", icon: "music" }); - doc.Collection = ficon({ onClick: ScriptField.MakeScript(`updateIcon("collection")`), title: "col button", icon: "object-group" }); - doc.Image = ficon({ onClick: ScriptField.MakeScript(`updateIcon("image")`), title: "image button", icon: "image" }); - doc.Link = ficon({ onClick: ScriptField.MakeScript(`updateIcon("link")`), title: "link button", icon: "link" }); - doc.Pdf = ficon({ onClick: ScriptField.MakeScript(`updateIcon("pdf")`), title: "pdf button", icon: "file-pdf" }); - doc.Rtf = ficon({ onClick: ScriptField.MakeScript(`updateIcon("rtf")`), title: "text button", icon: "sticky-note" }); - doc.Video = ficon({ onClick: ScriptField.MakeScript(`updateIcon("video")`), title: "vid button", icon: "video" }); - doc.Web = ficon({ onClick: ScriptField.MakeScript(`updateIcon("web")`), title: "web button", icon: "globe-asia" }); - - let buttons = [doc.None as Doc, doc.Audio as Doc, doc.Collection as Doc, - doc.Image as Doc, doc.Link as Doc, doc.Pdf as Doc, doc.Rtf as Doc, doc.Video as Doc, doc.Web as Doc]; - - const dragCreators = Docs.Create.MasonryDocument(buttons, { - _width: 500, backgroundColor: "#121721", _autoHeight: true, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", - dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _yMargin: 5 - }); - doc.nodeButtons = dragCreators; - this.checkIcons() - } - - - setupKeyButtons() { - let doc = this.props.Document; - const button = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.ButtonDocument({ - ...opts, - _width: 35, _height: 30, - borderRounding: "16px", border: "1px solid grey", color: "white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px", - _fontSize: 7, - })) as any as Doc; - doc.title = button({ backgroundColor: "grey", title: "Title", onClick: ScriptField.MakeScript("updateTitleStatus(self)") }); - doc.deleted = button({ title: "Deleted", onClick: ScriptField.MakeScript("updateDeletedStatus(self)") }); - doc.author = button({ backgroundColor: "grey", title: "Author", onClick: ScriptField.MakeScript("updateAuthorStatus(self)") }); - let buttons = [doc.title as Doc, doc.deleted as Doc, doc.author as Doc]; - - const dragCreators = Docs.Create.MasonryDocument(buttons, { - _width: 500, backgroundColor: "#121721", _autoHeight: true, _columnWidth: 50, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _yMargin: 5 - //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), - }); - doc.keyButtons = dragCreators; - } - - setupDefaultButtons() { - let doc = this.props.Document; - const button = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.ButtonDocument({ - ...opts, - _width: 35, _height: 30, - borderRounding: "16px", border: "1px solid grey", color: "white", - //hovercolor: "rgb(170, 170, 163)", - letterSpacing: "2px", - _fontSize: 7, - })) as any as Doc; - doc.keywords = button({ title: "Keywords", onClick: ScriptField.MakeScript("handleWordQueryChange(self)") }); - doc.keys = button({ title: "Keys", onClick: ScriptField.MakeScript(`handleKeyChange(self)`) }); - doc.nodes = button({ title: "Nodes", onClick: ScriptField.MakeScript("handleNodeChange(self)") }); - let buttons = [doc.keywords as Doc, doc.keys as Doc, doc.nodes as Doc]; - const dragCreators = Docs.Create.MasonryDocument(buttons, { - _width: 500, backgroundColor: "#121721", _autoHeight: true, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _yMargin: 5 - //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), - }); - doc.defaultButtons = dragCreators; - } @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); } getTransform = () => { @@ -1121,20 +1035,39 @@ export class SearchBox extends ViewBoxBaseComponent
- {this.filter === true ?
+
- :
-
- -
-
- -
-
- }
{this.noresults === "" ?
-
+
); } } -- cgit v1.2.3-70-g09d2 From a1950ec49c56f5f9e2612da7e60a1e2615209386 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Fri, 31 Jul 2020 18:25:39 -0400 Subject: bugfix --- src/client/views/DocComponent.tsx | 2 + src/client/views/GlobalKeyHandler.ts | 2 + src/client/views/collections/CollectionView.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 28 ++++----- src/client/views/search/SearchBox.tsx | 69 ++++++++++++++++------ 5 files changed, 71 insertions(+), 34 deletions(-) (limited to 'src') diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 9b9a28f0f..106250af4 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -146,6 +146,8 @@ export function ViewBoxAnnotatableComponent

doc.context = this.props.Document); targetDataDoc[this.annotationKey] = new List([...docList, ...added]); targetDataDoc[this.annotationKey + "-lastModified"] = new DateField(new Date(Date.now())); + targetDataDoc["lastModified"] = new DateField(new Date(Date.now())); + } } return true; diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index c85849adb..2e5c018ba 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -307,6 +307,8 @@ export default class KeyManager { undoBatch(() => { targetDataDoc[fieldKey] = new List([...docList, ...added]); targetDataDoc[fieldKey + "-lastModified"] = new DateField(new Date(Date.now())); + targetDataDoc["lastModified"] = new DateField(new Date(Date.now())); + })(); } } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 0178cc2e9..f9dc666d6 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -159,6 +159,8 @@ export class CollectionView extends Touchable Doc.AddDocToList(Cast(Doc.UserDoc().myCatalog, Doc, null), "data", add)); targetDataDoc[this.props.fieldKey] = new List([...docList, ...added]); targetDataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now())); + targetDataDoc["lastModified"] = new DateField(new Date(Date.now())); + } } return true; @@ -554,7 +556,7 @@ export class CollectionView extends Touchable {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 => diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 11f25a208..71ba51039 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -228,7 +228,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if (!this.dataDoc[AclSym]) { if (!this._applyingChange && json.replace(/"selection":.*/, "") !== curProto?.Data.replace(/"selection":.*/, "")) { this._applyingChange = true; - (curText !== Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text) && (this.dataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()))); + (curText !== Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text) && (this.dataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()))) && (this.dataDoc["lastModified"] = new DateField(new Date(Date.now()))); if ((!curTemp && !curProto) || curText || curLayout?.Data.includes("dash")) { // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended) if (json !== curLayout?.Data) { !curText && tx.storedMarks?.map(m => m.type.name === "pFontSize" && (Doc.UserDoc().fontSize = this.layoutDoc._fontSize = m.attrs.fontSize)); @@ -280,7 +280,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._editorView.dispatch(tr.addMark(flattened[lastSel].from, flattened[lastSel].to, link)); } } - public highlightSearchTerms = (terms: string[])=> { + public highlightSearchTerms = (terms: string[]) => { if (this._editorView && (this._editorView as any).docView && terms.some(t => t)) { const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); @@ -291,30 +291,30 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const flattened: TextSelection[] = []; res.map(r => r.map(h => flattened.push(h))); - + const lastSel = Math.min(flattened.length - 1, this._searchIndex); flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); - + console.log(this._searchIndex, length); - if (this._searchIndex>1){ - this._searchIndex+=-2; + if (this._searchIndex > 1) { + this._searchIndex += -2; } - else if (this._searchIndex===1){ - this._searchIndex=length-1; + else if (this._searchIndex === 1) { + this._searchIndex = length - 1; } - else if (this._searchIndex===0 && length!==1){ - this._searchIndex=length-2; + else if (this._searchIndex === 0 && length !== 1) { + this._searchIndex = length - 2; } let index = this._searchIndex; Doc.GetProto(this.dataDoc).searchIndex = index; - Doc.GetProto(this.dataDoc).length=length; + Doc.GetProto(this.dataDoc).length = length; } } - public highlightSearchTerms2 = (terms: string[])=> { + public highlightSearchTerms2 = (terms: string[]) => { if (this._editorView && (this._editorView as any).docView && terms.some(t => t)) { const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); @@ -323,7 +323,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp let length = res[0].length; let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; - res.map(r => r.map(h => flattened.push(h))); + res.map(r => r.map(h => flattened.push(h))); const lastSel = Math.min(flattened.length - 1, this._searchIndex); flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; @@ -331,7 +331,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp let index = this._searchIndex; Doc.GetProto(this.dataDoc).searchIndex = index; - Doc.GetProto(this.dataDoc).length=length; + Doc.GetProto(this.dataDoc).length = length; } } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index b17751d44..005f7d1af 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -40,6 +40,7 @@ import * as _ from "lodash"; import { checkIfStateModificationsAreAllowed } from 'mobx/lib/internal'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; import { indexOf } from 'lodash'; +import { protocol } from 'socket.io-client'; library.add(faTimes); @@ -379,22 +380,42 @@ export class SearchBox extends ViewBoxBaseComponent { - let hlights: string[] = []; - const protos = Doc.GetAllPrototypes(d); - let proto = protos[protos.length - 2]; - Object.keys(proto).forEach(key => { - if (StrCast(d[key]).includes(query)) { - console.log(key, d[key]); - hlights.push(key); + let newarray: Doc[] = []; + + while (docs.length > 0) { + console.log("iteration"); + newarray = []; + docs.forEach((d) => { + console.log(d); + if (d.data != undefined) { + let newdocs = DocListCast(d.data); + newdocs.forEach((newdoc) => { + console.log(newdoc); + newarray.push(newdoc); + + }); } + + + let hlights: string[] = []; + + const protos = Doc.GetAllPrototypes(d); + let proto = protos[protos.length - 1]; + protos.forEach(proto => { + Object.keys(proto).forEach(key => { + // console.log(key, d[key]); + if (StrCast(d[key]).includes(query) && !hlights.includes(key)) { + hlights.push(key); + } + }) + }); + if (hlights.length > 0) { + found.push([d, hlights, []]); + docsforFilter.push(d); + }; }); - if (hlights.length > 0) { - found.push([d, hlights, []]); - docsforFilter.push(d); - }; - }); - console.log(found); + docs = newarray; + } this._results = found; this.docsforfilter = docsforFilter; if (this.filter === true) { @@ -408,6 +429,20 @@ export class SearchBox extends ViewBoxBaseComponent Object.keys(proto).forEach(key => keys[key] = false)); + return Array.from(Object.keys(keys)); + } + applyBasicFieldFilters(query: string) { let finalQuery = ""; @@ -669,7 +704,7 @@ export class SearchBox extends ViewBoxBaseComponent(["title", "author", "creationDate"]); + let headers = new Set(["title", "author", "lastModified"]); if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { if (this.noresults === "") { this.noresults = "No search results :("; @@ -734,12 +769,8 @@ export class SearchBox extends ViewBoxBaseComponent Date: Fri, 31 Jul 2020 19:35:32 -0400 Subject: bugfix --- src/client/util/SearchUtil.ts | 2 +- src/client/views/search/SearchBox.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts index 911340ab1..f54e13197 100644 --- a/src/client/util/SearchUtil.ts +++ b/src/client/util/SearchUtil.ts @@ -30,7 +30,7 @@ export namespace SearchUtil { rows?: number; fq?: string; allowAliases?: boolean; - "facet"?:string; + "facet"?: string; "facet.field"?: string; } export function Search(query: string, returnDocs: true, options?: SearchParams): Promise; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 72cb3a04e..410e6afa5 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -746,7 +746,7 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); - result[0]._height = 46; + console.log(lines); result[0].lines = lines; result[0].highlighting = highlights.join(", "); highlights.forEach((item) => headers.add(item)); @@ -763,7 +763,7 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); highlights.forEach((item) => headers.add(item)); - result[0]._height = 46; + console.log(lines); result[0].lines = lines; result[0].highlighting = highlights.join(", "); if (i < this._visibleDocuments.length) { -- cgit v1.2.3-70-g09d2 From cd535ae81b6300d7b7b907db045c393bdd154ecc Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Fri, 31 Jul 2020 20:02:17 -0400 Subject: bf --- src/client/views/nodes/WebBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index d30f1499e..a1e641d4a 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -139,7 +139,7 @@ export class WebBox extends ViewBoxAnnotatableComponent Date: Sat, 1 Aug 2020 15:11:58 +0800 Subject: small changes --- src/client/views/nodes/PresBox.tsx | 23 +++++++++++----------- .../views/presentationview/PresElementBox.tsx | 5 +---- 2 files changed, 13 insertions(+), 15 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index a22d014ca..b5f3fc204 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -63,6 +63,7 @@ export class PresBox extends ViewBoxBaseComponent this.rootDoc._forceRenderEngine = "timeline"; this.rootDoc._replacedChrome = "replaced"; this.layoutDoc.presStatus = "edit"; + this.layoutDoc._gridGap = 5; // document.addEventListener("keydown", this.keyEvents, false); } @@ -80,14 +81,6 @@ export class PresBox extends ViewBoxBaseComponent updateCurrentPresentation = () => { Doc.UserDoc().activePresentation = this.rootDoc; - if (this.itemIndex >= 0) { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = activeItem.presentationTargetDoc ? Cast(activeItem.presentationTargetDoc, Doc, null) : undefined; - if (targetDoc) { - const srcContext = Cast(targetDoc.context, Doc, null); - if (srcContext) this.layoutDoc.presCollection = srcContext; - } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; - } } @undoBatch @@ -136,7 +129,7 @@ export class PresBox extends ViewBoxBaseComponent } // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide } else if (this.childDocs[this.itemIndex + 1] !== undefined) { - let nextSelected = this.itemIndex + 1; + const nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); // for (nextSelected = nextSelected + 1; nextSelected < this.childDocs.length; nextSelected++) { @@ -249,16 +242,24 @@ export class PresBox extends ViewBoxBaseComponent const srcContext = Cast(targetDoc.context, Doc, null); const presCollection = Cast(this.rootDoc.presCollection, Doc, null); const collectionDocView = DocumentManager.Instance.getDocumentView(presCollection); + if (this.itemIndex >= 0) { + if (targetDoc) { + if (srcContext) this.layoutDoc.presCollection = srcContext; + } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; + } console.log("NC: " + srcContext.title); console.log("PC: " + presCollection.title); if (collectionDocView) { if (srcContext !== presCollection) { + console.log("Case 1: new srcContext inside of current collection so add a new tab to the current pres collection"); console.log(collectionDocView); collectionDocView.props.addDocTab(srcContext, "inPlace"); } } else if (srcContext) { + console.log("Case 2: srcContext - not open and collection containing this document exists, so open collection that contains it and then await zooming in on document"); this.props.addDocTab(srcContext, "onRight"); } else if (!srcContext) { + console.log("Case 3: !srcContext - no collection containing this document, therefore open document itself on right"); this.props.addDocTab(targetDoc, "onRight"); } this.updateCurrentPresentation(); @@ -382,7 +383,7 @@ export class PresBox extends ViewBoxBaseComponent // Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); // } // } - }; + } @undoBatch viewChanged = action((e: React.ChangeEvent) => { @@ -390,7 +391,7 @@ export class PresBox extends ViewBoxBaseComponent const viewType = e.target.selectedOptions[0].value as CollectionViewType; viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here // this.updateMinimize(this.rootDoc._viewType = viewType); - if (viewType === CollectionViewType.Stacking) this.rootDoc._gridGap = 5; + if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 5; }); @undoBatch diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 1c04fdf56..a0c7ad94b 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -248,10 +248,7 @@ export class PresElementBox extends ViewBoxBaseComponent { - this.props.dropAction; - e.stopPropagation(); - }} + onPointerDown={e => { }} > {treecontainer ? (null) : <>
-- cgit v1.2.3-70-g09d2 From af592ffc89be5f7026f38ddec89956de9c001ed3 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Sun, 2 Aug 2020 04:42:36 +0800 Subject: drag actions inc. multiple documents (fixed for all stacking collections) --- .../views/collections/CollectionStackingView.tsx | 24 +++- .../CollectionStackingViewFieldColumn.tsx | 4 +- .../views/collections/CollectionTreeView.tsx | 1 + src/client/views/nodes/PresBox.tsx | 131 ++++++++++++++++----- .../views/presentationview/PresElementBox.tsx | 52 +++++++- 5 files changed, 170 insertions(+), 42 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index c56ac9f77..dc6354383 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -286,14 +286,26 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) } }); if (super.onInternalDrop(e, de)) { - const newDoc = de.complete.docDragData.droppedDocuments[0]; + const newDocs = de.complete.docDragData.droppedDocuments; const docs = this.childDocList; if (docs) { - if (targInd === -1) targInd = docs.length; - else targInd = docs.indexOf(this.filteredChildren[targInd]); - const srcInd = docs.indexOf(newDoc); - docs.splice(srcInd, 1); - docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, newDoc); + newDocs.map((doc, i) => { + if (i === 0) { + if (targInd === -1) targInd = docs.length; + else targInd = docs.indexOf(this.filteredChildren[targInd]); + const srcInd = docs.indexOf(doc); + docs.splice(srcInd, 1); + docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); + } else { + if (targInd === -1) targInd = docs.length; + else targInd = docs.indexOf(this.filteredChildren[targInd]); + const srcInd = docs.indexOf(doc); + const firstInd = docs.indexOf(newDocs[0]); + docs.splice(srcInd, 1); + // docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); + docs.splice(firstInd + 1, 0, doc); + } + }); } } } diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 76af70cd1..890ab588c 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -350,7 +350,7 @@ export class CollectionStackingViewFieldColumn extends React.Component : (null); for (let i = 0; i < cols; i++) templatecols += `${style.columnWidth / style.numGroupColumns}px `; const chromeStatus = this.props.parent.props.Document._chromeStatus; - + const type = this.props.parent.props.Document.type; return <> {this.props.parent.Document._columnsHideIfEmpty ? (null) : headingView} { @@ -370,7 +370,7 @@ export class CollectionStackingViewFieldColumn extends React.Component - {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ? + {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled' && type !== 'presentation') ?
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 651357e5d..dd823f5d5 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -130,6 +130,7 @@ class TreeView extends React.Component { } protected createTreeDropTarget = (ele: HTMLDivElement) => { + console.log("ele"); this._treedropDisposer?.(); ele && (this._treedropDisposer = DragManager.MakeDropTarget(ele, this.treeDrop.bind(this), undefined, this.preTreeDrop.bind(this)), this.doc); } diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index b5f3fc204..28e340cf1 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -4,8 +4,8 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, DocCastAsync, WidthSym } from "../../../fields/Doc"; import { InkTool } from "../../../fields/InkField"; -import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; -import { returnFalse, returnOne, numberRange } from "../../../Utils"; +import { BoolCast, Cast, NumCast, StrCast, ScriptCast } from "../../../fields/Types"; +import { returnFalse, returnOne, numberRange, setupMoveUpEvents, emptyFunction, returnTrue } from "../../../Utils"; import { documentSchema } from "../../../fields/documentSchemas"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; @@ -15,7 +15,7 @@ import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; import { ViewBoxBaseComponent } from "../DocComponent"; import { makeInterface, listSpec } from "../../../fields/Schema"; -import { Docs } from "../../documents/Documents"; +import { Docs, DocUtils } from "../../documents/Documents"; import { PrefetchProxy } from "../../../fields/Proxy"; import { ScriptField } from "../../../fields/ScriptField"; import { Scripting } from "../../util/Scripting"; @@ -29,6 +29,7 @@ import { Tooltip } from "@material-ui/core"; import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu"; import { conformsTo } from "lodash"; import { translate } from "googleapis/build/src/apis/translate"; +import { DragManager, dropActionType } from "../../util/DragManager"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -36,6 +37,7 @@ const PresBoxDocument = makeInterface(documentSchema); @observer export class PresBox extends ViewBoxBaseComponent(PresBoxDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); } + private treedropDisposer?: DragManager.DragDropDisposer; static Instance: PresBox; @observable _isChildActive = false; @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } @@ -67,9 +69,9 @@ export class PresBox extends ViewBoxBaseComponent // document.addEventListener("keydown", this.keyEvents, false); } - // componentWillUnmount() { - // document.removeEventListener("keydown", this.keyEvents, false); - // } + componentWillUnmount() { + this.treedropDisposer?.(); + } onPointerOver = () => { document.addEventListener("keydown", this.keyEvents, true); @@ -236,21 +238,21 @@ export class PresBox extends ViewBoxBaseComponent * has the option open and last in the group. If not in the group, and it has * the option open, navigates to that element. */ - navigateToElement = (curDoc: Doc) => { + navigateToElement = async (curDoc: Doc) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - const srcContext = Cast(targetDoc.context, Doc, null); - const presCollection = Cast(this.rootDoc.presCollection, Doc, null); - const collectionDocView = DocumentManager.Instance.getDocumentView(presCollection); + const srcContext = await DocCastAsync(targetDoc.context); + const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); + const collectionDocView = presCollection ? DocumentManager.Instance.getDocumentView(presCollection) : undefined; if (this.itemIndex >= 0) { if (targetDoc) { if (srcContext) this.layoutDoc.presCollection = srcContext; } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; } - console.log("NC: " + srcContext.title); - console.log("PC: " + presCollection.title); + if (srcContext) console.log("NC: " + srcContext.title); + if (presCollection) console.log("PC: " + presCollection.title); if (collectionDocView) { - if (srcContext !== presCollection) { + if (srcContext && srcContext !== presCollection) { console.log("Case 1: new srcContext inside of current collection so add a new tab to the current pres collection"); console.log(collectionDocView); collectionDocView.props.addDocTab(srcContext, "inPlace"); @@ -270,14 +272,14 @@ export class PresBox extends ViewBoxBaseComponent if (docToJump === curDoc) { //checking if curDoc has navigation open if (curDoc.presNavButton && targetDoc) { - DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext); + await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext); } else if (curDoc.presZoomButton && targetDoc) { //awaiting jump so that new scale can be found, since jumping is async - DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext); + await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext); } } else { //awaiting jump so that new scale can be found, since jumping is async - targetDoc && DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext); + targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext); } } @@ -424,9 +426,15 @@ export class PresBox extends ViewBoxBaseComponent whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; - docs.forEach(doc => { - doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); - !this.childDocs.includes(doc) && (doc.presZoomButton = true); + docs.forEach((doc, i) => { + if (this.childDocs.includes(doc)) { + console.log(docs.length); + console.log(i + 1); + if (docs.length === i + 1) return false; + } else { + doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); + !this.childDocs.includes(doc) && (doc.presZoomButton = true); + } }); return true; } @@ -439,6 +447,7 @@ export class PresBox extends ViewBoxBaseComponent // KEYS @observable _selectedArray: Doc[] = []; + @observable _eleArray: HTMLElement[] = []; @computed get listOfSelected() { const list = this._selectedArray.map((doc: Doc, index: any) => { @@ -462,18 +471,20 @@ export class PresBox extends ViewBoxBaseComponent //Command click @action - multiSelect = (doc: Doc) => { + multiSelect = (doc: Doc, ref: HTMLElement) => { this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); + this._eleArray.push(ref); } //Shift click @action - shiftSelect = (doc: Doc) => { + shiftSelect = (doc: Doc, ref: HTMLElement) => { this._selectedArray = []; const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (activeItem) { for (let i = Math.min(this.itemIndex, this.childDocs.indexOf(doc)); i <= Math.max(this.itemIndex, this.childDocs.indexOf(doc)); i++) { this._selectedArray.push(this.childDocs[i]); + this._eleArray.push(ref); } } } @@ -1552,9 +1563,68 @@ export class PresBox extends ViewBoxBaseComponent } } + private _itemRef: React.RefObject = React.createRef(); + + + protected createPresDropTarget = (ele: HTMLDivElement) => { + console.log("created?"); + this.treedropDisposer?.(); + ele && (this.treedropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc, this.onInternalPreDrop.bind(this))); + if (ele) { + console.log("ele: " + ele.className) + } + } + + protected onInternalPreDrop(e: Event, de: DragManager.DropEvent, targetAction: dropActionType) { + console.log("preDrop?") + if (de.complete.docDragData) { + // if targetDropAction is, say 'alias', but we're just dragging within a collection, we want to ignore the targetAction. + // otherwise, the targetAction should become the actual action (which can still be overridden by the userDropAction -eg, shift/ctrl keys) + if (targetAction && !de.complete.docDragData.draggedDocuments.some(d => d.context === this.props.Document && this.childDocs.includes(d))) { + de.complete.docDragData.dropAction = targetAction; + } + e.stopPropagation(); + } + } + + @action + protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean { + console.log("drop in pres") + const docDragData = de.complete.docDragData; + ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData }); + if (docDragData && this.props.addDocument) { + console.log("docDragData && this.props.addDocument"); + let added = false; + const dropaction = docDragData.dropAction || docDragData.userDropAction; + if (dropaction && dropaction !== "move") { + console.log("dropaction && dropaction !== move"); + added = this.props.addDocument(docDragData.droppedDocuments); + } else if (docDragData.moveDocument) { + console.log("docDragData.moveDocument"); + const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d); + const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d); + const res = addedDocs.length ? this.props.addDocument(addedDocs) : true; + if (movedDocs.length) { + const canAdd = this.props.Document._viewType === CollectionViewType.Pile || de.embedKey || + Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document); + added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.props.addDocument : returnFalse); + } else added = res; + } else { + console.log("else"); + added = this.props.addDocument(docDragData.droppedDocuments); + } + added && e.stopPropagation(); + return added; + } + return false; + } + render() { this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; + // const addDocument = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => { + // return add(doc, relativeTo ? relativeTo : docs[i], before !== undefined ? before : false); + // }; return
+ Select Document + +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
Edit onClick Script
+
; + } + + @computed + get googlePhotosButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Export to Google Photos"}
}> +
{ + if (this.selectedDocumentView) { + GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log); + } + }}> + {} +
+ ; + } + + @computed + get clustersButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
}> +
+ {} +
+ ; + } + + @action @undoBatch + changeFitToBox = () => { + this.selectedDoc && (this.selectedDoc._fitToBox = !this.selectedDoc._fitToBox); + } + + @action @undoBatch + changeClusters = () => { + this.selectedDoc && (this.selectedDoc.useClusters = !this.selectedDoc.useClusters); + } + + @computed + get fitContentButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
}> +
+ {} +
+ ; + } + + // @computed + // get importButton() { + // const targetDoc = this.selectedDoc; + // return !targetDoc ? (null) :
{"Import a Document"}
}> + //
{ + // if (this.selectedDocumentView) { + // CollectionFreeFormView.importDocument(100, 100); + // } + // }}> + // {} + //
+ // ; + // } + + + render() { + if (!this.selectedDoc) return (null); + + const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; + const considerPull = isText && this.considerGoogleDocsPull; + const considerPush = isText && this.considerGoogleDocsPush; + const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField; + const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false; + const isFreeForm = this.selectedDoc._viewType === "freeform" ? true : false; + + return
+
+ {this.templateButton} +
+ {/*
+ {this.metadataButton} +
*/} +
+ {this.pinButton} +
+
+ {this.copyButton} +
+
+ {this.lockButton} +
+
+ {this.downloadButton} +
+
+
+
+ {this.deleteButton} +
+
+ {this.onClickButton} +
+
+ {this.sharingButton} +
+
+ {this.considerGoogleDocsPush} +
+
+ {this.considerGoogleDocsPull} +
+
+ {this.googlePhotosButton} +
+ {/*
+ {this.importButton} +
*/} + +
+ {this.clustersButton} +
+ +
+ {this.fitContentButton} +
+ +
+
; + } +} diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 9b14df760..6d93b2ba8 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -12,6 +12,7 @@ width: 100%; height: 100%; position: absolute; + .miniThumb { background: #25252525; position: absolute; @@ -89,6 +90,7 @@ transform: translate(0px, -3px); cursor: grab; } + .lm_title.focus-visible { cursor: text; } @@ -96,23 +98,25 @@ .lm_title_wrap { overflow: hidden; height: 19px; - margin-top: -3px; - display:inline-block; + margin-top: -2px; + display: inline-block; } + .lm_active .lm_title { border: solid 1px lightgray; } + .lm_header .lm_tab .lm_close_tab { position: absolute; text-align: center; } .lm_header .lm_tab { - padding-right : 20px; + padding-right: 20px; } .lm_popout { - display:none; + display: none; } .messageCounter { @@ -135,6 +139,7 @@ position: absolute; top: 0; left: 0; + // overflow: hidden; // bcz: menus don't show up when this is on (e.g., the parentSelectorMenu) .collectionDockingView-gear { padding-left: 5px; @@ -142,7 +147,10 @@ width: 18px; display: inline-block; margin: auto; + + display: none; } + .collectionDockingView-dragAsDocument { touch-action: none; position: absolute; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index f658e9816..d685fac4e 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,9 +1,8 @@ import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; -import { action, computed, Lambda, observable, reaction, runInAction, trace } from "mobx"; +import { action, computed, Lambda, observable, reaction, runInAction, trace, IReactionDisposer } from "mobx"; import { observer } from "mobx-react"; import * as ReactDOM from 'react-dom'; -import Measure from "react-measure"; import * as GoldenLayout from "../../../client/goldenLayout"; import { DateField } from '../../../fields/DateField'; import { Doc, DocListCast, Field, Opt, DataSym } from "../../../fields/Doc"; @@ -507,7 +506,6 @@ export class CollectionDockingView extends React.Component`; tab.titleElement[0].onclick = (e: any) => tab.titleElement[0].focus(); tab.titleElement[0].onchange = (e: any) => { tab.titleElement[0].size = e.currentTarget.value.length + 1; @@ -522,6 +520,10 @@ export class CollectionDockingView extends React.Component { + const view = DocumentManager.Instance.getDocumentView(doc); + view && SelectionManager.SelectDoc(view, false); + }; // shifts the focus to this tab when another tab is dragged over it tab.element[0].onmouseenter = (e: any) => { if (!this._isPointerDown || !SnappingManager.GetIsDragging()) return; @@ -676,10 +678,15 @@ export class DockedFrameRenderer extends React.Component { @observable private _panelHeight = 0; @observable private _document: Opt; @observable private _isActive: boolean = false; + _tabReaction: IReactionDisposer | undefined; get _stack(): any { return (this.props as any).glContainer.parent.parent; } + get _tab(): any { + const tab = (this.props as any).glContainer.tab.element[0] as HTMLElement; + return tab.getElementsByClassName("lm_title")?.[0]; + } constructor(props: any) { super(props); DocServer.GetRefField(this.props.documentId).then(action((f: Opt) => this._document = f as Doc)); @@ -740,9 +747,16 @@ export class DockedFrameRenderer extends React.Component { this.props.glContainer.layoutManager.on("activeContentItemChanged", this.onActiveContentItemChanged); this.props.glContainer.on("tab", this.onActiveContentItemChanged); this.onActiveContentItemChanged(); + this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }), + (data) => { + const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document)); + this._tab.style.backgroundColor = selected ? data.color : ""; + } + ); } componentWillUnmount() { + this._tabReaction?.(); this.props.glContainer.layoutManager.off("activeContentItemChanged", this.onActiveContentItemChanged); this.props.glContainer.off("tab", this.onActiveContentItemChanged); } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 0ca86172f..fdd1b4e81 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -25,6 +25,8 @@ import { SelectionManager } from "../../util/SelectionManager"; import { DocumentView } from "../nodes/DocumentView"; import { ColorState } from "react-color"; import { ObjectField } from "../../../fields/ObjectField"; +import RichTextMenu from "../nodes/formattedText/RichTextMenu"; +import { RichTextField } from "../../../fields/RichTextField"; import { ScriptField } from "../../../fields/ScriptField"; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { DocUtils } from "../../documents/Documents"; @@ -47,7 +49,7 @@ export default class CollectionMenu extends AntimodeMenu { componentDidMount() { reaction(() => SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0], - (doc) => doc && this.SetSelection(doc)) + (doc) => doc && this.SetSelection(doc)); } @action @@ -160,7 +162,8 @@ export class CollectionViewBaseChrome extends React.Component { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; }, }; - _freeform_commands = [this._viewCommand, this._saveFilterCommand, this._fitContentCommand, this._clusterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; + @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; } + _stacking_commands = [this._contentCommand, this._templateCommand]; _masonry_commands = [this._contentCommand, this._templateCommand]; _schema_commands = [this._templateCommand, this._narrativeCommand]; @@ -308,18 +311,32 @@ export class CollectionViewBaseChrome extends React.Component; } + @computed get selectedDocumentView() { + if (SelectionManager.SelectedDocuments().length) { + return SelectionManager.SelectedDocuments()[0]; + } else { return undefined; } + } + @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + @computed get isText() { + if (this.selectedDoc) { + return this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; + } + else return false; + } + render() { return (
- {this.props.type === CollectionViewType.Invalid || this.props.type === CollectionViewType.Docking ? (null) : this.viewModes} - {this.props.type === CollectionViewType.Docking ? (null) : this.templateChrome} -
+ {this.props.type === CollectionViewType.Invalid || + this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.viewModes} + {this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.templateChrome} + {/*
-
+
*/} {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : ; + // return ; + return null; } render() { return !this.props.docView.layoutDoc ? (null) :
- {this.props.docView.props.renderDepth !== 0 ? (null) : + {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) :
} -
+ {!!!this.isText ?
-
-
: null} + {!!!this.isText ?
this.document.editing = !this.document.editing)} > {NumCast(this.document.currentFrame)} -
-
+
: null} + {!!!this.isText ?
-
+
: null} - {!this.props.isOverlay || this.document.type !== DocumentType.WEB ? (null) : + {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) : } - {!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating ? + {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ? <> {this.drawButtons} {this.widthPicker} @@ -566,6 +602,7 @@ export class CollectionFreeFormViewChrome extends React.Component : (null) } + {this.isText ? : null}
; } } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 5553bbbb7..f67e049fd 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -253,7 +253,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
this.typesDropdownChange(!this._openTypes)}> - +
{this._openTypes ? allColumnTypes : justColType}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 425dc90e4..a104ac011 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -227,6 +227,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) addDocTab={this.addDocTab} bringToFront={returnFalse} ContentScaling={returnOne} + scriptContext={this.props.scriptContext} pinToPres={this.props.pinToPres} />; } diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 26d2ee8a3..68c233a16 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -351,7 +351,7 @@ export class CollectionStackingViewFieldColumn extends React.Component +
(schemaCtor: (doc: Doc) => T, moreProps?: const reg = new RegExp(Utils.prepend(""), "g"); const modHtml = srcUrl ? html.replace(reg, srcUrl) : html; const htmlDoc = Docs.Create.HtmlDocument(modHtml, { ...options, title: "-web page-", _width: 300, _height: 300 }); - Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc)["text"] = text; + Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text; this.props.addDocument(htmlDoc); if (srcWeb) { const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")[0].contentDocument?.getSelection()?.focusNode as any); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index b8996c178..e5c4b9187 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -90,7 +90,10 @@ class TreeView extends React.Component { get displayName() { return "TreeView(" + this.doc.title + ")"; } // this makes mobx trace() statements more descriptive get defaultExpandedView() { return this.childDocs ? this.fieldKey : StrCast(this.doc.defaultExpandedView, this.noviceMode ? "layout" : "fields"); } @observable _overrideTreeViewOpen = false; // override of the treeViewOpen field allowing the display state to be independent of the document's state - set treeViewOpen(c: boolean) { if (this.props.treeViewPreventOpen) this._overrideTreeViewOpen = c; else this.doc.treeViewOpen = this._overrideTreeViewOpen = c; } + set treeViewOpen(c: boolean) { + if (this.props.treeViewPreventOpen) this._overrideTreeViewOpen = c; + else this.doc.treeViewOpen = this._overrideTreeViewOpen = c; + } @computed get treeViewOpen() { return (!this.props.treeViewPreventOpen && !this.doc.treeViewPreventOpen && BoolCast(this.doc.treeViewOpen)) || this._overrideTreeViewOpen; } @computed get treeViewExpandedView() { return StrCast(this.doc.treeViewExpandedView, this.defaultExpandedView); } @computed get MAX_EMBED_HEIGHT() { return NumCast(this.props.containingCollection.maxEmbedHeight, 200); } @@ -101,7 +104,7 @@ class TreeView extends React.Component { const layout = Doc.LayoutField(this.doc) instanceof Doc ? Doc.LayoutField(this.doc) as Doc : undefined; return ((this.props.dataDoc ? DocListCast(this.props.dataDoc[field]) : undefined) || // if there's a data doc for an expanded template, use it's data field (layout ? DocListCast(layout[field]) : undefined) || // else if there's a layout doc, display it's fields - DocListCast(this.doc[field])) as Doc[]; // otherwise use the document's data field + DocListCast(this.doc[field])); // otherwise use the document's data field } @computed get childDocs() { return this.childDocList(this.fieldKey); } @computed get childLinks() { return this.childDocList("links"); } diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index b630f9cf8..a5aef86de 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -24,6 +24,7 @@ border-right: unset; z-index: 2; } + .collectionTimeView-treeView { display: flex; flex-direction: column; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 7e7ea6786..62e8dc26a 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -78,6 +78,7 @@ export interface CollectionViewCustomProps { childLayoutTemplate?: () => Opt; // specify a layout Doc template to use for children of the collection childLayoutString?: string; // specify a layout string to use for children of the collection childOpacity?: () => number; + hideFilter?: true; } export interface CollectionRenderProps { @@ -309,7 +310,7 @@ export class CollectionView extends Touchable this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" }); + !Doc.UserDoc().noviceMode ? optionItems.splice(0, 0, { description: `${this.props.Document.forceActive ? "Select" : "Force"} Contents Active`, event: () => this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" }) : null; if (this.props.Document.childLayout instanceof Doc) { optionItems.push({ description: "View Child Layout", event: () => this.props.addDocTab(this.props.Document.childLayout as Doc, "onRight"), icon: "project-diagram" }); } @@ -368,7 +369,7 @@ export class CollectionView extends Touchable this.props.PanelWidth() - this.facetWidth(); + bodyPanelWidth = () => this.props.PanelWidth(); facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth)); @computed get dataDoc() { @@ -490,6 +491,7 @@ export class CollectionView extends Touchable this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false); } + filterBackground = () => "rgba(105, 105, 105, 0.432)"; get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; } // this makes the tree view collection ignore these filters (otherwise, the filters would filter themselves) @computed get scriptField() { @@ -559,6 +561,7 @@ export class CollectionView extends Touchable
; } + childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null); childLayoutString = this.props.childLayoutString || StrCast(this.props.Document.childLayoutString); @@ -588,11 +591,11 @@ export class CollectionView extends Touchable } - {this.facetWidth() < 10 ? (null) : this.filterView} + {this.facetWidth() < 10 ? (null) : this.filterView} */}
); } } diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx index 8c0b8de9d..532dd6abc 100644 --- a/src/client/views/collections/ParentDocumentSelector.tsx +++ b/src/client/views/collections/ParentDocumentSelector.tsx @@ -42,14 +42,14 @@ export class SelectorContextMenu extends React.Component { async fetchDocuments() { const aliases = (await SearchUtil.GetAliasesOfDocument(this.props.Document)); const containerProtoSets = await Promise.all(aliases.map(async alias => - await Promise.all((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs))); + ((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs))); const containerProtos = containerProtoSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set()); const containerSets = await Promise.all(Array.from(containerProtos.keys()).map(async container => { - return (await SearchUtil.GetAliasesOfDocument(container)); + return (SearchUtil.GetAliasesOfDocument(container)); })); const containers = containerSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set()); const doclayoutSets = await Promise.all(Array.from(containers.keys()).map(async (dp) => { - return (await SearchUtil.GetAliasesOfDocument(dp)); + return (SearchUtil.GetAliasesOfDocument(dp)); })); const doclayouts = Array.from(doclayoutSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set()).keys()); runInAction(() => { diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index cde795098..7e2840c2c 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -148,7 +148,7 @@ export class SchemaTable extends React.Component { } @action - changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown; + changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { @@ -208,7 +208,7 @@ export class SchemaTable extends React.Component { }}> {col.heading}
; - const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up"; + const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up"; const header =
{ {keysDropdown}
this.changeSorting(col)} - style={{ paddingRight: "6px", display: "inline" }}> + style={{ paddingRight: "6px", marginLeft: "4px", display: "inline" }}>
this.props.openHeader(col, e.clientX, e.clientY)} style={{ float: "right", paddingRight: "6px" }}> - +
; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 151acb64d..109808956 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1145,7 +1145,7 @@ export class CollectionFreeFormView extends CollectionSubView { TraceMobx(); return this.doLayoutComputation }, + this._layoutComputeReaction = reaction(() => this.doLayoutComputation, (elements) => this._layoutElements = elements || [], { fireImmediately: true, name: "doLayout" }); @@ -1240,13 +1240,15 @@ export class CollectionFreeFormView extends CollectionSubView { this.props.Document._panX = this.props.Document._panY = 0; this.props.Document[this.scaleFieldKey] = 1; }, icon: "compress-arrows-alt" }); appearanceItems.push({ description: `${this.fitToContent ? "Make Zoomable" : "Scale to Window"}`, event: () => this.Document._fitToBox = !this.fitToContent, icon: !this.fitToContent ? "expand-arrows-alt" : "compress-arrows-alt" }); - appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" }); + !Doc.UserDoc().noviceMode ? appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" }) : null; !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); const viewctrls = ContextMenu.Instance.findByDescription("UI Controls..."); const viewCtrlItems = viewctrls && "subitems" in viewctrls ? viewctrls.subitems : []; - viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" }); - viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }); + + + !Doc.UserDoc().noviceMode ? viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" }) : null; + !Doc.UserDoc().noviceMode ? viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }) : null; !viewctrls && ContextMenu.Instance.addItem({ description: "UI Controls...", subitems: viewCtrlItems, icon: "eye" }); const options = ContextMenu.Instance.findByDescription("Options..."); @@ -1291,7 +1293,7 @@ export class CollectionFreeFormView extends CollectionSubView { SearchUtil.Search(`{!join from=id to=proto_i}id:link*`, true, {}).then(docs => { docs.docs.forEach(d => LinkManager.Instance.addLink(d)); - }) + }); }, 2000); // need to give solr some time to update so that this query will find any link docs we've added. } } diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index ddc282e57..6263be261 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -13,7 +13,6 @@ import AntimodeMenu from "../../AntimodeMenu"; import "./FormatShapePane.scss"; import { undoBatch } from "../../../util/UndoManager"; import { ColorState, SketchPicker } from 'react-color'; -import { DocumentView } from "../../../views/nodes/DocumentView" @observer export default class FormatShapePane extends AntimodeMenu { @@ -124,12 +123,12 @@ export default class FormatShapePane extends AntimodeMenu { console.log(ink); if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var j = 0; j < ink.length; j++) { + ink.forEach(i => { // (new x — oldx) + (oldxpoint * newWidt)/oldWidth - const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; - const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + const newX = ((doc.x || 0) - oldX) + (i.X * (doc._width || 0)) / oldWidth; + const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); } } @@ -148,12 +147,12 @@ export default class FormatShapePane extends AntimodeMenu { console.log(ink); if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var j = 0; j < ink.length; j++) { + ink.forEach(i => { // (new x — oldx) + (oldxpoint * newWidt)/oldWidth - const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; - const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + const newX = ((doc.x || 0) - oldX) + (i.X * (doc._width || 0)) / oldWidth; + const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); } } @@ -191,11 +190,11 @@ export default class FormatShapePane extends AntimodeMenu { if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var i = 0; i < ink.length; i++) { - const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; - const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y; + ink.forEach(i => { + const newX = Math.cos(angle) * (i.X - _centerPoints[index].X) - Math.sin(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); const xs = newPoints.map(p => p.X); const ys = newPoints.map(p => p.Y); @@ -395,12 +394,12 @@ export default class FormatShapePane extends AntimodeMenu { @computed get widInput() { return this.inputBox("wid", this.shapeWid, (val: string) => this.shapeWid = val); } @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); } - @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); } @computed get controlPoints() { return this.controlPointsButton(); } @computed get lockRatio() { return this.lockRatioButton(); } @computed get rotate90() { return this.rotate90Button(); } + @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } @computed get propertyGroupItems() { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss new file mode 100644 index 000000000..74f32275a --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -0,0 +1,620 @@ +.propertiesView { + + background-color: rgb(205, 205, 205); + height: 100%; + font-family: "Noto Sans"; + cursor: auto; + + overflow-x: visible; + overflow-y: visible; + + .propertiesView-title { + background-color: rgb(159, 159, 159); + text-align: center; + padding-top: 12px; + padding-bottom: 12px; + display: flex; + font-size: 18px; + font-weight: bold; + justify-content: center; + + .propertiesView-title-icon { + width: 20px; + height: 20px; + padding-left: 38px; + margin-top: -5px; + right: 19; + position: absolute; + + &:hover { + color: grey; + cursor: pointer; + } + + } + + } + + .propertiesView-name { + border-bottom: 1px solid black; + padding: 8.5px; + font-size: 12.5px; + + &:hover { + cursor: pointer; + } + } + + .propertiesView-settings { + border-bottom: 1px solid black; + //padding: 8.5px; + font-size: 12.5px; + font-weight: bold; + + .propertiesView-settings-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-settings-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-settings-content { + margin-left: 12px; + padding-bottom: 10px; + padding-top: 8px; + } + + } + + .propertiesView-sharing { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-sharing-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-sharing-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-sharing-content { + font-size: 10px; + padding: 10px; + margin-left: 5px; + } + } + + .propertiesView-appearance { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-appearance-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-appearance-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-appearance-content { + font-size: 10px; + padding: 10px; + margin-left: 5px; + } + } + + .propertiesView-transform { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-transform-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-transform-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-transform-content { + font-size: 10px; + padding: 10px; + margin-left: 5px; + } + } + + .notify-button { + padding: 2px; + width: 12px; + height: 12px; + background-color: black; + border-radius: 10px; + padding-left: 2px; + padding-right: 2px; + margin-top: 2px; + margin-left: 3px; + + .notify-button-icon { + width: 6px; + height: 6.5px; + margin-left: .5px; + } + + &:hover { + background-color: rgb(158, 158, 158); + cursor: pointer; + } + } + + .expansion-button-icon { + width: 11px; + height: 11px; + color: black; + margin-left: 27px; + + &:hover { + color: rgb(131, 131, 131); + cursor: pointer; + } + } + + .propertiesView-sharingTable { + + border: 1px solid black; + padding: 5px; + border-radius: 6px; + /* width: 170px; */ + margin-right: 10px; + background-color: #ececec; + max-height: 130px; + overflow-y: scroll; + + .propertiesView-sharingTable-item { + + display: flex; + padding: 3px; + align-items: center; + border-bottom: 0.5px solid grey; + + &:hover .propertiesView-sharingTable-item-name { + overflow-x: unset; + white-space: unset; + overflow-wrap: break-word; + } + + .propertiesView-sharingTable-item-name { + font-weight: bold; + width: 80px; + overflow-x: hidden; + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + } + + .propertiesView-sharingTable-item-permission { + display: flex; + right: 34; + float: right; + position: absolute; + + .permissions-select { + z-index: 1; + border: none; + background-color: inherit; + width: 75px; + text-align: justify; // for Edge + text-align-last: end; + + &:hover { + cursor: pointer; + } + } + } + + &:last-child { + border-bottom: none; + } + } + } + + .propertiesView-fields { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-fields-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-fields-title-name { + font-size: 12.5px; + font-weight: bold; + white-space: nowrap; + width: 35px; + display: flex; + } + + .propertiesView-fields-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-fields-checkbox { + float: right; + height: 20px; + margin-top: -9px; + + .propertiesView-fields-checkbox-text { + font-size: 7px; + margin-top: -10px; + margin-left: 6px; + } + } + + .propertiesView-fields-content { + font-size: 10px; + margin-left: 2px; + padding: 10px; + + &:hover { + cursor: pointer; + } + } + } + + .field { + display: flex; + font-size: 7px; + background-color: #e8e8e8; + padding-right: 3px; + border: 0.5px solid grey; + border-radius: 5px; + padding-left: 3px; + } + + .uneditable-field { + display: flex; + overflow-y: visible; + margin-bottom: 2px; + + &:hover { + cursor: auto; + } + } + + .propertiesView-layout { + + .propertiesView-layout-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-layout-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-layout-content { + overflow: hidden; + padding: 10px; + } + + } +} + +.inking-button { + + display: flex; + + .inking-button-points { + background-color: #333333; + padding: 7px; + border-radius: 7px; + margin-right: 32px; + width: 32; + height: 32; + padding-top: 9px; + margin-left: 18px; + + &:hover { + background: rgb(131, 131, 131); + transform: scale(1.05); + cursor: pointer; + } + } + + .inking-button-lock { + background-color: #333333; + padding: 7px; + border-radius: 7px; + margin-right: 32px; + width: 32; + height: 32; + padding-top: 9px; + padding-left: 10px; + + &:hover { + background: rgb(131, 131, 131); + transform: scale(1.05); + cursor: pointer; + } + } + + .inking-button-rotate { + background-color: #333333; + padding: 7px; + border-radius: 7px; + width: 32; + height: 32; + padding-top: 9px; + padding-left: 10px; + + &:hover { + background: rgb(131, 131, 131); + transform: scale(1.05); + cursor: pointer; + } + } +} + +.inputBox-duo { + display: flex; +} + +.inputBox { + + margin-top: 10px; + display: flex; + height: 19px; + margin-right: 15px; + + .inputBox-title { + font-size: 12px; + padding-right: 5px; + } + + .inputBox-input { + font-size: 10px; + width: 50px; + margin-right: 1px; + border-radius: 3px; + + &:hover { + cursor: pointer; + } + } + + .inputBox-button { + + .inputBox-button-up { + background-color: #333333; + height: 9px; + padding-left: 3px; + padding-right: 3px; + padding-top: 1px; + padding-bottom: 1px; + border-radius: 1.5px; + + &:hover { + background: rgb(131, 131, 131); + transform: scale(1.05); + cursor: pointer; + } + } + + .inputBox-button-down { + background-color: #333333; + height: 9px; + padding-left: 3px; + padding-right: 3px; + padding-top: 1px; + padding-bottom: 1px; + border-radius: 1.5px; + + &:hover { + background: rgb(131, 131, 131); + transform: scale(1.05); + cursor: pointer; + } + } + + } +} + +.color-palette { + width: 160px; + height: 360; +} + +.strokeAndFill { + display: flex; + margin-top: 10px; + + .fill { + margin-right: 40px; + display: flex; + padding-bottom: 7px; + margin-left: 35px; + + .fill-title { + font-size: 12px; + margin-right: 2px; + } + + .fill-button { + padding-top: 2px; + margin-top: -1px; + } + } + + .stroke { + display: flex; + + .stroke-title { + font-size: 12px; + } + + .stroke-button { + padding-top: 2px; + margin-left: 2px; + margin-top: -1px; + } + } +} + +.widthAndDash { + + .width { + .width-top { + display: flex; + + .width-title { + font-size: 12; + margin-right: 20px; + margin-left: 35px; + text-align: center; + } + + .width-input { + margin-right: 30px; + margin-top: -10px; + } + } + + .width-range { + margin-right: 1px; + margin-bottom: 6; + } + } + + .arrows { + + display: flex; + margin-bottom: 3px; + + .arrows-head { + + display: flex; + margin-right: 35px; + + .arrows-head-title { + font-size: 10; + } + + .arrows-head-input { + margin-left: 6px; + margin-top: 2px; + } + } + + .arrows-tail { + display: flex; + + .arrows-tail-title { + font-size: 10; + } + + .arrows-tail-input { + margin-left: 6px; + margin-top: 2px; + } + } + } + + .dashed { + + display: flex; + margin-left: 74px; + margin-bottom: 6px; + + .dashed-title { + font-size: 10; + } + + .dashed-input { + margin-left: 6px; + margin-top: 2px; + } + } +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx new file mode 100644 index 000000000..35c7fd425 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -0,0 +1,858 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import "./PropertiesView.scss"; +import { observable, action, computed, runInAction } from "mobx"; +import { Doc, Field, DocListCast, WidthSym, HeightSym, AclSym, AclPrivate, AclReadonly, AclAddonly, AclEdit, AclAdmin, Opt } from "../../../../fields/Doc"; +import { DocumentView } from "../../nodes/DocumentView"; +import { ComputedField } from "../../../../fields/ScriptField"; +import { EditableView } from "../../EditableView"; +import { KeyValueBox } from "../../nodes/KeyValueBox"; +import { Cast, NumCast, StrCast } from "../../../../fields/Types"; +import { listSpec } from "../../../../fields/Schema"; +import { ContentFittingDocumentView } from "../../nodes/ContentFittingDocumentView"; +import { returnFalse, returnOne, emptyFunction, emptyPath, returnTrue, returnZero, returnEmptyFilter, Utils } from "../../../../Utils"; +import { Id } from "../../../../fields/FieldSymbols"; +import { Transform } from "../../../util/Transform"; +import { PropertiesButtons } from "../../PropertiesButtons"; +import { SelectionManager } from "../../../util/SelectionManager"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Tooltip, Checkbox, Divider } from "@material-ui/core"; +import SharingManager from "../../../util/SharingManager"; +import { DocumentType } from "../../../documents/DocumentTypes"; +import FormatShapePane from "./FormatShapePane"; +import { SharingPermissions, GetEffectiveAcl } from "../../../../fields/util"; +import { InkField } from "../../../../fields/InkField"; +import { undoBatch } from "../../../util/UndoManager"; +import { ColorState, SketchPicker } from "react-color"; +import AntimodeMenu from "../../AntimodeMenu"; +import "./FormatShapePane.scss"; +import { discovery_v1 } from "googleapis"; +import { PresBox } from "../../nodes/PresBox"; +import { DocumentManager } from "../../../util/DocumentManager"; + + +interface PropertiesViewProps { + width: number; + height: number; + renderDepth: number; + ScreenToLocalTransform: () => Transform; + onDown: (event: any) => void; +} + +@observer +export class PropertiesView extends React.Component { + + @computed get MAX_EMBED_HEIGHT() { return 200; } + + @computed get selectedDocumentView() { + if (SelectionManager.SelectedDocuments().length) { + return SelectionManager.SelectedDocuments()[0]; + } else if (PresBox.Instance) { + const presSlide = PresBox.Instance._selectedArray[0]; + const view = DocumentManager.Instance.getDocumentView(presSlide); + if (view) return view; + } else { return undefined; } + } + @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } + + @observable layoutFields: boolean = false; + + @observable openActions: boolean = true; + @observable openSharing: boolean = true; + @observable openFields: boolean = true; + @observable openLayout: boolean = true; + @observable openAppearance: boolean = true; + @observable openTransform: boolean = true; + + @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } + + @action + rtfWidth = () => { + if (this.selectedDoc) { + return Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20); + } else { + return 0; + } + } + @action + rtfHeight = () => { + if (this.selectedDoc) { + return this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; + } else { + return 0; + } + } + + @action + docWidth = () => { + if (this.selectedDoc) { + const layoutDoc = this.selectedDoc; + const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); + if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20)); + return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20; + } else { + return 0; + } + } + + @action + docHeight = () => { + if (this.selectedDoc && this.dataDoc) { + const layoutDoc = this.selectedDoc; + return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => { + const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); + if (aspect) return this.docWidth() * aspect; + return layoutDoc._fitWidth ? (!this.dataDoc._nativeHeight ? NumCast(this.props.height) : + Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth, + NumCast(this.props.height)))) : + NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50; + })())); + } else { + return 0; + } + } + + @computed get expandedField() { + if (this.dataDoc && this.selectedDoc) { + const ids: { [key: string]: string } = {}; + const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc; + doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); + const rows: JSX.Element[] = []; + for (const key of Object.keys(ids).slice().sort()) { + const contents = doc[key]; + if (key[0] === "#") { + rows.push(
+ {key} +   +
); + } else { + let contentElement: (JSX.Element | null)[] | JSX.Element = []; + contentElement = Field.toKeyValueString(doc, key)} + SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} + />; + rows.push(
+ {key + ":"} +   + {contentElement} +
); + } + } + rows.push(
+ ""} + SetValue={this.setKeyValue} /> +
); + return rows; + } + } + + @computed get noviceFields() { + if (this.dataDoc && this.selectedDoc) { + const ids: { [key: string]: string } = {}; + const doc = this.dataDoc; + doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); + const rows: JSX.Element[] = []; + for (const key of Object.keys(ids).slice().sort()) { + if (key[0] === key[0].toUpperCase() || key[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { + const contents = doc[key]; + if (key[0] === "#") { + rows.push(
+ {key} +   +
); + } else { + const value = Field.toString(contents as Field); + if (key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { + rows.push(
+ {key + ": "} +
{value}
+
); + } else { + let contentElement: (JSX.Element | null)[] | JSX.Element = []; + contentElement = Field.toKeyValueString(doc, key)} + SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} + />; + + rows.push(
+ {key + ":"} +   + {contentElement} +
); + } + } + } + } + rows.push(
+ ""} + SetValue={this.setKeyValue} /> +
); + return rows; + } + } + + + setKeyValue = (value: string) => { + if (this.selectedDoc && this.dataDoc) { + const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc; + if (value.indexOf(":") !== -1) { + const newVal = value[0].toUpperCase() + value.substring(1, value.length); + KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true); + return true; + } else if (value[0] === "#") { + const newVal = value + `:'${value}'`; + KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true); + return true; + } + } + return false; + } + + @computed get layoutPreview() { + if (this.selectedDoc) { + const layoutDoc = Doc.Layout(this.selectedDoc); + const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; + const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; + return
+ "lightgrey"} + fitToBox={false} + FreezeDimensions={true} + NativeWidth={layoutDoc.type === + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero} + NativeHeight={layoutDoc.type === + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero} + PanelWidth={panelWidth} + PanelHeight={panelHeight} + focus={returnFalse} + ScreenToLocalTransform={this.props.ScreenToLocalTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={undefined} + ContainingCollectionView={undefined} + addDocument={returnFalse} + moveDocument={undefined} + removeDocument={returnFalse} + parentActive={() => false} + whenActiveChanged={emptyFunction} + addDocTab={returnFalse} + pinToPres={emptyFunction} + bringToFront={returnFalse} + ContentScaling={returnOne} + dontRegisterView={true} + /> +
; + } else { + return null; + } + } + + getPermissionsSelect(user: string) { + return ; + } + + @computed get notifyIcon() { + return
Notify with message
}> +
+ +
+ ; + } + + @computed get expansionIcon() { + return
{"Show more permissions"}
}> +
{ + if (this.selectedDocumentView) { + SharingManager.Instance.open(this.selectedDocumentView); + } + }}> + +
+ ; + } + + sharingItem(name: string, effectiveAcl: symbol, permission?: string) { + return
+
{name}
+ {name !== "Me" ? this.notifyIcon : null} +
+ {effectiveAcl === AclAdmin && permission !== "Owner" ? this.getPermissionsSelect(name) : permission} + {permission === "Owner" ? this.expansionIcon : null} +
+
; + } + + @computed get sharingTable() { + const AclMap = new Map([ + [AclPrivate, SharingPermissions.None], + [AclReadonly, SharingPermissions.View], + [AclAddonly, SharingPermissions.Add], + [AclEdit, SharingPermissions.Edit], + [AclAdmin, SharingPermissions.Admin] + ]); + + const effectiveAcl = GetEffectiveAcl(this.selectedDoc!); + const tableEntries = []; + + if (this.selectedDoc![AclSym]) { + for (const [key, value] of Object.entries(this.selectedDoc![AclSym])) { + const name = key.substring(4).replace("_", "."); + if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author) tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!)); + } + } + + tableEntries.unshift(this.sharingItem("Me", effectiveAcl, Doc.CurrentUserEmail === this.selectedDoc!.author ? "Owner" : StrCast(this.selectedDoc![`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`]))); + if (Doc.CurrentUserEmail !== this.selectedDoc!.author) tableEntries.unshift(this.sharingItem(StrCast(this.selectedDoc!.author), effectiveAcl, "Owner")); + + return
+ {tableEntries} +
; + } + + @computed get fieldsCheckbox() { + return ; + } + + @action + toggleCheckbox = () => { + this.layoutFields = !this.layoutFields; + } + + @computed get editableTitle() { + return StrCast(this.selectedDoc?.title)} + SetValue={this.setTitle} />; + } + + @action + setTitle = (value: string) => { + if (this.dataDoc) { + this.selectedDoc && (this.selectedDoc.title = value); + KeyValueBox.SetField(this.dataDoc, "title", value, true); + return true; + } + return false; + } + + + + + + + + + + @undoBatch + @action + rotate = (angle: number) => { + const _centerPoints: { X: number, Y: number }[] = []; + if (this.selectedDoc) { + const doc = this.selectedDoc; + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + const xs = ink.map(p => p.X); + const ys = ink.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + const right = Math.max(...xs); + const bottom = Math.max(...ys); + _centerPoints.push({ X: left, Y: top }); + } + } + + var index = 0; + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + doc.rotation = Number(doc.rotation) + Number(angle); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + + const newPoints: { X: number, Y: number }[] = []; + for (var i = 0; i < ink.length; i++) { + const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + const xs = newPoints.map(p => p.X); + const ys = newPoints.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + const right = Math.max(...xs); + const bottom = Math.max(...ys); + + doc._height = (bottom - top); + doc._width = (right - left); + } + index++; + } + } + } + + @observable _controlBtn: boolean = false; + @observable _lock: boolean = false; + + @computed + get controlPointsButton() { + return
+
{"Edit points"}
}> +
this._controlBtn = !this._controlBtn)} style={{ backgroundColor: this._controlBtn ? "black" : "" }}> + +
+ +
{this._lock ? "Unlock points" : "Lock points"}
}> +
this._lock = !this._lock)} > + +
+ +
{"Rotate 90˚"}
}> +
this.rotate(Math.PI / 2))}> + +
+ +
; + } + + inputBox = (key: string, value: any, setter: (val: string) => {}, title: string) => { + return
+
{title}
+ setter(e.target.value)} /> +
+
this.upDownButtons("up", key)))} > + +
+
this.upDownButtons("down", key)))} > + +
+
+
; + } + + inputBoxDuo = (key: string, value: any, setter: (val: string) => {}, title1: string, key2: string, value2: any, setter2: (val: string) => {}, title2: string) => { + return
+ {this.inputBox(key, value, setter, title1)} + {title2 === "" ? (null) : this.inputBox(key2, value2, setter2, title2)} +
; + } + + @action + upDownButtons = (dirs: string, field: string) => { + switch (field) { + case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break; + // case "rot": this.selectedInk?.forEach(i => i.rootDoc.rotation = NumCast(i.rootDoc.rotation) + (dirs === "up" ? 0.1 : -0.1)); break; + case "Xps": this.selectedDoc && (this.selectedDoc.x = NumCast(this.selectedDoc?.x) + (dirs === "up" ? 10 : -10)); break; + case "Yps": this.selectedDoc && (this.selectedDoc.y = NumCast(this.selectedDoc?.y) + (dirs === "up" ? 10 : -10)); break; + case "stk": this.selectedDoc && (this.selectedDoc.strokeWidth = NumCast(this.selectedDoc?.strokeWidth) + (dirs === "up" ? .1 : -.1)); break; + case "wid": + const oldWidth = NumCast(this.selectedDoc?._width); + const oldHeight = NumCast(this.selectedDoc?._height); + const oldX = NumCast(this.selectedDoc?.x); + const oldY = NumCast(this.selectedDoc?.y); + this.selectedDoc && (this.selectedDoc._width = oldWidth + (dirs === "up" ? 10 : - 10)); + this._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) / oldWidth * NumCast(this.selectedDoc?._height))); + const doc = this.selectedDoc; + if (doc?.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (NumCast(doc.x) - oldX) + (ink[j].X * NumCast(doc._width)) / oldWidth; + const newY = (NumCast(doc.y) - oldY) + (ink[j].Y * NumCast(doc._height)) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } + break; + case "hgt": + const oWidth = NumCast(this.selectedDoc?._width); + const oHeight = NumCast(this.selectedDoc?._height); + const oX = NumCast(this.selectedDoc?.x); + const oY = NumCast(this.selectedDoc?.y); + this.selectedDoc && (this.selectedDoc._height = oHeight + (dirs === "up" ? 10 : - 10)); + this._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) / oHeight * NumCast(this.selectedDoc?._width))); + const docu = this.selectedDoc; + if (docu?.type === DocumentType.INK && docu.x && docu.y && docu._height && docu._width) { + console.log(docu.x, docu.y, docu._height, docu._width); + const ink = Cast(docu.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (NumCast(docu.x) - oX) + (ink[j].X * NumCast(docu._width)) / oWidth; + const newY = (NumCast(docu.y) - oY) + (ink[j].Y * NumCast(docu._height)) / oHeight; + newPoints.push({ X: newX, Y: newY }); + } + docu.data = new InkField(newPoints); + } + } + break; + } + } + + getField(key: string) { + //if (this.selectedDoc) { + return Field.toString(this.selectedDoc[key] as Field); + // } else { + // return undefined as Opt; + // } + } + + @computed get shapeXps() { return this.getField("x"); } + @computed get shapeYps() { return this.getField("y"); } + @computed get shapeRot() { return this.getField("rotation"); } + @computed get shapeHgt() { return this.getField("_height"); } + @computed get shapeWid() { return this.getField("_width"); } + set shapeXps(value) { this.selectedDoc && (this.selectedDoc.x = Number(value)); } + set shapeYps(value) { this.selectedDoc && (this.selectedDoc.y = Number(value)); } + set shapeRot(value) { this.selectedDoc && (this.selectedDoc.rotation = Number(value)); } + set shapeWid(value) { + const oldWidth = NumCast(this.selectedDoc?._width); + this.selectedDoc && (this.selectedDoc._width = Number(value)); + this._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) * NumCast(this.selectedDoc?._height)) / oldWidth); + } + set shapeHgt(value) { + const oldHeight = NumCast(this.selectedDoc?._height); + this.selectedDoc && (this.selectedDoc._height = Number(value)); + this._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) * NumCast(this.selectedDoc?._width)) / oldHeight); + } + + @computed get hgtInput() { return this.inputBoxDuo("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val, "H:", "wid", this.shapeWid, (val: string) => this.shapeWid = val, "W:"); } + @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } + @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); } + + @observable private _fillBtn = false; + @observable private _lineBtn = false; + + private _lastFill = "#D0021B"; + private _lastLine = "#D0021B"; + private _lastDash: any = "2"; + + @computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; } + @computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; } + set colorFil(value) { value && (this._lastFill = value); this.selectedDoc && (this.selectedDoc.fillColor = value ? value : undefined); } + set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); } + + colorButton(value: string, setter: () => {}) { + return
setter()))}> +
+ {value === "" || value === "transparent" ?

☒

: ""} +
; + } + + @undoBatch + @action + switchStk = (color: ColorState) => { + const val = String(color.hex); + this.colorStk = val; + return true; + } + @undoBatch + @action + switchFil = (color: ColorState) => { + const val = String(color.hex); + this.colorFil = val; + return true; + } + + colorPicker(setter: (color: string) => {}, type: string) { + return ; + } + + @computed get fillButton() { return this.colorButton(this.colorFil, () => { this._fillBtn = !this._fillBtn; this._lineBtn = false; return true; }); } + @computed get lineButton() { return this.colorButton(this.colorStk, () => { this._lineBtn = !this._lineBtn; this._fillBtn = false; return true; }); } + + @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color, "fil"); } + @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color, "stk"); } + + @computed get strokeAndFill() { + return
+
+
+
Fill:
+
{this.fillButton}
+
+
+
Stroke:
+
{this.lineButton}
+
+
+ {this._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""} +
; + } + + @computed get solidStk() { return this.selectedDoc?.color && (!this.selectedDoc?.strokeDash || this.selectedDoc?.strokeDash === "0") ? true : false; } + @computed get dashdStk() { return this.selectedDoc?.strokeDash || ""; } + @computed get unStrokd() { return this.selectedDoc?.color ? true : false; } + @computed get widthStk() { return this.getField("strokeWidth") || "1"; } + @computed get markHead() { return this.getField("strokeStartMarker") || ""; } + @computed get markTail() { return this.getField("strokeEndMarker") || ""; } + set solidStk(value) { this.dashdStk = ""; this.unStrokd = !value; } + set dashdStk(value) { + value && (this._lastDash = value) && (this.unStrokd = false); + this.selectedDoc && (this.selectedDoc.strokeDash = value ? this._lastDash : undefined); + } + set widthStk(value) { this.selectedDoc && (this.selectedDoc.strokeWidth = Number(value)); } + set unStrokd(value) { this.colorStk = value ? "" : this._lastLine; } + set markHead(value) { this.selectedDoc && (this.selectedDoc.strokeStartMarker = value); } + set markTail(value) { this.selectedDoc && (this.selectedDoc.strokeEndMarker = value); } + + + @computed get stkInput() { return this.regInput("stk", this.widthStk, (val: string) => this.widthStk = val); } + + + regInput = (key: string, value: any, setter: (val: string) => {}) => { + return
+ setter(e.target.value)} /> +
+
this.upDownButtons("up", key)))} > + +
+
this.upDownButtons("down", key)))} > + +
+
+
; + } + + @computed get widthAndDash() { + return
+
+
+
Width:
+
{this.stkInput}
+
+ this.widthStk = e.target.value))} /> +
+ +
+
+
Arrow Head:
+ this.markHead = this.markHead ? "" : "arrow"))} /> +
+
+
Arrow End:
+ this.markTail = this.markTail ? "" : "arrow"))} /> +
+
+
+
Dash:
+ +
+
; + } + + @undoBatch @action + changeDash = () => { + const dash = this.dashdStk; + if (dash === "2") { + this.dashdStk = "0"; + } else { + this.dashdStk = "2"; + } + } + + @computed get appearanceEditor() { + return
+ {this.widthAndDash} + {this.strokeAndFill} +
; + } + + @computed get transformEditor() { + return
+ {this.controlPointsButton} + {this.hgtInput} + {this.XpsInput} + {this.rotInput} +
; + } + + render() { + + if (!this.selectedDoc) { + return
+
+ No Document Selected +
; + } + + const novice = Doc.UserDoc().noviceMode; + + return
+
+ Properties +
+ +
+
+
+ {this.editableTitle} +
+
+
runInAction(() => { this.openActions = !this.openActions; })} + style={{ backgroundColor: this.openActions ? "black" : "" }}> + Actions +
+ +
+
+ {this.openActions ?
+ +
: null} +
+
+
runInAction(() => { this.openSharing = !this.openSharing; })} + style={{ backgroundColor: this.openSharing ? "black" : "" }}> + Sharing {"&"} Permissions +
+ +
+
+ {this.openSharing ?
+ {this.sharingTable} +
: null} +
+ + + + + {this.isInk ?
+
runInAction(() => { this.openAppearance = !this.openAppearance; })} + style={{ backgroundColor: this.openAppearance ? "black" : "" }}> + Appearance +
+ +
+
+ {this.openAppearance ?
+ {this.appearanceEditor} +
: null} +
: null} + + {this.isInk ?
+
runInAction(() => { this.openTransform = !this.openTransform; })} + style={{ backgroundColor: this.openTransform ? "black" : "" }}> + Transform +
+ +
+
+ {this.openTransform ?
+ {this.transformEditor} +
: null} +
: null} + + + + + +
+
runInAction(() => { this.openFields = !this.openFields; })} + style={{ backgroundColor: this.openFields ? "black" : "" }}> +
+ Fields {"&"} Tags +
+ +
+
+
+ {!novice && this.openFields ?
+ {this.fieldsCheckbox} +
Layout
+
: null} + {this.openFields ? +
+ {novice ? this.noviceFields : this.expandedField} +
: null} +
+
+
runInAction(() => { this.openLayout = !this.openLayout; })} + style={{ backgroundColor: this.openLayout ? "black" : "" }}> + Layout +
runInAction(() => { this.openLayout = !this.openLayout; })}> + +
+
+ {this.openLayout ?
{this.layoutPreview}
: null} +
+
; + } +} \ No newline at end of file diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index d1c839c3b..0aabf5319 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -182,7 +182,7 @@ export class LinkMenuItem extends React.Component { switch (this.props.destinationDoc.type) { case DocumentType.IMG: destinationIcon = "image"; break; case DocumentType.COMPARISON: destinationIcon = "columns"; break; - case DocumentType.RTF: destinationIcon = "font"; break; + case DocumentType.RTF: destinationIcon = "sticky-note"; break; case DocumentType.COL: destinationIcon = "folder"; break; case DocumentType.WEB: destinationIcon = "globe-asia"; break; case DocumentType.SCREENSHOT: destinationIcon = "photo-video"; break; @@ -196,6 +196,7 @@ export class LinkMenuItem extends React.Component { case DocumentType.DOCHOLDER: destinationIcon = "expand"; break; case DocumentType.VID: destinationIcon = "video"; break; case DocumentType.INK: destinationIcon = "pen-nib"; break; + case DocumentType.PDF: destinationIcon = "file"; break; default: destinationIcon = "question"; break; } diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 6081def5d..f7e253f42 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -78,6 +78,9 @@ export class ContentFittingDocumentView extends React.Component 0.001 ? "auto" : this.props.PanelWidth(), height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(), diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index e8173d103..e3f258b8d 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -18,6 +18,7 @@ import { DocHolderBox } from "./DocHolderBox"; import { DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import { FontIconBox } from "./FontIconBox"; +import { MenuIconBox } from "./MenuIconBox"; import { FieldView, FieldViewProps } from "./FieldView"; import { FormattedTextBox } from "./formattedText/FormattedTextBox"; import { ImageBox } from "./ImageBox"; @@ -189,7 +190,7 @@ export class DocumentContentsView extends React.Component + {/* {this.props.InMenu ? this.props.StartLink ? : + : links.length} */} + {this.props.InMenu ? this.props.StartLink ? : - : links.length} + link : links.length}
{DocumentLinksButton.StartLink && this.props.InMenu && !!!this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
(Docu } onClick = action((e: React.MouseEvent | React.PointerEvent) => { - if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && + if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && this.props.renderDepth >= 0 && (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) { let stopPropagate = true; let preventDefault = true; @@ -319,10 +321,11 @@ export class DocumentView extends DocComponent(Docu const func = () => this.onClickHandler.script.run({ this: this.layoutDoc, self: this.rootDoc, + scriptContext: this.props.scriptContext, thisContainer: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey }, console.log); - if (this.props.Document !== Doc.UserDoc()["dockedBtn-undo"] && this.props.Document !== Doc.UserDoc()["dockedBtn-redo"]) { + if (!Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()["dockedBtn-undo"] as Doc) && !Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()["dockedBtn-redo"] as Doc)) { UndoManager.RunInBatch(func, "on click"); } else func(); } else if (this.Document["onClick-rawScript"] && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes("ScriptingBox")) {// bcz: hack? don't edit a script if you're clicking on a scripting box itself @@ -584,6 +587,18 @@ export class DocumentView extends DocComponent(Docu } } + + @undoBatch + noOnClick = (): void => { + this.Document.ignoreClick = false; + this.Document.isLinkButton = false; + } + + @undoBatch + toggleDetail = (): void => { + this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`); + } + @undoBatch @action drop = async (e: Event, de: DragManager.DropEvent) => { if (this.props.Document === Doc.UserDoc().activeWorkspace) { @@ -660,6 +675,14 @@ export class DocumentView extends DocComponent(Docu } } + @action + onCopy = () => { + const copy = Doc.MakeCopy(this.props.Document, true); + copy.x = NumCast(this.props.Document.x) + NumCast(this.props.Document._width); + copy.y = NumCast(this.props.Document.y) + 30; + this.props.addDocument?.(copy); + } + @action onContextMenu = async (e: React.MouseEvent | Touch): Promise => { // the touch onContextMenu is button 0, the pointer onContextMenu is button 2 @@ -704,14 +727,14 @@ export class DocumentView extends DocComponent(Docu const existingOnClick = cm.findByDescription("OnClick..."); const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" }); - onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "window-restore" }); + onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "concierge-bell" }); 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.toggleFollowLink("inPlace", true, false), icon: "concierge-bell" }); - !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("onRight", false, false), icon: "concierge-bell" }); - onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "concierge-bell" }); - onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "snowflake" }); - onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); - !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "hand-point-right" }); + onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "link" }); + !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("onRight", false, false), icon: "link" }); + onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "link" }); + onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "map-pin" }); + onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "terminal" }); + !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "mouse-pointer" }); const funcs: ContextMenuProps[] = []; if (this.layoutDoc.onDragStart) { @@ -724,6 +747,9 @@ export class DocumentView extends DocComponent(Docu const more = cm.findByDescription("More..."); const moreItems = more && "subitems" in more ? more.subitems : []; moreItems.push({ description: "Download document", icon: "download", event: async () => Doc.Zip(this.props.Document) }); + moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" }); + //moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" }); + moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" }); if (!Doc.UserDoc().noviceMode) { moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" }); moreItems.push({ description: `${this.Document._chromeStatus !== "disabled" ? "Hide" : "Show"} Chrome`, event: () => this.Document._chromeStatus = (this.Document._chromeStatus !== "disabled" ? "disabled" : "enabled"), icon: "project-diagram" }); @@ -735,16 +761,18 @@ export class DocumentView extends DocComponent(Docu } moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" }); } + //GetEffectiveAcl(this.props.Document) === AclEdit && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" }); + const effectiveAcl = GetEffectiveAcl(this.props.Document); (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" }); - moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" }); + !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!); const help = cm.findByDescription("Help..."); const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : []; + !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); - helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" }); cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" }); @@ -786,8 +814,9 @@ export class DocumentView extends DocComponent(Docu childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling()); @computed.struct get linkOffset() { return [-15, 0]; } @computed get contents() { + const pos = this.props.relative ? "relative " : "absolute"; TraceMobx(); - return (
+ return (
(Docu ChromeHeight={this.chromeHeight} isSelected={this.isSelected} select={this.select} + scriptContext={this.props.scriptContext} onClick={this.onClickFunc} layoutKey={this.finalLayoutKey} /> {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} @@ -877,8 +907,12 @@ export class DocumentView extends DocComponent(Docu } @computed get innards() { TraceMobx(); + const pos = this.props.relative ? "relative" : undefined; if (this.props.treeViewDoc && !this.props.LayoutTemplateString?.includes("LinkAnchorBox")) { // this happens when the document is a tree view label (but not an anchor dot) - return
+ return
{StrCast(this.props.Document.title)} {this.allAnchors}
; @@ -1003,7 +1037,7 @@ export class DocumentView extends DocComponent(Docu background: finalColor, opacity: finalOpacity, fontFamily: StrCast(this.Document._fontFamily, "inherit"), - fontSize: Cast(this.Document._fontSize, "string", null) + fontSize: Cast(this.Document._fontSize, "string", null), }}> {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <> {this.innards} diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 5d5bc1d73..1b4151bd8 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -61,6 +61,7 @@ export interface FieldViewProps { color?: string; xMargin?: number; yMargin?: number; + scriptContext?: any; } @observer diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss index 5b85d8b0b..69c835318 100644 --- a/src/client/views/nodes/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox.scss @@ -16,7 +16,7 @@ position: absolute; text-align: center; font-size: 8px; - margin-top:4px; + //margin-top:4px; letter-spacing: normal; left: 0; overflow: hidden; diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss new file mode 100644 index 000000000..1b72f5a8f --- /dev/null +++ b/src/client/views/nodes/MenuIconBox.scss @@ -0,0 +1,49 @@ +.menuButton { + //padding: 7px; + padding-left: 7px; + width: 100%; + width: 60px; + height: 70px; + + .menuButton-wrap { + width: 45px; + /* padding: 5px; */ + touch-action: none; + background: black; + transform-origin: top left; + /* margin-bottom: 5px; */ + margin-top: 5px; + margin-right: 25px; + border-radius: 8px; + + &:hover { + background: rgb(61, 61, 61); + cursor: pointer; + } + } + + .menuButton-label { + color: white; + margin-right: 4px; + border-radius: 8px; + width: 42px; + position: relative; + text-align: center; + font-size: 8px; + margin-top: 1px; + letter-spacing: normal; + padding: 3px; + background-color: inherit; + } + + .menuButton-icon { + width: auto; + height: 35px; + padding: 5px; + } + + svg { + width: 95% !important; + height: 95%; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx new file mode 100644 index 000000000..0aa7b327e --- /dev/null +++ b/src/client/views/nodes/MenuIconBox.tsx @@ -0,0 +1,33 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { createSchema, makeInterface } from '../../../fields/Schema'; +import { StrCast } from '../../../fields/Types'; +import { DocComponent } from '../DocComponent'; +import { FieldView, FieldViewProps } from './FieldView'; +import './MenuIconBox.scss'; +const MenuIconSchema = createSchema({ + icon: "string" +}); + +type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>; +const MenuIconDocument = makeInterface(MenuIconSchema); +@observer +export class MenuIconBox extends DocComponent(MenuIconDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); } + _ref: React.RefObject = React.createRef(); + + render() { + + const color = this.props.backgroundColor?.(this.props.Document) === "lightgrey" ? "black" : "white"; + const menuBTN =
+
+ +
{this.dataDoc.title}
+
+
; + + return menuBTN; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index c04c6c409..97f223c02 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -32,6 +32,7 @@ import { conformsTo } from "lodash"; import { translate } from "googleapis/build/src/apis/translate"; import { DragManager, dropActionType } from "../../util/DragManager"; import { actionAsync } from "mobx-utils"; +import { SelectionManager } from "../../util/SelectionManager"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -260,7 +261,7 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); const srcContext = await DocCastAsync(targetDoc.context); const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); - const collectionDocView = presCollection ? DocumentManager.Instance.getDocumentView(presCollection) : undefined; + const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined; if (this.itemIndex >= 0) { if (targetDoc) { if (srcContext) this.layoutDoc.presCollection = srcContext; @@ -496,6 +497,8 @@ export class PresBox extends ViewBoxBaseComponent selectElement = (doc: Doc) => { // this._selectedArray = []; this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); + const view = DocumentManager.Instance.getDocumentView(doc); + view && SelectionManager.SelectDoc(view, false); // this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); // console.log(this._selectedArray); } @@ -504,8 +507,9 @@ export class PresBox extends ViewBoxBaseComponent @action multiSelect = (doc: Doc, ref: HTMLElement) => { this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); - const ele = ref.getElementsByClassName("stacking"); this._eleArray.push(ref); + const view = DocumentManager.Instance.getDocumentView(doc); + view && SelectionManager.SelectDoc(view, true); } //Shift click @@ -517,6 +521,8 @@ export class PresBox extends ViewBoxBaseComponent for (let i = Math.min(this.itemIndex, this.childDocs.indexOf(doc)); i <= Math.max(this.itemIndex, this.childDocs.indexOf(doc)); i++) { this._selectedArray.push(this.childDocs[i]); this._eleArray.push(ref); + const view = DocumentManager.Instance.getDocumentView(doc); + view && SelectionManager.SelectDoc(view, true); } } } diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index 958a37568..8ae71c035 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -190,7 +190,7 @@ export class DashFieldViewInternal extends React.Component c.heading).indexOf(this._fieldKey) === -1 && list.push(new SchemaHeaderField(this._fieldKey, "#f1efeb")); list.map(c => c.heading).indexOf("text") === -1 && list.push(new SchemaHeaderField("text", "#f1efeb")); - alias._pivotField = this._fieldKey; + alias._pivotField = this._fieldKey.startsWith("#") ? "#" : this._fieldKey; this.props.tbox.props.addDocTab(alias, "onRight"); } } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 627c6e363..fc65f34eb 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1267,7 +1267,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.doLinkOnDeselect(); // move the richtextmenu offscreen - if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide(); + //if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide(); } _lastTimedMark: Mark | undefined = undefined; @@ -1346,7 +1346,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @computed get sidebarColor() { return StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], "transparent")); } render() { TraceMobx(); - const scale = this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); + const scale = this.props.hideOnLeave ? 1 : this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : ""; const interactive = Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground; setTimeout(() => this._editorView && RichTextMenu.Instance.updateFromDash(this._editorView, undefined, this.props), this.props.isSelected() ? 10 : 0); // need to make sure that we update a text box that is selected after updating the one that was deselected diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 7ccbfa051..f76707a79 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -77,7 +77,8 @@ export default class RichTextMenu extends AntimodeMenu { super(props); RichTextMenu.Instance = this; this._canFade = false; - this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]); + //this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]); + this.Pinned = true; this.fontSizeOptions = [ { mark: schema.marks.pFontSize.create({ fontSize: 7 }), title: "Set font size", label: "7pt", command: this.changeFontSize }, @@ -529,7 +530,7 @@ export default class RichTextMenu extends AntimodeMenu { indentParagraph(state: EditorState, dispatch: any) { var tr = state.tr; - let headin = false; + const heading = false; state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) { const nodeval = node.attrs.indent ? Number(node.attrs.indent) : undefined; @@ -539,7 +540,7 @@ export default class RichTextMenu extends AntimodeMenu { } return true; }); - !headin && dispatch?.(tr); + !heading && dispatch?.(tr); return true; } @@ -920,16 +921,22 @@ export default class RichTextMenu extends AntimodeMenu { render() { TraceMobx(); const row1 =
{[ - !this.collapsed ? this.getDragger() : (null), - !this.Pinned ? (null) :
{[ - this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), - this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), - this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), - this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), - this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), - this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), -
- ]}
, + //!this.collapsed ? this.getDragger() : (null), + // !this.Pinned ? (null) :
{[ + // this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), + // this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), + // this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), + // this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), + // this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), + // this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), + //
+ // ]}
, + this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), + this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), + this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), + this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), + this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), + this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), this.createColorButton(), this.createHighlighterButton(), this.createLinkButton(), @@ -957,16 +964,16 @@ export default class RichTextMenu extends AntimodeMenu { this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule),
,]}
-
- {/*
+ {/*
+ {
-
*/} +
} -
+
*/}
; return ( diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index 0eca6d753..1616500f6 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -79,14 +79,14 @@ export const nodes: { [index: string]: NodeSpec } = { { tag: "h5", attrs: { level: 5 } }, { tag: "h6", attrs: { level: 6 } }], toDOM(node) { - var dom = toParagraphDOM(node) as any; - var level = node.attrs.level || 1; + const dom = toParagraphDOM(node) as any; + const level = node.attrs.level || 1; dom[0] = 'h' + level; return dom; }, getAttrs(dom: any) { - var attrs = getParagraphNodeAttrs(dom) as any; - var level = Number(dom.nodeName.substring(1)) || 1; + const attrs = getParagraphNodeAttrs(dom) as any; + const level = Number(dom.nodeName.substring(1)) || 1; attrs.level = level; return attrs; } diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 43e74ff61..85fc63074 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -528,10 +528,10 @@ export namespace Doc { const cfield = ComputedField.WithoutComputed(() => FieldValue(doc[key])); const field = ProxyField.WithoutProxy(() => doc[key]); const copyObjectField = async (field: ObjectField) => { - const list = await Cast(doc[key], listSpec(Doc)); + const list = Cast(doc[key], listSpec(Doc)); const docs = list && (await DocListCastAsync(list))?.filter(d => d instanceof Doc); if (docs !== undefined && docs.length) { - const clones = await Promise.all(docs.map(async d => await Doc.makeClone(d as Doc, cloneMap, rtfs, exclusions, dontCreate))); + const clones = await Promise.all(docs.map(async d => Doc.makeClone(d, cloneMap, rtfs, exclusions, dontCreate))); !dontCreate && assignKey(new List(clones)); } else if (doc[key] instanceof Doc) { assignKey(key.includes("layout[") ? undefined : key.startsWith("layout") ? doc[key] as Doc : await Doc.makeClone(doc[key] as Doc, cloneMap, rtfs, exclusions, dontCreate)); // reference documents except copy documents that are expanded teplate fields @@ -625,7 +625,7 @@ export namespace Doc { Array.from(map.entries()).forEach(f => docs[f[0]] = f[1]); const docString = JSON.stringify({ id: doc[Id], docs }, replacer); - var zip = new JSZip(); + const zip = new JSZip(); zip.file(doc.title + ".json", docString); diff --git a/src/server/ActionUtilities.ts b/src/server/ActionUtilities.ts index 60f66c878..fd9bc0c83 100644 --- a/src/server/ActionUtilities.ts +++ b/src/server/ActionUtilities.ts @@ -1,11 +1,11 @@ -import { readFile, writeFile, exists, mkdir, unlink, createWriteStream } from 'fs'; -import { ExecOptions } from 'shelljs'; import { exec } from 'child_process'; -import * as path from 'path'; -import * as rimraf from "rimraf"; -import { yellow, Color } from 'colors'; +import { Color, yellow } from 'colors'; +import { createWriteStream, exists, mkdir, readFile, unlink, writeFile } from 'fs'; import * as nodemailer from "nodemailer"; import { MailOptions } from "nodemailer/lib/json-transport"; +import * as path from 'path'; +import * as rimraf from "rimraf"; +import { ExecOptions } from 'shelljs'; import Mail = require('nodemailer/lib/mailer'); const projectRoot = path.resolve(__dirname, "../../"); diff --git a/src/server/ApiManagers/UtilManager.ts b/src/server/ApiManagers/UtilManager.ts index e2cd88726..e657866ce 100644 --- a/src/server/ApiManagers/UtilManager.ts +++ b/src/server/ApiManagers/UtilManager.ts @@ -6,7 +6,6 @@ import { exec } from 'child_process'; // const recommender = new Recommender(); // recommender.testModel(); -import executeImport from "../../scraping/buxton/final/BuxtonImporter"; export default class UtilManager extends ApiManager { diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 2bf4c1956..890fb6f6d 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -1,23 +1,22 @@ -import { unlinkSync, createWriteStream, readFileSync, rename, writeFile, existsSync } from 'fs'; -import { Utils } from '../Utils'; -import * as path from 'path'; -import * as sharp from 'sharp'; -import request = require('request-promise'); +import { red } from 'colors'; import { ExifImage } from 'exif'; -import { Opt } from '../fields/Doc'; -import { AcceptibleMedia, Upload } from './SharedMediaTypes'; -import { filesDirectory, publicDirectory } from '.'; import { File } from 'formidable'; +import { createWriteStream, existsSync, readFileSync, rename, unlinkSync, writeFile } from 'fs'; +import * as path from 'path'; import { basename } from "path"; -import { createIfNotExists } from './ActionUtilities'; +import * as sharp from 'sharp'; +import { Stream } from 'stream'; +import { filesDirectory, publicDirectory } from '.'; +import { Opt } from '../fields/Doc'; import { ParsedPDF } from "../server/PdfTypes"; +import { Utils } from '../Utils'; +import { createIfNotExists } from './ActionUtilities'; +import { clientPathToFile, Directory, pathToDirectory, serverPathToFile } from './ApiManagers/UploadManager'; +import { resolvedServerUrl } from "./server_Initialization"; +import { AcceptibleMedia, Upload } from './SharedMediaTypes'; +import request = require('request-promise'); const parse = require('pdf-parse'); -import { Directory, serverPathToFile, clientPathToFile, pathToDirectory } from './ApiManagers/UploadManager'; -import { red } from 'colors'; -import { Stream } from 'stream'; -import { resolvedPorts } from './server_Initialization'; const requestImageSize = require("../client/util/request-image-size"); -import { resolvedServerUrl } from "./server_Initialization"; export enum SizeSuffix { Small = "_s", diff --git a/src/server/GarbageCollector.ts b/src/server/GarbageCollector.ts index 24745cbb4..a9a3b0481 100644 --- a/src/server/GarbageCollector.ts +++ b/src/server/GarbageCollector.ts @@ -1,9 +1,9 @@ -import { Database } from './database'; - -import * as path from 'path'; import * as fs from 'fs'; +import * as path from 'path'; +import { Database } from './database'; import { Search } from './Search'; + function addDoc(doc: any, ids: string[], files: { [name: string]: string[] }) { for (const key in doc) { if (!doc.hasOwnProperty(key)) { diff --git a/src/server/MemoryDatabase.ts b/src/server/MemoryDatabase.ts index 1f1d702d9..7f477327e 100644 --- a/src/server/MemoryDatabase.ts +++ b/src/server/MemoryDatabase.ts @@ -1,6 +1,7 @@ -import { IDatabase, DocumentsCollection } from './IDatabase'; -import { Transferable } from './Message'; +import { DH_CHECK_P_NOT_SAFE_PRIME } from 'constants'; import * as mongodb from 'mongodb'; +import { DocumentsCollection, IDatabase } from './IDatabase'; +import { Transferable } from './Message'; export class MemoryDatabase implements IDatabase { diff --git a/src/server/Message.ts b/src/server/Message.ts index ff0381fd3..59b24cd82 100644 --- a/src/server/Message.ts +++ b/src/server/Message.ts @@ -1,6 +1,6 @@ -import { Utils } from "../Utils"; import { Point } from "../pen-gestures/ndollar"; import { AnalysisResult, ImportResults } from "../scraping/buxton/final/BuxtonImporter"; +import { Utils } from "../Utils"; export class Message { private _name: string; diff --git a/src/server/ProcessFactory.ts b/src/server/ProcessFactory.ts index acb8b3a99..63682368f 100644 --- a/src/server/ProcessFactory.ts +++ b/src/server/ProcessFactory.ts @@ -1,8 +1,8 @@ -import { existsSync, mkdirSync } from "fs"; -import { pathFromRoot, fileDescriptorFromStream } from './ActionUtilities'; -import rimraf = require("rimraf"); import { ChildProcess, spawn, StdioOptions } from "child_process"; +import { existsSync, mkdirSync } from "fs"; import { Stream } from "stream"; +import { fileDescriptorFromStream, pathFromRoot } from './ActionUtilities'; +import rimraf = require("rimraf"); export namespace ProcessFactory { diff --git a/src/server/Recommender.ts b/src/server/Recommender.ts deleted file mode 100644 index 935ec3871..000000000 --- a/src/server/Recommender.ts +++ /dev/null @@ -1,133 +0,0 @@ -// //import { Doc } from "../fields/Doc"; -// //import { StrCast } from "../fields/Types"; -// //import { List } from "../fields/List"; -// //import { CognitiveServices } from "../client/cognitive_services/CognitiveServices"; - -// // var w2v = require('word2vec'); -// var assert = require('assert'); -// var arxivapi = require('arxiv-api-node'); -// import requestPromise = require("request-promise"); -// import * as use from '@tensorflow-models/universal-sentence-encoder'; -// import { Tensor } from "@tensorflow/tfjs-core/dist/tensor"; -// require('@tensorflow/tfjs-node'); - -// //http://gnuwin32.sourceforge.net/packages/make.htm - -// export class Recommender { - -// private _model: any; -// static Instance: Recommender; -// private dimension: number = 0; -// private choice: string = ""; // Tensorflow or Word2Vec - -// constructor() { -// Recommender.Instance = this; -// } - -// /*** -// * Loads pre-trained model from TF -// */ - -// public async loadTFModel() { -// let self = this; -// return new Promise(res => { -// use.load().then(model => { -// self.choice = "TF"; -// self._model = model; -// self.dimension = 512; -// res(model); -// }); -// } - -// ); -// } - -// /*** -// * Loads pre-trained model from word2vec -// */ - -// // private loadModel(): Promise { -// // let self = this; -// // return new Promise(res => { -// // w2v.loadModel("./node_modules/word2vec/examples/fixtures/vectors.txt", function (err: any, model: any) { -// // self.choice = "WV"; -// // self._model = model; -// // self.dimension = model.size; -// // res(model); -// // }); -// // }); -// // } - -// /*** -// * Testing -// */ - -// public async testModel() { -// if (!this._model) { -// await this.loadTFModel(); -// } -// if (this._model) { -// if (this.choice === "WV") { -// let similarity = this._model.similarity('father', 'mother'); -// } -// else if (this.choice === "TF") { -// const model = this._model as use.UniversalSentenceEncoder; -// // Embed an array of sentences. -// const sentences = [ -// 'Hello.', -// 'How are you?' -// ]; -// const embeddings = await this.vectorize(sentences); -// if (embeddings) embeddings.print(true /*verbose*/); -// // model.embed(sentences).then(embeddings => { -// // // `embeddings` is a 2D tensor consisting of the 512-dimensional embeddings for each sentence. -// // // So in this example `embeddings` has the shape [2, 512]. -// // embeddings.print(true /* verbose */); -// // }); -// } -// } -// else { -// console.log("model not found :("); -// } -// } - -// /*** -// * Uses model to convert words to vectors -// */ - -// public async vectorize(text: string[]): Promise { -// if (!this._model) { -// await this.loadTFModel(); -// } -// if (this._model) { -// if (this.choice === "WV") { -// let word_vecs = this._model.getVectors(text); -// return word_vecs; -// } -// else if (this.choice === "TF") { -// const model = this._model as use.UniversalSentenceEncoder; -// return new Promise(res => { -// model.embed(text).then(embeddings => { -// res(embeddings); -// }); -// }); - -// } -// } -// } - -// // public async trainModel() { -// // w2v.word2vec("./node_modules/word2vec/examples/eng_news-typical_2016_1M-sentences.txt", './node_modules/word2vec/examples/my_phrases.txt', { -// // cbow: 1, -// // size: 200, -// // window: 8, -// // negative: 25, -// // hs: 0, -// // sample: 1e-4, -// // threads: 20, -// // iter: 200, -// // minCount: 2 -// // }); -// // } - -// } diff --git a/src/server/RouteManager.ts b/src/server/RouteManager.ts index 1a2340afc..78b75d6be 100644 --- a/src/server/RouteManager.ts +++ b/src/server/RouteManager.ts @@ -1,8 +1,8 @@ -import RouteSubscriber from "./RouteSubscriber"; -import { DashUserModel } from "./authentication/DashUserModel"; -import { Request, Response, Express } from 'express'; -import { cyan, red, green } from 'colors'; +import { cyan, green, red } from 'colors'; +import { Express, Request, Response } from 'express'; import { AdminPriviliges } from "."; +import { DashUserModel } from "./authentication/DashUserModel"; +import RouteSubscriber from "./RouteSubscriber"; export enum Method { GET, diff --git a/src/server/Search.ts b/src/server/Search.ts index 21064e520..decd1f5b1 100644 --- a/src/server/Search.ts +++ b/src/server/Search.ts @@ -1,5 +1,5 @@ -import * as rp from 'request-promise'; import { red } from 'colors'; +import * as rp from 'request-promise'; const pathTo = (relative: string) => `http://localhost:8983/solr/dash/${relative}`; diff --git a/src/server/database.ts b/src/server/database.ts index 2372cbcf2..b7aa77f5d 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -1,11 +1,11 @@ import * as mongodb from 'mongodb'; -import { Transferable } from './Message'; +import * as mongoose from 'mongoose'; import { Opt } from '../fields/Doc'; -import { Utils, emptyFunction } from '../Utils'; +import { emptyFunction, Utils } from '../Utils'; import { GoogleApiServerUtils } from './apis/google/GoogleApiServerUtils'; -import { IDatabase, DocumentsCollection } from './IDatabase'; +import { DocumentsCollection, IDatabase } from './IDatabase'; import { MemoryDatabase } from './MemoryDatabase'; -import * as mongoose from 'mongoose'; +import { Transferable } from './Message'; import { Upload } from './SharedMediaTypes'; export namespace Database { diff --git a/src/server/downsize.ts b/src/server/downsize.ts index 5cd709fa3..382994e2d 100644 --- a/src/server/downsize.ts +++ b/src/server/downsize.ts @@ -1,5 +1,5 @@ -import * as sharp from 'sharp'; import * as fs from 'fs'; +import * as sharp from 'sharp'; const folder = "./src/server/public/files/"; const pngTypes = ["png", "PNG"]; diff --git a/src/server/index.ts b/src/server/index.ts index 9af4b00bc..9185e3c5e 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -1,29 +1,29 @@ require('dotenv').config(); -import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils"; +import { yellow } from "colors"; import * as mobileDetect from 'mobile-detect'; import * as path from 'path'; -import { Database } from './database'; -import { DashUploadUtils } from './DashUploadUtils'; -import RouteSubscriber from './RouteSubscriber'; -import initializeServer, { resolvedPorts } from './server_Initialization'; -import RouteManager, { Method, _success, _permission_denied, _error, _invalid, PublicHandler } from './RouteManager'; import * as qs from 'query-string'; -import UtilManager from './ApiManagers/UtilManager'; -import { SearchManager } from './ApiManagers/SearchManager'; -import UserManager from './ApiManagers/UserManager'; -import DownloadManager from './ApiManagers/DownloadManager'; -import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader'; -import DeleteManager from "./ApiManagers/DeleteManager"; -import PDFManager from "./ApiManagers/PDFManager"; -import UploadManager from "./ApiManagers/UploadManager"; import { log_execution } from "./ActionUtilities"; +import DeleteManager from "./ApiManagers/DeleteManager"; +import DownloadManager from './ApiManagers/DownloadManager'; import GeneralGoogleManager from "./ApiManagers/GeneralGoogleManager"; -import HypothesisManager from "./ApiManagers/HypothesisManager"; import GooglePhotosManager from "./ApiManagers/GooglePhotosManager"; -import { Logger } from "./ProcessFactory"; -import { yellow } from "colors"; +import HypothesisManager from "./ApiManagers/HypothesisManager"; +import PDFManager from "./ApiManagers/PDFManager"; +import { SearchManager } from './ApiManagers/SearchManager'; import SessionManager from "./ApiManagers/SessionManager"; +import UploadManager from "./ApiManagers/UploadManager"; +import UserManager from './ApiManagers/UserManager'; +import UtilManager from './ApiManagers/UtilManager'; +import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader'; +import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils"; import { AppliedSessionAgent } from "./DashSession/Session/agents/applied_session_agent"; +import { DashUploadUtils } from './DashUploadUtils'; +import { Database } from './database'; +import { Logger } from "./ProcessFactory"; +import RouteManager, { Method, PublicHandler } from './RouteManager'; +import RouteSubscriber from './RouteSubscriber'; +import initializeServer, { resolvedPorts } from './server_Initialization'; export const AdminPriviliges: Map = new Map(); export const onWindows = process.platform === "win32"; diff --git a/src/server/server_Initialization.ts b/src/server/server_Initialization.ts index 744d4547b..e40f2b8e5 100644 --- a/src/server/server_Initialization.ts +++ b/src/server/server_Initialization.ts @@ -1,31 +1,31 @@ +import * as bodyParser from 'body-parser'; +import { blue, yellow } from 'colors'; +import * as cookieParser from 'cookie-parser'; +import * as cors from "cors"; import * as express from 'express'; -import * as expressValidator from 'express-validator'; import * as session from 'express-session'; +import * as expressValidator from 'express-validator'; +import * as fs from 'fs'; +import { Server as HttpServer } from "http"; +import { createServer, Server as HttpsServer } from "https"; import * as passport from 'passport'; -import * as bodyParser from 'body-parser'; -import * as cookieParser from 'cookie-parser'; -import expressFlash = require('express-flash'); -import flash = require('connect-flash'); -import { Database } from './database'; -import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLogin, postReset, postSignup } from './authentication/AuthenticationManager'; -const MongoStore = require('connect-mongo')(session); -import RouteManager from './RouteManager'; -import { WebSocket } from './websocket'; +import * as request from 'request'; import * as webpack from 'webpack'; -const config = require('../../webpack.config'); -const compiler = webpack(config); import * as wdm from 'webpack-dev-middleware'; import * as whm from 'webpack-hot-middleware'; -import * as fs from 'fs'; -import * as request from 'request'; -import RouteSubscriber from './RouteSubscriber'; import { publicDirectory } from '.'; import { logPort } from './ActionUtilities'; -import { blue, yellow } from 'colors'; -import * as cors from "cors"; -import { createServer, Server as HttpsServer } from "https"; -import { Server as HttpServer } from "http"; import { SSL } from './apis/google/CredentialsLoader'; +import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLogin, postReset, postSignup } from './authentication/AuthenticationManager'; +import { Database } from './database'; +import RouteManager from './RouteManager'; +import RouteSubscriber from './RouteSubscriber'; +import { WebSocket } from './websocket'; +import expressFlash = require('express-flash'); +import flash = require('connect-flash'); +const MongoStore = require('connect-mongo')(session); +const config = require('../../webpack.config'); +const compiler = webpack(config); /* RouteSetter is a wrapper around the server that prevents the server from being exposed. */ diff --git a/src/server/websocket.ts b/src/server/websocket.ts index f63a35e43..d5f89a750 100644 --- a/src/server/websocket.ts +++ b/src/server/websocket.ts @@ -1,21 +1,20 @@ -import * as fs from 'fs'; -import { logPort } from './ActionUtilities'; -import { Utils } from "../Utils"; -import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent, MobileDocumentUploadContent, RoomMessage } from "./Message"; -import { Client } from "./Client"; -import { Socket } from "socket.io"; -import { Database } from "./database"; -import { Search } from "./Search"; -import * as sio from 'socket.io'; -import YoutubeApi from "./apis/youtube/youtubeApiSample"; -import { GoogleCredentialsLoader, SSL } from "./apis/google/CredentialsLoader"; -import { timeMap } from "./ApiManagers/UserManager"; import { green } from "colors"; +import * as express from "express"; +import { createServer, Server } from "https"; import { networkInterfaces } from "os"; +import * as sio from 'socket.io'; +import { Socket } from "socket.io"; import executeImport from "../scraping/buxton/final/BuxtonImporter"; +import { Utils } from "../Utils"; +import { logPort } from './ActionUtilities'; +import { timeMap } from "./ApiManagers/UserManager"; +import { GoogleCredentialsLoader, SSL } from "./apis/google/CredentialsLoader"; +import YoutubeApi from "./apis/youtube/youtubeApiSample"; +import { Client } from "./Client"; +import { Database } from "./database"; import { DocumentsCollection } from "./IDatabase"; -import { createServer, Server } from "https"; -import * as express from "express"; +import { Diff, GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, Transferable, Types, UpdateMobileInkOverlayPositionContent, YoutubeQueryInput, YoutubeQueryTypes } from "./Message"; +import { Search } from "./Search"; import { resolvedPorts } from './server_Initialization'; export namespace WebSocket { -- cgit v1.2.3-70-g09d2 From b3991f16b8e91bc19b5df5430efe3a71b9ad2ac7 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 3 Aug 2020 10:19:25 +0530 Subject: prevented repopulating users while populating users --- src/client/util/GroupManager.tsx | 34 ++++++++++++++++++-------------- src/client/util/SharingManager.tsx | 40 ++++++++++++++++++++------------------ 2 files changed, 40 insertions(+), 34 deletions(-) (limited to 'src') diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index 5215ea35f..448e5dc54 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -42,6 +42,7 @@ export default class GroupManager extends React.Component<{}> { private currentUserGroups: string[] = []; // the list of groups the current user is a member of @observable private buttonColour: "#979797" | "black" = "#979797"; @observable private groupSort: "ascending" | "descending" | "none" = "none"; + private populating: boolean = false; @@ -62,21 +63,24 @@ export default class GroupManager extends React.Component<{}> { * Fetches the list of users stored on the database. */ populateUsers = async () => { - runInAction(() => this.users = []); - const userList = await RequestPromise.get(Utils.prepend("/getUsers")); - const raw = JSON.parse(userList) as User[]; - const evaluating = raw.map(async user => { - const userDocument = await DocServer.GetRefField(user.userDocumentId); - if (userDocument instanceof Doc) { - const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc); - runInAction(() => { - if (notificationDoc instanceof Doc) { - this.users.push(user.email); - } - }); - } - }); - return Promise.all(evaluating); + if (!this.populating) { + this.populating = true; + runInAction(() => this.users = []); + const userList = await RequestPromise.get(Utils.prepend("/getUsers")); + const raw = JSON.parse(userList) as User[]; + const evaluating = raw.map(async user => { + const userDocument = await DocServer.GetRefField(user.userDocumentId); + if (userDocument instanceof Doc) { + const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc); + runInAction(() => { + if (notificationDoc instanceof Doc) { + this.users.push(user.email); + } + }); + } + }); + return Promise.all(evaluating).then(() => this.populating = false); + } } /** diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 892fb6d6d..6393170fa 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -71,8 +71,7 @@ export default class SharingManager extends React.Component<{}> { // if both showUserOptions and showGroupOptions are false then both are displayed @observable private showUserOptions: boolean = false; // whether to show individuals as options when sharing (in the react-select component) @observable private showGroupOptions: boolean = false; // // whether to show groups as options when sharing (in the react-select component) - - + private populating: boolean = false; // private get linkVisible() { // return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false; @@ -119,24 +118,27 @@ export default class SharingManager extends React.Component<{}> { * Populates the list of validated users (this.users) by adding registered users which have a rightSidebarCollection. */ populateUsers = async () => { - runInAction(() => this.users = []); - const userList = await RequestPromise.get(Utils.prepend("/getUsers")); - const raw = JSON.parse(userList) as User[]; - const evaluating = raw.map(async user => { - const isCandidate = user.email !== Doc.CurrentUserEmail; - if (isCandidate) { - const userDocument = await DocServer.GetRefField(user.userDocumentId); - if (userDocument instanceof Doc) { - const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc); - runInAction(() => { - if (notificationDoc instanceof Doc) { - this.users.push({ user, notificationDoc }); - } - }); + if (!this.populating) { + this.populating = true; + runInAction(() => this.users = []); + const userList = await RequestPromise.get(Utils.prepend("/getUsers")); + const raw = JSON.parse(userList) as User[]; + const evaluating = raw.map(async user => { + const isCandidate = user.email !== Doc.CurrentUserEmail; + if (isCandidate) { + const userDocument = await DocServer.GetRefField(user.userDocumentId); + if (userDocument instanceof Doc) { + const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc); + runInAction(() => { + if (notificationDoc instanceof Doc) { + this.users.push({ user, notificationDoc }); + } + }); + } } - } - }); - return Promise.all(evaluating); + }); + return Promise.all(evaluating).then(() => this.populating = false); + } } /** -- cgit v1.2.3-70-g09d2 From d83959572d55510755f9d6b9e0b456b4b1ad5148 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 3 Aug 2020 11:33:49 +0530 Subject: popup fades on close --- src/client/util/GroupManager.tsx | 11 +++++------ src/client/util/SharingManager.tsx | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index 448e5dc54..b13d8cf5f 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -124,6 +124,7 @@ export default class GroupManager extends React.Component<{}> { this.currentGroup = undefined; // this.users = []; this.createGroupModalOpen = false; + TaskCompletionBox.taskCompleted = false; } /** @@ -136,7 +137,6 @@ export default class GroupManager extends React.Component<{}> { /** * @returns a list of all group documents. */ - // private ? getAllGroups(): Doc[] { const groupDoc = this.GroupManagerDoc; return groupDoc ? DocListCast(groupDoc.data) : []; @@ -146,7 +146,6 @@ export default class GroupManager extends React.Component<{}> { * @returns a group document based on the group name. * @param groupName */ - // private? getGroup(groupName: string): Doc | undefined { const groupDoc = this.getAllGroups().find(group => group.groupName === groupName); return groupDoc; @@ -213,8 +212,6 @@ export default class GroupManager extends React.Component<{}> { deleteGroup(group: Doc): boolean { if (group) { if (this.GroupManagerDoc && this.hasEditAccess(group)) { - // TODO look at this later - // SharingManager.Instance.setInternalGroupSharing(group, "Not Shared"); Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group); SharingManager.Instance.removeGroup(group); const members: string[] = JSON.parse(StrCast(group.members)); @@ -315,7 +312,9 @@ export default class GroupManager extends React.Component<{}> {

New Group

-
this.createGroupModalOpen = false)}> +
{ + this.createGroupModalOpen = false; TaskCompletionBox.taskCompleted = false; + })}>
@@ -367,7 +366,7 @@ export default class GroupManager extends React.Component<{}> { interactive={true} contents={contents} dialogueBoxStyle={{ width: "90%", height: "70%" }} - closeOnExternalClick={action(() => this.createGroupModalOpen = false)} + closeOnExternalClick={action(() => { this.createGroupModalOpen = false; TaskCompletionBox.taskCompleted = false; })} /> ); } diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index a3c0a88fa..d2891a772 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -94,7 +94,7 @@ export default class SharingManager extends React.Component<{}> { public close = action(() => { this.isOpen = false; this.selectedUsers = null; // resets the list of users and seleected users (in the react-select component) - + TaskCompletionBox.taskCompleted = false; setTimeout(action(() => { // this.copied = false; DictationOverlay.Instance.hasActiveModal = false; -- cgit v1.2.3-70-g09d2 From d962dad895c8b7d480f33480eac17c45b5251bc5 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 3 Aug 2020 13:04:25 +0530 Subject: close button calculation includes collection+doc and slightly more efficient hopefully --- src/client/views/DocumentDecorations.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 3896ad519..48e5c050c 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -587,7 +587,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (SnappingManager.GetIsDragging() || bounds.r - bounds.x < 2 || bounds.x === Number.MAX_VALUE || !seldoc || this._hidden || isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) { return (null); } - const canDelete = SelectionManager.SelectedDocuments().map(docView => GetEffectiveAcl(docView.props.ContainingCollectionDoc)).some(permission => permission === AclAdmin || permission === AclEdit); + const canDelete = SelectionManager.SelectedDocuments().some(docView => { + const docAcl = GetEffectiveAcl(docView.props.Document); + const collectionAcl = GetEffectiveAcl(docView.props.ContainingCollectionDoc); + return [docAcl, collectionAcl].some(acl => [AclAdmin, AclEdit].includes(acl)); + }); const minimal = bounds.r - bounds.x < 100 ? true : false; const maximizeIcon = minimal ? (
Show context menu
} placement="top"> -- cgit v1.2.3-70-g09d2 From 2331b3a271cc53390d281fa16a553467a3d7a7de Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 3 Aug 2020 19:21:40 +0530 Subject: minor changes --- src/client/util/GroupManager.tsx | 2 +- src/client/util/SharingManager.tsx | 47 ++++++++++++-------------------------- 2 files changed, 16 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index b13d8cf5f..c750be1c8 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -92,7 +92,6 @@ export default class GroupManager extends React.Component<{}> { const members: string[] = JSON.parse(StrCast(group.members)); if (members.includes(Doc.CurrentUserEmail)) this.currentUserGroups.push(StrCast(group.groupName)); }); - setGroups(this.currentUserGroups); }); } @@ -322,6 +321,7 @@ export default class GroupManager extends React.Component<{}> { className="group-input" ref={this.inputRef} onKeyDown={this.handleKeyDown} + autoFocus type="text" placeholder="Group name" onChange={action(() => this.buttonColour = this.inputRef.current?.value ? "black" : "#979797")} /> diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index d2891a772..30bed9cb9 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -1,7 +1,7 @@ import { observable, runInAction, action } from "mobx"; import * as React from "react"; import MainViewModal from "../views/MainViewModal"; -import { Doc, Opt, DocListCastAsync, AclAdmin, DataSym, AclPrivate } from "../../fields/Doc"; +import { Doc, Opt, AclAdmin, AclPrivate, DocListCast } from "../../fields/Doc"; import { DocServer } from "../DocServer"; import { Cast, StrCast } from "../../fields/Types"; import * as RequestPromise from "request-promise"; @@ -156,13 +156,11 @@ export default class SharingManager extends React.Component<{}> { target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target); // if documents have been shared, add the target to that list if it doesn't already exist, otherwise create a new list with the target - group.docsShared ? DocListCastAsync(group.docsShared).then(resolved => Doc.IndexOf(target, resolved!) === -1 && (group.docsShared as List).push(target)) : group.docsShared = new List([target]); + group.docsShared ? Doc.IndexOf(target, DocListCast(group.docsShared)) === -1 && (group.docsShared as List).push(target) : group.docsShared = new List([target]); users.forEach(({ notificationDoc }) => { - DocListCastAsync(notificationDoc[storage]).then(resolved => { - if (permission !== SharingPermissions.None) Doc.IndexOf(target, resolved!) === -1 && Doc.AddDocToList(notificationDoc, storage, target); // add the target to the notificationDoc if it hasn't already been added - else Doc.IndexOf(target, resolved!) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target); // remove the target from the list if it already exists - }); + if (permission !== SharingPermissions.None) Doc.IndexOf(target, DocListCast(notificationDoc[storage])) === -1 && Doc.AddDocToList(notificationDoc, storage, target); // add the target to the notificationDoc if it hasn't already been added + else Doc.IndexOf(target, DocListCast(notificationDoc[storage])) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target); // remove the target from the list if it already exists }); } @@ -174,13 +172,7 @@ export default class SharingManager extends React.Component<{}> { shareWithAddedMember = (group: Doc, emailId: string) => { const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!; - if (group.docsShared) { - DocListCastAsync(group.docsShared).then(docsShared => { - docsShared?.forEach(doc => { - DocListCastAsync(user.notificationDoc[storage]).then(resolved => Doc.IndexOf(doc, resolved!) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc)); // add the doc if it isn't already in the list - }); - }); - } + if (group.docsShared) DocListCast(group.docsShared).forEach(doc => Doc.IndexOf(doc, DocListCast(user.notificationDoc[storage])) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc)); } /** @@ -192,10 +184,8 @@ export default class SharingManager extends React.Component<{}> { const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!; if (group.docsShared) { - DocListCastAsync(group.docsShared).then(docsShared => { - docsShared?.forEach(doc => { - DocListCastAsync(user.notificationDoc[storage]).then(resolved => Doc.IndexOf(doc, resolved!) !== -1 && Doc.RemoveDocFromList(user.notificationDoc, storage, doc)); // remove the doc only if it is in the list - }); + DocListCast(group.docsShared).forEach(doc => { + Doc.IndexOf(doc, DocListCast(user.notificationDoc[storage])) !== -1 && Doc.RemoveDocFromList(user.notificationDoc, storage, doc); // remove the doc only if it is in the list }); } } @@ -206,18 +196,15 @@ export default class SharingManager extends React.Component<{}> { */ removeGroup = (group: Doc) => { if (group.docsShared) { - DocListCastAsync(group.docsShared).then(resolved => { - resolved?.forEach(doc => { - const ACL = `ACL-${StrCast(group.groupName)}`; - - distributeAcls(ACL, SharingPermissions.None, doc); + DocListCast(group.docsShared).forEach(doc => { + const ACL = `ACL-${StrCast(group.groupName)}`; - const members: string[] = JSON.parse(StrCast(group.members)); - const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email)); + distributeAcls(ACL, SharingPermissions.None, doc); - users.forEach(({ notificationDoc }) => Doc.RemoveDocFromList(notificationDoc, storage, doc)); - }); + const members: string[] = JSON.parse(StrCast(group.members)); + const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email)); + users.forEach(({ notificationDoc }) => Doc.RemoveDocFromList(notificationDoc, storage, doc)); }); } } @@ -231,14 +218,10 @@ export default class SharingManager extends React.Component<{}> { target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target); if (permission !== SharingPermissions.None) { - DocListCastAsync(notificationDoc[storage]).then(resolved => { - Doc.IndexOf(target, resolved!) === -1 && Doc.AddDocToList(notificationDoc, storage, target); - }); + Doc.IndexOf(target, DocListCast(notificationDoc[storage])) === -1 && Doc.AddDocToList(notificationDoc, storage, target); } else { - DocListCastAsync(notificationDoc[storage]).then(resolved => { - Doc.IndexOf(target, resolved!) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target); - }); + Doc.IndexOf(target, DocListCast(notificationDoc[storage])) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target); } } -- cgit v1.2.3-70-g09d2 From 5717740f9648e0fc44238a3bfb4993cfdb9bc862 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Mon, 3 Aug 2020 22:20:03 +0800 Subject: oops --- src/client/views/presentationview/PresElementBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 0e245cf02..85949c5a8 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -276,7 +276,7 @@ export class PresElementBox extends ViewBoxBaseComponent Date: Mon, 3 Aug 2020 23:14:20 +0800 Subject: works with selection manager (PropertiesView) --- .../collectionFreeForm/PropertiesView.scss | 42 +++++++++++----------- .../collectionFreeForm/PropertiesView.tsx | 21 +++++++---- src/client/views/nodes/PresBox.scss | 2 +- src/client/views/nodes/PresBox.tsx | 2 +- .../views/presentationview/PresElementBox.tsx | 2 +- 5 files changed, 39 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 6283a6669..2cdaa25ee 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -543,6 +543,27 @@ } } +.propertiesView-presSelected { + border-top: solid 1px darkgrey; + width: 100%; + padding-top: 5px; + font-family: Roboto; + font-weight: 500; + display: inline-flex; + + .propertiesView-selectedList { + border-left: solid 1px darkgrey; + margin-left: 10px; + padding-left: 5px; + + .selectedList-items { + font-size: 12; + font-weight: 300; + margin-top: 1; + } + } +} + .widthAndDash { .width { @@ -617,25 +638,4 @@ margin-top: 2px; } } - - .propertiesView-presSelected { - border-top: solid 1px darkgrey; - width: 100%; - padding-top: 5px; - font-family: Roboto; - font-weight: 500; - display: inline-flex; - - .propertiesView-selectedList { - border-left: solid 1px darkgrey; - margin-left: 10px; - padding-left: 5px; - - .selectedList-items { - font-size: 12; - font-weight: 300; - margin-top: 1; - } - } - } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index ce8baf559..88d585596 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -47,9 +47,14 @@ export class PropertiesView extends React.Component { @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) { return SelectionManager.SelectedDocuments()[0]; - } else { console.log(undefined); return undefined; } + } else if (PresBox.Instance._selectedArray.length >= 1) { + return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); + } else { return undefined; } + } + @computed get isPres(): boolean { + if (this.selectedDoc?.type === DocumentType.PRES) return true; + return false; } - @computed get isPres() { return this.selectedDoc?.type === DocumentType.PRES } @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } @@ -748,10 +753,14 @@ export class PropertiesView extends React.Component { render() { if (!this.selectedDoc) { - return
-
- No Document Selected -
; + console.log("!selectedDoc") + if (this.isPres === false) { + console.log("!isPres") + return
+
+ No Document Selected +
; + } } const novice = Doc.UserDoc().noviceMode; diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index e5878708f..83e7152a8 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -143,7 +143,7 @@ display: grid; justify-content: flex-start; align-items: center; - grid-template-columns: repeat(auto-fit, 50px); + grid-template-columns: repeat(auto-fit, 70px); } .ribbon-property { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 618161e97..496d4666e 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -832,7 +832,7 @@ export class PresBox extends ViewBoxBaseComponent
Effect direction
-
+
{"Enter from left"}
}>
targetDoc.presEffectDirection = 'left'}>
{"Enter from right"}
}>
targetDoc.presEffectDirection = 'right'}>
 diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 85949c5a8..ce7a43315 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -278,7 +278,7 @@ export class PresElementBox extends ViewBoxBaseComponent Date: Mon, 3 Aug 2020 14:46:11 -0400 Subject: selecting: --- solr-8.3.1/bin/solr-8983.pid | 2 +- .../views/collections/CollectionSchemaCells.tsx | 31 ++++++++++--------- .../views/collections/CollectionSchemaHeaders.tsx | 1 - src/client/views/collections/CollectionSubView.tsx | 5 ++- src/client/views/search/SearchBox.tsx | 36 +++++++++++++--------- 5 files changed, 42 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index c38baeeb6..e3e2416b2 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -3436 +7933 diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index bf826857e..e50f95dca 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -247,12 +247,12 @@ export class CollectionSchemaCell extends React.Component { if (StrCast(this.props.Document._searchString) !== "") { const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); let term = ""; - if (cfield!==undefined){ - if (cfield.Text!==undefined){ + if (cfield !== undefined) { + if (cfield.Text !== undefined) { term = cfield.Text; } - else if (StrCast(cfield)){ - term= StrCast(cfield); + else if (StrCast(cfield)) { + term = StrCast(cfield); } else { term = String(NumCast(cfield)); @@ -261,8 +261,8 @@ export class CollectionSchemaCell extends React.Component { let search = StrCast(this.props.Document._searchString) let start = term.indexOf(search) as number; let tally = 0; - if (start!==-1){ - positions.push(start); + if (start !== -1) { + positions.push(start); } while (start < contents.length && start !== -1) { term = term.slice(start + search.length + 1); @@ -275,7 +275,8 @@ export class CollectionSchemaCell extends React.Component { } } return ( -
+
{ // if (type === "number" && (contents === 0 || contents === "0")) { // return "0"; // } else { - const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); - if (cfield!==undefined){ - if (cfield.Text!==undefined){ - return(cfield.Text); + const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); + if (cfield !== undefined) { + if (cfield.Text !== undefined) { + return (cfield.Text); } - else if (StrCast(cfield)){ + else if (StrCast(cfield)) { return StrCast(cfield); } else { return String(NumCast(cfield)); } } - // console.log(cfield.Text); - // console.log(StrCast(cfield)); - // return StrCast(cfield); + // console.log(cfield.Text); + // console.log(StrCast(cfield)); + // return StrCast(cfield); // } }} diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 0ee225407..a979f9838 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -430,7 +430,6 @@ export class KeysDropdown extends React.Component { render() { - console.log(this.props.docs); return (
{this._key === this._searchTerm.slice(0, this._key.length) ? diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index dacb06e5b..4463eef3e 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -130,13 +130,16 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: let childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs; const searchDocs = DocListCast(this.props.Document._searchDocs); + console.log(this.props.Document); + console.log(searchDocs); if (searchDocs !== undefined && searchDocs.length > 0) { + console.log("yes"); childDocs = searchDocs; } const docFilters = this.docFilters(); const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []); - return this.props.Document.dontRegisterView ? docs : DocUtils.FilterDocs(docs, docFilters, docRangeFilters, viewSpecScript); + return this.props.Document.dontRegisterView ? childDocs : DocUtils.FilterDocs(childDocs, docFilters, docRangeFilters, viewSpecScript); } @action diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 410e6afa5..60e935e98 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -188,11 +188,15 @@ export class SearchBox extends ViewBoxBaseComponent) { this.layoutDoc._searchString = e.target.value; - console.log(e.target.value); this.newsearchstring = e.target.value; if (e.target.value === "") { + console.log(this._results); + this._results.forEach(result => { + Doc.UnBrushDoc(result[0]); + }); + this.props.Document._schemaHeaders = new List([]); if (this.currentSelectedCollection !== undefined) { this.currentSelectedCollection.props.Document._searchDocs = new List([]); @@ -202,15 +206,15 @@ export class SearchBox extends ViewBoxBaseComponent { this.open = false }); + this._openNoResults = false; + this._results = []; + this._resultsSet.clear(); + this._visibleElements = []; + this._numTotalResults = -1; + this._endIndex = -1; + this._curRequest = undefined; + this._maxSearchIndex = 0; } - this._openNoResults = false; - this._results = []; - this._resultsSet.clear(); - this._visibleElements = []; - this._numTotalResults = -1; - this._endIndex = -1; - this._curRequest = undefined; - this._maxSearchIndex = 0; } enter = (e: React.KeyboardEvent) => { @@ -383,14 +387,11 @@ export class SearchBox extends ViewBoxBaseComponent 0) { - console.log("iteration"); newarray = []; docs.forEach((d) => { - console.log(d); if (d.data != undefined) { let newdocs = DocListCast(d.data); newdocs.forEach((newdoc) => { - console.log(newdoc); newarray.push(newdoc); }); @@ -419,6 +420,7 @@ export class SearchBox extends ViewBoxBaseComponent(docsforFilter); } this._numTotalResults = found.length; @@ -498,6 +500,9 @@ export class SearchBox extends ViewBoxBaseComponent { + Doc.UnBrushDoc(result[0]); + }); this._results = []; this._resultsSet.clear(); this._isSearch = []; @@ -675,7 +680,7 @@ export class SearchBox extends ViewBoxBaseComponent { - this.closeResults(); + //this.closeResults(); this._searchbarOpen = false; } @@ -752,7 +757,7 @@ export class SearchBox extends ViewBoxBaseComponent headers.add(item)); this._visibleDocuments[i] = result[0]; this._isSearch[i] = "search"; - console.log(result[0]); + Doc.BrushDoc(result[0]); Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); this.children++; } @@ -769,6 +774,7 @@ export class SearchBox extends ViewBoxBaseComponent - Workspace + Database
-- cgit v1.2.3-70-g09d2 From e25afb5fe507ff13cb6e863c07032d9d9dcc864b Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Mon, 3 Aug 2020 12:37:32 -0700 Subject: added timestamps and added delete for markers and changed the way markers are rendered --- src/client/documents/Documents.ts | 2 +- src/client/views/nodes/AudioBox.scss | 1 + src/client/views/nodes/AudioBox.tsx | 113 ++++++++++++------- .../views/nodes/formattedText/FormattedTextBox.tsx | 124 ++++++++++++++++----- 4 files changed, 172 insertions(+), 68 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 88f470576..402f3e82c 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -628,7 +628,7 @@ export namespace Docs { } export function AudioDocument(url: string, options: DocumentOptions = {}) { - const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), { ...options }); // hideLinkButton: false, useLinkSmallAnchor: false, + const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), { useLinkSmallAnchor: true, ...options }); // hideLinkButton: false, useLinkSmallAnchor: false, Doc.GetProto(instance).backgroundColor = ComputedField.MakeFunction("this._audioState === 'playing' ? 'green':'gray'"); return instance; } diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 35ab5da8b..0ea4b37cb 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -148,6 +148,7 @@ width: 100%; height: 100%; overflow: hidden; + z-index: 0; } .audiobox-linker, diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 3d1932883..7c90547ef 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -75,6 +75,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; _first: boolean = false; _buckets: Array = new Array(); + _count: Array = []; private _isPointerDown = false; private _currMarker: any; @@ -516,53 +517,74 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + const increment = NumCast(this.layoutDoc.duration) / 500; + this._count = []; + for (let i = 0; i < 500; i++) { + this._count.push([increment * i, 0]) + } + + } + // Probably need a better way to format - isOverlap = (m: any, i: number) => { - console.log("called"); - let counter = 0; + // isOverlap = (m: any, i: number) => { + // console.log("called"); + // let counter = 0; + // if (this._first) { + // this._markers = []; + // this._first = false; + // } + // for (let i = 0; i < this._markers.length; i++) { + // if ((m.audioEnd > this._markers[i].audioStart && m.audioStart < this._markers[i].audioEnd)) { + // counter++; + // console.log(counter); + // } + // } + + // if (this.dataDoc.markerAmount < counter) { + // this.dataDoc.markerAmount = counter; + // } + + // this._markers.push(m); + + // return counter; + // } + + isOverlap = (m: any) => { if (this._first) { - this._markers = []; this._first = false; - } - for (let i = 0; i < this._markers.length; i++) { - if ((m.audioEnd > this._markers[i].audioStart && m.audioStart < this._markers[i].audioEnd)) { - counter++; - console.log(counter); - } + this.markers(); + console.log(this._count); } - if (this.dataDoc.markerAmount < counter) { - this.dataDoc.markerAmount = counter; - } - this._markers.push(m); + let max = 0 - return counter; - } + for (let i = 0; i < 500; i++) { + if (this._count[i][0] >= m.audioStart && this._count[i][0] <= m.audioEnd) { + this._count[i][1]++; - // isOverlap = (m: any) => { - // if (this._markers.length < 1) { - // this._markers = new Array(Math.round(this.dataDoc.duration)).fill(0); - // } - // console.log(this._markers); - // let max = 0 + if (this._count[i][1] > max) { + max = this._count[i][1]; + } + } - // for (let i = Math.round(m.audioStart); i <= Math.round(m.audioEnd); i++) { - // this._markers[i] = this._markers[i] + 1; - // console.log(this._markers[i]); - // if (this._markers[i] > max) { - // max = this._markers[i]; - // } - // } + } - // console.log(max); - // if (this.dataDoc.markerAmount < max) { - // this.dataDoc.markerAmount = max; - // } - // return max - // } + for (let i = 0; i < 500; i++) { + if (this._count[i][0] >= m.audioStart && this._count[i][0] <= m.audioEnd) { + this._count[i][1] = max; + } + + } + + if (this.dataDoc.markerAmount < max) { + this.dataDoc.markerAmount = max; + } + return max - 1 + } formatTime = (time: number) => { const hours = Math.floor(time / 60 / 60); @@ -609,6 +631,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent -
+
{console.log(this.peaks)}
@@ -690,7 +719,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} > +
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} >
this.onPointerDown(e, m, true)}>
- {this.formatTime(Math.round(NumCast(this.layoutDoc.duration)))} + {this.formatTime(Math.round(NumCast(this.dataDoc.duration)))}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index b1d9be73b..91940466f 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit, faSmile, faTextHeight, faUpload } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { isEqual } from "lodash"; -import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction, trace } from "mobx"; import { observer } from "mobx-react"; import { baseKeymap, selectAll } from "prosemirror-commands"; import { history } from "prosemirror-history"; @@ -93,6 +93,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp private _undoTyping?: UndoManager.Batch; private _disposers: { [name: string]: IReactionDisposer } = {}; private _dropDisposer?: DragManager.DragDropDisposer; + private _first: Boolean = true; + private _recordingStart: number = 0; + private _currentTime: number = 0; + private _linkTime: number | null = null; + private _pause: boolean = false; @computed get _recording() { return this.dataDoc.audioState === "recording"; } set _recording(value) { this.dataDoc.audioState = value ? "recording" : undefined; } @@ -140,6 +145,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp super(props); FormattedTextBox.Instance = this; this.updateHighlights(); + this._recordingStart = Date.now(); + this.layoutDoc._timeStampOnEnter = true; } public get CurrentDiv(): HTMLDivElement { return this._ref.current!; } @@ -197,9 +204,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } dispatchTransaction = (tx: Transaction) => { + let timeStamp; + clearTimeout(timeStamp); + console.log("hi"); if (this._editorView) { + const metadata = tx.selection.$from.marks().find((m: Mark) => m.type === schema.marks.metadata); if (metadata) { + const range = tx.selection.$from.blockRange(tx.selection.$to); let text = range ? tx.doc.textBetween(range.start, range.end) : ""; let textEndSelection = tx.selection.to; @@ -221,6 +233,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.dataDoc[key] = value; } } + const state = this._editorView.state.apply(tx); this._editorView.updateState(state); (tx.storedMarks && !this._editorView.state.storedMarks) && (this._editorView.state.storedMarks = tx.storedMarks); @@ -234,19 +247,33 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const json = JSON.stringify(state.toJSON()); let unchanged = true; const effectiveAcl = GetEffectiveAcl(this.dataDoc); + + if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { if (!this._applyingChange && json.replace(/"selection":.*/, "") !== curProto?.Data.replace(/"selection":.*/, "")) { this._applyingChange = true; (curText !== Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text) && (this.dataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()))); if ((!curTemp && !curProto) || curText || curLayout?.Data.includes("dash")) { // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended) if (json.replace(/"selection":.*/, "") !== curLayout?.Data.replace(/"selection":.*/, "")) { + console.log("type"); + if (!this._pause && !this.layoutDoc._timeStampOnEnter) { + console.log("started"); + timeStamp = setTimeout(() => this.pause(), 10 * 1000); + } + + if (this._pause) { + this._pause = false; + this.insertTime(); + } !curText && tx.storedMarks?.map(m => m.type.name === "pFontSize" && (Doc.UserDoc().fontSize = this.layoutDoc._fontSize = m.attrs.fontSize)); !curText && tx.storedMarks?.map(m => m.type.name === "pFontFamily" && (Doc.UserDoc().fontFamily = this.layoutDoc._fontFamily = m.attrs.fontFamily)); this.dataDoc[this.props.fieldKey] = new RichTextField(json, curText); this.dataDoc[this.props.fieldKey + "-noTemplate"] = (curTemp?.Text || "") !== curText; // mark the data field as being split from the template if it has been edited ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.layoutDoc, self: this.rootDoc, text: curText }); unchanged = false; + } + } else { // if we've deleted all the text in a note driven by a template, then restore the template data this.dataDoc[this.props.fieldKey] = undefined; this._editorView.updateState(EditorState.fromJSON(this.config, JSON.parse((curProto || curTemp).Data))); @@ -260,6 +287,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } } else { + const json = JSON.parse(Cast(this.dataDoc[this.fieldKey], RichTextField)?.Data!); json.selection = state.toJSON().selection; this._editorView.updateState(EditorState.fromJSON(this.config, json)); @@ -267,6 +295,66 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } + pause = () => this._pause = true; + + formatTime = (time: number) => { + const hours = Math.floor(time / 60 / 60); + const minutes = Math.floor(time / 60) - (hours * 60); + const seconds = time % 60; + + return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0'); + } + + insertTime = () => { + let linkTime; + if (this._first) { + this._first = false; + DocListCast(this.dataDoc.links).map((l, i) => { + let la1 = l.anchor1 as Doc; + let la2 = l.anchor2 as Doc; + this._linkTime = NumCast(l.anchor2_timecode); + if (Doc.AreProtosEqual(la2, this.dataDoc)) { + la1 = l.anchor2 as Doc; + la2 = l.anchor1 as Doc; + this._linkTime = NumCast(l.anchor1_timecode); + } + + }) + + + + } + this._currentTime = Date.now(); + let time; + console.log(this._linkTime); + this._linkTime ? time = this.formatTime(Math.round(this._linkTime + this._currentTime / 1000 - this._recordingStart / 1000)) : time = null; + + if (this._editorView) { + const state = this._editorView.state; + const now = Date.now(); + let mark = schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(now / 1000) }); + if (!this._break && state.selection.to !== state.selection.from) { + for (let i = state.selection.from; i <= state.selection.to; i++) { + const pos = state.doc.resolve(i); + const um = Array.from(pos.marks()).find(m => m.type === schema.marks.user_mark); + if (um) { + mark = um; + break; + } + } + } + if (time) { + let value = ""; + this._break = false; + value = this.layoutDoc._timeStampOnEnter ? "[" + time + "] " : "\n" + "[" + time + "] "; + console.log(value); + const from = state.selection.from; + const inserted = state.tr.insertText(value).addMark(from, from + value.length + 1, mark); + this._editorView.dispatch(this._editorView.state.tr.insertText(value)); + } + } + } + updateTitle = () => { if ((this.props.Document.isTemplateForField === "text" || !this.props.Document.isTemplateForField) && // only update the title if the data document's data field is changing StrCast(this.dataDoc.title).startsWith("-") && this._editorView && !this.rootDoc.customTitle) { @@ -501,6 +589,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp uicontrols.push({ description: `${this.layoutDoc._showSidebar ? "Hide" : "Show"} Sidebar`, event: () => this.layoutDoc._showSidebar = !this.layoutDoc._showSidebar, icon: "expand-arrows-alt" }); uicontrols.push({ description: `${this.layoutDoc._showAudio ? "Hide" : "Show"} Dictation Icon`, event: () => this.layoutDoc._showAudio = !this.layoutDoc._showAudio, icon: "expand-arrows-alt" }); uicontrols.push({ description: "Show Highlights...", noexpand: true, subitems: highlighting, icon: "hand-point-right" }); + uicontrols.push({ description: `Create TimeStamp When ${this.layoutDoc._timeStampOnEnter ? "Pause" : "Enter"}`, event: () => this.layoutDoc._timeStampOnEnter = !this.layoutDoc._timeStampOnEnter, icon: "expand-arrows-alt" }); !Doc.UserDoc().noviceMode && uicontrols.push({ description: "Broadcast Message", event: () => DocServer.GetRefField("rtfProto").then(proto => proto instanceof Doc && (proto.BROADCAST_MESSAGE = Cast(this.rootDoc[this.fieldKey], RichTextField)?.Text)), icon: "expand-arrows-alt" @@ -594,6 +683,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const recordingStart = DateCast(this.props.Document.recordingStart).date.getTime(); this._break = false; value = "" + (mark.attrs.modified * 1000 - recordingStart) / 1000 + value; + console.log(value); const from = state.selection.from; const inserted = state.tr.insertText(value).addMark(from, from + value.length + 1, mark); this._editorView.dispatch(inserted.setSelection(TextSelection.create(inserted.doc, from, from + value.length + 1))); @@ -1295,30 +1385,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } e.stopPropagation(); if (e.key === "Tab" || e.key === "Enter") { - // console.log(this._recording); - // if (this._editorView) { - // const state = this._editorView.state; - // const now = Date.now(); - // let mark = schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(now / 1000) }); - // if (!this._break && state.selection.to !== state.selection.from) { - // for (let i = state.selection.from; i <= state.selection.to; i++) { - // const pos = state.doc.resolve(i); - // const um = Array.from(pos.marks()).find(m => m.type === schema.marks.user_mark); - // if (um) { - // mark = um; - // break; - // } - // } - // } - // const recordingStart = DateCast(this.props.Document.recordingStart).date.getTime(); - // this._break = false; - // let value = "" + (mark.attrs.modified * 1000 - recordingStart) / 1000; - // //let value = "[0:02]"; - // const from = state.selection.from; - // const inserted = state.tr.insertText(value).addMark(from, from + value.length + 1, mark); - - // this._editorView.dispatch(inserted.setSelection(TextSelection.create(inserted.doc, from, from + value.length + 1))); - // } + if (e.key === "Enter" && this.layoutDoc._timeStampOnEnter) { + this.insertTime(); + } e.preventDefault(); } if (e.key === " " || this._lastTimedMark?.attrs.userid !== Doc.CurrentUserEmail) { @@ -1371,6 +1440,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @computed get sidebarColor() { return StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], "transparent")); } render() { TraceMobx(); + trace(); + // if (this.props.Document.recordingStart) { + // console.log(DateCast(this.props.Document.recordingStart).date.getTime()); + // } + const scale = this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : ""; const interactive = Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground; -- cgit v1.2.3-70-g09d2 From 2a5ed028c356e122acade2b695cdb56f727c681f Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Tue, 4 Aug 2020 01:38:55 +0530 Subject: reinstated collection acl inheritance --- src/client/views/DocComponent.tsx | 19 ++++++++++--------- src/client/views/collections/CollectionView.tsx | 19 ++++++++----------- 2 files changed, 18 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 804c7a8d4..34144d3eb 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -154,15 +154,16 @@ export function ViewBoxAnnotatableComponent

{ - // const dataDoc = d[DataSym]; - // dataDoc[AclSym] = d[AclSym] = this.props.Document[AclSym]; - // for (const [key, value] of Object.entries(this.props.Document[AclSym])) { - // dataDoc[key] = d[key] = this.AclMap.get(value); - // } - // }); - // } + if (this.props.Document[AclSym]) { + added.forEach(d => { + const dataDoc = d[DataSym]; + dataDoc[AclSym] = d[AclSym] = this.props.Document[AclSym]; + for (const [key, value] of Object.entries(this.props.Document[AclSym])) { + dataDoc[key] = d[key] = this.AclMap.get(value); + } + }); + } + if (effectiveAcl === AclAddonly) { added.map(doc => Doc.AddDocToList(targetDataDoc, this.annotationKey, doc)); } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 89034a0c0..44875ac1e 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -17,7 +17,7 @@ import { listSpec } from '../../../fields/Schema'; import { ComputedField, ScriptField } from '../../../fields/ScriptField'; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; -import { TraceMobx, GetEffectiveAcl, SharingPermissions } from '../../../fields/util'; +import { TraceMobx, GetEffectiveAcl, SharingPermissions, distributeAcls } from '../../../fields/util'; import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; @@ -147,16 +147,13 @@ export class CollectionView extends Touchable { - // // const dataDoc = d[DataSym]; - // for (const [key, value] of Object.entries(this.props.Document[AclSym])) { - // // key.substring(4).replace("_", ".") !== Doc.CurrentUserEmail && distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true); - // distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true); - // } - // }); - // } + if (this.props.Document[AclSym]) { + added.forEach(d => { + for (const [key, value] of Object.entries(this.props.Document[AclSym])) { + distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true); + } + }); + } if (effectiveAcl === AclAddonly) { added.map(doc => Doc.AddDocToList(targetDataDoc, this.props.fieldKey, doc)); -- cgit v1.2.3-70-g09d2 From 78c99446f284f7ac8e5443f77227ae5edbfd2aaf Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 3 Aug 2020 18:41:18 -0400 Subject: made always show link end a contextMenu option --- src/client/views/DocumentButtonBar.tsx | 4 ++-- src/client/views/nodes/DocumentLinksButton.tsx | 4 ++-- src/client/views/nodes/DocumentView.tsx | 1 + src/fields/util.ts | 1 - 4 files changed, 5 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index c9f380737..d45531b76 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -278,9 +278,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV

-
+ {DocumentLinksButton.StartLink || !Doc.UserDoc()["documentLinksButton-hideEnd"] ?
-
+
: (null)} {/*
{this.templateButton}
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 31efaaaa6..4713ce447 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -202,7 +202,7 @@ export class DocumentLinksButton extends React.Component - {this.props.InMenu && !this.props.StartLink && + {DocumentLinksButton.StartLink && this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
; return (!links.length) && !this.props.AlwaysOn ? (null) : - this.props.InMenu && (this.props.StartLink || DocumentLinksButton.StartLink) ? + this.props.InMenu ?
{title}
}> {linkButton} : !!!DocumentLinksButton.EditLink && !this.props.InMenu ? diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a195f2813..81738f234 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -760,6 +760,7 @@ export class DocumentView extends DocComponent(Docu moreItems.push({ description: "Write Back Link to Album", event: () => GooglePhotos.Transactions.AddTextEnrichment(this.props.Document), icon: "caret-square-right" }); } moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" }); + Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()) && moreItems.push({ description: "Toggle Always Show Link End", event: () => Doc.UserDoc()["documentLinksButton-hideEnd"] = !Doc.UserDoc()["documentLinksButton-hideEnd"], icon: "eye" }); } //GetEffectiveAcl(this.props.Document) === AclEdit && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" }); diff --git a/src/fields/util.ts b/src/fields/util.ts index 957b2c8cd..44a3317db 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -10,7 +10,6 @@ import { DocServer } from "../client/DocServer"; import { ComputedField } from "./ScriptField"; import { ScriptCast, StrCast } from "./Types"; import { returnZero } from "../Utils"; -import { addSyntheticLeadingComment } from "typescript"; function _readOnlySetter(): never { -- cgit v1.2.3-70-g09d2 From 8019926f41d0be85a21dfa9ad0d1a0d9e7160935 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 3 Aug 2020 18:10:55 -0500 Subject: menu buttons and other UI changes --- src/client/views/MainView.scss | 3 +- src/client/views/MainView.tsx | 4 +- src/client/views/PropertiesButtons.scss | 30 +- src/client/views/PropertiesButtons.tsx | 351 ++++++++++++--------- .../collectionFreeForm/PropertiesView.scss | 2 +- .../collectionFreeForm/PropertiesView.tsx | 176 ++++++----- 6 files changed, 320 insertions(+), 246 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index a57d22afd..e9e700ba8 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -155,7 +155,7 @@ .mainView-menuPanel { width: 60px; - background-color: black; + background-color: #121721; height: 100%; //overflow-y: scroll; //overflow-x: hidden; @@ -165,6 +165,7 @@ padding: 7px; padding-left: 7px; width: 100%; + background: black; .mainView-menuPanel-button-wrap { width: 45px; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ca5154ef7..93cc95ba4 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -415,10 +415,10 @@ export class MainView extends React.Component { if (!this.sidebarContent) return null; return
- {this.flyoutWidth > 0 ?
0 ?
-
: null} +
: null} */} { const targetDoc = this.selectedDoc; const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined; const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none"; - return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}> -
{ - await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); - !published && runInAction(() => this.isAnimatingPulse = true); - PropertiesButtons.hasPushedHack = false; - targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; - }}> - -
; + return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
} placement="top"> +
+
{ + await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); + !published && runInAction(() => this.isAnimatingPulse = true); + PropertiesButtons.hasPushedHack = false; + targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; + }}> + +
+
Google
+
+ ; } @computed @@ -158,74 +162,88 @@ export class PropertiesButtons extends React.Component<{}, {}> { })(); return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) :
{title}
}> -
{ - if (e.altKey) { - this.openHover = UtilityButtonState.OpenExternally; - } else if (e.shiftKey) { - this.openHover = UtilityButtonState.OpenRight; - } - })} - onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)} - onClick={async e => { - const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; - if (e.shiftKey) { - e.preventDefault(); - let googleDoc = await Cast(dataDoc.googleDoc, Doc); - if (!googleDoc) { - const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false }; - googleDoc = Docs.Create.WebDocument(googleDocUrl, options); - dataDoc.googleDoc = googleDoc; + title={<>
{title}
} placement="top"> +
+
{ + if (e.altKey) { + this.openHover = UtilityButtonState.OpenExternally; + } else if (e.shiftKey) { + this.openHover = UtilityButtonState.OpenRight; } - CollectionDockingView.AddRightSplit(googleDoc); - } else if (e.altKey) { - e.preventDefault(); - window.open(googleDocUrl); - } else { - this.clearPullColor(); - PropertiesButtons.hasPulledHack = false; - targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; - dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); - } - }}> - { - switch (this.openHover) { - default: - case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch; - case UtilityButtonState.OpenRight: return "arrow-alt-circle-right"; - case UtilityButtonState.OpenExternally: return "share"; + })} + onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)} + onClick={async e => { + const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; + if (e.shiftKey) { + e.preventDefault(); + let googleDoc = await Cast(dataDoc.googleDoc, Doc); + if (!googleDoc) { + const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false }; + googleDoc = Docs.Create.WebDocument(googleDocUrl, options); + dataDoc.googleDoc = googleDoc; + } + CollectionDockingView.AddRightSplit(googleDoc); + } else if (e.altKey) { + e.preventDefault(); + window.open(googleDocUrl); + } else { + this.clearPullColor(); + PropertiesButtons.hasPulledHack = false; + targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; + dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); } - })()} - /> -
; + }}> + { + switch (this.openHover) { + default: + case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch; + case UtilityButtonState.OpenRight: return "arrow-alt-circle-right"; + case UtilityButtonState.OpenExternally: return "share"; + } + })()} + /> +
+
Fetch
+
+ ; } @computed get pinButton() { const targetDoc = this.selectedDoc; const isPinned = targetDoc && Doc.isDocPinned(targetDoc); - return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}> -
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> - -
; + return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : + "Pin to presentation"}
} placement="top"> +
+
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> + +
+ +
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
+
+ ; } @computed get metadataButton() { //const view0 = this.view0; if (this.selectedDoc) { - return
Show metadata panel
}> + return
Show metadata panel
} placement="top">
/* tfs: @bcz This might need to be the data document? */}> -
e.stopPropagation()} > - {} +
+
e.stopPropagation()} > + {} +
+
Metadata
; @@ -264,12 +282,15 @@ export class PropertiesButtons extends React.Component<{}, {}> { Array.from(Object.values(Templates.TemplateList)).map(template => templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); return !docView ? (null) : -
Customize layout
}> +
Customize layout
} placement="top">
this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} content={ v).map(v => v as DocumentView)} templates={templates} />}> -
- {} +
+
+ {} +
+
Layout
; @@ -292,12 +313,15 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get copyButton() { const targetDoc = this.selectedDoc; - return !targetDoc ? (null) :
{"Tap or Drag to create an alias"}
}> -
- {} + return !targetDoc ? (null) :
{"Tap or Drag to create an alias"}
} placement="top"> +
+
+ {} +
+
Alias
; } @@ -312,11 +336,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{this.selectedDoc?.lockedPosition ? - "Unlock Position" : "Lock Position"}
}> -
- {} + "Unlock Position" : "Lock Position"}
} placement="top"> +
+
+ {} +
+
Position
; } @@ -325,15 +352,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { get downloadButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Download Document"}
}> -
{ - if (this.selectedDocumentView?.props.Document) { - Doc.Zip(this.selectedDocumentView?.props.Document); - } - }}> - {} + title={<>
{"Download Document"}
} placement="top"> +
+
{ + if (this.selectedDocumentView?.props.Document) { + Doc.Zip(this.selectedDocumentView?.props.Document); + } + }}> + {} +
+
downld
; } @@ -342,11 +372,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { get deleteButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Delete Document"}
}> -
- {} + title={<>
{"Delete Document"}
} placement="top"> +
+
+ {} +
+
delete
; } @@ -361,15 +394,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { get sharingButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Share Document"}
}> -
{ - if (this.selectedDocumentView) { - SharingManager.Instance.open(this.selectedDocumentView); - } - }}> - {} + title={<>
{"Share Document"}
} placement="top"> +
+
{ + if (this.selectedDocumentView) { + SharingManager.Instance.open(this.selectedDocumentView); + } + }}> + {} +
+
share
; } @@ -377,15 +413,19 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get onClickButton() { if (this.selectedDoc) { - return
Choose onClick behavior
}> -
- -
e.stopPropagation()} > - {} -
- -
; + return
Choose onClick behavior
} placement="top"> +
+
+ +
e.stopPropagation()} > + {} +
+ +
+
onclick
+
+ ; } else { return null; } @@ -472,15 +512,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { get googlePhotosButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Export to Google Photos"}
}> -
{ - if (this.selectedDocumentView) { - GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log); - } - }}> - {} + title={<>
{"Export to Google Photos"}
} placement="top"> +
+
{ + if (this.selectedDocumentView) { + GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log); + } + }}> + {} +
+
google
; } @@ -489,13 +532,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { get clustersButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
}> -
- {} + title={<>
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
} placement="top"> +
+
+ {} +
+
clusters
; } @@ -514,13 +560,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { get fitContentButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
}> -
- {} + title={<>
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
} placement="top"> +
+
+ {} +
+
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
; } @@ -541,11 +590,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { get maskButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
Make Mask
}> -
- {} + title={<>
Make Mask
} placement="top"> +
+
+ {} +
+
mask
; } @@ -553,13 +605,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get contextButton() { if (this.selectedDoc) { - return
Show Context
}> -
- { - where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : - this.selectedDocumentView?.props.addDocTab(doc, "onRight"); - return true; - }} /> + return
Show Context
} placement="top"> +
+
+ { + where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : + this.selectedDocumentView?.props.addDocTab(doc, "onRight"); + return true; + }} /> +
+
context
; } else { @@ -622,9 +677,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.onClickButton}
- {/*
- {this.contextButton} -
*/}
{this.sharingButton}
@@ -652,6 +704,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.maskButton}
+
+ {this.contextButton} +
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 7df56115f..aede3842e 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -41,7 +41,7 @@ font-size: 12.5px; &:hover { - cursor: pointer; + cursor: text; } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index f5e0cd077..9c5b8f81d 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -59,6 +59,8 @@ export class PropertiesView extends React.Component { @observable openAppearance: boolean = true; @observable openTransform: boolean = true; + @observable inActions: boolean = false; + @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } @action @@ -736,115 +738,119 @@ export class PropertiesView extends React.Component { return
No Document Selected -
- -
-
+
; - } - const novice = Doc.UserDoc().noviceMode; + } else { + + const novice = Doc.UserDoc().noviceMode; - return
-
- Properties -
+ return
+
+ Properties + {/*
+
*/}
-
-
- {this.editableTitle} -
-
-
runInAction(() => { this.openActions = !this.openActions; })} - style={{ backgroundColor: this.openActions ? "black" : "" }}> - Actions +
+ {this.editableTitle} +
+
runInAction(() => { this.inActions = true; })} + onPointerLeave={() => runInAction(() => { this.inActions = false; })}> +
runInAction(() => { this.openActions = !this.openActions; })} + style={{ backgroundColor: this.openActions ? "black" : "" }}> + Actions
- + +
+ {!this.openActions ? (null) : +
+ +
}
- {!this.openActions ? (null) : -
- -
} -
-
-
runInAction(() => { this.openSharing = !this.openSharing; })} - style={{ backgroundColor: this.openSharing ? "black" : "" }}> - Sharing {"&"} Permissions +
+
runInAction(() => { this.openSharing = !this.openSharing; })} + style={{ backgroundColor: this.openSharing ? "black" : "" }}> + Sharing {"&"} Permissions
- + +
+ {!this.openSharing ? (null) : +
+ {this.sharingTable} +
}
- {!this.openSharing ? (null) : -
- {this.sharingTable} -
} -
- {!this.isInk ? (null) : -
-
runInAction(() => { this.openAppearance = !this.openAppearance; })} - style={{ backgroundColor: this.openAppearance ? "black" : "" }}> - Appearance + {!this.isInk ? (null) : +
+
runInAction(() => { this.openAppearance = !this.openAppearance; })} + style={{ backgroundColor: this.openAppearance ? "black" : "" }}> + Appearance
- + +
-
- {!this.openAppearance ? (null) : -
- {this.appearanceEditor} -
} -
} + {!this.openAppearance ? (null) : +
+ {this.appearanceEditor} +
} +
} - {this.isInk ?
-
runInAction(() => { this.openTransform = !this.openTransform; })} - style={{ backgroundColor: this.openTransform ? "black" : "" }}> - Transform + {this.isInk ?
+
runInAction(() => { this.openTransform = !this.openTransform; })} + style={{ backgroundColor: this.openTransform ? "black" : "" }}> + Transform
- + +
-
- {this.openTransform ?
- {this.transformEditor} + {this.openTransform ?
+ {this.transformEditor} +
: null}
: null} -
: null} - -
-
runInAction(() => { this.openFields = !this.openFields; })} - style={{ backgroundColor: this.openFields ? "black" : "" }}> -
- Fields {"&"} Tags + +
+
runInAction(() => { this.openFields = !this.openFields; })} + style={{ backgroundColor: this.openFields ? "black" : "" }}> +
+ Fields {"&"} Tags
- + +
+ {!novice && this.openFields ?
+ {this.fieldsCheckbox} +
Layout
+
: null} + {!this.openFields ? (null) : +
+ {novice ? this.noviceFields : this.expandedField} +
}
- {!novice && this.openFields ?
- {this.fieldsCheckbox} -
Layout
-
: null} - {!this.openFields ? (null) : -
- {novice ? this.noviceFields : this.expandedField} -
} -
-
-
runInAction(() => { this.openLayout = !this.openLayout; })} - style={{ backgroundColor: this.openLayout ? "black" : "" }}> - Layout +
+
runInAction(() => { this.openLayout = !this.openLayout; })} + style={{ backgroundColor: this.openLayout ? "black" : "" }}> + Layout
runInAction(() => { this.openLayout = !this.openLayout; })}> - + +
+ {this.openLayout ?
{this.layoutPreview}
: null}
- {this.openLayout ?
{this.layoutPreview}
: null} -
-
; +
; + + } } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From e87f8f5113756b188feb3de1fc6f9697a4c91b51 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Mon, 3 Aug 2020 19:46:09 -0400 Subject: pdf search --- src/client/views/collections/SchemaTable.tsx | 28 +++++++++++++++++++++++++++- src/client/views/search/SearchBox.tsx | 6 ++++++ 2 files changed, 33 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 5c199096e..9d02807fd 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -283,13 +283,39 @@ export class SchemaTable extends React.Component { Header: , accessor: (doc: Doc) => 0, id: "add", - Cell: (rowProps: CellInfo) => <>, + Cell: (rowProps: CellInfo) =>
+
, width: 28, resizable: false }); return columns; } + + + @action + nextHighlight = (e: React.MouseEvent, doc: Doc) => { + e.preventDefault(); + e.stopPropagation(); + + doc.searchMatch = false; + setTimeout(() => doc.searchMatch = true, 0); + doc.searchIndex = NumCast(doc.searchIndex); + } + + @action + nextHighlight2 = (e: React.MouseEvent, doc: Doc) => { + e.preventDefault(); + e.stopPropagation(); + doc.searchMatch2 = false; + setTimeout(() => doc.searchMatch2 = true, 0); + doc.searchIndex = NumCast(doc.searchIndex); + } + constructor(props: SchemaTableProps) { super(props); // convert old schema columns (list of strings) into new schema columns (list of schema header fields) diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 09fbe383c..de6fff5d2 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -195,6 +195,7 @@ export class SearchBox extends ViewBoxBaseComponent { Doc.UnBrushDoc(result[0]); + result[0].searchMatch = undefined; }); this.props.Document._schemaHeaders = new List([]); @@ -493,15 +494,18 @@ export class SearchBox extends ViewBoxBaseComponent([]); this.headercount = 0; this.children = 0; this.buckets = []; this.new_buckets = {}; const query = StrCast(this.layoutDoc._searchString); + Doc.SetSearchQuery(query); this.getFinalQuery(query); this._results.forEach(result => { Doc.UnBrushDoc(result[0]); + result[0].searchMatch = undefined; }); this._results = []; this._resultsSet.clear(); @@ -758,6 +762,7 @@ export class SearchBox extends ViewBoxBaseComponent Date: Mon, 3 Aug 2020 20:00:08 -0500 Subject: color consistencies and top menu fix for view types --- src/client/views/Main.scss | 6 +++--- src/client/views/PropertiesButtons.scss | 4 ++-- src/client/views/collections/CollectionMenu.tsx | 6 ++++-- src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- 5 files changed, 11 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index a2a9ceca5..97ed0a901 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -26,7 +26,7 @@ body { height: 100%; border-radius: inherit; position: inherit; - // background: inherit; + // background: inherit; } p { @@ -37,7 +37,7 @@ p { ::-webkit-scrollbar { -webkit-appearance: none; height: 8px; - width: 8px; + width: 8px; } ::-webkit-scrollbar-thumb { @@ -47,7 +47,7 @@ p { // button stuff button { - background: $dark-color; + background: black; outline: none; border: 0px; color: $light-color; diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 5edaa2168..6199d34d0 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -77,8 +77,8 @@ $linkGap : 3px; color: white; font-size: 6px; width: 40px; - padding: 5px; - height: 16px; + padding: 3px; + height: 13px; border-radius: 7px; text-transform: uppercase; text-align: center; diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index a7d2c07fa..20df22846 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -236,7 +236,7 @@ export class CollectionViewBaseChrome extends React.Component); case CollectionViewType.Stacking: return (); case CollectionViewType.Schema: return (); @@ -586,12 +586,14 @@ export class CollectionFreeFormViewChrome extends React.Component; } + @observable viewType = this.selectedDoc?._viewType; + render() { return !this.props.docView.layoutDoc ? (null) :
{this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : Toggle Mini Map
} placement="bottom"> -
+
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 9c5b8f81d..f04c5159c 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -238,7 +238,7 @@ export class PropertiesView extends React.Component { rootSelected={returnFalse} treeViewDoc={undefined} backgroundColor={() => "lightgrey"} - fitToBox={false} + fitToBox={true} FreezeDimensions={true} NativeWidth={layoutDoc.type === StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 81738f234..38670817b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -749,7 +749,7 @@ export class DocumentView extends DocComponent(Docu moreItems.push({ description: "Download document", icon: "download", event: async () => Doc.Zip(this.props.Document) }); moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" }); //moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" }); - moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" }); + //moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" }); if (!Doc.UserDoc().noviceMode) { moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" }); moreItems.push({ description: `${this.Document._chromeStatus !== "disabled" ? "Hide" : "Show"} Chrome`, event: () => this.Document._chromeStatus = (this.Document._chromeStatus !== "disabled" ? "disabled" : "enabled"), icon: "project-diagram" }); -- cgit v1.2.3-70-g09d2 From 8192e058495155a056b83b701c90ac56115dda32 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 3 Aug 2020 20:09:36 -0500 Subject: flyout undo fix --- src/client/views/MainView.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e7e5e837a..a544c52d2 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -485,7 +485,7 @@ export class MainView extends React.Component { } - @action @undoBatch + @action closeFlyout = () => { this._lastButton && (this._lastButton.color = "white"); this._lastButton && (this._lastButton._backgroundColor = ""); @@ -496,7 +496,7 @@ export class MainView extends React.Component { get groupManager() { return GroupManager.Instance; } _lastButton: Doc | undefined; - @action @undoBatch + @action selectMenu = (button: Doc, str: string) => { this._lastButton && (this._lastButton.color = "white"); this._lastButton && (this._lastButton._backgroundColor = ""); @@ -525,7 +525,7 @@ export class MainView extends React.Component { return true; } - @action @undoBatch + @action closeProperties = () => { CurrentUserUtils.propertiesWidth = 0; } -- cgit v1.2.3-70-g09d2 From 17cc7ae30f08e00c10398214070b5664ad221a03 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 3 Aug 2020 23:20:04 -0400 Subject: playing with new search. added 'text' as default search field. --- solr-8.3.1/bin/solr | 0 solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/views/search/SearchBox.tsx | 78 +++++++++++++---------------------- 3 files changed, 30 insertions(+), 50 deletions(-) mode change 100644 => 100755 solr-8.3.1/bin/solr (limited to 'src') diff --git a/solr-8.3.1/bin/solr b/solr-8.3.1/bin/solr old mode 100644 new mode 100755 diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index e3e2416b2..efc75f3cc 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -7933 +34698 diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index de6fff5d2..bd938b75a 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -1,49 +1,30 @@ -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faTimes } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable, runInAction, IReactionDisposer, reaction } from 'mobx'; +import * as _ from "lodash"; +import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import * as rp from 'request-promise'; import { Doc, DocListCast } from '../../../fields/Doc'; +import { documentSchema } from "../../../fields/documentSchemas"; import { Id } from '../../../fields/FieldSymbols'; +import { List } from '../../../fields/List'; +import { createSchema, listSpec, makeInterface } from '../../../fields/Schema'; +import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; -import { Utils, returnTrue, emptyFunction, returnFalse, emptyPath, returnOne, returnEmptyString, returnEmptyFilter } from '../../../Utils'; -import { Docs, DocumentOptions } from '../../documents/Documents'; -import { SetupDrag, DragManager } from '../../util/DragManager'; -import { SearchUtil } from '../../util/SearchUtil'; -import "./SearchBox.scss"; -import { SearchItem } from './SearchItem'; -import { IconBar } from './IconBar'; -import { FieldView, FieldViewProps } from '../nodes/FieldView'; +import { returnFalse, Utils } from '../../../Utils'; +import { Docs } from '../../documents/Documents'; import { DocumentType } from "../../documents/DocumentTypes"; -import { DocumentView } from '../nodes/DocumentView'; -import { SelectionManager } from '../../util/SelectionManager'; -import { FilterQuery } from 'mongodb'; -import { CollectionLinearView } from '../collections/CollectionLinearView'; import { CurrentUserUtils } from '../../util/CurrentUserUtils'; - -import { CollectionDockingView } from '../collections/CollectionDockingView'; -import { ScriptField, ComputedField } from '../../../fields/ScriptField'; -import { PrefetchProxy } from '../../../fields/Proxy'; -import { List } from '../../../fields/List'; -import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; -import { Transform } from '../../util/Transform'; -import { MainView } from "../MainView"; +import { SetupDrag } from '../../util/DragManager'; import { Scripting, _scriptingGlobals } from '../../util/Scripting'; +import { SearchUtil } from '../../util/SearchUtil'; +import { SelectionManager } from '../../util/SelectionManager'; +import { Transform } from '../../util/Transform'; import { CollectionView, CollectionViewType } from '../collections/CollectionView'; import { ViewBoxBaseComponent } from "../DocComponent"; -import { documentSchema } from "../../../fields/documentSchemas"; -import { makeInterface, createSchema } from '../../../fields/Schema'; -import { listSpec } from '../../../fields/Schema'; -import * as _ from "lodash"; -import { checkIfStateModificationsAreAllowed } from 'mobx/lib/internal'; -import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; -import { indexOf } from 'lodash'; -import { protocol } from 'socket.io-client'; - - -library.add(faTimes); +import { DocumentView } from '../nodes/DocumentView'; +import { FieldView, FieldViewProps } from '../nodes/FieldView'; +import "./SearchBox.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; export const searchSchema = createSchema({ id: "string", @@ -54,7 +35,8 @@ export const searchSchema = createSchema({ export enum Keys { TITLE = "title", AUTHOR = "author", - DATA = "data" + DATA = "data", + TEXT = "text" } export interface filterData { @@ -458,26 +440,24 @@ export class SearchBox extends ViewBoxBaseComponent { - const newWrd = mod + word; - newWords.push(newWrd); - }); + const oldWords = query.split(" "); + oldWords.forEach(word => newWords.push(mod + word)); query = newWords.join(" "); @@ -713,7 +693,7 @@ export class SearchBox extends ViewBoxBaseComponent(["title", "author", "lastModified"]); + let headers = new Set(["title", "author", "text", "lastModified"]); if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { if (this.noresults === "") { this.noresults = "No search results :("; -- cgit v1.2.3-70-g09d2 From 3bbabb64695650fc632fdf88286094f457adb838 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 3 Aug 2020 23:50:22 -0400 Subject: starting to cleanup search --- src/client/util/CurrentUserUtils.ts | 33 ++-------- src/client/util/SearchUtil.ts | 1 - src/client/views/MainView.tsx | 70 ---------------------- .../views/collections/CollectionSchemaCells.tsx | 9 --- .../views/collections/CollectionSchemaHeaders.tsx | 10 ---- .../views/collections/CollectionSchemaView.tsx | 24 +++----- src/client/views/collections/CollectionSubView.tsx | 3 - src/client/views/nodes/LabelBox.tsx | 1 - src/client/views/nodes/WebBox.tsx | 2 +- src/client/views/pdf/PDFViewer.tsx | 3 - 10 files changed, 16 insertions(+), 140 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 12e48ae13..048b5fe76 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -414,9 +414,9 @@ export class CurrentUserUtils { doc.emptyButton = Docs.Create.ButtonDocument({ _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, title: "Button" }); } if (doc.emptyDocHolder === undefined) { - // doc.emptyDocHolder = Docs.Create.DocumentDocument( - // ComputedField.MakeFunction("selectedDocs(this,this.excludeCollections,[_last_])?.[0]") as any, - // { _width: 250, _height: 250, title: "container" }); + doc.emptyDocHolder = Docs.Create.DocumentDocument( + ComputedField.MakeFunction("selectedDocs(this,this.excludeCollections,[_last_])?.[0]") as any, + { _width: 250, _height: 250, title: "container" }); } if (doc.emptyWebpage === undefined) { doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true }); @@ -647,7 +647,7 @@ export class CurrentUserUtils { // setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker. // when clicked, this panel will be displayed in the target container (ie, sidebarContainer) - static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) { + static async setupToolsBtnPanel(doc: Doc) { // setup a masonry view of all he creators const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc); const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc); @@ -746,20 +746,7 @@ export class CurrentUserUtils { } } - // setup the Search button which will display the search panel. - static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) { - if (doc["tabs-button-search"] === undefined) { - doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ - _width: 50, _height: 25, title: "Search", _fontSize: "10pt", - letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc, - searchFileTypes: new List([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]), - targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, - lockedPosition: true, - onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel") - })); - } - } + static setupUserDoc(doc: Doc) { if (doc["sidebar-userDoc"] === undefined) { doc.treeViewOpen = true; @@ -784,15 +771,7 @@ export class CurrentUserUtils { // setup the list of sidebar mode buttons which determine what is displayed in the sidebar static async setupSidebarButtons(doc: Doc) { - const sidebarContainer = CurrentUserUtils.setupSidebarContainer(doc); - const toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer); - const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); - if (doc["search-panel"] === undefined) { - doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ _width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc; - } - - - await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer); + await CurrentUserUtils.setupToolsBtnPanel(doc); CurrentUserUtils.setupWorkspaces(doc); CurrentUserUtils.setupCatalog(doc); CurrentUserUtils.setupRecentlyClosed(doc); diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts index f54e13197..7b2c601fe 100644 --- a/src/client/util/SearchUtil.ts +++ b/src/client/util/SearchUtil.ts @@ -4,7 +4,6 @@ import { Doc } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { Utils } from '../../Utils'; import { DocumentType } from '../documents/DocumentTypes'; -import { StringMap } from 'libxmljs'; export namespace SearchUtil { export type HighlightingResult = { [id: string]: { [key: string]: string[] } }; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 03f624038..923036eae 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -80,7 +80,6 @@ export class MainView extends React.Component { @computed private get userDoc() { return Doc.UserDoc(); } @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } @computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } - @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } @computed public get searchDoc() { return Cast(this.userDoc["search-panel"], Doc) as Doc; } @@ -356,38 +355,6 @@ export class MainView extends React.Component { } } - // @computed get search() { - // return ; - // } - - - - - @computed get mainDocView() { return - //
- // {this.search} - //
- //
- //
- //
- //
- // - //
- //
- // {this.flyout} - // {this.expandButton} - //
- //
- // {this.dockingContent} - //
- //
- //
); const pinned = FormatShapePane.Instance?.Pinned; const innerContent = this.mainInnerContent; return !this.userDoc ? (null) : ( diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index e50f95dca..ecd20eb06 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -32,7 +32,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { DateField } from "../../../fields/DateField"; -import { indexOf } from "lodash"; const path = require('path'); library.add(faExpand); @@ -292,9 +291,6 @@ export class CollectionSchemaCell extends React.Component { maxHeight={Number(MAX_ROW_HEIGHT)} placeholder={"enter value"} bing={() => { - // if (type === "number" && (contents === 0 || contents === "0")) { - // return "0"; - // } else { const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); if (cfield !== undefined) { if (cfield.Text !== undefined) { @@ -307,11 +303,6 @@ export class CollectionSchemaCell extends React.Component { return String(NumCast(cfield)); } } - // console.log(cfield.Text); - // console.log(StrCast(cfield)); - // return StrCast(cfield); - // } - }} GetValue={() => { if (type === "number" && (contents === 0 || contents === "0")) { diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index a979f9838..5d7ab2c61 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -78,14 +78,6 @@ export class CollectionSchemaAddColumnHeader extends React.Component { @undoBatch onKeyDown = (e: React.KeyboardEvent): void => { - //if (this._key !==) - if (e.key === "Enter") { const keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1); if (keyOptions.length) { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index b93a7f7b8..869be2b03 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -4,27 +4,26 @@ import { faCog, faPlus, faSortDown, faSortUp, faTable } from '@fortawesome/free- import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, untracked } from "mobx"; import { observer } from "mobx-react"; +import Measure from "react-measure"; import { Resize } from "react-table"; import "react-table/react-table.css"; -import { Doc, DocCastAsync } from "../../../fields/Doc"; +import { Doc } from "../../../fields/Doc"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; -import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField"; -import { Cast, NumCast, StrCast } from "../../../fields/Types"; -import { Docs, DocumentOptions } from "../../documents/Documents"; +import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField"; +import { Cast, NumCast } from "../../../fields/Types"; +import { TraceMobx } from "../../../fields/util"; +import { emptyFunction, returnFalse, returnOne, returnZero, setupMoveUpEvents } from "../../../Utils"; +import { SnappingManager } from "../../util/SnappingManager"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; import '../DocumentDecorations.scss'; +import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; import { KeysDropdown } from "./CollectionSchemaHeaders"; import "./CollectionSchemaView.scss"; import { CollectionSubView } from "./CollectionSubView"; -import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; -import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } from "../../../Utils"; -import { SnappingManager } from "../../util/SnappingManager"; -import Measure from "react-measure"; import { SchemaTable } from "./SchemaTable"; -import { TraceMobx } from "../../../fields/util"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -170,9 +169,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @action setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => { const columns = this.columns; - columns.forEach(col => { - col.setDesc(undefined); - }) + columns.forEach(col => col.setDesc(undefined)); const index = columns.findIndex(c => c.heading === columnField.heading); const column = columns[index]; @@ -330,8 +327,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { columns[index] = column; this.columns = columns; if (filter) { - console.log(newKey); - console.log(filter); Doc.setDocFilter(this.props.Document, newKey, filter, "match"); if (this.props.Document.selectedDoc !== undefined) { let doc = Cast(this.props.Document.selectedDoc, Doc) as Doc; @@ -462,7 +457,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.props.select(false); } } - console.log("yeeeet"); } @computed diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index ab28e1904..88241f519 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -130,10 +130,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: let childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs; const searchDocs = DocListCast(this.props.Document._searchDocs); - console.log(this.props.Document); - console.log(searchDocs); if (searchDocs !== undefined && searchDocs.length > 0) { - console.log("yes"); childDocs = searchDocs; } const docFilters = this.docFilters(); diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index 983470f9d..302d66cc5 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -69,7 +69,6 @@ export class LabelBox extends ViewBoxBaseComponent !this.paramsDoc[p]); params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... - console.log(this.backColor); return (
runInAction(() => { this.clicked = !this.clicked; this.clicked ? this.backColor = StrCast(this.layoutDoc.hovercolor) : this.backColor = "unset" })} onMouseLeave={() => runInAction(() => { !this.clicked ? this.backColor = "unset" : null })} onMouseOver={() => runInAction(() => { this.backColor = StrCast(this.layoutDoc.hovercolor); })} ref={this.createDropTarget} onContextMenu={this.specificContextMenu} diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 1313bded7..646a94aa7 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -139,7 +139,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { - console.log(this.Index); this.Index = Math.max(this.Index - 1, 0); - console.log(this.Index); - console.log(this.allAnnotations); this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]); } -- cgit v1.2.3-70-g09d2 From 5afb1157ee888a46df3074ac1445966f514aa372 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 4 Aug 2020 00:40:35 -0400 Subject: fixed joe k;lm --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index e95a4ccd2..79cf5c5fd 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -270,7 +270,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if ((this.props.Document.isTemplateForField === "text" || !this.props.Document.isTemplateForField) && // only update the title if the data document's data field is changing StrCast(this.dataDoc.title).startsWith("-") && this._editorView && !this.rootDoc.customTitle) { let node = this._editorView.state.doc; - while (node.firstChild) node = node.firstChild; + while (node.firstChild && node.firstChild.type.name !== "text") node = node.firstChild; const str = node.textContent; const titlestr = str.substr(0, Math.min(40, str.length)); this.dataDoc.title = "-" + titlestr + (str.length > 40 ? "..." : ""); -- cgit v1.2.3-70-g09d2 From f848ef4d6f43f281618b511f8bf1815ef1c63ecc Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 4 Aug 2020 17:58:50 +0800 Subject: properties view for presentation --- .../collectionFreeForm/PropertiesView.scss | 4 +- src/client/views/nodes/PresBox.scss | 14 ++--- src/client/views/nodes/PresBox.tsx | 59 +++++++++++----------- .../views/presentationview/PresElementBox.tsx | 8 ++- 4 files changed, 44 insertions(+), 41 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 2cdaa25ee..f559b940c 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -5,8 +5,8 @@ font-family: "Noto Sans"; cursor: auto; - overflow-x: visible; - overflow-y: visible; + overflow-x: hidden; + overflow-y: scroll; .propertiesView-title { background-color: rgb(159, 159, 159); diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 83e7152a8..45c6d33b8 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -291,7 +291,7 @@ .ribbon-textInput { border-radius: 2px; - height: 30px; + height: 20px; font-size: 11.5; font-weight: 100; align-self: center; @@ -363,14 +363,14 @@ .ribbon-final-button { position: relative; - font-size: 11.5; + font-size: 11; font-weight: normal; letter-spacing: normal; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; - height: 30px; + height: 25px; color: white; width: 100%; max-width: 120; @@ -382,14 +382,14 @@ .ribbon-final-button-hidden { position: relative; - font-size: 11.5; + font-size: 11; font-weight: normal; letter-spacing: normal; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; - height: 30px; + height: 25px; color: lightgrey; width: 100%; max-width: 120; @@ -414,9 +414,9 @@ } .ribbon-button { - font-size: 11; + font-size: 10.5; font-weight: 200; - height: 30; + height: 20; background-color: #dedede; border: solid 1px black; display: flex; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 496d4666e..0a73106a3 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -900,22 +900,16 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{this.stringType} options -
-
Child documents
-
Edit
+
+
Start automatically
+
Start manually
-
-
Internal zoom
-
Viewfinder
-
Snapshot
-
-
-
Text progressivize
-
Edit
+
+
Open document
+
Open parent collection
-
-
Scroll progressivize
-
Edit
+
+
Store original website
@@ -928,28 +922,25 @@ export class PresBox extends ViewBoxBaseComponent return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> -
-
runInAction(() => { this.layout = 'blank' })} /> -
runInAction(() => { this.layout = 'title' })}> +
+
runInAction(() => { this.layout = 'blank'; this.createNewSlide(this.layout); })} /> +
runInAction(() => { this.layout = 'title'; this.createNewSlide(this.layout); })}>
Title
Subtitle
-
runInAction(() => { this.layout = 'header' })}> +
runInAction(() => { this.layout = 'header'; this.createNewSlide(this.layout); })}>
Section header
-
runInAction(() => { this.layout = 'content' })}> +
runInAction(() => { this.layout = 'content'; this.createNewSlide(this.layout); })}>
Title
Text goes here
-
runInAction(() => { this.layout = 'twoColumns' })}> +
runInAction(() => { this.layout = 'twoColumns'; this.createNewSlide(this.layout); })}>
Title
Column one text
Column two text
-
runInAction(() => { this.openLayouts = !this.openLayouts })}> - -
); @@ -1033,9 +1024,17 @@ export class PresBox extends ViewBoxBaseComponent } createTemplate = (layout: string, input?: string) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + let x = 0; + let y = 0; + if (activeItem && targetDoc) { + x = NumCast(targetDoc._x); + y = NumCast(targetDoc._y) + NumCast(targetDoc._height) + 20; + } let doc = undefined; const title = Docs.Create.TextDocument("Click to change title", { - title: "Slide title", _width: 380, _height: 60, x: 10, y: 58, _fontSize: "24pt" + title: "Slide title", _width: 380, _height: 60, x: 10, y: 58, _fontSize: "24pt", }); const subtitle = Docs.Create.TextDocument("Click to change subtitle", { title: "Slide subtitle", _width: 380, _height: 50, x: 10, y: 118, _fontSize: "16pt" @@ -1058,27 +1057,27 @@ export class PresBox extends ViewBoxBaseComponent switch (layout) { case 'blank': doc = Docs.Create.FreeformDocument([], { - title: input ? input : "Blank slide", _width: 400, _height: 225, _fitToBox: true + title: input ? input : "Blank slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; case 'title': doc = Docs.Create.FreeformDocument([title, subtitle], { - title: input ? input : "Title slide", _width: 400, _height: 225, _fitToBox: true + title: input ? input : "Title slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; case 'header': doc = Docs.Create.FreeformDocument([header], { - title: input ? input : "Section header", _width: 400, _height: 225, _fitToBox: true + title: input ? input : "Section header", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; case 'content': doc = Docs.Create.FreeformDocument([contentTitle, content], { - title: input ? input : "Title and content", _width: 400, _height: 225, _fitToBox: true + title: input ? input : "Title and content", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; case 'twoColumns': doc = Docs.Create.FreeformDocument([contentTitle, content1, content2], { - title: input ? input : "Title and two columns", _width: 400, _height: 225, _fitToBox: true + title: input ? input : "Title and two columns", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; default: @@ -1218,7 +1217,7 @@ export class PresBox extends ViewBoxBaseComponent
Edit
-
+
Frames
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index ce7a43315..90eb8580e 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -251,6 +251,10 @@ export class PresElementBox extends ViewBoxBaseComponent doc)); // let value = this.getValue(this._heading); // value = typeof value === "string" ? `"${value}"` : value; + PresBox.Instance._dragArray.map(ele => { + ele.style.backgroundColor = "#d5dce2"; + ele.style.borderRadius = '5px'; + }); if (activeItem) { DragManager.StartDocumentDrag(PresBox.Instance._dragArray.map(ele => ele), dragData, e.clientX, e.clientY); activeItem.dragging = true; @@ -295,10 +299,10 @@ export class PresElementBox extends ViewBoxBaseComponent <> -
+
{`${this.indexInPres + 1}.`}
-
+
{`${this.targetDoc?.title}`}
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 -- cgit v1.2.3-70-g09d2 From 6ea1420c502f76a1c3219e0c34633575fb00ec98 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 4 Aug 2020 18:06:29 +0800 Subject: props for prez --- .../collectionFreeForm/PropertiesView.tsx | 302 +++++++-------------- 1 file changed, 95 insertions(+), 207 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 88d585596..3e8404874 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -27,8 +27,6 @@ import { ColorState, SketchPicker } from "react-color"; import AntimodeMenu from "../../AntimodeMenu"; import "./FormatShapePane.scss"; import { discovery_v1 } from "googleapis"; -import { PresBox } from "../../nodes/PresBox"; -import { DocumentManager } from "../../../util/DocumentManager"; interface PropertiesViewProps { @@ -47,14 +45,8 @@ export class PropertiesView extends React.Component { @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) { return SelectionManager.SelectedDocuments()[0]; - } else if (PresBox.Instance._selectedArray.length >= 1) { - return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); } else { return undefined; } } - @computed get isPres(): boolean { - if (this.selectedDoc?.type === DocumentType.PRES) return true; - return false; - } @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } @@ -66,13 +58,6 @@ export class PropertiesView extends React.Component { @observable openLayout: boolean = true; @observable openAppearance: boolean = true; @observable openTransform: boolean = true; - //Pres Trails booleans: - @observable openAddSlide: boolean = true; - @observable openPresentationTools: boolean = true; - @observable openPresTransitions: boolean = true; - @observable openPresProgressivize: boolean = true; - @observable openSlideOptions: boolean = true; - @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } @@ -220,7 +205,7 @@ export class PropertiesView extends React.Component { } } - + @undoBatch setKeyValue = (value: string) => { if (this.selectedDoc && this.dataDoc) { const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc; @@ -281,9 +266,14 @@ export class PropertiesView extends React.Component { } } + @undoBatch + changePermissions = (e: any, user: string) => { + SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, this.selectedDoc!); + } + getPermissionsSelect(user: string) { return -
-
- {this._searchbarOpen === true ? -
-
0 ? length : 253, - height: 25, - borderColor: "#9c9396", - border: "1px solid", - borderRadius: "0.3em", - borderBottom: this.open === false ? "1px solid" : "none", - position: "absolute", - background: "rgb(241, 239, 235)", - top: 29 - }}> -
-
-
+ +
+
+ {this._searchbarOpen === true ? +
+ {this.noresults === "" ?
+ height : () => 0} + PanelWidth={this.open === true ? () => length : () => 0} + overflow={cols > 5 || rows > 8 ? true : false} + focus={this.selectElement} + ScreenToLocalTransform={Transform.Identity} + /> +
: +
+
{this.noresults}
+
}
: undefined}
-- cgit v1.2.3-70-g09d2 From 58a322592f13bb37c369957b0141f53469d0d100 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 4 Aug 2020 10:59:28 -0400 Subject: moved filter to an icon --- src/client/util/CurrentUserUtils.ts | 3 +++ src/client/views/search/SearchBox.tsx | 45 ++++++++++++++++------------------- 2 files changed, 23 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 048b5fe76..4b2f8d0f6 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -894,6 +894,9 @@ export class CurrentUserUtils { doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]); + if (doc["search-panel"] === undefined) { + doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ _width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc; + } this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon this.setupDocTemplates(doc); // sets up the template menu of templates this.setupRightSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 3b93b028e..2cb910f8b 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -1036,11 +1036,28 @@ export class SearchBox extends ViewBoxBaseComponent{Doc.CurrentUserEmail}
StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg" - style={{ color: "black", left: 24, padding: 1, position: "relative" }} /> - + style={{ color: "black", padding: 1, left: 35, position: "relative" }} /> + + { e.stopPropagation(); SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined); }} + onClick={action(() => { + this.filter = !this.filter && !this.scale; + if (this.filter === true && this.currentSelectedCollection !== undefined) { + this.currentSelectedCollection.props.Document._searchDocs = new List(this.docsforfilter); + this.currentSelectedCollection.props.Document._docFilters = new List(Cast(this.props.Document._docFilters, listSpec("string"), [])); + this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document; + } + else if (this.filter === false && this.currentSelectedCollection !== undefined) { + this.currentSelectedCollection.props.Document._searchDocs = new List([]); + this.currentSelectedCollection.props.Document._docFilters = undefined; + this.props.Document.selectedDoc = undefined; + } + } + )} /> + style={{ padding: 1, paddingLeft: 20, paddingRight: 20, color: "black", height: 20, width: 250 }} />
-
- -
- ; + ; } collectionRef = React.createRef(); @@ -304,8 +306,8 @@ export class SearchItem extends ViewBoxBaseComponent this.rootDoc!.searchMatch = true, 0); - this.rootDoc.searchIndex=NumCast(this.rootDoc.searchIndex); - this.length=NumCast(this.rootDoc!.length); + this.rootDoc.searchIndex = NumCast(this.rootDoc.searchIndex); + this.length = NumCast(this.rootDoc!.length); } @action @@ -317,12 +319,12 @@ export class SearchItem extends ViewBoxBaseComponent this.rootDoc!.searchMatch2 = true, 0); - this.rootDoc.searchIndex=NumCast(this.rootDoc.searchIndex); + this.rootDoc.searchIndex = NumCast(this.rootDoc.searchIndex); - this.length=NumCast(this.rootDoc!.length); + this.length = NumCast(this.rootDoc!.length); } - @observable length:number|undefined = 0; + @observable length: number | undefined = 0; highlightDoc = (e: React.PointerEvent) => { if (this.rootDoc!.type === DocumentType.LINK) { @@ -402,9 +404,9 @@ export class SearchItem extends ViewBoxBaseComponent this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate: undefined; + childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate : undefined; getTransform = () => { - return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight + return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight } panelHeight = () => { return this.props.PanelHeight(); @@ -413,60 +415,60 @@ export class SearchItem extends ViewBoxBaseComponent{ - if (StrCast(this.rootDoc.bucketfield)!=="results"){ - SearchBox.Instance._icons=[StrCast(this.rootDoc.bucketfield)]; - SearchBox.Instance._icons=SearchBox.Instance._icons; - } - else{ - SearchBox.Instance._icons=SearchBox.Instance._allIcons; - } - SearchBox.Instance.expandedBucket= true; - SearchBox.Instance.submitSearch(); - }) + newsearch() { + runInAction(() => { + if (StrCast(this.rootDoc.bucketfield) !== "results") { + SearchBox.Instance._icons = [StrCast(this.rootDoc.bucketfield)]; + SearchBox.Instance._icons = SearchBox.Instance._icons; + } + else { + SearchBox.Instance._icons = SearchBox.Instance._allIcons; + } + SearchBox.Instance.submitSearch(); + }) } - + @action - returnLines(){ - if ((Cast(this.rootDoc.lines, listSpec("string")))!.length>1){ - if (!this._displayLines) { - console.log(Cast(this.rootDoc.lines, listSpec("string"))); - return
{ - this._displayLines = !this._displayLines; - //this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); - })} - //onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} - > - {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)} -
;; + returnLines() { + if ((Cast(this.rootDoc.lines, listSpec("string")))!.length > 1) { + if (!this._displayLines) { + console.log(Cast(this.rootDoc.lines, listSpec("string"))); + return
{ + this._displayLines = !this._displayLines; + //this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); + })} + //onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} + > + {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)} +
;; + } } } - } - + //this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); @observable _displayLines: boolean = true; - returnButtons(){ + returnButtons() { return
-
{ this.rootDoc!.type === DocumentType.PDF? this._displayLines = !this._displayLines : null; - })}> - {this.rootDoc!.type === DocumentType.PDF?"Expand Lines": null} - {NumCast(this.rootDoc!.length)>1?`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`: null} - - -
-
-
- {this.returnLines()} -
-
+
{ + this.rootDoc!.type === DocumentType.PDF ? this._displayLines = !this._displayLines : null; + })}> + {this.rootDoc!.type === DocumentType.PDF ? "Expand Lines" : null} + {NumCast(this.rootDoc!.length) > 1 ? `Instance ${NumCast(this.rootDoc.searchIndex) === 0 ? NumCast(this.rootDoc.length) : NumCast(this.rootDoc.searchIndex)} of ${NumCast(this.rootDoc.length)}` : null} + + +
+
+
+ {this.returnLines()} +
+
} @@ -476,79 +478,79 @@ export class SearchItem extends ViewBoxBaseComponent - +
} - if (this.rootDoc.isBucket === true){ - this.props.Document._viewType=CollectionViewType.Stacking; - this.props.Document._chromeStatus='disabled'; - this.props.Document._height=this.rootDoc._height; + if (this.rootDoc.isBucket === true) { + this.props.Document._viewType = CollectionViewType.Stacking; + this.props.Document._chromeStatus = 'disabled'; + this.props.Document._height = this.rootDoc._height; return
- -
} - else if (this.rootDoc.isBucket === false){ - this.props.Document._chromeStatus='disabled'; - return
+ else if (this.rootDoc.isBucket === false) { + this.props.Document._chromeStatus = 'disabled'; + return
-
-
No Search Results
-
+
+
No Search Results
+
} else { - return
-
-
-
-
{StrCast(this.rootDoc.title)}
-
- {this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}
-
- {NumCast(this.rootDoc.length) > 1 || this.rootDoc!.type === DocumentType.PDF?this.returnButtons(): null} + return
+
+
+
+
{StrCast(this.rootDoc.title)}
+
+ {this.rootDoc.highlighting ? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "" : null}
+
+ {NumCast(this.rootDoc.length) > 1 || this.rootDoc!.type === DocumentType.PDF ? this.returnButtons() : null} +
+
+
+
+
{this.DocumentIcon()}
-
-
-
-
{this.DocumentIcon()}
-
- {/*
+ {/*
{(doc1 instanceof Doc && doc2 instanceof Doc) && this.rootDoc!.type === DocumentType.LINK ? : this.contextButton}
*/} -
-
; +
+
; } } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 477e16bce94bcfb52b0ffeddb1ab56cb174167c5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 4 Aug 2020 12:56:04 -0400 Subject: important server change that fixes promises not being fulfillled when documents already existed. --- src/client/DocServer.ts | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src') diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index 6fa8cf909..2fe3e9778 100644 --- a/src/client/DocServer.ts +++ b/src/client/DocServer.ts @@ -372,6 +372,9 @@ export namespace DocServer { } else if (cached instanceof Promise) { proms.push(cached as any); } + } else if (field) { + proms.push(_cache[field.id] as any); + fieldMap[field.id] = field; } } }); -- cgit v1.2.3-70-g09d2 From 840d7f00989a33dd0fd9a48a3c2076433340d3ac Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 4 Aug 2020 12:56:15 -0400 Subject: cleanup of searchbox variables. --- src/client/views/search/SearchBox.tsx | 34 ++++++++++++---------------------- 1 file changed, 12 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index b7f7af244..c8a1c4e8e 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -206,13 +206,11 @@ export class SearchBox extends ViewBoxBaseComponent { this.expandedBucket = false }); // } - if (StrCast(this.layoutDoc._searchString) !== "") { - console.log("OPEN"); - runInAction(() => { this.open = true }); + if (StrCast(this.layoutDoc._searchString) !== "" || !this.searchFullDB) { + runInAction(() => this.open = true); } else { - console.log("CLOSE"); - runInAction(() => { this.open = false }); + runInAction(() => this.open = false); } this.submitSearch(); @@ -356,7 +354,6 @@ export class SearchBox extends ViewBoxBaseComponent { if (d.data != undefined) { - let newdocs = DocListCast(d.data); - newdocs.forEach((newdoc) => { - newarray.push(newdoc); - - }); + newarray.push(...DocListCast(d.data)); } - let hlights: string[] = []; const protos = Doc.GetAllPrototypes(d); - let proto = protos[protos.length - 1]; protos.forEach(proto => { Object.keys(proto).forEach(key => { // console.log(key, d[key]); @@ -403,7 +394,6 @@ export class SearchBox extends ViewBoxBaseComponent(docsforFilter); } this._numTotalResults = found.length; @@ -504,7 +494,7 @@ export class SearchBox extends ViewBoxBaseComponent { this._resultsOpen = true; this._searchbarOpen = true; @@ -515,7 +505,7 @@ export class SearchBox extends ViewBoxBaseComponent { e.stopPropagation(); SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined); }} onClick={action(() => { - this.filter = !this.filter && !this.scale; + this.filter = !this.filter && !this.searchFullDB; if (this.filter === true && this.currentSelectedCollection !== undefined) { this.currentSelectedCollection.props.Document._searchDocs = new List(this.docsforfilter); this.currentSelectedCollection.props.Document._docFilters = new List(Cast(this.props.Document._docFilters, listSpec("string"), [])); @@ -1070,9 +1060,9 @@ export class SearchBox extends ViewBoxBaseComponent