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: 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 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: 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 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 53713fc7ab10257d1117193941cda2f3e0cabcf5 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Sun, 19 Jul 2020 04:44:51 +0900 Subject: added control points --- src/client/util/InteractionUtils.tsx | 9 +++ src/client/views/GestureOverlay.tsx | 17 +++++ src/client/views/InkingStroke.tsx | 82 ++++++++++++++++++++++ .../collectionFreeForm/FormatShapePane.tsx | 59 ++++++++++++++++ 4 files changed, 167 insertions(+) (limited to 'src') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 07adbb8b1..1d7655748 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -99,6 +99,15 @@ export namespace InteractionUtils { if (shape) { //if any of the shape are true pts = makePolygon(shape, points); } + else if (points.length > 9 && points[3].X === points[4].X && points[7].X === points[8].X) { + for (var i = 0; i < points.length; i += 4) { + const array = [[points[i].X, points[i].Y], [points[i + 1].X, points[i + 1].Y], [points[i + 2].X, points[i + 2].Y], [points[i + 3].X, points[i + 3].Y]]; + for (var t = 0; t < 1; t += 0.01) { + const point = beziercurve(t, array); + pts.push({ X: point[0], Y: point[1] }); + } + } + } else if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y === points[0].Y) { //pointer is up (first and last points are the same) const newPoints = points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]); diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index a48b7b673..90d8b370e 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -23,6 +23,7 @@ import HorizontalPalette from "./Palette"; import { Touchable } from "./Touchable"; import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; import InkOptionsMenu from "./collections/collectionFreeForm/InkOptionsMenu"; +import * as fitCurve from 'fit-curve'; @observer export default class GestureOverlay extends Touchable { @@ -632,6 +633,22 @@ export default class GestureOverlay extends Touchable { // if no gesture (or if the gesture was unsuccessful), "dry" the stroke into an ink document if (!actionPerformed) { + const newPoints = this._points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]); + newPoints.pop(); + const controlPoints: { X: number, Y: number }[] = []; + + const bezierCurves = fitCurve(newPoints, 10); + for (const curve of bezierCurves) { + + controlPoints.push({ X: curve[0][0], Y: curve[0][1] }); + controlPoints.push({ X: curve[1][0], Y: curve[1][1] }); + controlPoints.push({ X: curve[2][0], Y: curve[2][1] }); + controlPoints.push({ X: curve[3][0], Y: curve[3][1] }); + + + } + this._points = controlPoints; + this.dispatchGesture(GestureUtils.Gestures.Stroke); } this._points = []; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index abc698e62..974921be8 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -17,6 +17,7 @@ import { Scripting } from "../util/Scripting"; import { Doc } from "../../fields/Doc"; import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; import { action } from "mobx"; +import { setupMoveUpEvents } from "../../Utils"; library.add(faPaintBrush); @@ -45,6 +46,38 @@ export class InkingStroke extends ViewBoxBaseComponent { + setupMoveUpEvents(this, e, this.onControlMove, this.onControlup, (e) => { }); + this._prevX = e.clientX; + this._prevY = e.clientY; + this._controlNum = i; + } + + @action + changeCurrPoint = (i: number) => { + FormatShapePane.Instance._currPoint = i; + } + + @action + onControlMove = (e: PointerEvent, down: number[]): boolean => { + const xDiff = this._prevX - e.clientX; + const yDiff = this._prevY - e.clientY; + FormatShapePane.Instance.control(xDiff, yDiff, this._controlNum); + this._prevX = e.clientX; + this._prevY = e.clientY; + return false; + } + + onControlup = (e: PointerEvent) => { + this._prevX = 0; + this._prevY = 0; + this._controlNum = 0; + } + render() { TraceMobx(); const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? []; @@ -69,6 +102,51 @@ export class InkingStroke extends ViewBoxBaseComponent 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"), "none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblepainted" : "none", false, true); + + const controlPoints: { X: number, Y: number, I: number }[] = []; + const handlePoints: { X: number, Y: number, I: number, dot1: number, dot2: number }[] = []; + const handleLine: { X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, dot1: number, dot2: number }[] = []; + + if (data.length > 5) { + for (var i = 0; i <= data.length - 4; i += 4) { + controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); + controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 }); + handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 }); + handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 }); + } + handleLine.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 }); + for (var i = 2; i < data.length - 2; i += 4) { + handleLine.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 }); + } + handleLine.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 }); + + + } + const controls = controlPoints.map((pts, i) => + + + { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll" /> + ); + const handles = handlePoints.map((pts, i) => + + + this.onControlDown(e, pts.I)} pointerEvents="all" cursor="all-scroll" display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} /> + ); + const handleLines = handleLine.map((pts, i) => + + + + + + ); + + return ( {hpoints} {points} + {FormatShapePane.Instance._controlBtn && this.props.isSelected() ? controls : ""} + {FormatShapePane.Instance._controlBtn && this.props.isSelected() ? handles : ""} + {FormatShapePane.Instance._controlBtn && this.props.isSelected() ? handleLines : ""} + ); } diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 9d9ce7f36..a2dc241c0 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -28,6 +28,9 @@ export default class FormatShapePane extends AntimodeMenu { @observable private _lock = false; @observable private _fillBtn = false; @observable private _lineBtn = false; + @observable _controlBtn = false; + @observable private _controlPoints: { X: number, Y: number }[] = []; + @observable _currPoint = -1; getField(key: string) { return this.selectedInk?.reduce((p, i) => @@ -158,6 +161,51 @@ export default class FormatShapePane extends AntimodeMenu { })); } + @undoBatch + @action + control = (xDiff: number, yDiff: number, controlNum: number) => { + this.selectedInk?.forEach(action(inkView => { + if (this.selectedInk?.length === 1) { + const doc = Document(inkView.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + + const newPoints: { X: number, Y: number }[] = []; + const order = controlNum % 4; + for (var i = 0; i < ink.length; i++) { + if (controlNum === i || + (order === 0 && i === controlNum + 1) || + (order === 0 && controlNum !== 0 && i === controlNum - 2) || + (order === 0 && controlNum !== 0 && i === controlNum - 1) || + (order === 3 && i === controlNum - 1) || + (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 1) || + (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2)) { + newPoints.push({ X: ink[i].X - (xDiff), Y: ink[i].Y - (yDiff) }); + } + else { + newPoints.push({ X: ink[i].X, Y: ink[i].Y }); + } + } + const oldx = doc.x; + const oldy = doc.y; + doc.data = new InkField(newPoints); + const xs2 = newPoints.map(p => p.X); + const ys2 = newPoints.map(p => p.Y); + const left2 = Math.min(...xs2); + const top2 = Math.min(...ys2); + const right2 = Math.max(...xs2); + const bottom2 = Math.max(...ys2); + doc._height = (bottom2 - top2) * inkView.props.ScreenToLocalTransform().Scale; + doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; + doc.x = oldx; + doc.y = oldy; + } + } + } + })); + } + colorPicker(setter: (color: string) => {}) { return
@@ -193,6 +241,14 @@ export default class FormatShapePane extends AntimodeMenu { ; } + controlPointsButton() { + return <> + +

+ ; + } @computed get fillButton() { return this.colorButton(this.colorFil, () => this._fillBtn = !this._fillBtn); } @computed get lineButton() { return this.colorButton(this.colorStk, () => this._lineBtn = !this._lineBtn); } @@ -206,6 +262,8 @@ export default class FormatShapePane extends AntimodeMenu { @computed get XpsInput() { return this.inputBox("Xps", this.shapeXps, (val: string) => this.shapeXps = val); } @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); } + @computed get controlPoints() { return this.controlPointsButton(); } + @computed get propertyGroupItems() { const fillCheck =
this.unFilled = true))} /> @@ -260,6 +318,7 @@ export default class FormatShapePane extends AntimodeMenu {

Rotation {this.rotInput}

+ Edit Points {this.controlPoints}
; const positionCheck =
-- cgit v1.2.3-70-g09d2 From ac413fb11720bb6704a9049e5d21fe02aae197b9 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Mon, 20 Jul 2020 17:17:52 +0900 Subject: fixed control points --- src/client/util/InteractionUtils.tsx | 23 ++++++++++- src/client/views/GestureOverlay.tsx | 77 +++++++++++++++++++++++++++++++++++- src/client/views/InkingStroke.tsx | 20 ++++++---- 3 files changed, 109 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 1d7655748..31b2a56e6 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -99,8 +99,8 @@ export namespace InteractionUtils { if (shape) { //if any of the shape are true pts = makePolygon(shape, points); } - else if (points.length > 9 && points[3].X === points[4].X && points[7].X === points[8].X) { - for (var i = 0; i < points.length; i += 4) { + else if (points.length >= 5 && points[3].X === points[4].X) { + for (var i = 0; i < points.length - 3; i += 4) { const array = [[points[i].X, points[i].Y], [points[i + 1].X, points[i + 1].Y], [points[i + 2].X, points[i + 2].Y], [points[i + 3].X, points[i + 3].Y]]; for (var t = 0; t < 1; t += 0.01) { const point = beziercurve(t, array); @@ -223,10 +223,28 @@ export namespace InteractionUtils { points.push({ X: left, Y: top }); return points; case "triangle": + // points.push({ X: left, Y: bottom }); + // points.push({ X: right, Y: bottom }); + // points.push({ X: (right + left) / 2, Y: top }); + // points.push({ X: left, Y: bottom }); + + points.push({ X: left, Y: bottom }); points.push({ X: left, Y: bottom }); + + points.push({ X: right, Y: bottom }); points.push({ X: right, Y: bottom }); + points.push({ X: right, Y: bottom }); + points.push({ X: right, Y: bottom }); + + points.push({ X: (right + left) / 2, Y: top }); points.push({ X: (right + left) / 2, Y: top }); + points.push({ X: (right + left) / 2, Y: top }); + points.push({ X: (right + left) / 2, Y: top }); + + points.push({ X: left, Y: bottom }); points.push({ X: left, Y: bottom }); + + return points; case "circle": const centerX = (right + left) / 2; @@ -262,6 +280,7 @@ export namespace InteractionUtils { // points.push({ X: x2, Y: y2 }); // return points; case "line": + points.push({ X: left, Y: top }); points.push({ X: right, Y: bottom }); return points; diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 90d8b370e..2eec8ed6a 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -703,18 +703,53 @@ export default class GestureOverlay extends Touchable { //must be (points[0].X,points[0]-1) case "rectangle": this._points.push({ X: left, Y: top }); + this._points.push({ X: left, Y: top }); + + this._points.push({ X: right, Y: top }); this._points.push({ X: right, Y: top }); + this._points.push({ X: right, Y: top }); + this._points.push({ X: right, Y: top }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + + this._points.push({ X: left, Y: bottom }); + this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); + this._points.push({ X: left, Y: bottom }); + + this._points.push({ X: left, Y: top }); this._points.push({ X: left, Y: top }); - this._points.push({ X: left, Y: top - 1 }); + // this._points.push({ X: left, Y: top }); + // this._points.push({ X: left, Y: top }); + + // this._points.push({ X: left, Y: top - 1 }); break; case "triangle": + // this._points.push({ X: left, Y: bottom }); + // this._points.push({ X: right, Y: bottom }); + // this._points.push({ X: (right + left) / 2, Y: top }); + // this._points.push({ X: left, Y: bottom }); + // this._points.push({ X: left, Y: bottom - 1 }); + this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + + this._points.push({ X: (right + left) / 2, Y: top }); + this._points.push({ X: (right + left) / 2, Y: top }); this._points.push({ X: (right + left) / 2, Y: top }); + this._points.push({ X: (right + left) / 2, Y: top }); + + this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); - this._points.push({ X: left, Y: bottom - 1 }); + + break; case "circle": const centerX = (right + left) / 2; @@ -731,10 +766,48 @@ export default class GestureOverlay extends Touchable { } this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top }); this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top - 1 }); + // this._points.push({ X: centerX, Y: top }); + // this._points.push({ X: centerX + radius / 2, Y: top }); + + // this._points.push({ X: right, Y: top + radius / 2 }); + // this._points.push({ X: right, Y: top + radius }); + // this._points.push({ X: right, Y: top + radius }); + // this._points.push({ X: right, Y: bottom - radius / 2 }); + + // this._points.push({ X: right - radius / 2, Y: bottom }); + // this._points.push({ X: right - radius, Y: bottom }); + // this._points.push({ X: right - radius, Y: bottom }); + // this._points.push({ X: left + radius / 2, Y: bottom }); + + // this._points.push({ X: left, Y: bottom - radius / 2 }); + // this._points.push({ X: left, Y: bottom - radius }); + // this._points.push({ X: left, Y: bottom - radius }); + // this._points.push({ X: left, Y: top + radius / 2 }); + + // this._points.push({ X: left + radius / 2, Y: top }); + // this._points.push({ X: left + radius, Y: top }); + + + + + + + break; case "line": this._points.push({ X: left, Y: top }); + + this._points.push({ X: left, Y: top }); + + // this._points.push({ X: right, Y: bottom }); + // this._points.push({ X: right, Y: bottom }); + // this._points.push({ X: right, Y: bottom }); + // this._points.push({ X: right, Y: bottom }); + + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + // this._points.push({ X: right, Y: bottom - 1 }); break; case "arrow": diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 974921be8..22c89b6da 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -94,10 +94,12 @@ export class InkingStroke extends ViewBoxBaseComponent 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"), @@ -106,42 +108,46 @@ export class InkingStroke extends ViewBoxBaseComponent 5) { + if (data.length >= 4) { for (var i = 0; i <= data.length - 4; i += 4) { controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 }); handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 }); handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 }); } + handleLine.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 }); - for (var i = 2; i < data.length - 2; i += 4) { + for (var i = 2; i < data.length - 4; i += 4) { + handleLine.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 }); + } handleLine.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 }); } + const dotsize = String(Math.min(width * scaleX, height * scaleY) / 40); + const controls = controlPoints.map((pts, i) => - { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll" /> ); const handles = handlePoints.map((pts, i) => - this.onControlDown(e, pts.I)} pointerEvents="all" cursor="all-scroll" display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} /> ); const handleLines = handleLine.map((pts, i) => ); -- 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 4198c0fbcf8cb705bd09d9ba4a2d1c18590ff1bf Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 20 Jul 2020 18:25:26 -0500 Subject: framework for toolbar --- src/client/views/MainView.scss | 39 ++++++++++++++++++++ src/client/views/MainView.tsx | 83 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 120 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index e1ddbc533..556d26f6e 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -114,6 +114,45 @@ } } +.mainView-menuPanel { + + max-width: 80px; + background-color: rgb(105, 105, 105); + padding: 20px; + + .mainView-menuPanel-button { + width: 50px; + height: 50px; + padding: 10px; + pointer-events: all; + touch-action: none; + border-radius: inherit; + background: black; + border-radius: 100%; + transform-origin: top left; + margin-bottom: 15px; + margin-top: 5px; + + .mainView-menuPanel-button-label { + background: gray; + color: white; + margin-left: -10px; + border-radius: 8px; + width: 60px; + position: absolute; + text-align: center; + font-size: 8px; + margin-top: 4px; + letter-spacing: normal; + } + + svg { + width: 95% !important; + height: 95%; + } + } +} + .mainView-mainDiv { width: 100%; height: 100%; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 46eeac77a..944f4c8d4 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -8,7 +8,7 @@ import { 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, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -66,6 +66,7 @@ import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager'; import CollectionMenu from './collections/CollectionMenu'; +import { Tooltip } from '@material-ui/core'; @observer export class MainView extends React.Component { @@ -150,7 +151,7 @@ export class MainView extends React.Component { 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, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper); + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench); this.initEventListeners(); this.initAuthenticationRouters(); } @@ -466,6 +467,83 @@ export class MainView extends React.Component {
; } + @computed get menuPanel() { + return
+ Open Workspaces
}> + + + + Open Catalog
}> + + + + Open Recently Deleted
}> + + + + Import
}> + + + + Open Sharing Preferences
}> + + + + Open Tools
}> + + +
; + + } + @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); @@ -477,6 +555,7 @@ export class MainView extends React.Component { height, width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%" }} > + {this.menuPanel}
Date: Tue, 21 Jul 2020 02:21:33 -0500 Subject: tools in stripmenu working --- src/client/util/CurrentUserUtils.ts | 22 ++++- src/client/views/MainView.scss | 23 +++-- src/client/views/MainView.tsx | 190 ++++++++++++++++++++---------------- 3 files changed, 139 insertions(+), 96 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 4b8c342f1..8c551d6ea 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -37,6 +37,12 @@ export class CurrentUserUtils { @observable public static GuestWorkspace: Doc | undefined; @observable public static GuestMobile: Doc | undefined; + @observable public static toolsBtn: any | undefined; + @observable public static libraryBtn: any | undefined; + @observable public static searchBtn: any | undefined; + + @observable public static toolsStack: any | undefined; + // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { if (doc["template-button-query"] === undefined) { @@ -593,6 +599,8 @@ export class CurrentUserUtils { const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc); const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc); + doc["tabs-button-tools"] = undefined; + if (doc.myCreators === undefined) { doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], { title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, @@ -611,6 +619,9 @@ export class CurrentUserUtils { const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], { _width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack", forceActive: true })) as any as Doc; + + CurrentUserUtils.toolsStack = toolsStack; + doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", @@ -624,6 +635,7 @@ export class CurrentUserUtils { })); } (doc["tabs-button-tools"] as Doc).sourcePanel; // prefetch sourcePanel + return doc["tabs-button-tools"] as Doc; } @@ -720,17 +732,17 @@ 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 libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer); - const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); + CurrentUserUtils.toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer); + CurrentUserUtils.libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer); + CurrentUserUtils.searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); // 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], { + doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([CurrentUserUtils.libraryBtn, CurrentUserUtils.searchBtn, CurrentUserUtils.toolsBtn], { _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode", title: "sidebar btn row stack", backgroundColor: "dimGray", })); - (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn }); + (CurrentUserUtils.toolsBtn.onClick as ScriptField).script.run({ this: CurrentUserUtils.toolsBtn }); } } diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 556d26f6e..957aa6cfe 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -116,9 +116,10 @@ .mainView-menuPanel { - max-width: 80px; + max-width: 95px; background-color: rgb(105, 105, 105); padding: 20px; + padding-right: 50px; .mainView-menuPanel-button { width: 50px; @@ -130,20 +131,30 @@ background: black; border-radius: 100%; transform-origin: top left; - margin-bottom: 15px; + margin-bottom: 23px; margin-top: 5px; + margin-right: 25px; + .mainView-menuPanel-button-label { - background: gray; - color: white; + background: rgb(168, 168, 168); + color: black; margin-left: -10px; border-radius: 8px; - width: 60px; + width: 65px; position: absolute; text-align: center; - font-size: 8px; + font-size: 9.5px; margin-top: 4px; letter-spacing: normal; + padding: 3px; + //margin-bottom: 23px; + } + + .mainView-menuPanel-button-icon { + width: 35px; + height: 35px; + padding: 5px; } svg { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 944f4c8d4..287497df0 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -88,6 +88,8 @@ export class MainView extends React.Component { @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; } + @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; + public isPointerDown = false; componentDidMount() { @@ -396,8 +398,7 @@ export class MainView extends React.Component { mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); @computed get flyout() { - const sidebarContent = this.userDoc?.["tabs-panelContainer"]; - if (!(sidebarContent instanceof Doc)) { + if (!(this.sidebarContent instanceof Doc)) { return (null); } return
@@ -428,9 +429,10 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} />
+
-
- - -
+
+
+ +
{this.docButtons}
; @@ -469,86 +471,104 @@ export class MainView extends React.Component { @computed get menuPanel() { return
- Open Workspaces
}> - - - - Open Catalog
}> - - - - Open Recently Deleted
}> - - - - Import
}> - - - - Open Sharing Preferences
}> - - - - Open Tools
}> - - + {/* Open Workspaces
}> */} + + {/* */} + + {/* Open Catalog
}> */} + + {/* */} + + {/* Open Recently Deleted
}> */} + + {/* */} + + {/* Import
}> */} + + {/* */} + + {/* Open Sharing Preferences
}> */} + + {/* */} + + {/* Open Tools
}> */} + + {/* */}
; + } + @action + selectPanel = (str: string) => { + //this.sidebarContent = null; + + if (str === "tools") { + // this.userDoc?.["tabs-button-tools"] = undefined; + CurrentUserUtils.toolsBtn; + this.sidebarContent.proto = CurrentUserUtils.toolsStack; + } else if (str === "catalog") { + //this.sidebarContent = CurrentUserUtils.libraryBtn; + } } @computed get mainContent() { - const sidebar = this.userDoc?.["tabs-panelContainer"]; const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; - return !this.userDoc || !(sidebar instanceof Doc) ? (null) : ( + return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : (
+ style={{ backgroundColor: this.defaultBackgroundColors(this.sidebarContent) }}> Date: Tue, 21 Jul 2020 12:39:01 -0500 Subject: added functionality for all sidebar buttons except sharing and import --- src/client/util/CurrentUserUtils.ts | 31 +++++++++++++++++++++++++++++++ src/client/views/MainView.tsx | 32 +++++++++++++++++++++++--------- 2 files changed, 54 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 8c551d6ea..90e0c159e 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -42,6 +42,9 @@ export class CurrentUserUtils { @observable public static searchBtn: any | undefined; @observable public static toolsStack: any | undefined; + @observable public static workspaceStack: any | undefined; + @observable public static catalogStack: any | undefined; + @observable public static closedStack: any | undefined; // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { @@ -641,6 +644,7 @@ export class CurrentUserUtils { static setupWorkspaces(doc: Doc) { // setup workspaces library item + doc.myWorkspaces === undefined; if (doc.myWorkspaces === undefined) { doc.myWorkspaces = new PrefetchProxy(Docs.Create.TreeDocument([], { title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, @@ -650,19 +654,38 @@ export class CurrentUserUtils { (doc.myWorkspaces as Doc).contextMenuScripts = new List([newWorkspace!]); (doc.myWorkspaces as Doc).contextMenuLabels = new List(["Create New Workspace"]); + const workspaces = doc.myWorkspaces as Doc; + + CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], { + title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + return doc.myWorkspaces as Doc; } static setupCatalog(doc: Doc) { + doc.myCatalog === undefined; if (doc.myCatalog === undefined) { doc.myCatalog = new PrefetchProxy(Docs.Create.SchemaDocument([], [], { title: "CATALOG", _height: 1000, _fitWidth: true, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false, childDropAction: "alias", targetDropAction: "same", stayInCollection: true, })); } + + const catalog = doc.myCatalog as Doc; + + CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], { + title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + return doc.myCatalog as Doc; } static setupRecentlyClosed(doc: Doc) { // setup Recently Closed library item + doc.myRecentlyClosed === undefined; if (doc.myRecentlyClosed === undefined) { doc.myRecentlyClosed = new PrefetchProxy(Docs.Create.TreeDocument([], { title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, stayInCollection: true, @@ -674,6 +697,14 @@ export class CurrentUserUtils { (doc.myRecentlyClosed as Doc).contextMenuScripts = new List([clearAll!]); (doc.myRecentlyClosed as Doc).contextMenuLabels = new List(["Clear All"]); + const recentlyClosed = doc.myRecentlyClosed as Doc; + + CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], { + title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + return doc.myRecentlyClosed as Doc; } // setup the Library button which will display the library panel. This panel includes a collection of workspaces, documents, and recently closed views diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 287497df0..c9da29cba 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -89,6 +89,7 @@ export class MainView extends React.Component { @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; + @observable public panelContent: string = "none"; public isPointerDown = false; @@ -506,7 +507,7 @@ export class MainView extends React.Component { boxShadow: "4px 4px 12px black", marginBottom: "30px" }}> - +
Recently Deleted
{/* */} @@ -554,14 +555,27 @@ export class MainView extends React.Component { @action selectPanel = (str: string) => { - //this.sidebarContent = null; - - if (str === "tools") { - // this.userDoc?.["tabs-button-tools"] = undefined; - CurrentUserUtils.toolsBtn; - this.sidebarContent.proto = CurrentUserUtils.toolsStack; - } else if (str === "catalog") { - //this.sidebarContent = CurrentUserUtils.libraryBtn; + + if (this.panelContent === str) { + this.sidebarContent = null; + this.panelContent = "none"; + MainView.Instance._flyoutTranslate = false; + } else { + MainView.expandFlyout(); + if (str === "tools") { + CurrentUserUtils.toolsBtn; + this.sidebarContent.proto = CurrentUserUtils.toolsStack; + } else if (str === "workspace") { + this.sidebarContent.proto = CurrentUserUtils.workspaceStack; + } else if (str === "catalog") { + this.sidebarContent.proto = CurrentUserUtils.catalogStack; + } else if (str === "deleted") { + this.sidebarContent.proto = CurrentUserUtils.closedStack; + } else if (str === "upload") { + this.sidebarContent.proto = "uploads"; + } else if (str === "sharing") { + this.sidebarContent.proto = "sharing"; + } } } -- 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 25ec1ef48c36ad91dccc408fa6075f0915c36118 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 21 Jul 2020 17:18:07 -0500 Subject: finished left side UI changes --- src/client/util/CurrentUserUtils.ts | 11 +- src/client/views/MainView.scss | 53 ++++++++ src/client/views/MainView.tsx | 158 +++++++++++------------- src/client/views/collections/CollectionView.tsx | 3 +- 4 files changed, 135 insertions(+), 90 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 90e0c159e..c98bc0b01 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -620,7 +620,7 @@ export class CurrentUserUtils { if (doc["tabs-button-tools"] === undefined) { const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], { - _width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack", forceActive: true + _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, title: "tools stack", forceActive: true })) as any as Doc; CurrentUserUtils.toolsStack = toolsStack; @@ -633,6 +633,7 @@ export class CurrentUserUtils { dragFactory: toolsStack, removeDropProperties: new List(["lockedPosition"]), stayInCollection: true, + hideFilterView: true, targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"), })); @@ -658,7 +659,7 @@ export class CurrentUserUtils { CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, + treeViewTruncateTitleWidth: 150, hideFilterView: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -677,7 +678,7 @@ export class CurrentUserUtils { CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, + treeViewTruncateTitleWidth: 150, hideFilterView: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -701,7 +702,7 @@ export class CurrentUserUtils { CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, + treeViewTruncateTitleWidth: 150, hideFilterView: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -716,7 +717,7 @@ export class CurrentUserUtils { if (doc["tabs-button-library"] === undefined) { const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], { title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, + treeViewTruncateTitleWidth: 150, hideFilterView: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({ diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 957aa6cfe..dfd5a993e 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -162,6 +162,59 @@ height: 95%; } } + + .mainView-menuPanel-bottomButton { + width: 50px; + height: 50px; + padding: 10px; + pointer-events: all; + touch-action: none; + border-radius: inherit; + background: dimgray; + background-color: dimgray; + border-radius: 100%; + transform-origin: top left; + margin-bottom: 23px; + margin-top: 5px; + + margin-right: 25px; + + .mainView-menuPanel-bottomButton-label { + background: dimgray; + color: black; + margin-left: -10px; + border-radius: 8px; + width: 65px; + position: absolute; + text-align: center; + font-size: 9.5px; + margin-top: 2px; + letter-spacing: normal; + padding: 3px; + //margin-bottom: 23px; + } + + .mainView-menuPanel-bottomButton-icon { + width: 50px; + height: 50px; + color: black; + } + + svg { + width: 95% !important; + height: 95%; + } + } +} + +.mainView-searchPanel { + width: 100%; + height: 33px; + background-color: black; + color: white; + text-align: center; + vertical-align: middle; + padding-top: 6px; } .mainView-mainDiv { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c9da29cba..95301b900 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -8,7 +8,7 @@ import { 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, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -79,7 +79,7 @@ export class MainView extends React.Component { @observable private _panelWidth: number = 0; @observable private _panelHeight: number = 0; - @observable private _flyoutTranslate: boolean = true; + @observable private _flyoutTranslate: boolean = false; @observable public flyoutWidth: number = 250; private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } @@ -154,7 +154,7 @@ export class MainView extends React.Component { 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, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench); + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog); this.initEventListeners(); this.initAuthenticationRouters(); } @@ -402,77 +402,46 @@ export class MainView extends React.Component { if (!(this.sidebarContent instanceof Doc)) { return (null); } - return
-
- -
- -
- -
-
+ return
+ +
; + {/*
-
- {this.docButtons} -
; +
*/} + {/* {this.docButtons} */ } } @computed get menuPanel() { return
- {/* Open Workspaces
}> */} - {/* */} - {/* Open Catalog
}> */} - {/* */} - {/* Open Recently Deleted
}> */} - {/* */} - {/* Import
}> */} - {/* */} - {/* Open Sharing Preferences
}> */} - {/* */} - {/* Open Tools
}> */} - {/* */} + + + +
; } @@ -592,7 +572,8 @@ export class MainView extends React.Component { {this.menuPanel}
-
-
+
: null}
{this.flyout} - {this.expandButton} + {MainView.Instance._flyoutTranslate ? this.expandButton : null}
- {this.dockingContent} + {/* {this.dockingContent} */}
); } @@ -623,7 +604,7 @@ export class MainView extends React.Component { }); @computed get expandButton() { - return !this._flyoutTranslate ? (
) : (null); + return !this._flyoutTranslate ? (
) : (null); } addButtonDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", doc), true); @@ -717,8 +698,16 @@ export class MainView extends React.Component { ; } + @computed get search() { + return
+
{Doc.CurrentUserEmail}
+
SEARCH GOES HERE
+
; + } + render() { return (
+ {this.inkResources} @@ -727,6 +716,7 @@ export class MainView extends React.Component { + {/* {this.search} */} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index c1da23470..21b0045d5 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -80,6 +80,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 { @@ -559,7 +560,7 @@ export class CollectionView extends Touchable } -- cgit v1.2.3-70-g09d2 From 2918b0d3cdadce31d3e9fb20fb75c3bdb4576a90 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 21 Jul 2020 17:43:07 -0500 Subject: bug fix --- src/client/views/MainView.tsx | 61 ++++++++++++++++++++++--------------------- 1 file changed, 31 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 7c991c42a..845a61d32 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -402,34 +402,35 @@ export class MainView extends React.Component { if (!(this.sidebarContent instanceof Doc)) { return (null); } - return
- -
; - {/*
+ return
+
+ +
+ {/*
@@ -437,7 +438,7 @@ export class MainView extends React.Component {
*/} - {/* {this.docButtons} */ } + {this.docButtons}
; } @computed get menuPanel() { @@ -592,7 +593,7 @@ export class MainView extends React.Component { {MainView.Instance._flyoutTranslate ? this.expandButton : null}
- {/* {this.dockingContent} */} + {this.dockingContent}
); } -- cgit v1.2.3-70-g09d2 From 21af12f4c140485023450ad348703d69ffd2a724 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 21 Jul 2020 22:10:34 -0500 Subject: cleaned up tab on right --- src/client/util/CurrentUserUtils.ts | 3 +++ src/client/views/MainView.scss | 26 +++++++++++++++++--------- src/client/views/MainView.tsx | 36 ++++++++++++++++++++++++------------ 3 files changed, 44 insertions(+), 21 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 005648b1e..088e20a3e 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -45,6 +45,7 @@ export class CurrentUserUtils { @observable public static workspaceStack: any | undefined; @observable public static catalogStack: any | undefined; @observable public static closedStack: any | undefined; + @observable public static searchStack: any | undefined; // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { @@ -737,6 +738,7 @@ export class CurrentUserUtils { // setup the Search button which will display the search panel. static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) { + doc["tabs-button-search"] = undefined; if (doc["tabs-button-search"] === undefined) { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", _fontSize: "10pt", @@ -747,6 +749,7 @@ export class CurrentUserUtils { lockedPosition: true, onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel") })); + CurrentUserUtils.searchStack = new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc; } return doc["tabs-button-search"] as Doc; } diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index dfd5a993e..9454b0c78 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -122,8 +122,8 @@ padding-right: 50px; .mainView-menuPanel-button { - width: 50px; - height: 50px; + width: 45px; + height: 45px; padding: 10px; pointer-events: all; touch-action: none; @@ -139,7 +139,7 @@ .mainView-menuPanel-button-label { background: rgb(168, 168, 168); color: black; - margin-left: -10px; + margin-left: -13px; border-radius: 8px; width: 65px; position: absolute; @@ -269,22 +269,30 @@ .mainView-expandFlyoutButton { position: absolute; - top: 100px; - right: 30px; + top: 120px; + right: 55px; cursor: pointer; } .mainView-libraryHandle { - width: 20px; + width: 28px; left: calc(100% - 10px); - height: 40px; + height: 55px; top: 50%; border: 1px solid black; - border-radius: 5px; + border-radius: 8px; position: absolute; z-index: 2; touch-action: none; - cursor: ew-resize; + cursor: grab; + + .mainView-libraryHandle-icon { + width: 10px; + height: 10px; + float: right; + margin-right: 1px; + } + } .mainView-workspace { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 845a61d32..766626a82 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -489,7 +489,8 @@ export class MainView extends React.Component { + +
); } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss new file mode 100644 index 000000000..d4cc53bfa --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -0,0 +1,32 @@ +.propertiesView { + + background-color: rgb(168, 168, 168); + height: 100%; + z-index: 1; + + .propertiesView-title { + background-color: rgb(134, 134, 134); + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-name { + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-settings { + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-fields { + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-layout { + border-top: 1px solid black; + border-bottom: 1px solid black; + } +} \ 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..4306453ea --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -0,0 +1,38 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import "./PropertiesView.scss"; +import { observable, action } from "mobx"; +import { Doc } from "../../../../fields/Doc"; +import { DocumentView } from "../../nodes/DocumentView"; + + +// interface PropertiesViewProps { +// document: Doc; +// dataDoc: Doc; +// docView: DocumentView; +// width: number; +// } + +@observer +export class PropertiesView extends React.Component<{}> { + + render() { + return
+
+ Properties +
+
+ Properties +
+
+ Settings +
+
+ Fields +
+
+ Layout +
+
; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 5b025537f60ef9222c0203db378c0298cd3dc86f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 22 Jul 2020 12:57:05 -0500 Subject: adding fields to properties column --- src/client/util/CurrentUserUtils.ts | 8 +-- src/client/views/EditableView.tsx | 2 +- src/client/views/MainView.scss | 5 +- src/client/views/collections/CollectionView.tsx | 2 +- .../collectionFreeForm/PropertiesView.scss | 43 +++++++++++++--- .../collectionFreeForm/PropertiesView.tsx | 60 +++++++++++++++++----- 6 files changed, 93 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 088e20a3e..1dd25ae30 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -660,7 +660,7 @@ export class CurrentUserUtils { CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -679,7 +679,7 @@ export class CurrentUserUtils { CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -703,7 +703,7 @@ export class CurrentUserUtils { CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -718,7 +718,7 @@ export class CurrentUserUtils { if (doc["tabs-button-library"] === undefined) { const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], { title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({ diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 25a87ab56..259a803a2 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -192,7 +192,7 @@ export class EditableView extends React.Component { return (this.props.contents instanceof ObjectField ? (null) :
- +
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index d4cc53bfa..bb5b80abd 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -1,32 +1,59 @@ .propertiesView { - background-color: rgb(168, 168, 168); + background-color: rgb(205, 205, 205); height: 100%; z-index: 1; + font-family: "Noto Sans"; + cursor: auto; + + //overflow-y: scroll; .propertiesView-title { - background-color: rgb(134, 134, 134); - border-top: 1px solid black; - border-bottom: 1px solid black; + background-color: rgb(159, 159, 159); + text-align: center; + font-size: 18px; + font-weight: bold; + padding-top: 12px; + padding-bottom: 12px; } .propertiesView-name { - border-top: 1px solid black; border-bottom: 1px solid black; + padding: 8.5px; + font-size: 12.5px; } .propertiesView-settings { - border-top: 1px solid black; border-bottom: 1px solid black; + padding: 8.5px; + font-size: 12.5px; + font-weight: bold; } .propertiesView-fields { - border-top: 1px solid black; border-bottom: 1px solid black; + padding: 8.5px; + + .propertiesView-fields-title { + font-size: 12.5px; + font-weight: bold; + padding-bottom: 7px; + } + + .propertiesView-fields-content { + font-size: 10px; + margin-left: 5px; + + &:hover { + cursor: pointer; + } + } } .propertiesView-layout { - border-top: 1px solid black; border-bottom: 1px solid black; + padding: 8.5px; + font-size: 12.5px; + font-weight: bold; } } \ 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 4306453ea..bc78fccdf 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -1,20 +1,54 @@ import React = require("react"); import { observer } from "mobx-react"; import "./PropertiesView.scss"; -import { observable, action } from "mobx"; -import { Doc } from "../../../../fields/Doc"; +import { observable, action, computed } from "mobx"; +import { Doc, Field, DocListCast } from "../../../../fields/Doc"; import { DocumentView } from "../../nodes/DocumentView"; +import { ComputedField } from "../../../../fields/ScriptField"; +import { EditableView } from "../../EditableView"; +import { KeyValueBox } from "../../nodes/KeyValueBox"; +import { Cast } from "../../../../fields/Types"; +import { listSpec } from "../../../../fields/Schema"; -// interface PropertiesViewProps { -// document: Doc; -// dataDoc: Doc; -// docView: DocumentView; -// width: number; -// } +interface PropertiesViewProps { + document: Doc; + //dataDoc: Doc; + //docView: DocumentView; +} @observer -export class PropertiesView extends React.Component<{}> { +export class PropertiesView extends React.Component { + + @computed get expandedField() { + const ids: { [key: string]: string } = {}; + const doc = this.props.document; + 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]; + 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} +
); + } + return rows; + } + + @computed get layoutPreview() { + return "layout"; + } render() { return
@@ -22,16 +56,18 @@ export class PropertiesView extends React.Component<{}> { Properties
- Properties + Collection
Settings
- Fields +
Fields
+
{this.expandedField}
- Layout +
Layout
+
{this.layoutPreview}
; } -- 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 16:27:27 -0500 Subject: added layout section --- src/client/views/collections/CollectionView.tsx | 7 +- .../collectionFreeForm/PropertiesView.scss | 15 +++- .../collectionFreeForm/PropertiesView.tsx | 82 +++++++++++++++++++--- 3 files changed, 92 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 616e7995d..eec68f9fc 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -588,7 +588,12 @@ export class CollectionView extends Touchable - +
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index bb5b80abd..e81b1eeb4 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -51,9 +51,18 @@ } .propertiesView-layout { - border-bottom: 1px solid black; padding: 8.5px; - font-size: 12.5px; - font-weight: bold; + + .propertiesView-layout-title { + font-weight: bold; + font-size: 12.5px; + padding-bottom: 7px; + } + + .propertiesView-layout-content { + margin-left: 5px; + overflow: hidden; + } + } } \ 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 bc78fccdf..27b0dbd9e 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -2,27 +2,58 @@ import React = require("react"); import { observer } from "mobx-react"; import "./PropertiesView.scss"; import { observable, action, computed } from "mobx"; -import { Doc, Field, DocListCast } from "../../../../fields/Doc"; +import { Doc, Field, DocListCast, WidthSym, HeightSym } from "../../../../fields/Doc"; import { DocumentView } from "../../nodes/DocumentView"; import { ComputedField } from "../../../../fields/ScriptField"; import { EditableView } from "../../EditableView"; import { KeyValueBox } from "../../nodes/KeyValueBox"; -import { Cast } from "../../../../fields/Types"; +import { Cast, StrCast, NumCast } 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"; interface PropertiesViewProps { - document: Doc; - //dataDoc: Doc; + dataDoc: Doc; + Document: Doc; + width: number; + height: number; + renderDepth: number; + ScreenToLocalTransform: () => Transform; //docView: DocumentView; } @observer export class PropertiesView extends React.Component { + @computed get MAX_EMBED_HEIGHT() { return 200; } + + rtfWidth = () => Math.min(this.props.Document?.[WidthSym](), this.props.width - 20); + rtfHeight = () => this.rtfWidth() <= this.props.Document?.[WidthSym]() ? Math.min(this.props.Document?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; + + docWidth = () => { + const layoutDoc = this.props.Document; + 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; + } + docHeight = () => { + const layoutDoc = this.props.Document; + 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.props.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; + })())); + } + @computed get expandedField() { const ids: { [key: string]: string } = {}; - const doc = this.props.document; + const doc = this.props.dataDoc; doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); const rows: JSX.Element[] = []; @@ -47,7 +78,42 @@ export class PropertiesView extends React.Component { } @computed get layoutPreview() { - return "layout"; + const layoutDoc = Doc.Layout(this.props.Document); + 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} + /> +
; } render() { @@ -66,8 +132,8 @@ export class PropertiesView extends React.Component {
{this.expandedField}
-
Layout
-
{this.layoutPreview}
+
Layout
+
{this.layoutPreview}
; } -- cgit v1.2.3-70-g09d2 From 66bcfb6364ca5d8b4a0fd26139966ea9d6c12f87 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 22 Jul 2020 18:07:45 -0500 Subject: adding buttons --- src/client/views/PropertiesButtons.scss | 105 ++++++++ src/client/views/PropertiesButtons.tsx | 296 +++++++++++++++++++++ src/client/views/collections/CollectionView.tsx | 2 + .../collectionFreeForm/PropertiesView.scss | 12 + .../collectionFreeForm/PropertiesView.tsx | 8 +- 5 files changed, 421 insertions(+), 2 deletions(-) create mode 100644 src/client/views/PropertiesButtons.scss create mode 100644 src/client/views/PropertiesButtons.tsx (limited to 'src') diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss new file mode 100644 index 000000000..8dd5cec03 --- /dev/null +++ b/src/client/views/PropertiesButtons.scss @@ -0,0 +1,105 @@ +@import "globalCssVariables"; + +$linkGap : 3px; + +.propertiesButtons-linkFlyout { + grid-column: 2/4; +} + +.propertiesButtons-linkButton-empty:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; +} + +.propertiesButtons-linkButton-nonempty:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; +} + +.propertiesButtons-linkButton-empty, +.propertiesButtons-linkButton-nonempty { + height: 20px; + width: 20px; + border-radius: 50%; + opacity: 0.9; + pointer-events: auto; + background-color: $dark-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + transition: transform 0.2s; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + + &:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; + } +} + +.propertiesButtons { + margin-top: $linkGap; + grid-column: 1/4; + width: max-content; + height: auto; + display: flex; + flex-direction: row; +} + +.propertiesButtons-button { + pointer-events: auto; + padding-right: 5px; + width: 25px; +} + +.propertiesButtons-linker { + height: 20px; + width: 20px; + text-align: center; + border-radius: 50%; + pointer-events: auto; + color: $dark-color; + border: $dark-color 1px solid; + transition: 0.2s ease all; +} + +.propertiesButtons-linker:hover { + cursor: pointer; + transform: scale(1.05); +} + + +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(360deg); + } +} + +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + } +} + +@keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes shadow-pulse { + 0% { + box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.8); + } + + 100% { + box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); + } +} \ No newline at end of file diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx new file mode 100644 index 000000000..842d0320f --- /dev/null +++ b/src/client/views/PropertiesButtons.tsx @@ -0,0 +1,296 @@ +import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; +import { faArrowAltCircleDown, faArrowAltCircleRight, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faPhotoVideo, faShare, faStopCircle, faSyncAlt, faTag, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, computed, observable, runInAction } from "mobx"; +import { observer } from "mobx-react"; +import { Doc, DocListCast } from "../../fields/Doc"; +import { RichTextField } from '../../fields/RichTextField'; +import { Cast, NumCast } from "../../fields/Types"; +import { emptyFunction, setupMoveUpEvents } from "../../Utils"; +import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; +import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; +import { Docs, DocUtils } from '../documents/Documents'; +import { DragManager } from '../util/DragManager'; +import { CollectionDockingView, DockedFrameRenderer } from './collections/CollectionDockingView'; +import { ParentDocSelector } from './collections/ParentDocumentSelector'; +import './collections/ParentDocumentSelector.scss'; +import './PropertiesButtons.scss'; +import { MetadataEntryMenu } from './MetadataEntryMenu'; +import { DocumentView } from './nodes/DocumentView'; +import { GoogleRef } from "./nodes/formattedText/FormattedTextBox"; +import { TemplateMenu } from "./TemplateMenu"; +import { Template, Templates } from "./Templates"; +import React = require("react"); +import { Tooltip } from '@material-ui/core'; +const higflyout = require("@hig/flyout"); +export const { anchorPoints } = higflyout; +export const Flyout = higflyout.default; + +library.add(faLink); +library.add(faTag); +library.add(faTimes); +library.add(faArrowAltCircleDown); +library.add(faArrowAltCircleUp); +library.add(faArrowAltCircleRight); +library.add(faStopCircle); +library.add(faCheckCircle); +library.add(faCloudUploadAlt); +library.add(faSyncAlt); +library.add(faShare); +library.add(faPhotoVideo); + +const cloud: IconProp = "cloud-upload-alt"; +const fetch: IconProp = "sync-alt"; + +enum UtilityButtonState { + Default, + OpenRight, + OpenExternally +} + +@observer +export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { + private _dragRef = React.createRef(); + private _pullAnimating = false; + private _pushAnimating = false; + private _pullColorAnimating = false; + + @observable private pushIcon: IconProp = "arrow-alt-circle-up"; + @observable private pullIcon: IconProp = "arrow-alt-circle-down"; + @observable private pullColor: string = "white"; + @observable public isAnimatingFetch = false; + @observable public isAnimatingPulse = false; + + @observable private openHover: UtilityButtonState = UtilityButtonState.Default; + + @observable public static Instance: PropertiesButtons; + public static hasPushedHack = false; + public static hasPulledHack = false; + + public startPullOutcome = action((success: boolean) => { + if (!this._pullAnimating) { + this._pullAnimating = true; + this.pullIcon = success ? "check-circle" : "stop-circle"; + setTimeout(() => runInAction(() => { + this.pullIcon = "arrow-alt-circle-down"; + this._pullAnimating = false; + }), 1000); + } + }); + + public startPushOutcome = action((success: boolean) => { + this.isAnimatingPulse = false; + if (!this._pushAnimating) { + this._pushAnimating = true; + this.pushIcon = success ? "check-circle" : "stop-circle"; + setTimeout(() => runInAction(() => { + this.pushIcon = "arrow-alt-circle-up"; + this._pushAnimating = false; + }), 1000); + } + }); + + public setPullState = action((unchanged: boolean) => { + this.isAnimatingFetch = false; + if (!this._pullColorAnimating) { + this._pullColorAnimating = true; + this.pullColor = unchanged ? "lawngreen" : "red"; + setTimeout(this.clearPullColor, 1000); + } + }); + + private clearPullColor = action(() => { + this.pullColor = "white"; + this._pullColorAnimating = false; + }); + + //get view0() { return this.props.views()?.[0]; } + + @computed + get considerGoogleDocsPush() { + const targetDoc = this.props.doc; + 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; + }}> + +
; + } + + @computed + get considerGoogleDocsPull() { + const targetDoc = this.props.doc; + const dataDoc = targetDoc && Doc.GetProto(targetDoc); + const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none"; + + const title = (() => { + switch (this.openHover) { + default: + case UtilityButtonState.Default: return `${!dataDoc?.unchanged ? "Pull from" : "Fetch"} Google Docs`; + case UtilityButtonState.OpenRight: return "Open in Right Split"; + case UtilityButtonState.OpenExternally: return "Open in new Browser Tab"; + } + })(); + + 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; + } + 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"; + } + })()} + /> +
; + } + @computed + get pinButton() { + const targetDoc = this.props.doc; + const isPinned = targetDoc && Doc.isDocPinned(targetDoc); + return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}> +
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> + +
; + } + + @computed + get metadataButton() { + //const view0 = this.view0; + return
Show metadata panel
}> +
+ /* tfs: @bcz This might need to be the data document? */}> +
e.stopPropagation()} > + {} +
+ +
; + } + + // @computed + // get contextButton() { + // return { + // where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : + // this.props.doc.props.addDocTab(doc, "onRight"); + // return true; + // }} />; + // } + + @observable _aliasDown = false; + onAliasButtonDown = (e: React.PointerEvent): void => { + //setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction); + + } + + // onAliasButtonMoved = () => { + // if (this._dragRef.current) { + // const dragDocView = this.props.doc!; + // if (dragDocView.props){ + // const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]); + // const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + // dragData.dropAction = "alias"; + // DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { + // offsetX: dragData.offset[0], + // offsetY: dragData.offset[1], + // hideSource: false + // }); + // return true; + // } + + // } + // return false; + // } + + // @computed + // get templateButton() { + // //const view0 = this.view0; + // const templates: Map = new Map(); + // //const views = this.props.views(); + // 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 !this.props.doc ? (null) : + //
Tap: Customize layout. Drag: Create alias
}> + //
+ // this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} + // content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}> + //
+ // {} + //
+ // + //
; + // } + + render() { + if (!this.props.doc) return (null); + + const isText = this.props.doc[Doc.LayoutFieldKey(this.props.doc)] instanceof RichTextField; + const considerPull = isText && this.considerGoogleDocsPull; + const considerPush = isText && this.considerGoogleDocsPush; + return
+ {/*
+ {this.templateButton} +
*/} +
+ {this.metadataButton} +
+ {/*
+ {this.contextButton} +
*/} +
+ {this.pinButton} +
+
+ {this.considerGoogleDocsPush} +
+
+ {this.considerGoogleDocsPull} +
+
; + } +} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index eec68f9fc..853321d3c 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -50,6 +50,7 @@ import './CollectionView.scss'; import CollectionMenu from './CollectionMenu'; import { SharingPermissions } from '../../util/SharingManager'; import { PropertiesView } from './collectionFreeForm/PropertiesView'; +import { DocumentView } from '../nodes/DocumentView'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -589,6 +590,7 @@ export class CollectionView extends Touchable Transform; - //docView: DocumentView; + docView: DocumentView; } @observer @@ -125,7 +126,10 @@ export class PropertiesView extends React.Component { Collection
- Settings +
Settings
+
+ +
Fields
-- cgit v1.2.3-70-g09d2 From d4ff3975ee3b72a7869535bf8d9fc78039203aed Mon Sep 17 00:00:00 2001 From: andy temp 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: Thu, 23 Jul 2020 11:08:54 -0500 Subject: moved right panel into mainview --- src/client/util/SelectionManager.ts | 24 +++ src/client/views/MainView.scss | 38 ++++ src/client/views/MainView.tsx | 65 ++++++- src/client/views/PropertiesButtons.tsx | 39 +++-- src/client/views/collections/CollectionView.scss | 34 ---- src/client/views/collections/CollectionView.tsx | 49 +----- .../collectionFreeForm/PropertiesView.tsx | 193 +++++++++++++-------- 7 files changed, 262 insertions(+), 180 deletions(-) (limited to 'src') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 9a968aeda..6fb758eac 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -12,9 +12,14 @@ export namespace SelectionManager { @observable IsDragging: boolean = false; SelectedDocuments: ObservableMap = new ObservableMap(); + + @observable public lastSelection: DocumentView | undefined; + @action SelectDoc(docView: DocumentView, ctrlPressed: boolean): void { + this.lastSelection = docView; + // if doc is not in SelectedDocuments, add it if (!manager.SelectedDocuments.get(docView)) { if (!ctrlPressed) { @@ -33,6 +38,15 @@ export namespace SelectionManager { } @action DeselectDoc(docView: DocumentView): void { + + if (this.lastSelection === docView) { + const list = Array.from(manager.SelectedDocuments.keys()); + if (list.length > 0) { + this.lastSelection = list[list.length - 1]; + } else { + this.lastSelection = undefined; + } + } if (manager.SelectedDocuments.get(docView)) { manager.SelectedDocuments.delete(docView); docView.props.whenActiveChanged(false); @@ -41,10 +55,16 @@ export namespace SelectionManager { } @action DeselectAll(): void { + this.lastSelection = undefined; Array.from(manager.SelectedDocuments.keys()).map(dv => dv.props.whenActiveChanged(false)); manager.SelectedDocuments.clear(); Doc.UserDoc().activeSelection = new List([]); } + + @action + getLast(): DocumentView | undefined { + return this.lastSelection; + } } const manager = new Manager(); @@ -56,6 +76,10 @@ export namespace SelectionManager { manager.SelectDoc(docView, ctrlPressed); } + export function LastSelection(): DocumentView | undefined { + return manager.getLast(); + } + // computed functions, such as used in IsSelected generate errors if they're called outside of a // reaction context. Specifying the context with 'outsideReaction' allows an efficiency feature // to avoid unnecessary mobx invalidations when running inside a reaction. diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 55280b231..f64129600 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -102,6 +102,44 @@ user-select: none; } +.mainView-propertiesDragger { + background-color: rgb(140, 139, 139); + height: 55px; + width: 15.5px; + position: absolute; + top: 55%; + border: 1px black solid; + border-radius: 0; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + border-right: unset; + z-index: 2; + + .mainView-propertiesDragger-icon { + width: 10px; + height: 10px; + float: left; + margin-left: 3px; + padding-top: 19px; + } + + &:hover { + cursor: pointer; + } +} + +.mainiView-propertiesView { + display: flex; + flex-direction: column; + width: 200px; + height: 100%; + position: absolute; + right: 0; + top: 0; + border-left: solid 1px; + z-index: 10; +} + .mainView-flyoutContainer { display: flex; flex-direction: column; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 766626a82..88f072493 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -21,10 +21,10 @@ import { Doc, DocListCast, Field, Opt } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; import { listSpec } from '../../fields/Schema'; -import { BoolCast, Cast, FieldValue, StrCast } from '../../fields/Types'; +import { BoolCast, Cast, FieldValue, StrCast, NumCast } from '../../fields/Types'; import { TraceMobx } from '../../fields/util'; import { CurrentUserUtils } from '../util/CurrentUserUtils'; -import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter } from '../../Utils'; +import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter, setupMoveUpEvents } from '../../Utils'; import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; import { DocServer } from '../DocServer'; import { Docs, DocumentOptions } from '../documents/Documents'; @@ -66,7 +66,9 @@ import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager'; import CollectionMenu from './collections/CollectionMenu'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip, AccordionActions } from '@material-ui/core'; +import { PropertiesView } from './collections/collectionFreeForm/PropertiesView'; +import { SelectionManager } from '../util/SelectionManager'; @observer export class MainView extends React.Component { @@ -90,9 +92,24 @@ export class MainView extends React.Component { @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; @observable public panelContent: string = "none"; + @observable public showProperties: boolean = false; + @computed get selectedDocumentView() { return SelectionManager.LastSelection(); } + @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; + @observable selectedDataDoc: Doc | undefined = this.selectedDocumentView?.props.DataDoc ? this.selectedDocumentView.props.DataDoc : this.selectedDoc; public isPointerDown = false; + @observable _propertiesWidth: number = 0; + propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth)); + + @computed get propertiesIcon() { + if (this.propertiesWidth() < 10) { + return "chevron-left"; + } else { + return "chevron-right"; + } + } + componentDidMount() { DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's @@ -216,7 +233,7 @@ export class MainView extends React.Component { const freeformOptions: DocumentOptions = { x: 0, y: 400, - _width: this._panelWidth * .7, + _width: this._panelWidth * .7 - this._propertiesWidth, _height: this._panelHeight, title: "Collection " + workspaceCount, }; @@ -282,10 +299,13 @@ export class MainView extends React.Component { @action onResize = (r: any) => { - this._panelWidth = r.offset.width; + this._panelWidth = r.offset.width - this._propertiesWidth; this._panelHeight = r.offset.height; } - getPWidth = () => this._panelWidth; + + @action + getPWidth = () => this._panelWidth - this._propertiesWidth; + getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; @@ -329,7 +349,6 @@ export class MainView extends React.Component { NativeWidth={returnZero} PanelWidth={this.getPWidth} PanelHeight={this.getPHeight} - renderDepth={0} focus={emptyFunction} parentActive={returnTrue} whenActiveChanged={emptyFunction} @@ -570,6 +589,30 @@ export class MainView extends React.Component { } } + @action + onDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { + this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0); + return false; + }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false); + } + + @computed get propertiesView() { + TraceMobx(); + return this._propertiesWidth === 0 ? (null) : +
+ +
; + } + @computed get mainContent() { const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; @@ -606,6 +649,14 @@ export class MainView extends React.Component {
{this.dockingContent} + {this.showProperties ? (null) : +
+
+
+
+ } + {this.propertiesWidth() < 10 ? (null) : this.propertiesView}
); } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 842d0320f..1b06a41fa 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -22,6 +22,7 @@ import { TemplateMenu } from "./TemplateMenu"; import { Template, Templates } from "./Templates"; import React = require("react"); import { Tooltip } from '@material-ui/core'; +import { SelectionManager } from '../util/SelectionManager'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -49,7 +50,7 @@ enum UtilityButtonState { } @observer -export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { +export class PropertiesButtons extends React.Component<{}, {}> { private _dragRef = React.createRef(); private _pullAnimating = false; private _pushAnimating = false; @@ -67,6 +68,9 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { public static hasPushedHack = false; public static hasPulledHack = false; + @observable selectedDocumentView: DocumentView | undefined = SelectionManager.LastSelection(); + @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; + public startPullOutcome = action((success: boolean) => { if (!this._pullAnimating) { this._pullAnimating = true; @@ -108,7 +112,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { @computed get considerGoogleDocsPush() { - const targetDoc = this.props.doc; + 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`}
}> @@ -127,7 +131,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { @computed get considerGoogleDocsPull() { - const targetDoc = this.props.doc; + const targetDoc = this.selectedDoc; const dataDoc = targetDoc && Doc.GetProto(targetDoc); const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none"; @@ -188,7 +192,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { } @computed get pinButton() { - const targetDoc = this.props.doc; + const targetDoc = this.selectedDoc; const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
{ @computed get metadataButton() { //const view0 = this.view0; - return
Show metadata panel
}> -
- /* tfs: @bcz This might need to be the data document? */}> -
e.stopPropagation()} > - {} -
- -
; + if (this.selectedDoc) { + return
Show metadata panel
}> +
+ /* tfs: @bcz This might need to be the data document? */}> +
e.stopPropagation()} > + {} +
+ +
; + } else { + return null; + } + } // @computed @@ -267,9 +276,9 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { // } render() { - if (!this.props.doc) return (null); + if (!this.selectedDoc) return (null); - const isText = this.props.doc[Doc.LayoutFieldKey(this.props.doc)] instanceof RichTextField; + const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; return
diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index 585f6865e..a5aef86de 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -25,40 +25,6 @@ z-index: 2; } - .collectionView-propertiesDragger { - background-color: rgb(140, 139, 139); - height: 55px; - width: 15.5px; - position: absolute; - top: 55%; - border: 1px black solid; - border-radius: 0; - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - border-right: unset; - z-index: 2; - - .collectionView-propertiesDragger-icon { - width: 10px; - height: 10px; - float: left; - margin-left: 3px; - padding-top: 19px; - } - } - - .collectionView-propertiesView { - display: flex; - flex-direction: column; - width: 200px; - height: 100%; - position: absolute; - right: 0; - top: 0; - border-left: solid 1px; - z-index: 10; - } - .collectionTimeView-treeView { display: flex; flex-direction: column; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 853321d3c..19a82a113 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -49,7 +49,6 @@ import { CollectionTreeView } from "./CollectionTreeView"; import './CollectionView.scss'; import CollectionMenu from './CollectionMenu'; import { SharingPermissions } from '../../util/SharingManager'; -import { PropertiesView } from './collectionFreeForm/PropertiesView'; import { DocumentView } from '../nodes/DocumentView'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -369,22 +368,9 @@ export class CollectionView extends Touchable this.props.PanelWidth() - this.propertiesWidth(); + bodyPanelWidth = () => this.props.PanelWidth(); facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth)); - propertiesWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._propertiesWidth)); - - @computed get propertiesIcon() { - if (this.propertiesWidth() < 10) { - return "chevron-left"; - } else { - return "chevron-right"; - } - } - @computed get dataDoc() { return (this.props.DataDoc && this.props.Document.isTemplateForField ? Doc.GetProto(this.props.DataDoc) : this.props.Document.resolvedDataDoc ? this.props.Document : Doc.GetProto(this.props.Document)); // if the layout document has a resolvedDataDoc, then we don't want to get its parent which would be the unexpanded template @@ -505,13 +491,6 @@ export class CollectionView extends Touchable this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false); } - onDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - this._propertiesWidth = this.props.PanelWidth() - Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0); - return false; - }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 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() { @@ -582,23 +561,6 @@ export class CollectionView extends Touchable; } - @computed get propertiesView() { - TraceMobx(); - return !this._propertiesWidth || this.props.dontRegisterView ? (null) : -
- -
; - } - childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null); childLayoutString = this.props.childLayoutString || StrCast(this.props.Document.childLayoutString); @@ -634,15 +596,6 @@ export class CollectionView extends Touchable } {this.facetWidth() < 10 ? (null) : this.filterView} */} - - {this.props.hideFilter || this.props.Document.hideFilterView || !this.props.isSelected() && !this.props.Document.forceActive ? (null) : -
-
-
-
- } - {this.propertiesWidth() < 10 ? (null) : this.propertiesView}
); } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 5242aa8fd..5aa0066d2 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -14,121 +14,162 @@ import { returnFalse, returnOne, emptyFunction, emptyPath, returnTrue, returnZer import { Id } from "../../../../fields/FieldSymbols"; import { Transform } from "../../../util/Transform"; import { PropertiesButtons } from "../../PropertiesButtons"; +import { SelectionManager } from "../../../util/SelectionManager"; interface PropertiesViewProps { - dataDoc: Doc; - Document: Doc; width: number; height: number; renderDepth: number; ScreenToLocalTransform: () => Transform; - docView: DocumentView; } @observer export class PropertiesView extends React.Component { @computed get MAX_EMBED_HEIGHT() { return 200; } + @observable numSelected: number = SelectionManager.SelectedDocuments().length; + @computed get selectedDocumentView() { return SelectionManager.LastSelection(); } + @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; + @observable dataDoc: Doc | undefined = this.selectedDocumentView?.props.DataDoc ? this.selectedDocumentView.props.DataDoc : this.selectedDoc; - rtfWidth = () => Math.min(this.props.Document?.[WidthSym](), this.props.width - 20); - rtfHeight = () => this.rtfWidth() <= this.props.Document?.[WidthSym]() ? Math.min(this.props.Document?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; + @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 = () => { - const layoutDoc = this.props.Document; - 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; + 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 = () => { - const layoutDoc = this.props.Document; - 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.props.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; - })())); + 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() { - const ids: { [key: string]: string } = {}; - const doc = this.props.dataDoc; - doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); + if (this.dataDoc) { + 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()) { - const contents = doc[key]; - let contentElement: (JSX.Element | null)[] | JSX.Element = []; - contentElement = Field.toKeyValueString(doc, key)} - SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} - />; + const rows: JSX.Element[] = []; + for (const key of Object.keys(ids).slice().sort()) { + const contents = doc[key]; + 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(
+ {key + ":"} +   + {contentElement} +
); + } + return rows; } - return rows; } @computed get layoutPreview() { - const layoutDoc = Doc.Layout(this.props.Document); - 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} - /> -
; + 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} + /> +
; + } else { + return null; + } } render() { + + if (!this.selectedDocumentView || !this.selectedDoc || !this.dataDoc) { + return
+
+ No Document Selected +
; + } + return
Properties
- Collection + {this.dataDoc.title}
Settings
- +
-- 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 f19dfd26aa3232f2fe52ef5e631be208706fca11 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 23 Jul 2020 13:09:37 -0500 Subject: menu buttons to documents --- src/client/views/MainView.scss | 12 +- src/client/views/MainView.tsx | 293 +++++++++++++-------- .../views/collections/CollectionTreeView.tsx | 1 + 3 files changed, 187 insertions(+), 119 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index f64129600..bd074adea 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -155,7 +155,7 @@ .mainView-menuPanel { max-width: 95px; - background-color: rgb(105, 105, 105); + background-color: #323232; padding: 20px; padding-right: 50px; @@ -211,8 +211,8 @@ pointer-events: all; touch-action: none; border-radius: inherit; - background: dimgray; - background-color: dimgray; + background: #323232; + background-color: #323232; border-radius: 100%; transform-origin: top left; margin-bottom: 20px; @@ -221,8 +221,8 @@ margin-right: 25px; .mainView-menuPanel-bottomButton-label { - background: dimgray; - color: black; + background: #323232; + color: white; margin-left: -10px; border-radius: 8px; width: 65px; @@ -238,7 +238,7 @@ .mainView-menuPanel-bottomButton-icon { width: 50px; height: 50px; - color: black; + color: white; } svg { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 88f072493..9e8fa545f 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -53,7 +53,7 @@ import { RadialMenu } from './nodes/RadialMenu'; import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; -import { ScriptField } from '../../fields/ScriptField'; +import { ScriptField, ComputedField } from '../../fields/ScriptField'; import { TimelineMenu } from './animationtimeline/TimelineMenu'; import { SnappingManager } from '../util/SnappingManager'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; @@ -69,6 +69,8 @@ import CollectionMenu from './collections/CollectionMenu'; import { Tooltip, AccordionActions } from '@material-ui/core'; import { PropertiesView } from './collections/collectionFreeForm/PropertiesView'; import { SelectionManager } from '../util/SelectionManager'; +import { PrefetchProxy } from '../../fields/Proxy'; +import { DragManager } from '../util/DragManager'; @observer export class MainView extends React.Component { @@ -333,7 +335,8 @@ export class MainView extends React.Component { } } @computed get mainDocView() { - return ; } @computed get dockingContent() { @@ -449,123 +453,185 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} />
- {/*
- - -
*/} {this.docButtons}
; } - @computed get menuPanel() { + menuBtnDescriptions(): { + title: string, icon: string, click: string, backgroundColor?: string, + }[] { + return [ + { title: "Workspace", icon: "desktop", click: 'this.selectPanel("workspace")' }, + { title: "Catalog", icon: "file", click: 'this.selectPanel("catalog")' }, + { title: "Recently Deleted", icon: "trash-alt", click: 'this.selectPanel("deleted")' }, + { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' }, + { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' }, + { title: "Tools", icon: "wrench", click: 'this.selectPanel("tools")' }, + { title: "Search", icon: "search", click: 'this.selectPanel("search")' }, + { title: "Help", icon: "question-circle", click: 'this.selectPanel("help")' }, + { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' }, + ]; + } + + setupMenuButtons() { + const buttons = this.menuBtnDescriptions(); + const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({ + _width: 100, _height: 100, + icon, + title, + onClick: click ? ScriptField.MakeScript(click) : undefined, + backgroundColor, + })); + + const btnStack = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, { + _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", + })); + return btnStack as unknown as Doc; + } + + @computed get setupMenuPanel() { + const menuBtns = this.setupMenuButtons(); + const menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], { + title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, + _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", + })) as any as Doc; + return
- - - - - - - - - - - - - - - - - + 100} + PanelHeight={this.getContentsHeight} + renderDepth={0} + focus={emptyFunction} + backgroundColor={this.defaultBackgroundColors} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + docFilters={returnEmptyFilter} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} />
; } + @observable menuPanel: any; + + // @computed get menuPanel() { + // return
+ // + + // + + // + + // + + // + + // + + // + + // + + // + //
; + // } + @action selectPanel = (str: string) => { if (this.panelContent === str && this.flyoutWidth !== 0) { @@ -587,6 +653,7 @@ export class MainView extends React.Component { this.sidebarContent.proto = CurrentUserUtils.searchStack; } } + return true; } @action @@ -623,7 +690,7 @@ export class MainView extends React.Component { height, width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%" }} > - {this.menuPanel} + {this.setupMenuPanel}
{this.flyoutWidth !== 0 ?
ScriptField; onChildClick?: () => ScriptField; ignoreFields?: string[]; + alwaysOpen?: boolean; } @observer -- cgit v1.2.3-70-g09d2 From 05c46464ba69e889145d8a32320cd7f130665ee1 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 23 Jul 2020 13:25:42 -0500 Subject: selection changes --- src/client/util/CurrentUserUtils.ts | 47 ++++++++++++++++++++++ src/client/util/SelectionManager.ts | 23 +---------- src/client/views/MainView.tsx | 45 ++------------------- .../collectionFreeForm/PropertiesView.tsx | 12 ++++-- 4 files changed, 59 insertions(+), 68 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 1dd25ae30..54d81a9fa 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -493,6 +493,52 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } + static menuBtnDescriptions(): { + title: string, icon: string, click: string, backgroundColor?: string, + }[] { + return [ + { title: "Workspace", icon: "desktop", click: 'this.selectPanel("workspace")' }, + { title: "Catalog", icon: "file", click: 'this.selectPanel("catalog")' }, + { title: "Recently Deleted", icon: "trash-alt", click: 'this.selectPanel("deleted")' }, + { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' }, + { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' }, + { title: "Tools", icon: "wrench", click: 'this.selectPanel("tools")' }, + { title: "Search", icon: "search", click: 'this.selectPanel("search")' }, + { title: "Help", icon: "question-circle", click: 'this.selectPanel("help")' }, + { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' }, + ]; + } + + static setupMenuButtons(doc: Doc) { + if (doc.menuStackBtns === undefined) { + const buttons = CurrentUserUtils.menuBtnDescriptions(); + const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({ + _width: 100, _height: 100, + icon, + title, + onClick: click ? ScriptField.MakeScript(click) : undefined, + backgroundColor, + })); + + doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, { + _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", + })); + } + return doc.menuStackBtns as Doc; + } + + static setupMenuPanel(doc: Doc) { + if (doc.menuStack === undefined) { + const menuBtns = CurrentUserUtils.setupMenuButtons(doc); + doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], { + title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, + _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", + })) as any as Doc; + } + return doc.menuStack; + } + + // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu static setupActiveMobileMenu(doc: Doc) { if (doc.activeMobileMenu === undefined) { @@ -894,6 +940,7 @@ export class CurrentUserUtils { 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 this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile + this.setupMenuPanel(doc); this.setupOverlays(doc); // documents in overlay layer this.setupDockedButtons(doc); // the bottom bar of font icons this.setupDefaultPresentation(doc); // presentation that's initially triggered diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 6fb758eac..ec875fe4b 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -13,13 +13,9 @@ export namespace SelectionManager { @observable IsDragging: boolean = false; SelectedDocuments: ObservableMap = new ObservableMap(); - @observable public lastSelection: DocumentView | undefined; - @action SelectDoc(docView: DocumentView, ctrlPressed: boolean): void { - this.lastSelection = docView; - // if doc is not in SelectedDocuments, add it if (!manager.SelectedDocuments.get(docView)) { if (!ctrlPressed) { @@ -39,14 +35,6 @@ export namespace SelectionManager { @action DeselectDoc(docView: DocumentView): void { - if (this.lastSelection === docView) { - const list = Array.from(manager.SelectedDocuments.keys()); - if (list.length > 0) { - this.lastSelection = list[list.length - 1]; - } else { - this.lastSelection = undefined; - } - } if (manager.SelectedDocuments.get(docView)) { manager.SelectedDocuments.delete(docView); docView.props.whenActiveChanged(false); @@ -55,16 +43,11 @@ export namespace SelectionManager { } @action DeselectAll(): void { - this.lastSelection = undefined; + Array.from(manager.SelectedDocuments.keys()).map(dv => dv.props.whenActiveChanged(false)); manager.SelectedDocuments.clear(); Doc.UserDoc().activeSelection = new List([]); } - - @action - getLast(): DocumentView | undefined { - return this.lastSelection; - } } const manager = new Manager(); @@ -76,10 +59,6 @@ export namespace SelectionManager { manager.SelectDoc(docView, ctrlPressed); } - export function LastSelection(): DocumentView | undefined { - return manager.getLast(); - } - // computed functions, such as used in IsSelected generate errors if they're called outside of a // reaction context. Specifying the context with 'outsideReaction' allows an efficiency feature // to avoid unnecessary mobx invalidations when running inside a reaction. diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 9e8fa545f..8113ad698 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -456,48 +456,11 @@ export class MainView extends React.Component { {this.docButtons}
; } - menuBtnDescriptions(): { - title: string, icon: string, click: string, backgroundColor?: string, - }[] { - return [ - { title: "Workspace", icon: "desktop", click: 'this.selectPanel("workspace")' }, - { title: "Catalog", icon: "file", click: 'this.selectPanel("catalog")' }, - { title: "Recently Deleted", icon: "trash-alt", click: 'this.selectPanel("deleted")' }, - { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' }, - { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' }, - { title: "Tools", icon: "wrench", click: 'this.selectPanel("tools")' }, - { title: "Search", icon: "search", click: 'this.selectPanel("search")' }, - { title: "Help", icon: "question-circle", click: 'this.selectPanel("help")' }, - { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' }, - ]; - } - - setupMenuButtons() { - const buttons = this.menuBtnDescriptions(); - const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({ - _width: 100, _height: 100, - icon, - title, - onClick: click ? ScriptField.MakeScript(click) : undefined, - backgroundColor, - })); - - const btnStack = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, { - _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", - })); - return btnStack as unknown as Doc; - } - - @computed get setupMenuPanel() { - const menuBtns = this.setupMenuButtons(); - const menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], { - title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, - _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", - })) as any as Doc; + @computed get menuPanel() { return
; } - @observable menuPanel: any; - // @computed get menuPanel() { // return
// - - // - - // - - // - - // - - // - - // - - // - - // + // 80} + // PanelHeight={this.getContentsHeight} + // renderDepth={0} + // focus={emptyFunction} + // backgroundColor={this.defaultBackgroundColors} + // parentActive={returnTrue} + // whenActiveChanged={emptyFunction} + // bringToFront={emptyFunction} + // docFilters={returnEmptyFilter} + // ContainingCollectionView={undefined} + // ContainingCollectionDoc={undefined} + // relative={true} + // /> //
; // } + @computed get menuPanel() { + return
+ + + + + + + + + + + + + + + + + +
; + } + @action selectPanel = (str: string) => { if (this.panelContent === str && this.flyoutWidth !== 0) { @@ -623,23 +632,24 @@ export class MainView extends React.Component { @computed get propertiesView() { TraceMobx(); - return this._propertiesWidth === 0 ? (null) : -
- -
; + return
+ +
; } @computed get mainContent() { const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; + + const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0; return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : (
+ style={{ right: rightFlyout, top: "45%" }}>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 98eae1ac7..f64ef2211 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -2,7 +2,6 @@ background-color: rgb(205, 205, 205); height: 100%; - z-index: 1; font-family: "Noto Sans"; cursor: auto; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 998c6798e..02fe60255 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -100,6 +100,7 @@ export interface DocumentViewProps { layoutKey?: string; radialMenu?: String[]; display?: string; + relative?: boolean; } @observer @@ -1021,8 +1022,9 @@ export class DocumentView extends DocComponent(Docu } childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling()); @computed get contents() { + const pos = this.props.relative ? "relative " : "absolute"; TraceMobx(); - return (
+ return (
(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}
; @@ -1235,7 +1241,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} -- cgit v1.2.3-70-g09d2 From c85adfb7011d5d7a785086e8ea7d389272d80a81 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 23 Jul 2020 19:00:37 -0500 Subject: tree view fix --- src/client/util/CurrentUserUtils.ts | 12 ++++++------ src/client/views/collections/CollectionTreeView.tsx | 6 ++++-- 2 files changed, 10 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index d41aa4b58..cc9f6aad7 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -696,7 +696,7 @@ export class CurrentUserUtils { doc.myWorkspaces === undefined; if (doc.myWorkspaces === undefined) { doc.myWorkspaces = new PrefetchProxy(Docs.Create.TreeDocument([], { - title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, + title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, treeViewOpen: true, })); } const newWorkspace = ScriptField.MakeScript(`createNewWorkspace()`); @@ -707,7 +707,7 @@ export class CurrentUserUtils { CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -718,7 +718,7 @@ export class CurrentUserUtils { if (doc.myCatalog === undefined) { doc.myCatalog = new PrefetchProxy(Docs.Create.SchemaDocument([], [], { title: "CATALOG", _height: 1000, _fitWidth: true, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false, - childDropAction: "alias", targetDropAction: "same", stayInCollection: true, + childDropAction: "alias", targetDropAction: "same", stayInCollection: true, treeViewOpen: true, })); } @@ -726,7 +726,7 @@ export class CurrentUserUtils { CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -737,7 +737,7 @@ export class CurrentUserUtils { doc.myRecentlyClosed === undefined; if (doc.myRecentlyClosed === undefined) { doc.myRecentlyClosed = new PrefetchProxy(Docs.Create.TreeDocument([], { - title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, stayInCollection: true, + title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false, treeViewOpen: true, stayInCollection: true, })); } // this is equivalent to using PrefetchProxies to make sure the recentlyClosed doc is ready @@ -750,7 +750,7 @@ export class CurrentUserUtils { CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index c36592c1b..44414fa2b 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -64,7 +64,6 @@ export interface TreeViewProps { onCheckedClick?: () => ScriptField; onChildClick?: () => ScriptField; ignoreFields?: string[]; - alwaysOpen?: boolean; } @observer @@ -91,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); } -- cgit v1.2.3-70-g09d2 From 3c83787b8c55663484bee4b6fb03a6bc86d7fc49 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 24 Jul 2020 00:08:21 -0500 Subject: added universal settings options --- src/client/views/DocumentButtonBar.tsx | 8 +- src/client/views/PropertiesButtons.tsx | 188 ++++++++++++++++++++++----------- 2 files changed, 132 insertions(+), 64 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index c99034d81..2eabea8ef 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -281,7 +281,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV {DocumentLinksButton.StartLink ?
: null} -
+ {/*
{this.templateButton}
@@ -289,16 +289,16 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
{this.contextButton} -
+
*/}
{this.pinButton}
-
+ {/*
{this.considerGoogleDocsPush}
{this.considerGoogleDocsPull} -
+
*/}
; } } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index b55593b11..52e46147a 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -5,7 +5,7 @@ import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast } from "../../fields/Doc"; import { RichTextField } from '../../fields/RichTextField'; -import { Cast, NumCast } from "../../fields/Types"; +import { Cast, NumCast, BoolCast } from "../../fields/Types"; import { emptyFunction, setupMoveUpEvents } from "../../Utils"; import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; @@ -74,8 +74,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { return SelectionManager.SelectedDocuments()[0]; } else { return undefined; } } - @computed get selectedDoc() { return this.selectedDocumentView?.props.Document; } - @computed get dataDoc() { return this.selectedDocumentView?.props.DataDoc; } + @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } public startPullOutcome = action((success: boolean) => { if (!this._pullAnimating) { @@ -114,8 +114,6 @@ export class PropertiesButtons extends React.Component<{}, {}> { this._pullColorAnimating = false; }); - //get view0() { return this.props.views()?.[0]; } - @computed get considerGoogleDocsPush() { const targetDoc = this.selectedDoc; @@ -228,58 +226,116 @@ export class PropertiesButtons extends React.Component<{}, {}> { } - // @computed - // get contextButton() { - // return { - // where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : - // this.props.doc.props.addDocTab(doc, "onRight"); - // return true; - // }} />; - // } - @observable _aliasDown = false; onAliasButtonDown = (e: React.PointerEvent): void => { - //setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction); + setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction); + } + onAliasButtonMoved = () => { + if (this._dragRef.current) { + const dragDocView = this.selectedDocumentView!; + const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]); + const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + dragData.dropAction = "alias"; + DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { + offsetX: dragData.offset[0], + offsetY: dragData.offset[1], + hideSource: false + }); + return true; + } + return false; + } + + @computed + get templateButton() { + const docView = this.selectedDocumentView; + const templates: Map = new Map(); + const views = [this.selectedDocumentView]; + 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) : +
Tap: Customize layout. Drag: Create alias
}> +
+ this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} + content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}> +
+ {} +
+ +
; + } + onCopy = () => { + if (this.selectedDoc && this.selectedDocumentView) { + const copy = Doc.MakeCopy(this.selectedDoc, true); + copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width); + copy.y = NumCast(this.selectedDoc.y) + 30; + this.selectedDocumentView.props.addDocument?.(copy); + } + } + + @computed + get copyButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Create a copy"}
}> +
+ {} +
+ ; + } + + @action + onLock = () => { + this.selectedDocumentView?.toggleLockPosition(); + } + + @computed + get lockButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{this.selectedDoc?.lockedPosition ? + "Unlock Position" : "Lock Position"}
}> +
+ {} +
+ ; } - // onAliasButtonMoved = () => { - // if (this._dragRef.current) { - // const dragDocView = this.props.doc!; - // if (dragDocView.props){ - // const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]); - // const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - // dragData.dropAction = "alias"; - // DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { - // offsetX: dragData.offset[0], - // offsetY: dragData.offset[1], - // hideSource: false - // }); - // return true; - // } + @computed + get downloadButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Download Document"}
}> +
{ + if (this.selectedDocumentView?.props.Document) { + Doc.Zip(this.selectedDocumentView?.props.Document); + } + }}> + {} +
+ ; + } - // } - // return false; - // } + @computed + get deleteButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Delete Document"}
}> +
{ + this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document); + }}> + {} +
+ ; + } - // @computed - // get templateButton() { - // //const view0 = this.view0; - // const templates: Map = new Map(); - // //const views = this.props.views(); - // 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 !this.props.doc ? (null) : - //
Tap: Customize layout. Drag: Create alias
}> - //
- // this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} - // content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}> - //
- // {} - //
- // - //
; - // } render() { if (!this.selectedDoc) return (null); @@ -287,24 +343,36 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; - return
- {/*
+ return
+
{this.templateButton} -
*/} +
{this.metadataButton}
- {/*
- {this.contextButton} -
*/}
{this.pinButton}
-
- {this.considerGoogleDocsPush} +
+ {this.copyButton} +
+
+ {this.lockButton} +
+
+ {this.downloadButton} +
+
+ {this.deleteButton}
-
- {this.considerGoogleDocsPull} +
+
+
+ {this.considerGoogleDocsPush} +
+
+ {this.considerGoogleDocsPull} +
; } -- cgit v1.2.3-70-g09d2 From 7d0778a9dd1d5e70bf5e4f51e264dcf2f86829d3 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 24 Jul 2020 00:25:30 -0500 Subject: two rows in settings and adjusting context menu --- src/client/views/PropertiesButtons.tsx | 25 +++++++++++++++++++++++-- src/client/views/nodes/DocumentView.tsx | 4 ++-- 2 files changed, 25 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 52e46147a..8488b553f 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -23,6 +23,7 @@ import { Template, Templates } from "./Templates"; import React = require("react"); import { Tooltip } from '@material-ui/core'; import { SelectionManager } from '../util/SelectionManager'; +import SharingManager from '../util/SharingManager'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -267,7 +268,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { onCopy = () => { if (this.selectedDoc && this.selectedDocumentView) { - const copy = Doc.MakeCopy(this.selectedDoc, true); + const copy = Doc.MakeCopy(this.selectedDocumentView.props.Document, true); copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width); copy.y = NumCast(this.selectedDoc.y) + 30; this.selectedDocumentView.props.addDocument?.(copy); @@ -336,6 +337,23 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } + @computed + get sharingButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Share Document"}
}> +
{ + if (this.selectedDocumentView) { + SharingManager.Instance.open(this.selectedDocumentView); + } + }}> + {} +
+ ; + } + render() { if (!this.selectedDoc) return (null); @@ -343,7 +361,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; - return
+ return
{this.templateButton}
@@ -367,6 +385,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
+
+ {this.sharingButton} +
{this.considerGoogleDocsPush}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 02fe60255..30582a287 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -809,7 +809,7 @@ 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" }); - moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" }); + //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...")!); @@ -817,7 +817,7 @@ export class DocumentView extends DocComponent(Docu const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : []; //!Doc.UserDoc().novice && 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" }); !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" }); - cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" }); + //cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" }); // const existingAcls = cm.findByDescription("Privacy..."); // const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : []; -- 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 433ac4ffcf2eb71557ca0baff704bd67c461cadc Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 24 Jul 2020 12:16:16 -0500 Subject: implemented sharing UI in permissions --- src/client/views/MainView.tsx | 4 +- .../collectionFreeForm/PropertiesView.scss | 79 ++++++++++++++++++++++ .../collectionFreeForm/PropertiesView.tsx | 76 +++++++++++++++++++++ 3 files changed, 157 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index beee9289e..f43eca468 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -8,7 +8,7 @@ import { 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, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -174,7 +174,7 @@ export class MainView extends React.Component { 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, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap); + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index f64ef2211..e025c7e87 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -41,6 +41,85 @@ } + .propertiesView-sharing { + border-bottom: 1px solid black; + padding: 8.5px; + + .propertiesView-sharing-title { + font-size: 12.5px; + font-weight: bold; + padding-bottom: 7px; + } + + .propertiesView-sharing-content { + font-size: 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-right: 3px; + + .notify-button-icon { + width: 6px; + height: 6.5px; + margin-left: .5px; + } + + &:hover { + background-color: rgb(158, 158, 158); + } + } + + .propertiesView-sharingTable { + + border: 1px solid black; + padding: 5px; + border-radius: 6px; + width: 170px; + background-color: #ececec; + + .propertiesView-sharingTable-item { + + display: flex; + padding: 3px; + + border-bottom: 0.5px solid grey; + + .propertiesView-sharingTable-item-name { + font-weight: bold; + width: 80px; + overflow-x: hidden; + display: inline-block; + } + + .propertiesView-sharingTable-item-permission { + + .permissions-select { + z-index: 1; + //border: 0.5px solid grey; + //border-radius: 4px; + //outline: none; + border: none; + background-color: inherit; + width: 75px; + } + } + + &:last-child { + border-bottom: none; + } + } + } + .propertiesView-fields { border-bottom: 1px solid black; padding: 8.5px; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 1954a11bf..9af4bd276 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -15,6 +15,8 @@ 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 } from "@material-ui/core"; interface PropertiesViewProps { @@ -154,6 +156,74 @@ export class PropertiesView extends React.Component { } } + @computed get permissionsSelect() { + return ; + } + + @computed get notifyIcon() { + return
{"Notify user or group of permissions change"}
}> +
+ +
+ ; + } + + sharingItem(name: string, notify: boolean, editable: boolean, permission?: string) { + return
+
{name}
+ {notify ? this.notifyIcon : null} +
+ {editable ? this.permissionsSelect : permission} +
+
; + } + + @computed get sharingTable() { + return
+ {this.sharingItem("Me", false, false, "Owner")} + {this.sharingItem("Public", false, true)} + {this.sharingItem("Group 1", true, true)} + {this.sharingItem("Group 2", true, true)} + {/*
+
Me:
+
Owner
+
+
+
Public:
+
+ {this.permissionsSelect} +
+
+
+
Group 1:
+
+
+ {this.permissionsSelect} +
+
+
+
Another group:
+
+
+ {this.permissionsSelect} +
+
*/} +
; + } + render() { if (!this.selectedDoc) { @@ -176,6 +246,12 @@ export class PropertiesView extends React.Component {
+
+
Sharing {"&"} Permissions
+
+ {this.sharingTable} +
+
Fields
{this.expandedField}
-- cgit v1.2.3-70-g09d2 From 649470762c722eea1067e30d2f35aedcf84a369c Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 24 Jul 2020 13:40:24 -0500 Subject: sally UI changes --- src/client/views/DocumentDecorations.tsx | 5 +-- src/client/views/MainView.tsx | 4 +-- src/client/views/PropertiesButtons.tsx | 2 +- .../collectionFreeForm/PropertiesView.scss | 13 +++++++ .../collectionFreeForm/PropertiesView.tsx | 42 +++++++++------------- src/client/views/linking/LinkMenuItem.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 12 ++++++- 7 files changed, 47 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index fec4ad9e0..d30adc5a2 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,5 +1,5 @@ import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; -import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause } from '@fortawesome/free-solid-svg-icons'; +import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -44,6 +44,7 @@ library.add(faAngleDoubleRight); library.add(faAngleLeft); library.add(faAngleRight); library.add(faPause); +library.add(faExternalLinkAlt); @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { @@ -617,7 +618,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> {"_"}
}
Open Document In Tab
} placement="top">
- {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."} + {SelectionManager.SelectedDocuments().length === 1 ? : "..."}
⟲
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f43eca468..4a80f57b3 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -8,7 +8,7 @@ import { 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, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash, faExpandAlt } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -174,7 +174,7 @@ export class MainView extends React.Component { 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, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash); + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash, faExpandAlt); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 8488b553f..32a98b072 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -278,7 +278,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get copyButton() { const targetDoc = this.selectedDoc; - return !targetDoc ? (null) :
{"Create a copy"}
}> + return !targetDoc ? (null) :
{"Create an Alias"}
}>
{} diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index e025c7e87..e6bc3f15a 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -79,6 +79,17 @@ } } + .expansion-button-icon { + width: 11px; + height: 11px; + color: black; + margin-left: 27px; + + &:hover { + color: rgb(131, 131, 131); + } + } + .propertiesView-sharingTable { border: 1px solid black; @@ -103,6 +114,8 @@ .propertiesView-sharingTable-item-permission { + display: flex; + .permissions-select { z-index: 1; //border: 0.5px solid grey; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 9af4bd276..e911c7a9f 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -17,6 +17,7 @@ import { PropertiesButtons } from "../../PropertiesButtons"; import { SelectionManager } from "../../../util/SelectionManager"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Tooltip } from "@material-ui/core"; +import SharingManager from "../../../util/SharingManager"; interface PropertiesViewProps { @@ -174,19 +175,32 @@ export class PropertiesView extends React.Component { } @computed get notifyIcon() { - return
{"Notify user or group of permissions change"}
}> + return
{"Notify group of permissions change"}
}>
; } + @computed get expansionIcon() { + return
{"Show more permissions"}
}> +
{ + if (this.selectedDocumentView) { + SharingManager.Instance.open(this.selectedDocumentView); + } + }}> + +
+ ; + } + sharingItem(name: string, notify: boolean, editable: boolean, permission?: string) { return
{name}
{notify ? this.notifyIcon : null}
{editable ? this.permissionsSelect : permission} + {permission === "Owner" ? this.expansionIcon : null}
; } @@ -197,30 +211,6 @@ export class PropertiesView extends React.Component { {this.sharingItem("Public", false, true)} {this.sharingItem("Group 1", true, true)} {this.sharingItem("Group 2", true, true)} - {/*
-
Me:
-
Owner
-
-
-
Public:
-
- {this.permissionsSelect} -
-
-
-
Group 1:
-
-
- {this.permissionsSelect} -
-
-
-
Another group:
-
-
- {this.permissionsSelect} -
-
*/}
; } @@ -241,7 +231,7 @@ export class PropertiesView extends React.Component { {this.selectedDoc.title}
-
Settings
+
Document Actions
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index d1c839c3b..8084d96ae 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; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 30582a287..ed3a9a4f3 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -726,6 +726,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 @@ -787,6 +795,8 @@ export class DocumentView extends DocComponent(Docu const more = cm.findByDescription("More..."); const moreItems = more && "subitems" in more ? more.subitems : []; + moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" }); + moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" }); moreItems.push({ description: "Download document", icon: "download", event: async () => { Doc.Zip(this.props.Document); @@ -809,7 +819,7 @@ 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" }); - //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...")!); -- cgit v1.2.3-70-g09d2 From ee3d12fbf6306da958ae6546260921f5fee5553b Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 24 Jul 2020 16:32:45 -0500 Subject: changing menu layout --- src/client/views/MainView.scss | 121 ++++++++++--------- src/client/views/MainView.tsx | 132 +++++++++------------ .../collectionFreeForm/PropertiesView.scss | 8 +- 3 files changed, 123 insertions(+), 138 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 10e7f471b..51548bf58 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -156,45 +156,39 @@ .mainView-menuPanel { max-width: 95px; - background-color: #323232; - padding: 20px; - padding-right: 50px; - + background-color: black; + padding: 15px; + /* padding-right: 50px; */ overflow-y: scroll; - overflow-x: clip; + overflow-x: hidden; .mainView-menuPanel-button { - width: 45px; - height: 45px; - padding: 10px; - pointer-events: all; + width: 60px; + padding: 7.5px; touch-action: none; - border-radius: inherit; background: black; - border-radius: 100%; transform-origin: top left; - margin-bottom: 23px; + margin-bottom: 5px; margin-top: 5px; - margin-right: 25px; + border-radius: 8px; .mainView-menuPanel-button-label { - background: rgb(168, 168, 168); - color: black; - margin-left: -13px; + color: white; + margin-left: -6px; border-radius: 8px; - width: 65px; + width: 55px; position: relative; text-align: center; font-size: 9.5px; - margin-top: 4px; + margin-top: 1px; letter-spacing: normal; padding: 3px; - //margin-bottom: 23px; + background-color: inherit; } .mainView-menuPanel-button-icon { - width: 35px; + width: auto; height: 35px; padding: 5px; } @@ -203,50 +197,55 @@ width: 95% !important; height: 95%; } - } - - .mainView-menuPanel-bottomButton { - width: 50px; - height: 50px; - padding: 10px; - pointer-events: all; - touch-action: none; - border-radius: inherit; - background: #323232; - background-color: #323232; - border-radius: 100%; - transform-origin: top left; - margin-bottom: 20px; - margin-top: 5px; - - margin-right: 25px; - - .mainView-menuPanel-bottomButton-label { - background: #323232; - color: white; - margin-left: -10px; - border-radius: 8px; - width: 65px; - position: absolute; - text-align: center; - font-size: 9.5px; - margin-top: 2px; - letter-spacing: normal; - padding: 3px; - //margin-bottom: 23px; - } - .mainView-menuPanel-bottomButton-icon { - width: 50px; - height: 50px; - color: white; - } - - svg { - width: 95% !important; - height: 95%; + &:hover { + background: rgb(61, 61, 61); + cursor: pointer; } } + + // .mainView-menuPanel-bottomButton { + // width: 45px; + // height: 45px; + // padding: 10px; + // pointer-events: all; + // touch-action: none; + // //border-radius: inherit; + // background: black; + // background-color: black; + // //border-radius: 100%; + // transform-origin: top left; + // margin-bottom: 20px; + // margin-top: 5px; + + // margin-right: 25px; + + // .mainView-menuPanel-bottomButton-label { + // background: black; + // color: white; + // margin-left: -10px; + // border-radius: 8px; + // width: 65px; + // position: absolute; + // text-align: center; + // font-size: 9.5px; + // margin-top: 2px; + // letter-spacing: normal; + // padding: 3px; + // //margin-bottom: 23px; + // } + + // .mainView-menuPanel-bottomButton-icon { + // width: 50px; + // height: 50px; + // color: white; + // } + + // svg { + // width: 95% !important; + // height: 95%; + // } + // } } .mainView-searchPanel { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4a80f57b3..c08717947 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -71,6 +71,7 @@ import { PropertiesView } from './collections/collectionFreeForm/PropertiesView' import { SelectionManager } from '../util/SelectionManager'; import { PrefetchProxy } from '../../fields/Proxy'; import { DragManager } from '../util/DragManager'; +import { discovery_v1, dialogflow_v2beta1 } from 'googleapis'; @observer export class MainView extends React.Component { @@ -84,7 +85,7 @@ export class MainView extends React.Component { @observable private _panelWidth: number = 0; @observable private _panelHeight: number = 0; @observable private _flyoutTranslate: boolean = false; - @observable public flyoutWidth: number = 275; + @observable public flyoutWidth: number = 0; private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } @computed private get userDoc() { return Doc.UserDoc(); } @@ -377,8 +378,11 @@ export class MainView extends React.Component { } _canClick = false; + + @action onPointerDown = (e: React.PointerEvent) => { if (this._flyoutTranslate) { + this.panelContent = "none"; this._canClick = true; this._flyoutSizeOnDown = e.clientX; document.removeEventListener("pointermove", this.onPointerMove); @@ -494,76 +498,59 @@ export class MainView extends React.Component { @computed get menuPanel() { return
- +
this.selectPanel("workspace")}> + +
Workspace
+
- +
this.selectPanel("catalog")}> + +
Catalog
+
- +
this.selectPanel("deleted")}> + +
Recently Closed
+
- +
- +
- + +
Tools
+
- + */} - +
this.selectPanel("help")} > + +
Help
+
- + onClick={() => SettingsManager.Instance.open()}> + +
Settings
+
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index e6bc3f15a..b40a08086 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -5,7 +5,7 @@ font-family: "Noto Sans"; cursor: auto; - //overflow-y: scroll; + overflow-y: scroll; .propertiesView-title { background-color: rgb(159, 159, 159); @@ -76,6 +76,7 @@ &:hover { background-color: rgb(158, 158, 158); + cursor: pointer; } } @@ -87,6 +88,7 @@ &:hover { color: rgb(131, 131, 131); + cursor: pointer; } } @@ -124,6 +126,10 @@ border: none; background-color: inherit; width: 75px; + + &:hover { + cursor: pointer; + } } } -- cgit v1.2.3-70-g09d2 From 229e8ba914943da0d11dff00d14a8adae950d853 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 25 Jul 2020 10:27:27 -0500 Subject: exit button for properties --- src/client/views/MainView.tsx | 1 + .../collectionFreeForm/PropertiesView.scss | 23 ++++++++++++++++++++-- .../collectionFreeForm/PropertiesView.tsx | 6 +++++- src/client/views/nodes/DocumentLinksButton.tsx | 5 ++++- 4 files changed, 31 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c08717947..734b45dd0 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -621,6 +621,7 @@ export class MainView extends React.Component { height={this._panelHeight} renderDepth={1} ScreenToLocalTransform={Transform.Identity} + onDown={this.onDown} />
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index b40a08086..7b8f116b7 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -10,10 +10,29 @@ .propertiesView-title { background-color: rgb(159, 159, 159); text-align: center; - font-size: 18px; - font-weight: bold; padding-top: 12px; padding-bottom: 12px; + display: flex; + + .propertiesView-title-name { + font-size: 18px; + font-weight: bold; + padding-left: 45px; + } + + .propertiesView-title-icon { + width: 20px; + height: 20px; + padding-left: 32px; + margin-top: -5px; + + &:hover { + color: grey; + cursor: pointer; + } + + } + } .propertiesView-name { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index e911c7a9f..a75ad13e5 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -25,6 +25,7 @@ interface PropertiesViewProps { height: number; renderDepth: number; ScreenToLocalTransform: () => Transform; + onDown: (event: any) => void; } @observer @@ -225,7 +226,10 @@ export class PropertiesView extends React.Component { return
- Properties +
Properties
+
+ +
{this.selectedDoc.title} diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index b17accfd6..fa7fe64f3 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -194,8 +194,11 @@ export class DocumentLinksButton 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 ?
Date: Sat, 25 Jul 2020 10:49:33 -0500 Subject: merge fix --- src/client/views/collections/CollectionView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 2ea391b19..2d360d13c 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -48,7 +48,7 @@ import { CollectionTimeView } from './CollectionTimeView'; import { CollectionTreeView } from "./CollectionTreeView"; import './CollectionView.scss'; import CollectionMenu from './CollectionMenu'; -import { SharingPermissions } from '../../util/SharingManager'; +//import SharingPermissions from '../../util/SharingManager'; import { DocumentView } from '../nodes/DocumentView'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 85e8409d1..bb1c43e6b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1041,7 +1041,7 @@ export class DocumentView extends DocComponent(Docu @computed get contents() { const pos = this.props.relative ? "relative " : "absolute"; TraceMobx(); - return (
+ return (
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 eab29b953a24659f16901fa10522f3787212ccc0 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 26 Jul 2020 11:25:48 -0500 Subject: merge fix again --- src/client/views/MainView.scss | 2 +- src/client/views/PropertiesButtons.tsx | 70 ++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 51548bf58..792cb5b1f 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -137,7 +137,7 @@ right: 0; top: 0; border-left: solid 1px; - z-index: 10000; + z-index: 100000; cursor: auto; } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 32a98b072..d2f6b1155 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -354,6 +354,73 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } + @computed + get onClickButton() { + if (this.selectedDoc) { + return
Choose onClick behavior
}> +
+ +
e.stopPropagation()} > + {} +
+ +
; + } else { + return null; + } + } + + @computed + get onClickFlyout() { + return
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
; + + // 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: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" }); + // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" }); + // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" }); + // onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); + // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); + } + render() { if (!this.selectedDoc) return (null); @@ -388,6 +455,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.sharingButton}
+
+ {this.onClickButton} +
{this.considerGoogleDocsPush}
-- cgit v1.2.3-70-g09d2 From a607928d563520fc0a07c559334ea7039d269d3a Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 26 Jul 2020 16:19:23 -0500 Subject: overflow, open in tab bug fixes --- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/MainView.scss | 1 + src/client/views/MainView.tsx | 9 +++++---- src/client/views/PropertiesButtons.scss | 1 + src/client/views/PropertiesButtons.tsx | 23 ++++++++++++++++++++++ .../collectionFreeForm/PropertiesView.scss | 5 +++-- src/client/views/nodes/DocumentView.tsx | 2 ++ 7 files changed, 36 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 87222e942..c889557ba 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -619,7 +619,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
{"_"}
} -
Open Document In Tab
} placement="top">
+
Open Document In Tab
} placement="top">
{SelectionManager.SelectedDocuments().length === 1 ? : "..."}
//
; // } @@ -519,10 +520,10 @@ export class MainView extends React.Component {
this.selectPanel("deleted")}> -
Recently Closed
+ style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used
{ // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); } + @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) + } + }}> + {} +
+ ; + } + render() { if (!this.selectedDoc) return (null); @@ -428,6 +447,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { 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; return
{this.templateButton} @@ -464,6 +484,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.considerGoogleDocsPull}
+
+ {this.googlePhotosButton} +
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 7b8f116b7..99db0022e 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -5,7 +5,8 @@ font-family: "Noto Sans"; cursor: auto; - overflow-y: scroll; + overflow-x: visible; + overflow-y: visible; .propertiesView-title { background-color: rgb(159, 159, 159); @@ -23,7 +24,7 @@ .propertiesView-title-icon { width: 20px; height: 20px; - padding-left: 32px; + padding-left: 38px; margin-top: -5px; &:hover { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 0cfb12f95..6aceec90e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -101,6 +101,7 @@ export interface DocumentViewProps { radialMenu?: String[]; display?: string; relative?: boolean; + scriptContext?: any; } @observer @@ -323,6 +324,7 @@ 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"]) { -- 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 e93058822d2b997b48fb711f49bb14357a61143c Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 26 Jul 2020 22:54:10 -0500 Subject: layout check in properties, rich text menu to top --- src/client/views/MainView.tsx | 4 +- src/client/views/PropertiesButtons.scss | 9 ++ src/client/views/PropertiesButtons.tsx | 99 ++++++++++++++-------- src/client/views/collections/CollectionMenu.tsx | 44 +++++++--- .../collectionFreeForm/PropertiesView.scss | 21 ++++- .../collectionFreeForm/PropertiesView.tsx | 31 ++++++- src/client/views/nodes/DocumentView.tsx | 13 +++ .../views/nodes/formattedText/RichTextMenu.tsx | 47 +++++----- 8 files changed, 192 insertions(+), 76 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4f85ef333..153df7d9d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -628,7 +628,7 @@ export class MainView extends React.Component { } @computed get mainContent() { - const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); + const n = (RichTextMenu.Instance?.Pinned ? 0 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0; @@ -799,7 +799,7 @@ export class MainView extends React.Component { {/* {this.search} */} - + {/* */} {LinkDescriptionPopup.descriptionPopup ? : null} {DocumentLinksButton.EditLink ? : (null)} {LinkDocPreview.LinkInfo ? { @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } + @observable public onClick = this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; + public startPullOutcome = action((success: boolean) => { if (!this._pullAnimating) { this._pullAnimating = true; @@ -373,54 +376,80 @@ export class PropertiesButtons extends React.Component<{}, {}> { } } + @action + handleOptionChange = (e: any) => { + const value = e.target.value; + this.onClick = e.target.value; + if (value === "nothing") { + this.selectedDocumentView?.noOnClick; + } else if (value === "enterPortal") { + //this.selectedDocumentView?.noOnClick; + this.selectedDocumentView?.makeIntoPortal; + } else if (value === "toggleDetail") { + //this.selectedDocumentView?.noOnClick; + this.selectedDocumentView?.toggleDetail; + } else if (value === "linkInPlace") { + //this.selectedDocumentView?.noOnClick; + this.selectedDocumentView?.toggleFollowInPlace; + } else if (value === "linkOnRight") { + //this.selectedDocumentView?.noOnClick; + this.selectedDocumentView?.toggleFollowOnRight; + } + } + + @undoBatch @action + editOnClickScript = () => { + if (this.selectedDoc) { + DocUtils.makeCustomViewClicked(this.selectedDoc, undefined, "onClick"); + } + } + @computed get onClickFlyout() { return
+ + Select Document +
+ + Enter Portal +
+ + Toggle Detail +
+ + Follow Link +
+ + Open Link on Right +
-
- -
-
; - - // 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: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" }); - // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" }); - // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" }); - // onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); - // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); + +
Edit onClick Script
+
; } @computed @@ -452,9 +481,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.templateButton}
-
+ {/*
{this.metadataButton} -
+
*/}
{this.pinButton}
@@ -470,14 +499,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.deleteButton}
+
+ {this.onClickButton} +
{this.sharingButton}
-
- {this.onClickButton} -
{this.considerGoogleDocsPush}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 24be69050..5a7c98f46 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"; @observer export default class CollectionMenu extends AntimodeMenu { @@ -300,6 +302,20 @@ export class CollectionFreeFormViewChrome extends React.Component { @@ -469,25 +485,27 @@ export class CollectionFreeFormViewChrome extends React.Component -
+ {!!!this.isText ?
-
-
+
: null} + {!!!this.isText ?
-
-
: null} + {!!!this.isText ?
this.Document.editing = !this.Document.editing)} > {NumCast(this.Document.currentFrame)} -
-
+
: null} + {!!!this.isText ?
-
+
: null} + + {!!!this.isText ? this.widthPicker : null} + {!!!this.isText ? this.colorPicker : null} + {!!!this.isText ? this.fillPicker : null} + {!!!this.isText ? this.drawButtons : null} + {!!!this.isText ? this.formatPane : null} + {this.isText ? : null} - {this.widthPicker} - {this.colorPicker} - {this.fillPicker} - {this.drawButtons} - {this.formatPane}
; } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 99db0022e..8cc591875 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -164,9 +164,26 @@ padding: 8.5px; .propertiesView-fields-title { - font-size: 12.5px; - font-weight: bold; padding-bottom: 7px; + display: flex; + + .propertiesView-fields-title-name { + font-size: 12.5px; + font-weight: bold; + } + + .propertiesView-fields-title-checkbox { + float: right; + height: 20px; + margin-top: -13px; + margin-left: 115px; + + .propertiesView-fields-title-checkbox-text { + font-size: 7px; + margin-top: -10px; + margin-left: 6px; + } + } } .propertiesView-fields-content { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index a75ad13e5..3b8d782aa 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -16,7 +16,7 @@ import { Transform } from "../../../util/Transform"; import { PropertiesButtons } from "../../PropertiesButtons"; import { SelectionManager } from "../../../util/SelectionManager"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Tooltip } from "@material-ui/core"; +import { Tooltip, Checkbox } from "@material-ui/core"; import SharingManager from "../../../util/SharingManager"; @@ -41,6 +41,8 @@ export class PropertiesView extends React.Component { @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } + @observable layoutFields: boolean = false; + @action rtfWidth = () => { if (this.selectedDoc) { @@ -88,9 +90,9 @@ export class PropertiesView extends React.Component { } @computed get expandedField() { - if (this.dataDoc) { + if (this.dataDoc && this.selectedDoc) { const ids: { [key: string]: string } = {}; - const doc = this.dataDoc; + 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[] = []; @@ -215,6 +217,19 @@ export class PropertiesView extends React.Component {
; } + @computed get fieldsCheckbox() { + return ; + } + + @action + toggleCheckbox = () => { + this.layoutFields = !this.layoutFields; + } + render() { if (!this.selectedDoc) { @@ -247,7 +262,15 @@ export class PropertiesView extends React.Component {
-
Fields
+
+
+ Fields +
+
+ {this.fieldsCheckbox} +
Layout
+
+
{this.expandedField}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 6aceec90e..884104f62 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -622,6 +622,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) => { @@ -673,6 +685,7 @@ export class DocumentView extends DocComponent(Docu @undoBatch @action makeIntoPortal = async () => { + console.log("into portal"); const portalLink = DocListCast(this.Document.links).find(d => d.anchor1 === this.props.Document); if (!portalLink) { const portal = Docs.Create.FreeformDocument([], { _width: NumCast(this.layoutDoc._width) + 10, _height: NumCast(this.layoutDoc._height), title: StrCast(this.props.Document.title) + ".portal" }); diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 47a4911b8..98c786566 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 }, @@ -918,28 +919,34 @@ 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(), - this.createBrushButton(), + //this.createLinkButton(), + //this.createBrushButton(),
, this.createButton("align-left", "Align Left", this.activeAlignment === "left", this.alignLeft), this.createButton("align-center", "Align Center", this.activeAlignment === "center", this.alignCenter), this.createButton("align-right", "Align Right", this.activeAlignment === "right", this.alignRight), this.createButton("indent", "Inset More", undefined, this.insetParagraph), this.createButton("outdent", "Inset Less", undefined, this.outsetParagraph), - this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph), - this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph), + //this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph), + //this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph), ]}
; const row2 =
@@ -950,21 +957,21 @@ export default class RichTextMenu extends AntimodeMenu { this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => this.activeFontFamily = val)),
, this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", action((val: string) => this.activeListType = val)), - this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer), + //this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer), this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote), this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule),
,]}
-
- {/*
+ {/*
+ {
-
*/} +
} -
+
*/}
; return ( -- cgit v1.2.3-70-g09d2 From c041b8f619957d4058c42cca894409418fde54f6 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 27 Jul 2020 11:43:38 +0530 Subject: css changes --- src/client/util/GroupMemberView.scss | 3 ++- src/client/util/GroupMemberView.tsx | 11 +++++++++-- src/client/util/SharingManager.scss | 2 +- src/client/util/SharingManager.tsx | 7 ++++++- 4 files changed, 18 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss index c609c5c7b..2fc27ed03 100644 --- a/src/client/util/GroupMemberView.scss +++ b/src/client/util/GroupMemberView.scss @@ -41,6 +41,7 @@ margin-top: -5; height: 20; text-overflow: ellipsis; + background: none; &:hover { text-overflow: visible; @@ -72,7 +73,7 @@ .editing-contents { overflow-y: auto; - height: 65%; + height: 62%; width: 100%; color: black; margin-top: -15px; diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx index f20670c4e..531ef988a 100644 --- a/src/client/util/GroupMemberView.tsx +++ b/src/client/util/GroupMemberView.tsx @@ -29,13 +29,17 @@ export default class GroupMemberView extends React.Component !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : []; + const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group); + return (!this.props.group ? null :
this.props.group.groupName = e.currentTarget.value} + disabled={!hasEditAccess} >
@@ -65,12 +69,15 @@ export default class GroupMemberView extends React.Component this.memberSort = this.memberSort === "ascending" ? "descending" : this.memberSort === "descending" ? "none" : "ascending")}> Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
-
+
{members.map(member => (
{member}
- {GroupManager.Instance.hasEditAccess(this.props.group) ? + {hasEditAccess ?
GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss index 130785672..d71ff0cf6 100644 --- a/src/client/util/SharingManager.scss +++ b/src/client/util/SharingManager.scss @@ -1,6 +1,6 @@ .sharing-interface { width: 600px; - height: 360px; + // height: 360px; .overlay { transform: translate(-20px, -20px); diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 452a58d21..9fbdfa8e5 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -294,7 +294,7 @@ export default class SharingManager extends React.Component<{}> { const { left, width, top, height } = this.shareDocumentButtonRef.current!.getBoundingClientRect(); TaskCompletionBox.popupX = left - 1.5 * width; - TaskCompletionBox.popupY = top - height; + TaskCompletionBox.popupY = top - 1.5 * height; TaskCompletionBox.textDisplayed = "Document shared!"; TaskCompletionBox.taskCompleted = true; setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2000); @@ -460,6 +460,11 @@ export default class SharingManager extends React.Component<{}> { options={options} onChange={this.handleUsersChange} value={this.selectedUsers} + styles={{ + indicatorSeparator: () => ({ + visibility: "hidden" + }) + }} /> ({ - visibility: "hidden" - }) - }} - /> - - +
+
+ this.showUserOptions = !this.showUserOptions)} /> + this.showGroupOptions = !this.showGroupOptions)} /> +
}
@@ -481,17 +528,8 @@ export default class SharingManager extends React.Component<{}> { onClick={action(() => this.individualSort = this.individualSort === "ascending" ? "descending" : this.individualSort === "descending" ? "none" : "ascending")}> Individuals {this.individualSort === "ascending" ? "↑" : this.individualSort === "descending" ? "↓" : ""} {/* → */}
-
{/*200*/} - { - !displayUserList ? -
- There are no users this document has been shared with. -
- : - userListContents - } +
{/*200*/} + {userListContents}
diff --git a/src/fields/util.ts b/src/fields/util.ts index a62795e64..cf8e730fd 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -115,6 +115,7 @@ export function OVERRIDE_ACL(val: boolean) { _overrideAcl = val; } +// playground mode allows the user to add/delete documents or make layout changes without them saving to the server let playgroundMode = false; export function togglePlaygroundMode() { @@ -125,12 +126,27 @@ export function getPlaygroundMode() { return playgroundMode; } +// the list of groups that the current user is a member of let currentUserGroups: string[] = []; +// called from GroupManager once the groups have been fetched from the server export function setGroups(groups: string[]) { currentUserGroups = groups; } +/** + * These are the various levels of access a user can have to a document. + * + * Admin: a user with admin access to a document can remove/edit that document, add/remove/edit annotations (depending on permissions), as well as change others' access rights to that document. + * + * Edit: a user with edit access to a document can remove/edit that document, add/remove/edit annotations (depending on permissions), but not change any access rights to that document. + * + * Add: a user with add access to a document can add documents/annotations to that document but cannot edit or delete anything. + * + * View: a user with view access to a document can only view it - they cannot add/remove/edit anything. + * + * None: the document is not shared with that user. + */ export enum SharingPermissions { Admin = "Admin", Edit = "Can Edit", @@ -139,18 +155,21 @@ export enum SharingPermissions { None = "Not Shared" } +/** + * Calculates the effective access right to a document for the current user. + */ export function GetEffectiveAcl(target: any, in_prop?: string | symbol | number): symbol { if (in_prop === UpdatingFromServer || target[UpdatingFromServer]) return AclAdmin; if (target[AclSym] && Object.keys(target[AclSym]).length) { + // if the current user is the author of the document / the current user is a member of the admin group if (target.__fields?.author === Doc.CurrentUserEmail || target.author === Doc.CurrentUserEmail || currentUserGroups.includes("admin")) return AclAdmin; + // if the ACL is being overriden or the property being modified is one of the playground fields (which can be freely modified) if (_overrideAcl || (in_prop && DocServer.PlaygroundFields?.includes(in_prop.toString()))) return AclEdit; let effectiveAcl = AclPrivate; - let aclPresent = false; - const HierarchyMapping = new Map([ [AclPrivate, 0], [AclReadonly, 1], @@ -160,19 +179,26 @@ export function GetEffectiveAcl(target: any, in_prop?: string | symbol | number) ]); for (const [key, value] of Object.entries(target[AclSym])) { + // there are issues with storing fields with . in the name, so they are replaced with _ during creation + // as a result we need to restore them again during this comparison. if (currentUserGroups.includes(key.substring(4)) || Doc.CurrentUserEmail === key.substring(4).replace("_", ".")) { - if (HierarchyMapping.get(value as symbol)! >= HierarchyMapping.get(effectiveAcl)!) { - aclPresent = true; + if (HierarchyMapping.get(value as symbol)! > HierarchyMapping.get(effectiveAcl)!) { effectiveAcl = value as symbol; - if (effectiveAcl === AclEdit) break; + if (effectiveAcl === AclAdmin) break; } } } - return aclPresent ? effectiveAcl : AclEdit; + return effectiveAcl; } return AclAdmin; } - +/** + * Recursively distributes the access right for a user across the children of a document and its annotations. + * @param key the key storing the access right (e.g. ACL-groupname) + * @param acl the access right being stored (e.g. "Can Edit") + * @param target the document on which this access right is being set + * @param inheritingFromCollection whether the target is being assigned rights after being dragged into a collection (and so is inheriting the ACLs from the collection) + */ export function distributeAcls(key: string, acl: SharingPermissions, target: Doc, inheritingFromCollection?: boolean) { const HierarchyMapping = new Map([ @@ -185,32 +211,31 @@ export function distributeAcls(key: string, acl: SharingPermissions, target: Doc const dataDoc = target[DataSym]; + // if it is inheriting from a collection, it only inherits if A) the key doesn't already exist or B) the right being inherited is more restrictive if (!inheritingFromCollection || !target[key] || HierarchyMapping.get(StrCast(target[key]))! > HierarchyMapping.get(acl)!) target[key] = acl; if (dataDoc && (!inheritingFromCollection || !dataDoc[key] || HierarchyMapping.get(StrCast(dataDoc[key]))! > HierarchyMapping.get(acl)!)) { dataDoc[key] = acl; + // maps over the children of the document DocListCast(dataDoc[Doc.LayoutFieldKey(dataDoc)]).map(d => { if (d.author === Doc.CurrentUserEmail && (!inheritingFromCollection || !d[key] || HierarchyMapping.get(StrCast(d[key]))! > HierarchyMapping.get(acl)!)) { - distributeAcls(key, acl, d); - d[key] = acl; + distributeAcls(key, acl, d, inheritingFromCollection); } const data = d[DataSym]; if (data && data.author === Doc.CurrentUserEmail && (!inheritingFromCollection || !data[key] || HierarchyMapping.get(StrCast(data[key]))! > HierarchyMapping.get(acl)!)) { - distributeAcls(key, acl, data); - data[key] = acl; + distributeAcls(key, acl, data, inheritingFromCollection); } }); + // maps over the annotations of the document DocListCast(dataDoc[Doc.LayoutFieldKey(dataDoc) + "-annotations"]).map(d => { if (d.author === Doc.CurrentUserEmail && (!inheritingFromCollection || !d[key] || HierarchyMapping.get(StrCast(d[key]))! > HierarchyMapping.get(acl)!)) { - distributeAcls(key, acl, d); - d[key] = acl; + distributeAcls(key, acl, d, inheritingFromCollection); } const data = d[DataSym]; if (data && data.author === Doc.CurrentUserEmail && (!inheritingFromCollection || !data[key] || HierarchyMapping.get(StrCast(data[key]))! > HierarchyMapping.get(acl)!)) { - distributeAcls(key, acl, data); - data[key] = acl; + distributeAcls(key, acl, data, inheritingFromCollection); } }); } -- cgit v1.2.3-70-g09d2 From 258ad0d8628737e01613341437eb0421359ad168 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Tue, 28 Jul 2020 00:02:40 +0900 Subject: rotation/resize fix, changed ui, added sketchpicker etc. --- src/client/util/InteractionUtils.tsx | 7 +- src/client/views/DocumentDecorations.tsx | 54 +++- src/client/views/GestureOverlay.tsx | 16 +- src/client/views/InkingStroke.tsx | 15 +- .../collectionFreeForm/FormatShapePane.scss | 4 +- .../collectionFreeForm/FormatShapePane.tsx | 333 ++++++++++++++------- .../collectionFreeForm/InkOptionsMenu.tsx | 128 ++------ src/client/views/nodes/ColorBox.tsx | 45 +-- 8 files changed, 347 insertions(+), 255 deletions(-) (limited to 'src') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 31b2a56e6..69256ce67 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -123,6 +123,12 @@ export namespace InteractionUtils { } else { pts = points; } + if (isNaN(scalex)) { + scalex = 1; + } + if (isNaN(scaley)) { + scaley = 1; + } const strpts = pts.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${(pt.X - left - width / 2) * scalex + width / 2}, ${(pt.Y - top - width / 2) * scaley + width / 2} `, ""); @@ -141,7 +147,6 @@ export namespace InteractionUtils { } } - private _prevX = 0; private _prevY = 0; private _centerPoints: { X: number, Y: number }[] = []; + private _inkDocs: { x: number, y: number, width: number, height: number }[] = []; @observable private _accumulatedTitle = ""; @observable private _titleControlString: string = "#title"; @@ -309,8 +312,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> const right = Math.max(...xs); const bottom = Math.max(...ys); - doc._height = (bottom - top) * element.props.ScreenToLocalTransform().Scale; - doc._width = (right - left) * element.props.ScreenToLocalTransform().Scale; + // doc._height = (bottom - top) * element.props.ScreenToLocalTransform().Scale; + // doc._width = (right - left) * element.props.ScreenToLocalTransform().Scale; + doc._height = (bottom - top); + doc._width = (right - left); } index++; @@ -329,6 +334,16 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> _dragHeights = new Map(); @action onPointerDown = (e: React.PointerEvent): void => { + + this._inkDocs = []; + SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { + const doc = Document(element.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height) { + this._inkDocs.push({ x: doc.x, y: doc.y, width: doc._width, height: doc._height }); + } + + })); + setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, (e) => { }); if (e.button === 0) { this._resizeHdlId = e.currentTarget.id; @@ -501,6 +516,28 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> (e.button === 0) && this._resizeUndo?.end(); this._resizeUndo = undefined; SnappingManager.clearSnapLines(); + + + //need to change points for resize, or else rotation/control points will fail. + SelectionManager.SelectedDocuments().forEach(action((element: DocumentView, index) => { + const doc = Document(element.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var i = 0; i < ink.length; i++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - this._inkDocs[index].x) + (ink[i].X * doc._width) / this._inkDocs[index].width; + const newY = (doc.y - this._inkDocs[index].y) + (ink[i].Y * doc._height) / this._inkDocs[index].height; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + + } + + } + })); } @computed @@ -591,6 +628,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (bounds.y > bounds.b) { bounds.y = bounds.b - (this._resizeBorderWidth + this._linkBoxHeight + this._titleHeight); } + var offset = 0; + //make offset larger for ink to edit points + if (seldoc.rootDoc.type === DocumentType.INK) { + offset = 20; + } return (
{bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <>
{maximizeIcon} {titleArea} diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 2eec8ed6a..9faf5e6a5 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -668,6 +668,10 @@ export default class GestureOverlay extends Touchable { } makePolygon = (shape: string, gesture: boolean) => { + //take off gesture recognition for now + if (gesture) { + return false; + } const xs = this._points.map(p => p.X); const ys = this._points.map(p => p.Y); var right = Math.max(...xs); @@ -796,19 +800,7 @@ export default class GestureOverlay extends Touchable { break; case "line": this._points.push({ X: left, Y: top }); - - this._points.push({ X: left, Y: top }); - - // this._points.push({ X: right, Y: bottom }); - // this._points.push({ X: right, Y: bottom }); - // this._points.push({ X: right, Y: bottom }); - // this._points.push({ X: right, Y: bottom }); - - - this._points.push({ X: right, Y: bottom }); this._points.push({ X: right, Y: bottom }); - - // this._points.push({ X: right, Y: bottom - 1 }); break; case "arrow": const x1 = left; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 22c89b6da..b03d8e79b 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -105,9 +105,9 @@ export class InkingStroke extends ViewBoxBaseComponent= 4) { for (var i = 0; i <= data.length - 4; i += 4) { controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); @@ -125,6 +125,15 @@ export class InkingStroke extends ViewBoxBaseComponent { switch (field) { case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break; + // case "rot": this.selectedInk?.forEach(i => i.rootDoc.rotation = NumCast(i.rootDoc.rotation) + (dirs === "up" ? 0.1 : -0.1)); break; case "Xps": this.selectedInk?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break; case "Yps": this.selectedInk?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break; case "stk": this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break; case "wid": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + //redraw points const oldWidth = NumCast(i.rootDoc._width); + const oldHeight = NumCast(i.rootDoc._height); + const oldX = NumCast(i.rootDoc.x); + const oldY = NumCast(i.rootDoc.y); i.rootDoc._width = oldWidth + (dirs === "up" ? 10 : - 10); this._lock && (i.rootDoc._height = (i.rootDoc._width / oldWidth * NumCast(i.rootDoc._height))); + const doc = Document(i.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; + const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } }); break; case "hgt": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + const oldWidth = NumCast(i.rootDoc._width); const oldHeight = NumCast(i.rootDoc._height); - i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10); + const oldX = NumCast(i.rootDoc.x); + const oldY = NumCast(i.rootDoc.y); i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10); this._lock && (i.rootDoc._width = (i.rootDoc._height / oldHeight * NumCast(i.rootDoc._width))); + const doc = Document(i.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; + const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } }); break; } @@ -124,12 +164,11 @@ export default class FormatShapePane extends AntimodeMenu { @undoBatch @action - rotate = (degrees: number) => { - this.selectedInk?.forEach(action(inkView => { + rotate = (angle: number) => { + const _centerPoints: { X: number, Y: number }[] = []; + SelectionManager.SelectedDocuments().forEach(action(inkView => { const doc = Document(inkView.rootDoc); if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { - const angle = Number(degrees) - Number(doc.rotation); - doc.rotation = Number(degrees); const ink = Cast(doc.data, InkField)?.inkData; if (ink) { const xs = ink.map(p => p.X); @@ -138,25 +177,37 @@ export default class FormatShapePane extends AntimodeMenu { const top = Math.min(...ys); const right = Math.max(...xs); const bottom = Math.max(...ys); - const _centerPoints: { X: number, Y: number }[] = []; _centerPoints.push({ X: left, Y: top }); + } + } + })); + + var index = 0; + SelectionManager.SelectedDocuments().forEach(action(inkView => { + const doc = Document(inkView.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + doc.rotation = Number(doc.rotation) + Number(angle); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { const newPoints: { X: number, Y: number }[] = []; for (var i = 0; i < ink.length; i++) { - const newX = Math.cos(angle) * (ink[i].X - _centerPoints[0].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].X; - const newY = Math.sin(angle) * (ink[i].X - _centerPoints[0].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].Y; + const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y; newPoints.push({ X: newX, Y: newY }); } doc.data = new InkField(newPoints); - const xs2 = newPoints.map(p => p.X); - const ys2 = newPoints.map(p => p.Y); - const left2 = Math.min(...xs2); - const top2 = Math.min(...ys2); - const right2 = Math.max(...xs2); - const bottom2 = Math.max(...ys2); - doc._height = (bottom2 - top2) * inkView.props.ScreenToLocalTransform().Scale; - doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; + const xs = newPoints.map(p => p.X); + const ys = newPoints.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + const right = Math.max(...xs); + const bottom = Math.max(...ys); + + doc._height = (bottom - top); + doc._width = (right - left); } + index++; } })); } @@ -180,8 +231,10 @@ export default class FormatShapePane extends AntimodeMenu { (order === 0 && controlNum !== 0 && i === controlNum - 1) || (order === 3 && i === controlNum - 1) || (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 1) || - (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2)) { - newPoints.push({ X: ink[i].X - (xDiff), Y: ink[i].Y - (yDiff) }); + (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2) + || ((ink[0].X === ink[ink.length - 1].X) && (ink[0].Y === ink[ink.length - 1].Y) && (i === 0 || i === ink.length - 1) && (controlNum === 0 || controlNum === ink.length - 1)) + ) { + newPoints.push({ X: ink[i].X - (xDiff * inkView.props.ScreenToLocalTransform().Scale), Y: ink[i].Y - (yDiff * inkView.props.ScreenToLocalTransform().Scale) }); } else { newPoints.push({ X: ink[i].X, Y: ink[i].Y }); @@ -189,6 +242,10 @@ export default class FormatShapePane extends AntimodeMenu { } const oldx = doc.x; const oldy = doc.y; + const xs = newPoints.map(p => p.X); + const ys = newPoints.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); doc.data = new InkField(newPoints); const xs2 = newPoints.map(p => p.X); const ys2 = newPoints.map(p => p.Y); @@ -196,141 +253,202 @@ export default class FormatShapePane extends AntimodeMenu { const top2 = Math.min(...ys2); const right2 = Math.max(...xs2); const bottom2 = Math.max(...ys2); - doc._height = (bottom2 - top2) * inkView.props.ScreenToLocalTransform().Scale; - doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; - doc.x = oldx; - doc.y = oldy; + doc._height = (bottom2 - top2); + doc._width = (right2 - left2); + + doc.x = oldx - (left - left2); + doc.y = oldy - (top - top2); } } } })); } + @undoBatch + @action + switchStk = (color: ColorState) => { + const val = String(color.hex); + this.colorStk = val; + return true; + } - colorPicker(setter: (color: string) => {}) { - return
- {this._palette.map(color => - )} + @undoBatch + @action + switchFil = (color: ColorState) => { + const val = String(color.hex); + this.colorFil = val; + return true; + } + + + colorPicker(setter: (color: string) => {}, type: string) { + return
+
; } inputBox = (key: string, value: any, setter: (val: string) => {}) => { return <> - setter(e.target.value)} + onChange={undoBatch(action((e) => setter(e.target.value)))} autoFocus /> -
- ; } + inputBoxDuo = (key: string, value: any, setter: (val: string) => {}, title1: string, key2: string, value2: any, setter2: (val: string) => {}, title2: string) => { + return <> + {title1} +

{title2}

+ + setter(e.target.value)} + autoFocus /> + + + {title2 === "" ? "" : <> + setter2(e.target.value)} + autoFocus /> + +
+ } + ; + } + + colorButton(value: string, setter: () => {}) { return <> - -

; } controlPointsButton() { return <> - + + +

+ ; + } + + lockRatioButton() { + return <> + +

+ ; + } + + rotate90Button() { + return <> +

; } - @computed get fillButton() { return this.colorButton(this.colorFil, () => this._fillBtn = !this._fillBtn); } - @computed get lineButton() { return this.colorButton(this.colorStk, () => this._lineBtn = !this._lineBtn); } + @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); } - @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color); } + @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color, "fil"); } + @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color, "stk"); } @computed get stkInput() { return this.inputBox("stk", this.widthStk, (val: string) => this.widthStk = val); } - @computed get hgtInput() { return this.inputBox("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val); } + @computed get dashInput() { return this.inputBox("dsh", this.widthStk, (val: string) => this.widthStk = val); } + + @computed get hgtInput() { return this.inputBoxDuo("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val, "H:", "wid", this.shapeWid, (val: string) => this.shapeWid = val, "W:"); } @computed get widInput() { return this.inputBox("wid", this.shapeWid, (val: string) => this.shapeWid = val); } - @computed get rotInput() { return this.inputBox("rot", this.shapeRot, (val: string) => this.shapeRot = val); } - @computed get XpsInput() { return this.inputBox("Xps", this.shapeXps, (val: string) => this.shapeXps = val); } + @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); } + + @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); } @computed get controlPoints() { return this.controlPointsButton(); } + @computed get lockRatio() { return this.lockRatioButton(); } + @computed get rotate90() { return this.rotate90Button(); } - @computed get propertyGroupItems() { - const fillCheck =
- this.unFilled = true))} /> - No Fill -
- this.solidFil = true))} /> - Solid Fill -

