From 2255f2ffd4d9c5818d8d26f1814b315ad914eaa9 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 8 May 2023 11:34:29 -0400 Subject: fixed dragging inkMask strokes. fixed background color/fill for strokes. fixed send to back. changed #tags to be a list --- src/client/views/FilterPanel.tsx | 4 +- src/client/views/PropertiesView.tsx | 150 +++++++-------------- src/client/views/StyleProvider.tsx | 4 +- .../CollectionFreeFormLayoutEngines.tsx | 15 +-- .../collectionFreeForm/CollectionFreeFormView.tsx | 5 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 7 +- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/button/FontIconBox.tsx | 20 +-- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 + .../views/nodes/formattedText/RichTextRules.ts | 10 +- src/fields/Doc.ts | 3 +- 11 files changed, 85 insertions(+), 137 deletions(-) (limited to 'src') diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index a237249c1..d17a4ea25 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -145,8 +145,8 @@ export class FilterPanel extends React.Component { const set = new Set([String.fromCharCode(127) + '--undefined--']); if (facetHeader === 'tags') allCollectionDocs.forEach(child => - Field.toString(child[facetHeader] as Field) - .split(':') + StrListCast(child[facetHeader]) + .filter(h => h) .forEach(key => set.add(key)) ); else diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 6582c3f2a..fff8390b3 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -7,7 +7,7 @@ import { intersection } from 'lodash'; import { action, computed, Lambda, observable } from 'mobx'; import { observer } from 'mobx-react'; import { ColorState, SketchPicker } from 'react-color'; -import { AclAdmin, AclSym, DataSym, Doc, Field, HeightSym, HierarchyMapping, NumListCast, Opt, StrListCast, WidthSym } from '../../fields/Doc'; +import { AclAdmin, AclSym, DataSym, Doc, Field, FieldResult, HeightSym, HierarchyMapping, NumListCast, Opt, StrListCast, WidthSym } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { InkField } from '../../fields/InkField'; import { List } from '../../fields/List'; @@ -152,116 +152,55 @@ export class PropertiesView extends React.Component { return 0; }; - @computed get expandedField() { + editableFields = (filter: (key: string) => boolean, reqdKeys: string[]) => { + const rows: JSX.Element[] = []; if (this.dataDoc && this.selectedDoc) { - const ids: { [key: string]: string } = {}; - const docs = SelectionManager.Views().length < 2 ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc] : SelectionManager.Views().map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); - docs.forEach(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 docvals = new Set(); - docs.forEach(doc => docvals.add(doc[key])); - const contents = Array.from(docvals.keys()).length > 1 ? '-multiple' : docs[0][key]; - if (key[0] === '#') { - rows.push( -
- {key} -   -
- ); - } else { - const contentElement = ( - (contents !== undefined ? Field.toString(contents as Field) : 'null')} - SetValue={(value: string) => { - docs.map(doc => KeyValueBox.SetField(doc, key, value, true)); - return true; - }} - /> - ); - rows.push( -
- {key + ':'} -   - {contentElement} -
- ); - } - } + const ids = new Set(reqdKeys); + const docs: Doc[] = SelectionManager.Views().length < 2 ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc] : SelectionManager.Views().map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); + docs.forEach(doc => Object.keys(doc).forEach(key => doc[key] !== ComputedField.undefined && ids.add(key))); + + // prettier-ignore + Array.from(ids).filter(filter).sort().map(key => { + const multiple = Array.from(docs.reduce((set,doc) => set.add(doc[key]), new Set()).keys()).length > 1; + const editableContents = multiple ? '-multiple-' : Field.toKeyValueString(docs[0], key); + const displayContents = multiple ? '-multiple-' : Field.toString(docs[0][key] as Field); + const contentElement = key[0] === '#' ? <> : ( + editableContents} + SetValue={(value: string) => { + value !== '-multiple-' && docs.map(doc => KeyValueBox.SetField(doc, key, value, true)); + return true; + }} + />); + rows.push( +
+ {key + ':'} +   + {contentElement} +
+ ); + }); + rows.push( -
+
''} SetValue={this.setKeyValue} />
); - return rows; } + return rows; + }; + + @computed get expandedField() { + return this.editableFields(returnTrue, []); } @computed get noviceFields() { - if (this.dataDoc) { - const ids: { [key: string]: string } = {}; - const docs = SelectionManager.Views().length < 2 ? [this.dataDoc] : SelectionManager.Views().map(dv => dv.dataDoc); - docs.forEach(doc => Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key))); - const rows: JSX.Element[] = []; - const noviceReqFields = ['author', 'creationDate', 'tags']; - const noviceLayoutFields = ['_curPage']; - const noviceKeys = [...Array.from(Object.keys(ids)).filter(key => key[0] === '#' || key.indexOf('lastModified') !== -1 || (key[0] === key[0].toUpperCase() && !key.startsWith('acl'))), ...noviceReqFields, ...noviceLayoutFields]; - for (const key of noviceKeys.sort()) { - const docvals = new Set(); - docs.forEach(doc => docvals.add(doc[key])); - const contents = Array.from(docvals.keys()).length > 1 ? '-multiple' : docs[0][key]; - if (key[0] === '#') { - rows.push( -
- {key} -   -
- ); - } else if (contents !== undefined) { - const value = Field.toString(contents as Field); - if (noviceReqFields.includes(key) || key.indexOf('lastModified') !== -1) { - rows.push( -
- {key + ': '} -
{value}
-
- ); - } else { - const contentElement = ( - (contents !== undefined ? Field.toString(contents as Field) : 'null')} - SetValue={(value: string) => { - docs.map(doc => KeyValueBox.SetField(doc, key, value, true)); - return true; - }} - /> - ); - - rows.push( -
- {key + ':'} -   - {contentElement} -
- ); - } - } - } - rows.push( -
- ''} SetValue={this.setKeyValue} /> -
- ); - return rows; - } + const noviceReqFields = ['author', 'creationDate', 'tags', '_curPage']; + return this.editableFields(key => key[0] === '#' || key.indexOf('lastModified') !== -1 || (key[0] === key[0].toUpperCase() && !key.startsWith('acl')), noviceReqFields); } @undoBatch @@ -280,9 +219,10 @@ export class PropertiesView extends React.Component { } else if (value[0] === '#') { const newVal = value + `:'${value}'`; doc[DataSym][value] = value; - const tags = StrCast(doc.tags, ':'); - if (!tags.includes(`${value}:`)) { - doc[DataSym].tags = `${tags + value + ':'}`; + const tags = StrListCast(doc.tags); + if (!tags.includes(value)) { + tags.push(value); + doc[DataSym].tags = tags.length ? new List(tags) : undefined; } return true; } diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index d13052f71..192a501f2 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -303,13 +303,13 @@ export function DefaultStyleProvider(doc: Opt, props: Opt, pivotDoc: Do let nonNumbers = 0; const pivotFieldKey = toLabel(engineProps?.pivotField ?? pivotDoc._pivotField) || 'author'; childPairs.map(pair => { - const lval = - pivotFieldKey === '#' || pivotFieldKey === 'tags' - ? Array.from(Object.keys(Doc.GetProto(pair.layout))) - .filter(k => k.startsWith('#')) - .map(k => k.substring(1)) - : Cast(pair.layout[pivotFieldKey], listSpec('string'), null); + const listValue = Cast(pair.layout[pivotFieldKey], listSpec('string'), null); const num = toNumber(pair.layout[pivotFieldKey]); if (num === undefined || Number.isNaN(num)) { nonNumbers++; } const val = Field.toString(pair.layout[pivotFieldKey] as Field); - if (lval) { - lval.forEach((val, i) => { + if (listValue) { + listValue.forEach((val, i) => { !pivotColumnGroups.get(val) && pivotColumnGroups.set(val, { docs: [], filters: [val], replicas: [] }); pivotColumnGroups.get(val)!.docs.push(pair.layout); pivotColumnGroups.get(val)!.replicas.push(i.toString()); @@ -159,8 +154,8 @@ export function computePivotLayout(poolData: Map, pivotDoc: Do docMap.set(pair.layout[Id], { x: 0, y: 0, - zIndex: -99, - width: 0, + zIndex: 0, + width: 0, // should make doc hidden in CollectionFreefromDocumentView height: 0, pair, replica: '', diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 9cc732008..25da868e0 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1158,7 +1158,10 @@ export class CollectionFreeFormView extends CollectionSubView { if (sendToBack) { - doc.zIndex = 0; + const docs = this.childLayoutPairs.map(pair => pair.layout).slice(); + docs.sort((doc1, doc2) => NumCast(doc1.zIndex) - NumCast(doc2.zIndex)); + let zfirst = docs.length ? NumCast(docs[0].zIndex) : 0; + doc.zIndex = zfirst - 1; } else if (doc.isInkMask) { doc.zIndex = 5000; } else { diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 24b9f3b25..b68bcc263 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -16,6 +16,8 @@ import { StyleProp } from '../StyleProvider'; import './CollectionFreeFormDocumentView.scss'; import { DocumentView, DocumentViewProps, OpenWhere } from './DocumentView'; import React = require('react'); +import { DocumentType } from '../../documents/DocumentTypes'; +import { InkingStroke } from '../InkingStroke'; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { dataProvider?: (doc: Doc, replica: string) => { x: number; y: number; zIndex?: number; rotation?: number; color?: string; backgroundColor?: string; opacity?: number; highlight?: boolean; z: number; transition?: string } | undefined; @@ -201,9 +203,10 @@ export class CollectionFreeFormDocumentView extends DocComponent {this.props.renderCutoffProvider(this.props.Document) ? (
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 3bdd2bf6e..f1f5f7e10 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -870,7 +870,7 @@ export class DocumentViewInternal extends DocComponent (!this.disableClickScriptFunc && this.onClickHandler ? 'none' : this.pointerEvents); @computed get contents() { TraceMobx(); - const isInk = StrCast(this.layoutDoc.layout).includes(InkingStroke.name); + const isInk = StrCast(this.layoutDoc.layout).includes(InkingStroke.name) && !this.props.LayoutTemplateString; return (
() {
{ + onClick={action(e => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; this.noTooltip = false; Doc.UnBrushAllDocs(); - }} + })} />
) : null} @@ -336,11 +336,11 @@ export class FontIconBox extends DocComponent() { style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, display: dropdown ? undefined : 'flex' }} onClick={ dropdown - ? () => { + ? action(() => { this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen; this.noTooltip = this.rootDoc.dropDownOpen; Doc.UnBrushAllDocs(); - } + }) : undefined }> {dropdown ? null : } @@ -358,12 +358,12 @@ export class FontIconBox extends DocComponent() {
{ + onClick={action(e => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; this.noTooltip = false; Doc.UnBrushAllDocs(); - }} + })} />
) : null} @@ -582,17 +582,19 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b } else if (selectedViews.length) { if (checkResult) { const selView = selectedViews.lastElement(); + const fieldKey = selView.rootDoc.type === DocumentType.INK ? 'fillColor' : 'backgroundColor'; const layoutFrameNumber = Cast(selView.props.docViewPath().lastElement()?.rootDoc?._currentFrame, 'number'); // frame number that container is at which determines layout frame values const contentFrameNumber = Cast(selView.rootDoc?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed - return CollectionFreeFormDocumentView.getStringValues(selView?.rootDoc, contentFrameNumber).backgroundColor ?? 'transparent'; + return CollectionFreeFormDocumentView.getStringValues(selView?.rootDoc, contentFrameNumber)[fieldKey] ?? 'transparent'; } selectedViews.forEach(dv => { + const fieldKey = dv.rootDoc.type === DocumentType.INK ? 'fillColor' : 'backgroundColor'; const layoutFrameNumber = Cast(dv.props.docViewPath().lastElement()?.rootDoc?._currentFrame, 'number'); // frame number that container is at which determines layout frame values const contentFrameNumber = Cast(dv.rootDoc?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed if (contentFrameNumber !== undefined) { - CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.rootDoc, { backgroundColor: color }); + CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.rootDoc, { fieldKey: color }); } else { - dv.rootDoc._backgroundColor = color; + dv.rootDoc['_' + fieldKey] = color; } }); } else { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index eb28ffbd7..1d668d6a9 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -69,6 +69,7 @@ import { SummaryView } from './SummaryView'; import applyDevTools = require('prosemirror-dev-tools'); import React = require('react'); import { RTFMarkup } from '../../../util/RTFMarkup'; +import { List } from '../../../../fields/List'; const translateGoogleApi = require('translate-google-api'); export const GoogleRef = 'googleDocId'; type PullHandler = (exportState: Opt, dataDoc: Doc) => void; @@ -318,6 +319,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent !accumTags.includes(tag)); removed.forEach(r => (dataDoc[r] = undefined)); added.forEach(a => (dataDoc[a] = a)); + dataDoc.tags = curTags.length ? new List(curTags) : undefined; let unchanged = true; if (this._applyingChange !== this.fieldKey && removeSelection(json) !== removeSelection(curProto?.Data)) { diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts index cc19d12bd..68b209332 100644 --- a/src/client/views/nodes/formattedText/RichTextRules.ts +++ b/src/client/views/nodes/formattedText/RichTextRules.ts @@ -1,7 +1,8 @@ import { ellipsis, emDash, InputRule, smartQuotes, textblockTypeInputRule } from 'prosemirror-inputrules'; import { NodeSelection, TextSelection } from 'prosemirror-state'; -import { DataSym, Doc } from '../../../../fields/Doc'; +import { DataSym, Doc, StrListCast } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; +import { List } from '../../../../fields/List'; import { ComputedField } from '../../../../fields/ScriptField'; import { NumCast, StrCast } from '../../../../fields/Types'; import { normalizeEmail } from '../../../../fields/util'; @@ -325,9 +326,10 @@ export class RichTextRules { const tag = match[1]; if (!tag) return state.tr; this.Document[DataSym]['#' + tag] = '#' + tag; - const tags = StrCast(this.Document[DataSym].tags, ':'); - if (!tags.includes(`#${tag}:`)) { - this.Document[DataSym].tags = `${tags + '#' + tag + ':'}`; + const tags = StrListCast(this.Document[DataSym].tags); + if (!tags.includes(tag)) { + tags.push(tag); + this.Document[DataSym].tags = new List(tags); } const fieldView = state.schema.nodes.dashField.create({ fieldKey: '#' + tag }); return state.tr diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index a9be24c8b..03ae91c50 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1387,7 +1387,8 @@ export namespace Doc { if (typeof value === 'string') { value = value.replace(`,${Utils.noRecursionHack}`, ''); } - const fieldVal = key === '#' ? (StrCast(doc.tags).includes(':#' + value + ':') ? StrCast(doc.tags) : undefined) : doc[key]; + const tagsString = doc.tags ? ':' + StrListCast(doc.tags).join(':') + ':' : ''; + const fieldVal = key === '#' ? (tagsString.includes(':#' + value + ':') ? tagsString : undefined) : doc[key]; if (Cast(fieldVal, listSpec('string'), []).length) { const vals = Cast(fieldVal, listSpec('string'), []); const docs = vals.some(v => (v as any) instanceof Doc); -- cgit v1.2.3-70-g09d2