- {this.solidFil ? "Color" : ""} - {this.solidFil ? this.fillButton : ""} - {this._fillBtn && this.solidFil ? this.fillPicker : ""} -
; - const markers = <> - this.markHead = this.markHead ? "" : "arrow"))} /> - Arrow Head -
- this.markTail = this.markTail ? "" : "arrow"))} /> - Arrow End -
- ; + @computed get propertyGroupItems() { + const fillCheck =
= 1) ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + Fill: + {this.fillButton} +
+ Stroke: + {this.lineButton} +
- const lineCheck =
- this.unStrokd = true))} /> - No Line -
- this.solidStk = true))} /> - Solid Line -
- this.dashdStk = "2"))} /> - Dash Line -
-
- {(this.solidStk || this.dashdStk) ? "Color" : ""} - {(this.solidStk || this.dashdStk) ? this.lineButton : ""} - {(this.solidStk || this.dashdStk) && this._lineBtn ? this.linePicker : ""} -
+ {this._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""} + {this._fillBtn || this._lineBtn ? "" :
} {(this.solidStk || this.dashdStk) ? "Width" : ""} {(this.solidStk || this.dashdStk) ? this.stkInput : ""} - {(this.solidStk || this.dashdStk) ? this.widthStk = e.target.value} /> : (null)} -

- {(this.solidStk || this.dashdStk) ? markers : ""} -
; - const sizeCheck =
- Height {this.hgtInput} -

- Width {this.widInput} -

- this._lock = !this._lock))} /> - Lock Ratio -

- Rotation {this.rotInput} -

- Edit Points {this.controlPoints} -
; - const positionCheck =
- Horizontal {this.XpsInput} -

- Vertical {this.YpsInput} -

+ {(this.solidStk || this.dashdStk) ? this.widthStk = e.target.value))} /> : (null)} +
+ {(this.solidStk || this.dashdStk) ? <> +

Arrow Head

+ this.markHead = this.markHead ? "" : "arrow"))} style={{ position: "absolute", right: 110, width: 20 }} /> +

Arrow End

+ this.markTail = this.markTail ? "" : "arrow"))} style={{ position: "absolute", right: 0, width: 20 }} /> +
+ : ""} + Dash: this.dashdStk = this.dashdStk === "2" ? "0" : "2"))} style={{ position: "absolute", right: 110, width: 20 }} /> + + +
; - const subMenus = this._currMode === "fill-drip" ? [`fill`, `line`] : [`size`, `position`]; - const menuItems = this._currMode === "fill-drip" ? [fillCheck, lineCheck] : [sizeCheck, positionCheck]; - const indexOffset = this._currMode === "fill-drip" ? 0 : 2; + + + const sizeCheck = + +
= 1) ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + {this.controlPoints} + {this.hgtInput} + {this.XpsInput} + {this.rotInput} + +
; + + + const subMenus = this._currMode === "fill-drip" ? [`Appearance`, 'Transform'] : []; + const menuItems = this._currMode === "fill-drip" ? [fillCheck, sizeCheck] : []; + const indexOffset = 0; + return
{subMenus.map((subMenu, i) =>
@@ -361,6 +479,7 @@ export default class FormatShapePane extends AntimodeMenu { } render() { - return this.getElementVert([this.closeBtn, this.propertyGroupBtn, this.propertyGroupItems]); + return this.getElementVert([this.closeBtn, + this.propertyGroupItems]); } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 15707ad9e..80d1264ce 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -16,11 +16,11 @@ import { Document } from "../../../../fields/documentSchemas"; import { DocumentType } from "../../../documents/DocumentTypes"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; -import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, } from "@fortawesome/free-solid-svg-icons"; +import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, faArrowRight, faArrowsAltH, faMinus, faCircle, faExclamationTriangle, faSquare, faLongArrowAltRight, faPenFancy, faCaretSquareRight, faAngleDoubleRight, } from "@fortawesome/free-solid-svg-icons"; import { Cast, StrCast, BoolCast } from "../../../../fields/Types"; import FormatShapePane from "./FormatShapePane"; -library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve); +library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, faLongArrowAltRight, faArrowsAltH, faMinus, faCircle, faSquare, faSquare, faPenFancy, faAngleDoubleRight,); @@ -30,18 +30,13 @@ export default class InkOptionsMenu extends AntimodeMenu { private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""]; private _width = ["1", "5", "10", "100"]; - // private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"]; - // private _icons = ["O", "∆", "ロ", "➜", "-"]; - // private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",]; - // private _icons = ["O", "∆", "ロ", "⎯⎯⎯", "✖︎", " "]; - //arrowStart and arrowEnd must match and defs must exist in Inking Stroke - // private _arrowStart = ["arrowStart", "arrowStart", "dot", "dot", "none"]; - // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"]; - // private _arrowIcons = ["→", "↔︎", "•", "••", " "]; - private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; - private _head = ["", "", "arrow", "", "", "arrow", "", "", ""]; - private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""]; - private _shape = ["line", "line", "line", "", "", "", "rectangle", "circle", "triangle"]; + private _dotsize = [10, 20, 30, 40]; + private _draw = ["∿", "⎯", "→", "↔︎", "ロ", "O"]; + private _head = ["", "", "", "arrow", "", ""]; + private _end = ["", "", "arrow", "arrow", "", ""]; + private _shape = ["", "line", "line", "line", "rectangle", "circle"]; + private _title = ["pen", "line", "line with arrow", "line with double arrows", "square", "circle",]; + private _faName = ["pen-fancy", "minus", "long-arrow-alt-right", "arrows-alt-h", "square", "circle"]; @observable _shapesNum = this._shape.length; @observable _selected = this._shapesNum; @@ -154,6 +149,7 @@ export default class InkOptionsMenu extends AntimodeMenu { return ; })}
; return drawButtons; } - // @computed get arrowPicker() { - // var currIcon; - // for (var i = 0; i < this._arrowStart.length; i++) { - // if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) { - // currIcon = this._arrowIcons[i]; - // if (this._arrowIcons[i] === " ") { - // currIcon = "➤"; - // } - // } - // } - // var arrowPicker = ; - // if (this._arrowBtn) { - // arrowPicker =
- // {arrowPicker} - // {this._arrowStart.map((arrowStart, i) => { - // return ; - // })} - //
; - // } - // return arrowPicker; - // } @computed get widthPicker() { var widthPicker = ; })}
; @@ -273,7 +238,7 @@ export default class InkOptionsMenu extends AntimodeMenu { var colorPicker = ; } @@ -310,7 +275,7 @@ export default class InkOptionsMenu extends AntimodeMenu { var fillPicker = ; - // if (this._shapeBtn) { - // shapePicker =
- // {shapePicker} - // {this._buttons.map((btn, i) => { - // var ttl = btn; - // if (btn === "") { - // ttl = "no shape"; - // } - // if (btn === "noRec") { - // ttl = "disable shape recognition"; - // } - // return ; - // })} - //
; - // } - // return shapePicker; - // } @computed get bezierButton() { return , - // this.shapePicker, - // this.bezierButton, + + this.drawButtons, this.widthPicker, this.colorPicker, this.fillPicker, - this.drawButtons, + + this.formatPane, - // this.arrowPicker, - // this.dashButton, + diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 57028b0ca..b186d9ffc 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -54,27 +54,30 @@ export class ColorBox extends ViewBoxBaseComponent e.button === 0 && !e.ctrlKey && e.stopPropagation()} - style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} > + // return
e.button === 0 && !e.ctrlKey && e.stopPropagation()} + // style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} > - -
-
{ActiveInkWidth() ?? 2}
- ) => { - SetActiveInkWidth(e.target.value); - SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value)); - }} /> -
{ActiveInkBezierApprox() ?? 2}
- ) => { - SetActiveBezierApprox(e.target.value); - SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value); - }} /> -
-
-
-
; + // + + //
+ //
{ActiveInkWidth() ?? 2}
+ // ) => { + // SetActiveInkWidth(e.target.value); + // SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value)); + // }} /> + //
{ActiveInkBezierApprox() ?? 2}
+ // ) => { + // SetActiveBezierApprox(e.target.value); + // SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value); + // }} /> + //
+ //
+ //
+ //
+ // ; + return <>; } } -- cgit v1.2.3-70-g09d2 From 65d3c9672fc3cf0dc981588f220dad269beb4aeb Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Tue, 28 Jul 2020 00:10:22 +0900 Subject: fixed control points from moving --- .../views/collections/collectionFreeForm/FormatShapePane.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index a47430453..adb71c6aa 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -242,8 +242,8 @@ export default class FormatShapePane extends AntimodeMenu { } const oldx = doc.x; const oldy = doc.y; - const xs = newPoints.map(p => p.X); - const ys = newPoints.map(p => p.Y); + const xs = ink.map(p => p.X); + const ys = ink.map(p => p.Y); const left = Math.min(...xs); const top = Math.min(...ys); doc.data = new InkField(newPoints); @@ -255,9 +255,11 @@ export default class FormatShapePane extends AntimodeMenu { const bottom2 = Math.max(...ys2); doc._height = (bottom2 - top2); doc._width = (right2 - left2); - + //if points move out of bounds + console.log(doc.x); doc.x = oldx - (left - left2); doc.y = oldy - (top - top2); + console.log(doc.x); } } } -- cgit v1.2.3-70-g09d2 From f869c7a75eb6a2f6e6301aa76c57e383b41d3fea Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 27 Jul 2020 11:52:37 -0400 Subject: added hypothesis icon to toolbar. fixed toolbar to update to any document selection with specific items for each type. --- package-lock.json | 15 ++ package.json | 1 + src/client/views/MainView.tsx | 5 +- src/client/views/collections/CollectionMenu.tsx | 221 ++++++++++++--------- src/client/views/collections/CollectionSubView.tsx | 4 +- src/client/views/collections/CollectionView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 1 + 7 files changed, 149 insertions(+), 100 deletions(-) (limited to 'src') diff --git a/package-lock.json b/package-lock.json index 698bd60cc..51105842a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -301,6 +301,21 @@ "@fortawesome/fontawesome-common-types": "^0.2.29" } }, + "@fortawesome/free-brands-svg-icons": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.14.0.tgz", + "integrity": "sha512-WsqPFTvJFI7MYkcy0jeFE2zY+blC4OrnB9MJOcn1NxRXT/sSfEEhrI7CwzIkiYajLiVDBKWeErYOvpsMeodmCQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.30" + }, + "dependencies": { + "@fortawesome/fontawesome-common-types": { + "version": "0.2.30", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz", + "integrity": "sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg==" + } + } + }, "@fortawesome/free-regular-svg-icons": { "version": "5.13.1", "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.1.tgz", diff --git a/package.json b/package.json index 6c466825e..3b7b5f391 100644 --- a/package.json +++ b/package.json @@ -117,6 +117,7 @@ }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.29", + "@fortawesome/free-brands-svg-icons": "^5.14.0", "@fortawesome/free-regular-svg-icons": "^5.13.1", "@fortawesome/free-solid-svg-icons": "^5.13.1", "@fortawesome/react-fontawesome": "^0.1.11", diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ae3f05fb7..9fad612ee 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,5 +1,8 @@ import { library } from '@fortawesome/fontawesome-svg-core'; +import { + faHireAHelper +} from '@fortawesome/free-brands-svg-icons'; import { faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, @@ -150,7 +153,7 @@ export class MainView extends React.Component { 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, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faUser); + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faUser, faHireAHelper); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 24be69050..0b30b5a5f 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -30,16 +30,28 @@ import { ObjectField } from "../../../fields/ObjectField"; export default class CollectionMenu extends AntimodeMenu { static Instance: CollectionMenu; - @observable SelectedCollection: CollectionView | undefined; + @observable SelectedCollection: DocumentView | undefined; + @observable FieldKey: string; constructor(props: Readonly<{}>) { super(props); + this.FieldKey = ""; CollectionMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away this.Pinned = Cast(Doc.UserDoc()["menuCollections-pinned"], "boolean", true); this.jumpTo(300, 300); } + componentDidMount() { + reaction(() => SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0], + (doc) => doc && this.SetSelection(doc)) + } + + @action + SetSelection(view: DocumentView) { + this.SelectedCollection = view; + } + @action toggleMenuPin = (e: React.MouseEvent) => { Doc.UserDoc()["menuCollections-pinned"] = this.Pinned = !this.Pinned; @@ -54,14 +66,18 @@ export default class CollectionMenu extends AntimodeMenu { ; return this.getElement(!this.SelectedCollection ? [button] : - [, + [, button]); } } interface CollectionMenuProps { - CollectionView: CollectionView; type: CollectionViewType; + fieldKey: string; + docView: DocumentView; } const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); @@ -70,7 +86,8 @@ const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); export class CollectionViewBaseChrome extends React.Component { //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\) - get target() { return this.props.CollectionView.props.Document; } + get document() { return this.props.docView?.props.Document; } + get target() { return this.document; } _templateCommand = { params: ["target", "source"], title: "item view", script: "self.target.childLayoutTemplate = getDocTemplate(self.source?.[0])", @@ -121,16 +138,16 @@ export class CollectionViewBaseChrome extends React.Component(); @@ -165,21 +182,16 @@ export class CollectionViewBaseChrome extends React.Component); - case CollectionViewType.Stacking: return (); - case CollectionViewType.Schema: return (); - case CollectionViewType.Tree: return (); - case CollectionViewType.Masonry: return (); - case CollectionViewType.Carousel3D: return (); - case CollectionViewType.Grid: return (); - default: return null; + default: + case CollectionViewType.Freeform: return (); + case CollectionViewType.Stacking: return (); + case CollectionViewType.Schema: return (); + case CollectionViewType.Tree: return (); + case CollectionViewType.Masonry: return (); + case CollectionViewType.Carousel3D: return (); + case CollectionViewType.Grid: return (); } } - - private get document() { - return this.props.CollectionView.props.Document; - } - private dropDisposer?: DragManager.DragDropDisposer; protected createDropTarget = (ele: HTMLDivElement) => { this.dropDisposer?.(); @@ -201,15 +213,15 @@ export class CollectionViewBaseChrome extends React.Component { setupMoveUpEvents(this, e, (e, down, delta) => { - const vtype = this.props.CollectionView.collectionViewType; + const vtype = this.props.type; const c = { params: ["target"], title: vtype, - script: `this.target._viewType = '${StrCast(this.props.CollectionView.props.Document._viewType)}'`, - immediate: (source: Doc[]) => this.props.CollectionView.props.Document._viewType = Doc.getDocTemplate(source?.[0]), + script: `this.target._viewType = '${StrCast(this.props.type)}'`, + immediate: (source: Doc[]) => this.document._viewType = Doc.getDocTemplate(source?.[0]), initialize: emptyFunction, }; DragManager.StartButtonDrag([this._viewRef.current!], c.script, StrCast(c.title), - { target: this.props.CollectionView.props.Document }, c.params, c.initialize, e.clientX, e.clientY); + { target: this.document }, c.params, c.initialize, e.clientX, e.clientY); return true; }, emptyFunction, emptyFunction); } @@ -217,7 +229,7 @@ export class CollectionViewBaseChrome extends React.Component { this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => DragManager.StartButtonDrag([this._commandRef.current!], c.script, c.title, - { target: this.props.CollectionView.props.Document }, c.params, c.initialize, e.clientX, e.clientY)); + { target: this.document }, c.params, c.initialize, e.clientX, e.clientY)); return true; }, emptyFunction, () => { this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => c.immediate([])); @@ -251,7 +263,7 @@ export class CollectionViewBaseChrome extends React.Component + value={StrCast(this.props.type)}> {Object.values(CollectionViewType).map(type => [CollectionViewType.Invalid, CollectionViewType.Docking].includes(type) ? (null) : (