From 923b0d20cd95311122ec5886698b3fb2dfadb882 Mon Sep 17 00:00:00 2001 From: srichman333 Date: Fri, 12 Jan 2024 12:56:09 -0500 Subject: live schema toggle works on refresh --- .../views/collections/collectionSchema/CollectionSchemaView.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/collectionSchema') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 02131ae22..da9da8fbe 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -18,17 +18,21 @@ .schema-add { position: relative; - height: 30; + height: 35; display: flex; align-items: center; + top: -10px; width: 100%; text-align: right; background: lightgray; .editableView-container-editing { width: 100%; + height: 35px; + margin: 20px; } .editableView-input { width: 100%; + margin: 20px; float: right; text-align: right; background: yellow; -- cgit v1.2.3-70-g09d2 From e3709b4445732791f696cdf26274ab09294ce208 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 27 Jan 2024 04:21:08 -0500 Subject: made dataViz nodes linked to schema nodes update automatically as cahnges are made. fixed user created templates from disappearing from menu, and made them work. added toJavascriptString and made DashField views convert to text. added support for turning text into javascript rendering (paint) code. --- src/client/documents/Documents.ts | 2 +- src/client/util/CurrentUserUtils.ts | 12 +++-- src/client/util/DropConverter.ts | 1 + src/client/util/UndoManager.ts | 2 +- src/client/views/ContextMenuItem.tsx | 38 ++++++------- src/client/views/DocComponent.tsx | 6 +-- src/client/views/DocumentDecorations.tsx | 16 ++++-- src/client/views/EditableView.tsx | 9 ++-- .../collectionFreeForm/CollectionFreeFormView.scss | 48 +++++++++-------- .../collectionFreeForm/CollectionFreeFormView.tsx | 21 +++++++- .../collectionSchema/CollectionSchemaView.tsx | 3 +- .../views/global/globalCssVariables.module.scss | 2 + .../global/globalCssVariables.module.scss.d.ts | 1 + src/client/views/linking/LinkMenuItem.tsx | 2 +- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 63 +++++++++++----------- .../views/nodes/DataVizBox/components/Chart.scss | 1 - src/client/views/nodes/DocumentView.tsx | 6 +-- src/client/views/nodes/FontIconBox/FontIconBox.tsx | 8 ++- .../views/nodes/formattedText/DashFieldView.tsx | 13 +++-- .../views/nodes/formattedText/FormattedTextBox.tsx | 34 ++++++++++-- src/client/views/nodes/formattedText/nodes_rts.ts | 3 ++ src/fields/CursorField.ts | 5 +- src/fields/DateField.ts | 5 +- src/fields/Doc.ts | 39 +++++++++----- src/fields/FieldSymbols.ts | 1 + src/fields/HtmlField.ts | 15 +++--- src/fields/IconField.ts | 17 +++--- src/fields/InkField.ts | 5 +- src/fields/List.ts | 5 +- src/fields/ObjectField.ts | 3 +- src/fields/Proxy.ts | 5 +- src/fields/RefField.ts | 11 ++-- src/fields/RichTextField.ts | 5 +- src/fields/SchemaHeaderField.ts | 5 +- src/fields/ScriptField.ts | 5 +- src/fields/URLField.ts | 8 ++- 36 files changed, 273 insertions(+), 152 deletions(-) (limited to 'src/client/views/collections/collectionSchema') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index ee3bf0d82..f1a0b37b3 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -211,7 +211,7 @@ export class DocumentOptions { author?: string; // STRt = new StrInfo('creator of document'); // bcz: don't change this. Otherwise, the userDoc's field Infos will have a FieldInfo assigned to its author field which will render it unreadable author_date?: DATEt = new DateInfo('date the document was created', true); annotationOn?: DOCt = new DocInfo('document annotated by this document', false); - _embedContainer?: DOCt = new DocInfo('document that displays (contains) this discument', false); + _embedContainer?: DOCt = new DocInfo('document that displays (contains) this document', false); rootDocument?: DOCt = new DocInfo('document that supplies the information needed for a rendering template (eg, pres slide for PresElement)'); color?: STRt = new StrInfo('foreground color data doc', false); hidden?: BOOLt = new BoolInfo('whether the document is not rendered by its collection', false); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 6ddb65941..8f46f844c 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -61,7 +61,7 @@ export let resolvedPorts: { server: number, socket: number }; export class CurrentUserUtils { // initializes experimental advanced template views - slideView, headerView - static setupExperimentalTemplateButtons(doc: Doc, tempDocs?:Doc) { + static setupExperimentalTemplateButtons(doc: Doc, tempDocs:Opt, userBtns:Doc[]) { const requiredTypeNameFields:{btnOpts:DocumentOptions, templateOpts:DocumentOptions, template:(opts:DocumentOptions) => Doc}[] = [ { btnOpts: { title: "slide", icon: "address-card" }, @@ -83,7 +83,7 @@ export class CurrentUserUtils { ) }, ]; - const requiredTypes = requiredTypeNameFields.map(({ btnOpts, template, templateOpts }) => { + const requiredTypes = [...requiredTypeNameFields.map(({ btnOpts, template, templateOpts }) => { const tempBtn = DocListCast(tempDocs?.data)?.find(doc => doc.title === btnOpts.title); const reqdScripts = { onDragStart: '{ return copyDragFactory(this.dragFactory,this.openFactoryAsDelegate); }' }; const assignBtnAndTempOpts = (templateBtn:Opt, btnOpts:DocumentOptions, templateOptions:DocumentOptions) => { @@ -94,7 +94,7 @@ export class CurrentUserUtils { return templateBtn; }; return DocUtils.AssignScripts(assignBtnAndTempOpts(tempBtn, btnOpts, templateOpts) ?? this.createToolButton( {...btnOpts, dragFactory: MakeTemplate(template(templateOpts))}), reqdScripts); - }); + }), ...userBtns]; const reqdOpts:DocumentOptions = { title: "Experimental Tools", _xMargin: 0, _layout_showTitle: "title", _chromeHidden: true, @@ -201,7 +201,7 @@ export class CurrentUserUtils { makeIconTemplate(DocumentType.AUDIO, "title", { iconTemplate:DocumentType.LABEL, backgroundColor: "lightgreen"}), makeIconTemplate(DocumentType.PDF, "title", { iconTemplate:DocumentType.LABEL, backgroundColor: "pink"}), makeIconTemplate(DocumentType.WEB, "title", { iconTemplate:DocumentType.LABEL, backgroundColor: "brown"}), - makeIconTemplate(DocumentType.RTF, "text", { iconTemplate:DocumentType.LABEL, _layout_showTitle: "author_date"}), + makeIconTemplate(DocumentType.RTF, "text", { iconTemplate:DocumentType.LABEL, _layout_showTitle: "title"}), makeIconTemplate(DocumentType.IMG, "data", { iconTemplate:DocumentType.IMG, _height: undefined}), makeIconTemplate(DocumentType.COL, "icon", { iconTemplate:DocumentType.IMG}), makeIconTemplate(DocumentType.COL, "icon", { iconTemplate:DocumentType.IMG}), @@ -465,7 +465,9 @@ export class CurrentUserUtils { static setupToolsBtnPanel(doc: Doc, field:string) { const myTools = DocCast(doc[field]); const creatorBtns = CurrentUserUtils.setupCreatorButtons(doc, DocListCast(myTools?.data)?.length ? DocListCast(myTools.data)[0]:undefined); - const templateBtns = CurrentUserUtils.setupExperimentalTemplateButtons(doc,DocListCast(myTools?.data)?.length > 1 ? DocListCast(myTools.data)[1]:undefined); + const tempBtns = DocListCast(myTools?.data)?.length > 1 ? DocListCast(myTools.data)[1]:undefined; + const userTemplateBtns = DocListCast(tempBtns?.data).filter(btn => !btn.isSystem); + const templateBtns = CurrentUserUtils.setupExperimentalTemplateButtons(doc, tempBtns, userTemplateBtns); const reqdToolOps:DocumentOptions = { title: "My Tools", isSystem: true, ignoreClick: true, layout_boxShadow: "0 0", layout_explainer: "This is a palette of documents that can be created.", diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts index f62ec8f83..8c3b56452 100644 --- a/src/client/util/DropConverter.ts +++ b/src/client/util/DropConverter.ts @@ -80,6 +80,7 @@ export function convertDropDataToButtons(data: DragManager.DocumentDragData) { title: StrCast(layoutDoc.title), btnType: ButtonType.ClickButton, icon: 'bolt', + isSystem: false, }); dbox.dragFactory = layoutDoc; dbox.dropPropertiesToRemove = doc.dropPropertiesToRemove instanceof ObjectField ? ObjectField.MakeCopy(doc.dropPropertiesToRemove) : undefined; diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts index 9a6719ea5..421855bf3 100644 --- a/src/client/util/UndoManager.ts +++ b/src/client/util/UndoManager.ts @@ -102,7 +102,7 @@ export namespace UndoManager { 'UndoEvent : ' + event.prop + ' = ' + - (value instanceof RichTextField ? value.Text : value instanceof Array ? value.map(val => Field.toScriptString(val)).join(',') : Field.toScriptString(value)) + (value instanceof RichTextField ? value.Text : value instanceof Array ? value.map(val => Field.toJavascriptString(val)).join(',') : Field.toJavascriptString(value)) ); currentBatch.push(event); tempEvents?.push(event); diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 3c9d821a9..b2076e1a5 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -38,16 +38,16 @@ export class ContextMenuItem extends ObservableReactComponent (this._items.length = 0)); - if ((this.props as SubmenuProps)?.subitems) { - (this.props as SubmenuProps).subitems?.forEach(i => runInAction(() => this._items.push(i))); + if ((this._props as SubmenuProps)?.subitems) { + (this._props as SubmenuProps).subitems?.forEach(i => runInAction(() => this._items.push(i))); } } handleEvent = async (e: React.MouseEvent) => { - if ('event' in this.props) { - this.props.closeMenu?.(); - const batch = this.props.undoable !== false ? UndoManager.StartBatch(`Click Menu item: ${this.props.description}`) : undefined; - await this.props.event({ x: e.clientX, y: e.clientY }); + if ('event' in this._props) { + this._props.closeMenu?.(); + const batch = this._props.undoable !== false ? UndoManager.StartBatch(`Click Menu item: ${this._props.description}`) : undefined; + await this._props.event({ x: e.clientX, y: e.clientY }); batch?.end(); } }; @@ -91,11 +91,11 @@ export class ContextMenuItem extends ObservableReactComponent - {this.props.icon ? {this.isJSXElement(this.props.icon) ? this.props.icon : } : null} -
{this.props.description.replace(':', '')}
+
+ {this._props.icon ? {this.isJSXElement(this._props.icon) ? this._props.icon : } : null} +
{this._props.description.replace(':', '')}
); - } else if ('subitems' in this.props) { + } else if ('subitems' in this._props) { const where = !this.overItem ? '' : this._overPosY < window.innerHeight / 3 ? 'flex-start' : this._overPosY > (window.innerHeight * 2) / 3 ? 'flex-end' : 'center'; const marginTop = !this.overItem ? '' : this._overPosY < window.innerHeight / 3 ? '20px' : this._overPosY > (window.innerHeight * 2) / 3 ? '-20px' : ''; @@ -118,32 +118,32 @@ export class ContextMenuItem extends ObservableReactComponent {this._items.map(prop => ( - + ))}
); - if (!(this.props as SubmenuProps).noexpand) { + if (!(this._props as SubmenuProps).noexpand) { return (
{this._items.map(prop => ( - + ))}
); } return (
- {this.props.icon ? ( + {this._props.icon ? ( - + ) : null}
- {this.props.description} + {this._props.description}
() { const recent = this.Document !== Doc.MyRecentlyClosed ? Doc.MyRecentlyClosed : undefined; toRemove.forEach(doc => { leavePushpin && DocUtils.LeavePushpin(doc, annotationKey ?? this.annotationKey); - Doc.RemoveDocFromList(targetDataDoc, annotationKey ?? this.annotationKey, doc); - Doc.RemoveDocFromList(doc[DocData], 'proto_embeddings', doc); + Doc.RemoveDocFromList(targetDataDoc, annotationKey ?? this.annotationKey, doc, true); + Doc.RemoveDocFromList(doc[DocData], 'proto_embeddings', doc, true); doc.embedContainer = undefined; if (recent && !dontAddToRemoved) { doc.type !== DocumentType.LOADING && Doc.AddDocToList(recent, 'data', doc, undefined, true, true); @@ -243,7 +243,7 @@ export function ViewBoxAnnotatableComponent

() { inheritParentAcls(targetDataDoc, doc, true); }); - const annoDocs = targetDataDoc[annotationKey ?? this.annotationKey] as List; + const annoDocs = Doc.Get(targetDataDoc, annotationKey ?? this.annotationKey, true) as List; // get the dataDoc directly ... when using templates there may be some default items already there, but we can't change them. maybe we should copy them over, though... if (annoDocs instanceof List) annoDocs.push(...added.filter(add => !annoDocs.includes(add))); else targetDataDoc[annotationKey ?? this.annotationKey] = new List(added); targetDataDoc[(annotationKey ?? this.annotationKey) + '_modificationDate'] = new DateField(); diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 5ef62b2c5..2193acf62 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -18,7 +18,6 @@ import { DocumentType } from '../documents/DocumentTypes'; import { Docs } from '../documents/Documents'; import { DocumentManager } from '../util/DocumentManager'; import { DragManager } from '../util/DragManager'; -import { LinkFollower } from '../util/LinkFollower'; import { SelectionManager } from '../util/SelectionManager'; import { SettingsManager } from '../util/SettingsManager'; import { SnappingManager } from '../util/SnappingManager'; @@ -112,7 +111,6 @@ export class DocumentDecorations extends ObservableReactComponent { - this._editingTitle = false; if (this._accumulatedTitle.startsWith('#') || this._accumulatedTitle.startsWith('=')) { this._titleControlString = this._accumulatedTitle; } else if (this._titleControlString.startsWith('#')) { @@ -616,7 +614,7 @@ export class DocumentDecorations extends ObservableReactComponent (this._showNothing = true))); + setTimeout( + action(() => { + this._editingTitle = false; + this._showNothing = true; + }) + ); return null; } @@ -726,7 +729,10 @@ export class DocumentDecorations extends ObservableReactComponent !hideTitle && this.titleBlur()} + onBlur={action((e: React.FocusEvent) => { + this._editingTitle = false; + !hideTitle && this.titleBlur(); + })} onChange={action(e => !hideTitle && (this._accumulatedTitle = e.target.value))} onKeyDown={hideTitle ? emptyFunction : this.titleEntered} onPointerDown={e => e.stopPropagation()} diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index c6666d79d..4508d00a7 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,4 +1,4 @@ -import { action, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; +import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import * as Autosuggest from 'react-autosuggest'; @@ -97,9 +97,10 @@ export class EditableView extends ObservableReactComponent { super.componentDidUpdate(prevProps); if (this._editing && this._props.editing === false) { this._inputref?.value && this.finalizeEdit(this._inputref.value, false, true, false); - } else if (this._props.editing !== undefined) { - this._editing = this._props.editing; - } + } else + runInAction(() => { + if (this._props.editing !== undefined) this._editing = this._props.editing; + }); } componentWillUnmount() { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 7d3acaea7..9e7d364ea 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -176,6 +176,11 @@ // touch action none means that the browser will handle none of the touch actions. this allows us to implement our own actions. touch-action: none; transform-origin: top left; + > svg { + height: 100%; + width: 100%; + margin: auto; + } .collectionfreeformview-placeholder { background: gray; @@ -270,34 +275,31 @@ padding: 10px; .msg { - position: relative; - // display: block; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; - + position: relative; + // display: block; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; } - + .gif-container { - position: relative; - margin-top: 5px; - // display: block; - - justify-content: center; - align-items: center; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; - - + position: relative; + margin-top: 5px; + // display: block; + + justify-content: center; + align-items: center; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; + .gif { background-color: transparent; height: 300px; } } - } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 53dc389b4..be19fc50f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -39,7 +39,7 @@ import { LightboxView } from '../../LightboxView'; import { CollectionFreeFormDocumentView, CollectionFreeFormDocumentViewWrapper } from '../../nodes/CollectionFreeFormDocumentView'; import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp'; import { DocumentView, OpenWhere } from '../../nodes/DocumentView'; -import { FocusViewOptions, FieldViewProps } from '../../nodes/FieldView'; +import { FieldViewProps, FocusViewOptions } from '../../nodes/FieldView'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { PinProps, PresBox } from '../../nodes/trails/PresBox'; import { CreateImage } from '../../nodes/WebBoxRenderer'; @@ -73,6 +73,14 @@ export class CollectionFreeFormView extends CollectionSubView { ${paintFunc} })()`; + } constructor(props: any) { super(props); makeObservable(this); @@ -1227,6 +1235,7 @@ export class CollectionFreeFormView extends CollectionSubView ({ code: this.paintFunc, first: this._firstRender, width: this.Document._width, height: this.Document._height }), + ({ code, first }) => code && !first && eval(code), + { fireImmediately: true } + ); + this._disposers.layoutElements = reaction( // layoutElements can't be a computed value because doLayoutComputation() is an action that has side effect of updating clusters () => this.doInternalLayoutComputation, @@ -1847,6 +1863,7 @@ export class CollectionFreeFormView extends CollectionSubView { this.createDashEventsTarget(r); this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); @@ -1868,7 +1885,7 @@ export class CollectionFreeFormView extends CollectionSubView - {this._lightboxDoc ? ( + {this.paintFunc ? null : this._lightboxDoc ? (

(); @observable _menuKeys: string[] = []; diff --git a/src/client/views/global/globalCssVariables.module.scss b/src/client/views/global/globalCssVariables.module.scss index 44e8efe23..ad0c5c21d 100644 --- a/src/client/views/global/globalCssVariables.module.scss +++ b/src/client/views/global/globalCssVariables.module.scss @@ -64,6 +64,7 @@ $mainTextInput-zindex: 999; // then text input overlay so that it's context menu $docDecorations-zindex: 998; // then doc decorations appear over everything else $remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? $SCHEMA_DIVIDER_WIDTH: 4; +$SCHEMA_NEW_NODE_HEIGHT: 30; $MINIMIZED_ICON_SIZE: 24; $MAX_ROW_HEIGHT: 44px; $DFLT_IMAGE_NATIVE_DIM: 900px; @@ -78,6 +79,7 @@ $DATA_VIZ_TABLE_ROW_HEIGHT: 30; :export { contextMenuZindex: $contextMenu-zindex; + SCHEMA_NEW_NODE_HEIGHT: $SCHEMA_NEW_NODE_HEIGHT; SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH; MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT; diff --git a/src/client/views/global/globalCssVariables.module.scss.d.ts b/src/client/views/global/globalCssVariables.module.scss.d.ts index bcbb1f068..12cc3fc89 100644 --- a/src/client/views/global/globalCssVariables.module.scss.d.ts +++ b/src/client/views/global/globalCssVariables.module.scss.d.ts @@ -1,5 +1,6 @@ interface IGlobalScss { contextMenuZindex: string; // context menu shows up over everything + SCHEMA_NEW_NODE_HEIGHT: string; SCHEMA_DIVIDER_WIDTH: string; MINIMIZED_ICON_SIZE: string; MAX_ROW_HEIGHT: string; diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index dc4aee1ca..ad6deeefb 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -136,7 +136,7 @@ export class LinkMenuItem extends ObservableReactComponent { deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this._props.linkDoc)))); @observable _hover = false; - docView = () => this.props.docView; + docView = () => this._props.docView; render() { const destinationIcon = Doc.toIcon(this._props.destinationDoc) as any as IconProp; diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 8365f4770..e453bcee0 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Colors, Toggle, ToggleType, Type } from 'browndash-components'; -import { ObservableMap, action, computed, makeObservable, observable, runInAction } from 'mobx'; +import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils'; @@ -40,9 +40,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() im private _mainCont: React.RefObject = React.createRef(); private _marqueeref = React.createRef(); private _annotationLayer: React.RefObject = React.createRef(); + private _disposers: { [name: string]: IReactionDisposer } = {}; anchorMenuClick?: () => undefined | ((anchor: Doc) => void); crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined; - @observable _schemaDataVizChildren: any = undefined; @observable _marqueeing: number[] | undefined = undefined; @observable _savedAnnotations = new ObservableMap(); @@ -256,12 +256,39 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() im componentDidMount() { this._props.setContentViewBox?.(this); if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData(); + this._disposers.datavis = reaction( + () => { + const getFrom = DocCast(this.layoutDoc.dataViz_asSchema); + const keys = Cast(getFrom?.schema_columnKeys, listSpec('string'))?.filter(key => key != 'text'); + if (!keys) return; + const children = DocListCast(getFrom[Doc.LayoutFieldKey(getFrom)]); + var current: { [key: string]: string }[] = []; + children + .filter(child => child) + .forEach(child => { + const row: { [key: string]: string } = {}; + keys.forEach(key => { + var cell = child[key]; + if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, ''); + row[key] = StrCast(cell); + }); + current.push(row); + }); + return current; + }, + current => { + current && DataVizBox.dataset.set(CsvCast(this.Document[this.fieldKey]).url.href, current); + }, + { fireImmediately: true } + ); } fetchData = () => { - DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests - fetch('/csvData?uri=' + this.dataUrl?.url.href) // - .then(res => res.json().then(action(res => !res.errno && DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, res)))); + if (!this.Document.dataViz_asSchema) { + DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests + fetch('/csvData?uri=' + this.dataUrl?.url.href) // + .then(res => res.json().then(action(res => !res.errno && DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, res)))); + } }; // toggles for user to decide which chart type to view the data in @@ -327,33 +354,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() im GPTPopup.Instance.addDoc = this.sidebarAddDocument; }; - @action - updateSchemaViz = () => { - const getFrom = DocCast(this.layoutDoc.dataViz_asSchema); - const keys = Cast(getFrom.schema_columnKeys, listSpec('string'))?.filter(key => key != 'text'); - if (!keys) return; - const children = DocListCast(getFrom[Doc.LayoutFieldKey(getFrom)]); - var current: { [key: string]: string }[] = []; - for (let i = 0; i < children.length; i++) { - var row: { [key: string]: string } = {}; - if (children[i]) { - for (let j = 0; j < keys.length; j++) { - var cell = children[i][keys[j]]; - if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, ''); - row[keys[j]] = StrCast(cell); - } - } - current.push(row); - } - DataVizBox.dataset.set(CsvCast(this.Document[this.fieldKey]).url.href, current); - }; - render() { - if (this.layoutDoc && this.layoutDoc.dataViz_asSchema) { - this._schemaDataVizChildren = DocListCast(DocCast(this.layoutDoc.dataViz_asSchema)[Doc.LayoutFieldKey(DocCast(this.layoutDoc.dataViz_asSchema))]).length; - this.updateSchemaViz(); - } - const scale = this._props.NativeDimScaling?.() || 1; return !this.records.length ? ( // displays how to get data into the DataVizBox if its empty diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index 2f7dd0487..116a45623 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -93,7 +93,6 @@ display: flex; flex-direction: column; cursor: default; - margin-top: 30px; height: calc(100% - 40px); // bcz: hack 40px is the size of the button rows .tableBox-container { overflow: scroll; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a82580ddb..2e1ba2a7e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -592,13 +592,9 @@ export class DocumentViewInternal extends DocComponent this.toggleFollowLink(false, false), icon: 'link' }); !Doc.noviceMode && onClicks.push({ description: 'Edit onClick Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.Document, undefined, 'onClick'), 'edit onClick'), icon: 'terminal' }); - !existingOnClick && cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' }); + cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' }); } else if (LinkManager.Links(this.Document).length) { onClicks.push({ description: 'Restore On Click default', event: () => this.noOnClick(), icon: 'link' }); onClicks.push({ description: 'Follow Link on Click', event: () => this.followLinkOnClick(), icon: 'link' }); diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index cf07d98be..8290e102c 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -73,7 +73,7 @@ export class FontIconBox extends ViewBoxBaseComponent() { }; specificContextMenu = (): void => { - if (!Doc.noviceMode) { + if (!Doc.noviceMode && Cast(this.layoutDoc.dragFactory, Doc, null)) { const cm = ContextMenu.Instance; cm.addItem({ description: 'Show Template', event: this.showTemplate, icon: 'tag' }); cm.addItem({ description: 'Use as Render Template', event: this.dragAsTemplate, icon: 'tag' }); @@ -366,7 +366,7 @@ export class FontIconBox extends ViewBoxBaseComponent() { ); } - render() { + renderButton = () => { const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); const tooltip = StrCast(this.Document.toolTip); const scriptFunc = () => ScriptCast(this.Document.onClick)?.script.run({ this: this.Document, self: this.Document, _readOnly_: false }); @@ -389,5 +389,9 @@ export class FontIconBox extends ViewBoxBaseComponent() { background={SettingsManager.userBackgroundColor} size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; } return this.defaultButton; + }; + + render() { + return
{this.renderButton()}
; } } diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index dc9914637..18286267a 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -1,10 +1,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; -import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; -import { Doc } from '../../../../fields/Doc'; +import { Doc, Field } from '../../../../fields/Doc'; import { List } from '../../../../fields/List'; import { listSpec } from '../../../../fields/Schema'; import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; @@ -114,6 +114,13 @@ export class DashFieldViewInternal extends ObservableReactComponent (this._dashDoc ? Field.toKeyValueString(this._dashDoc, this._props.fieldKey) : undefined), + keyvalue => keyvalue && this._props.tbox.tryUpdateDoc(true) + ); + } + componentWillUnmount() { this._reactionDisposer?.(); } @@ -184,7 +191,7 @@ export class DashFieldViewInternal extends ObservableReactComponent {this._props.hideKey ? null : ( - {this._fieldKey} + {(this._textBoxDoc === this._dashDoc ? '' : this._dashDoc?.title + ':') + this._fieldKey} )} diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 731ab1d53..6f9c2893e 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -67,6 +67,7 @@ import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu'; import { RichTextRules } from './RichTextRules'; import { schema } from './schema_rts'; import { SummaryView } from './SummaryView'; +import { CollectionView } from '../../collections/CollectionView'; // import * as applyDevTools from 'prosemirror-dev-tools'; @observer export class FormattedTextBox extends ViewBoxAnnotatableComponent() implements ViewBoxInterface { @@ -325,13 +326,26 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent { + if (node.type === this._editorView?.state.schema.nodes.dashField) { + const refDoc = !node.attrs.docId ? this.Document : (DocServer.GetCachedRefField(node.attrs.docId as string) as Doc); + return Field.toJavascriptString(refDoc[node.attrs.fieldKey as string] as Field); + } + return ''; + }; dispatchTransaction = (tx: Transaction) => { if (this._editorView && (this._editorView as any).docView) { const state = this._editorView.state.apply(tx); this._editorView.updateState(state); + this.tryUpdateDoc(false); + } + }; + tryUpdateDoc = (force: boolean) => { + if (this._editorView && (this._editorView as any).docView) { + const state = this._editorView.state; const dataDoc = Doc.IsDelegateField(DocCast(this.layoutDoc.proto), this.fieldKey) ? DocCast(this.layoutDoc.proto) : this.dataDoc; - const newText = state.doc.textBetween(0, state.doc.content.size, ' \n'); + const newText = state.doc.textBetween(0, state.doc.content.size, ' \n', this.leafText); const newJson = JSON.stringify(state.toJSON()); const prevData = Cast(this.layoutDoc[this.fieldKey], RichTextField, null); // the actual text in the text box const templateData = this.Document !== this.layoutDoc ? prevData : undefined; // the default text stored in a layout template @@ -350,13 +364,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent(Array.from(new Set(accumTags))) : undefined; let unchanged = true; - if (this._applyingChange !== this.fieldKey && removeSelection(newJson) !== removeSelection(prevData?.Data)) { + if (this._applyingChange !== this.fieldKey && (force || removeSelection(newJson) !== removeSelection(prevData?.Data))) { this._applyingChange = this.fieldKey; const textChange = newText !== prevData?.Text; textChange && (dataDoc[this.fieldKey + '_modificationDate'] = new DateField(new Date(Date.now()))); if ((!prevData && !protoData) || newText || (!newText && !templateData)) { // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended) - if ((this._finishingLink || this._props.isContentActive() || this._inDrop) && removeSelection(newJson) !== removeSelection(prevData?.Data)) { + if (force || ((this._finishingLink || this._props.isContentActive() || this._inDrop) && removeSelection(newJson) !== removeSelection(prevData?.Data))) { const numstring = NumCast(dataDoc[this.fieldKey], null); dataDoc[this.fieldKey] = numstring !== undefined ? Number(newText) : new RichTextField(newJson, newText); dataDoc[this.fieldKey + '_noTemplate'] = true; // mark the data field as being split from the template if it has been edited @@ -480,7 +494,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent { const splitter = editorView.state.schema.marks.splitter.create({ id: Utils.GenerateGuid() }); - if (!sel.$anchor.pos || editorView.state.doc.textBetween(sel.$anchor.pos - 1, sel.$to.pos).trim() === autoLinkTerm) { + if (!sel.$anchor.pos || [autoLinkTerm, StrCast(target.title)].includes(editorView.state.doc.textBetween(sel.$anchor.pos - 1, sel.$to.pos).trim())) { tr = tr.addMark(sel.from, sel.to, splitter); tr.doc.nodesBetween(sel.from, sel.to, (node: any, pos: number, parent: any) => { if (node.firstChild === null && !node.marks.find((m: Mark) => m.type.name === schema.marks.noAutoLinkAnchor.name) && node.marks.find((m: Mark) => m.type.name === schema.marks.splitter.name)) { @@ -919,6 +933,17 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent (this.layoutDoc._createDocOnCR = !this.layoutDoc._createDocOnCR), icon: !this.Document._createDocOnCR ? 'grip-lines' : 'bars', }); + optionItems.push({ + description: 'Make Paint Function', + event: () => { + this.dataDoc.layout_painted = CollectionView.LayoutString('painted'); + this.layoutDoc.layout_fieldKey = 'layout_painted'; + this.layoutDoc.type_collection = CollectionViewType.Freeform; + this.DocumentView?.().setToggleDetail(); + this.dataDoc.paintFunc = ComputedField.MakeFunction(`toJavascriptString(this['${this.fieldKey}']?.Text)`); + }, + icon: !this.Document._layout_enableAltContentUI ? 'eye-slash' : 'eye', + }); !Doc.noviceMode && optionItems.push({ description: `${this.Document._layout_autoHeight ? 'Lock' : 'Auto'} Height`, @@ -1682,7 +1707,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent { this.dataDoc.title_custom = true; diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index d023020e1..31f001b11 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -2,6 +2,8 @@ import * as React from 'react'; import { DOMOutputSpec, Node, NodeSpec } from 'prosemirror-model'; import { listItem, orderedList } from 'prosemirror-schema-list'; import { ParagraphNodeSpec, toParagraphDOM, getParagraphNodeAttrs } from './ParagraphNodeSpec'; +import { DocServer } from '../../../DocServer'; +import { Doc, Field } from '../../../../fields/Doc'; const blockquoteDOM: DOMOutputSpec = ['blockquote', 0], hrDOM: DOMOutputSpec = ['hr'], @@ -264,6 +266,7 @@ export const nodes: { [index: string]: NodeSpec } = { hideKey: { default: false }, editable: { default: true }, }, + leafText: node => Field.toString((DocServer.GetCachedRefField(node.attrs.docId as string) as Doc)?.[node.attrs.fieldKey as string] as Field), group: 'inline', draggable: false, toDOM(node) { diff --git a/src/fields/CursorField.ts b/src/fields/CursorField.ts index 84917ae53..870dfbeac 100644 --- a/src/fields/CursorField.ts +++ b/src/fields/CursorField.ts @@ -1,6 +1,6 @@ import { createSimpleSchema, object, serializable } from 'serializr'; import { Deserializable } from '../client/util/SerializationHelper'; -import { Copy, FieldChanged, ToScriptString, ToString } from './FieldSymbols'; +import { Copy, FieldChanged, ToJavascriptString, ToScriptString, ToString } from './FieldSymbols'; import { ObjectField } from './ObjectField'; export type CursorPosition = { @@ -55,6 +55,9 @@ export default class CursorField extends ObjectField { return new CursorField(this.data); } + [ToJavascriptString]() { + return 'invalid'; + } [ToScriptString]() { return 'invalid'; } diff --git a/src/fields/DateField.ts b/src/fields/DateField.ts index 2ea619bd9..1e5222fb6 100644 --- a/src/fields/DateField.ts +++ b/src/fields/DateField.ts @@ -1,7 +1,7 @@ import { Deserializable } from '../client/util/SerializationHelper'; import { serializable, date } from 'serializr'; import { ObjectField } from './ObjectField'; -import { Copy, ToScriptString, ToString } from './FieldSymbols'; +import { Copy, ToJavascriptString, ToScriptString, ToString } from './FieldSymbols'; import { scriptingGlobal, ScriptingGlobals } from '../client/util/ScriptingGlobals'; @scriptingGlobal @@ -23,6 +23,9 @@ export class DateField extends ObjectField { return `${this.date.toLocaleString()}`; } + [ToJavascriptString]() { + return `"${this.date.toISOString()}"`; + } [ToScriptString]() { return `new DateField(new Date("${this.date.toISOString()}"))`; } diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index ff416bbe7..f4141cf46 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -18,7 +18,7 @@ import { DocAcl, DocCss, DocData, DocFields, DocLayout, DocViews, FieldKeys, FieldTuples, ForceServerWrite, Height, Highlight, Initializing, Self, SelfProxy, UpdatingFromServer, Width } from './DocSymbols'; // prettier-ignore -import { Copy, FieldChanged, HandleUpdate, Id, Parent, ToScriptString, ToString } from './FieldSymbols'; +import { Copy, FieldChanged, HandleUpdate, Id, Parent, ToJavascriptString, ToScriptString, ToString } from './FieldSymbols'; import { InkField, InkTool } from './InkField'; import { List, ListFieldName } from './List'; import { ObjectField } from './ObjectField'; @@ -52,6 +52,23 @@ export namespace Field { default: return field?.[ToScriptString]?.() ?? 'null'; } // prettier-ignore } + export function toJavascriptString(field: Field) { + var rawjava = ''; + + switch (typeof field) { + case 'string': + case 'number': + case 'boolean':rawjava = String(field); + break; + default: rawjava = field?.[ToJavascriptString]?.() ?? 'null'; + } // prettier-ignore + var script = rawjava; + Doc.MyPublishedDocs.forEach(doc => { + const regex = new RegExp(`^\\^${doc.title}\\s`, 'm'); + script = script.replace(regex, Cast(doc.text, RichTextField, null)?.Text ?? ''); + }); + return script; + } export function toString(field: Field) { if (typeof field === 'string' || typeof field === 'number' || typeof field === 'boolean') return String(field); return field?.[ToString]?.() || ''; @@ -287,6 +304,7 @@ export class Doc extends RefField { public [DocFields] = () => this[Self][FieldTuples]; // Object.keys(this).reduce((fields, key) => { fields[key] = this[key]; return fields; }, {} as any); public [Width] = () => NumCast(this[SelfProxy]._width); public [Height] = () => NumCast(this[SelfProxy]._height); + public [ToJavascriptString] = () => `idToDoc("${this[Self][Id]}")`; // what should go here? public [ToScriptString] = () => `idToDoc("${this[Self][Id]}")`; public [ToString] = () => `Doc(${GetEffectiveAcl(this[SelfProxy]) === AclPrivate ? '-inaccessible-' : this[SelfProxy].title})`; public get [DocLayout]() { return this[SelfProxy].__LAYOUT__; } // prettier-ignore @@ -508,12 +526,9 @@ export namespace Doc { * Removes doc from the list of Docs at listDoc[fieldKey] * @returns true if successful, false otherwise. */ - export function RemoveDocFromList(listDoc: Doc, fieldKey: string | undefined, doc: Doc) { + export function RemoveDocFromList(listDoc: Doc, fieldKey: string | undefined, doc: Doc, ignoreProto = false) { const key = fieldKey ? fieldKey : Doc.LayoutFieldKey(listDoc); - if (listDoc[key] === undefined) { - listDoc[DocData][key] = new List(); - } - const list = Cast(listDoc[key], listSpec(Doc)); + const list = Doc.Get(listDoc, key, ignoreProto) === undefined ? (listDoc[DocData][key] = new List()) : Cast(listDoc[key], listSpec(Doc)); if (list) { const ind = list.indexOf(doc); if (ind !== -1) { @@ -528,12 +543,9 @@ export namespace Doc { * Adds doc to the list of Docs stored at listDoc[fieldKey]. * @returns true if successful, false otherwise. */ - export function AddDocToList(listDoc: Doc, fieldKey: string | undefined, doc: Doc, relativeTo?: Doc, before?: boolean, first?: boolean, allowDuplicates?: boolean, reversed?: boolean) { + export function AddDocToList(listDoc: Doc, fieldKey: string | undefined, doc: Doc, relativeTo?: Doc, before?: boolean, first?: boolean, allowDuplicates?: boolean, reversed?: boolean, ignoreProto?: boolean) { const key = fieldKey ? fieldKey : Doc.LayoutFieldKey(listDoc); - if (listDoc[key] === undefined) { - listDoc[DocData][key] = new List(); - } - const list = Cast(listDoc[key], listSpec(Doc)); + const list = Doc.Get(listDoc, key, ignoreProto) === undefined ? (listDoc[DocData][key] = new List()) : Cast(listDoc[key], listSpec(Doc)); if (list) { if (!allowDuplicates) { const pind = list.findIndex(d => d instanceof Doc && d[Id] === doc[Id]); @@ -1020,7 +1032,7 @@ export namespace Doc { // export function MakeMetadataFieldTemplate(templateField: Doc, templateDoc: Opt): boolean { // find the metadata field key that this template field doc will display (indicated by its title) - const metadataFieldKey = StrCast(templateField.isTemplateForField) || StrCast(templateField.title).replace(/^-/, ''); + const metadataFieldKey = StrCast(templateField.isTemplateForField) || StrCast(templateField.title).replace(/^-/, '') || Doc.LayoutFieldKey(templateField); // update the original template to mark it as a template templateField.isTemplateForField = metadataFieldKey; @@ -1640,3 +1652,6 @@ ScriptingGlobals.add(function setDocFilter(container: Doc, key: string, value: a ScriptingGlobals.add(function setDocRangeFilter(container: Doc, key: string, range: number[]) { Doc.setDocRangeFilter(container, key, range); }); +ScriptingGlobals.add(function toJavascriptString(str: string) { + return Field.toJavascriptString(str as Field); +}); diff --git a/src/fields/FieldSymbols.ts b/src/fields/FieldSymbols.ts index 0dbeb064b..0c44d2417 100644 --- a/src/fields/FieldSymbols.ts +++ b/src/fields/FieldSymbols.ts @@ -5,5 +5,6 @@ export const Parent = Symbol('FieldParent'); export const Copy = Symbol('FieldCopy'); export const ToValue = Symbol('FieldToValue'); export const ToScriptString = Symbol('FieldToScriptString'); +export const ToJavascriptString = Symbol('FieldToJavascriptString'); export const ToPlainText = Symbol('FieldToPlainText'); export const ToString = Symbol('FieldToString'); diff --git a/src/fields/HtmlField.ts b/src/fields/HtmlField.ts index 6e8bba977..b67f0f7e9 100644 --- a/src/fields/HtmlField.ts +++ b/src/fields/HtmlField.ts @@ -1,9 +1,9 @@ -import { Deserializable } from "../client/util/SerializationHelper"; -import { serializable, primitive } from "serializr"; -import { ObjectField } from "./ObjectField"; -import { Copy, ToScriptString, ToString} from "./FieldSymbols"; +import { Deserializable } from '../client/util/SerializationHelper'; +import { serializable, primitive } from 'serializr'; +import { ObjectField } from './ObjectField'; +import { Copy, ToJavascriptString, ToScriptString, ToString } from './FieldSymbols'; -@Deserializable("html") +@Deserializable('html') export class HtmlField extends ObjectField { @serializable(primitive()) readonly html: string; @@ -17,8 +17,11 @@ export class HtmlField extends ObjectField { return new HtmlField(this.html); } + [ToJavascriptString]() { + return 'invalid'; + } [ToScriptString]() { - return "invalid"; + return 'invalid'; } [ToString]() { return this.html; diff --git a/src/fields/IconField.ts b/src/fields/IconField.ts index 76c4ddf1b..4d2badb68 100644 --- a/src/fields/IconField.ts +++ b/src/fields/IconField.ts @@ -1,9 +1,9 @@ -import { Deserializable } from "../client/util/SerializationHelper"; -import { serializable, primitive } from "serializr"; -import { ObjectField } from "./ObjectField"; -import { Copy, ToScriptString, ToString } from "./FieldSymbols"; +import { Deserializable } from '../client/util/SerializationHelper'; +import { serializable, primitive } from 'serializr'; +import { ObjectField } from './ObjectField'; +import { Copy, ToJavascriptString, ToScriptString, ToString } from './FieldSymbols'; -@Deserializable("icon") +@Deserializable('icon') export class IconField extends ObjectField { @serializable(primitive()) readonly icon: string; @@ -17,10 +17,13 @@ export class IconField extends ObjectField { return new IconField(this.icon); } + [ToJavascriptString]() { + return 'invalid'; + } [ToScriptString]() { - return "invalid"; + return 'invalid'; } [ToString]() { - return "ICONfield"; + return 'ICONfield'; } } diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts index 22bea3927..b3e01229a 100644 --- a/src/fields/InkField.ts +++ b/src/fields/InkField.ts @@ -2,7 +2,7 @@ import { Bezier } from 'bezier-js'; import { alias, createSimpleSchema, list, object, serializable } from 'serializr'; import { ScriptingGlobals } from '../client/util/ScriptingGlobals'; import { Deserializable } from '../client/util/SerializationHelper'; -import { Copy, ToScriptString, ToString } from './FieldSymbols'; +import { Copy, ToJavascriptString, ToScriptString, ToString } from './FieldSymbols'; import { ObjectField } from './ObjectField'; // Helps keep track of the current ink tool in use. @@ -85,6 +85,9 @@ export class InkField extends ObjectField { return new InkField(this.inkData); } + [ToJavascriptString]() { + return '[' + this.inkData.map(i => `{X: ${i.X}, Y: ${i.Y}}`) + ']'; + } [ToScriptString]() { return 'new InkField([' + this.inkData.map(i => `{X: ${i.X}, Y: ${i.Y}}`) + '])'; } diff --git a/src/fields/List.ts b/src/fields/List.ts index b8ad552d2..9458a9611 100644 --- a/src/fields/List.ts +++ b/src/fields/List.ts @@ -5,7 +5,7 @@ import { ScriptingGlobals } from '../client/util/ScriptingGlobals'; import { Deserializable, afterDocDeserialize, autoObject } from '../client/util/SerializationHelper'; import { Field } from './Doc'; import { FieldTuples, Self, SelfProxy } from './DocSymbols'; -import { Copy, FieldChanged, Parent, ToScriptString, ToString } from './FieldSymbols'; +import { Copy, FieldChanged, Parent, ToJavascriptString, ToScriptString, ToString } from './FieldSymbols'; import { ObjectField } from './ObjectField'; import { ProxyField } from './Proxy'; import { RefField } from './RefField'; @@ -310,6 +310,9 @@ class ListImpl extends ObjectField { private [Self] = this; private [SelfProxy]: List; // also used in utils.ts even though it won't be found using find all references + [ToJavascriptString]() { + return `[${(this as any).map((field: any) => Field.toScriptString(field))}]`; + } [ToScriptString]() { return `new List([${(this as any).map((field: any) => Field.toScriptString(field))}])`; } diff --git a/src/fields/ObjectField.ts b/src/fields/ObjectField.ts index b5bc2952a..e1b5b036c 100644 --- a/src/fields/ObjectField.ts +++ b/src/fields/ObjectField.ts @@ -1,5 +1,5 @@ import { RefField } from './RefField'; -import { FieldChanged, Parent, Copy, ToScriptString, ToString } from './FieldSymbols'; +import { FieldChanged, Parent, Copy, ToScriptString, ToString, ToJavascriptString } from './FieldSymbols'; import { ScriptingGlobals } from '../client/util/ScriptingGlobals'; import { Field } from './Doc'; @@ -12,6 +12,7 @@ export abstract class ObjectField { public [Parent]?: RefField | ObjectField; abstract [Copy](): ObjectField; + abstract [ToJavascriptString](): string; abstract [ToScriptString](): string; abstract [ToString](): string; } diff --git a/src/fields/Proxy.ts b/src/fields/Proxy.ts index 3a46e3581..820d9b6ff 100644 --- a/src/fields/Proxy.ts +++ b/src/fields/Proxy.ts @@ -4,7 +4,7 @@ import { DocServer } from '../client/DocServer'; import { scriptingGlobal } from '../client/util/ScriptingGlobals'; import { Deserializable } from '../client/util/SerializationHelper'; import { Field, FieldWaiting, Opt } from './Doc'; -import { Copy, Id, ToScriptString, ToString, ToValue } from './FieldSymbols'; +import { Copy, Id, ToJavascriptString, ToScriptString, ToString, ToValue } from './FieldSymbols'; import { ObjectField } from './ObjectField'; import { RefField } from './RefField'; @@ -38,6 +38,9 @@ export class ProxyField extends ObjectField { return new ProxyField(this.fieldId); } + [ToJavascriptString]() { + return Field.toScriptString(this[ToValue](undefined)?.value); + } [ToScriptString]() { return Field.toScriptString(this[ToValue](undefined)?.value); // not sure this is quite right since it doesn't recreate a proxy field, but better than 'invalid' ? } diff --git a/src/fields/RefField.ts b/src/fields/RefField.ts index b6ef69750..01828dd14 100644 --- a/src/fields/RefField.ts +++ b/src/fields/RefField.ts @@ -1,11 +1,11 @@ -import { serializable, primitive, alias } from "serializr"; -import { Utils } from "../Utils"; -import { Id, HandleUpdate, ToScriptString, ToString } from "./FieldSymbols"; -import { afterDocDeserialize } from "../client/util/SerializationHelper"; +import { serializable, primitive, alias } from 'serializr'; +import { Utils } from '../Utils'; +import { Id, HandleUpdate, ToScriptString, ToString, ToJavascriptString } from './FieldSymbols'; +import { afterDocDeserialize } from '../client/util/SerializationHelper'; export type FieldId = string; export abstract class RefField { - @serializable(alias("id", primitive({ afterDeserialize: afterDocDeserialize }))) + @serializable(alias('id', primitive({ afterDeserialize: afterDocDeserialize }))) private __id: FieldId; readonly [Id]: FieldId; @@ -16,6 +16,7 @@ export abstract class RefField { protected [HandleUpdate]?(diff: any): void | Promise; + abstract [ToJavascriptString](): string; abstract [ToScriptString](): string; abstract [ToString](): string; } diff --git a/src/fields/RichTextField.ts b/src/fields/RichTextField.ts index 3e75a071f..50cfab988 100644 --- a/src/fields/RichTextField.ts +++ b/src/fields/RichTextField.ts @@ -1,7 +1,7 @@ import { serializable } from 'serializr'; import { scriptingGlobal } from '../client/util/ScriptingGlobals'; import { Deserializable } from '../client/util/SerializationHelper'; -import { Copy, ToScriptString, ToString } from './FieldSymbols'; +import { Copy, ToJavascriptString, ToScriptString, ToString } from './FieldSymbols'; import { ObjectField } from './ObjectField'; @scriptingGlobal @@ -27,6 +27,9 @@ export class RichTextField extends ObjectField { return new RichTextField(this.Data, this.Text); } + [ToJavascriptString]() { + return '`' + this.Text + '`'; + } [ToScriptString]() { return `new RichTextField("${this.Data.replace(/"/g, '\\"')}", "${this.Text}")`; } diff --git a/src/fields/SchemaHeaderField.ts b/src/fields/SchemaHeaderField.ts index 6dde2e5aa..fb4dc4e5b 100644 --- a/src/fields/SchemaHeaderField.ts +++ b/src/fields/SchemaHeaderField.ts @@ -1,7 +1,7 @@ import { Deserializable } from '../client/util/SerializationHelper'; import { serializable, primitive } from 'serializr'; import { ObjectField } from './ObjectField'; -import { Copy, ToScriptString, ToString, FieldChanged } from './FieldSymbols'; +import { Copy, ToScriptString, ToString, FieldChanged, ToJavascriptString } from './FieldSymbols'; import { scriptingGlobal, ScriptingGlobals } from '../client/util/ScriptingGlobals'; import { ColumnType } from '../client/views/collections/collectionSchema/CollectionSchemaView'; @@ -114,6 +114,9 @@ export class SchemaHeaderField extends ObjectField { return new SchemaHeaderField(this.heading, this.color, this.type, this.width, this.desc, this.collapsed); } + [ToJavascriptString]() { + return `["${this.heading}","${this.color}",${this.type},${this.width},${this.desc},${this.collapsed}]`; + } [ToScriptString]() { return `schemaHeaderField("${this.heading}","${this.color}",${this.type},${this.width},${this.desc},${this.collapsed})`; } diff --git a/src/fields/ScriptField.ts b/src/fields/ScriptField.ts index 62690a9fb..c7fe72ca6 100644 --- a/src/fields/ScriptField.ts +++ b/src/fields/ScriptField.ts @@ -6,7 +6,7 @@ import { scriptingGlobal, ScriptingGlobals } from '../client/util/ScriptingGloba import { autoObject, Deserializable } from '../client/util/SerializationHelper'; import { numberRange } from '../Utils'; import { Doc, Field, Opt } from './Doc'; -import { Copy, Id, ToScriptString, ToString, ToValue } from './FieldSymbols'; +import { Copy, Id, ToJavascriptString, ToScriptString, ToString, ToValue } from './FieldSymbols'; import { List } from './List'; import { ObjectField } from './ObjectField'; import { Cast, StrCast } from './Types'; @@ -113,6 +113,9 @@ export class ScriptField extends ObjectField { return `${this.script.originalScript} + ${this.setterscript?.originalScript}`; } + [ToJavascriptString]() { + return this.script.originalScript; + } [ToScriptString]() { return this.script.originalScript; } diff --git a/src/fields/URLField.ts b/src/fields/URLField.ts index 817b62373..87334ad16 100644 --- a/src/fields/URLField.ts +++ b/src/fields/URLField.ts @@ -1,7 +1,7 @@ import { Deserializable } from '../client/util/SerializationHelper'; import { serializable, custom } from 'serializr'; import { ObjectField } from './ObjectField'; -import { ToScriptString, ToString, Copy } from './FieldSymbols'; +import { ToScriptString, ToString, Copy, ToJavascriptString } from './FieldSymbols'; import { scriptingGlobal } from '../client/util/ScriptingGlobals'; import { Utils } from '../Utils'; @@ -36,6 +36,12 @@ export abstract class URLField extends ObjectField { } return `new ${this.constructor.name}("${this.url?.href}")`; } + [ToJavascriptString]() { + if (Utils.prepend(this.url?.pathname) === this.url?.href) { + return `new ${this.constructor.name}("${this.url.pathname}")`; + } + return `new ${this.constructor.name}("${this.url?.href}")`; + } [ToString]() { if (Utils.prepend(this.url?.pathname) === this.url?.href) { return this.url.pathname; -- cgit v1.2.3-70-g09d2 From 0d8c05db9cbb5a23a94554c65015c347ff8c38b9 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 31 Jan 2024 20:39:47 -0500 Subject: cleaned up accessing/setting proto_embeddings with api on Doc. fixed some css related to IconButtons. added a paintView toggle button to dec decorations for text with code blocks. enabled text with code to modify Docs and get this and documentView as params. --- package-lock.json | 9 +- package.json | 2 +- src/client/util/DocumentManager.ts | 4 +- src/client/util/DropConverter.ts | 1 + src/client/util/Scripting.ts | 3 +- src/client/views/DocComponent.tsx | 2 +- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/PropertiesDocContextSelector.tsx | 6 +- src/client/views/PropertiesView.tsx | 5 +- src/client/views/StyleProvider.scss | 4 + src/client/views/StyleProvider.tsx | 18 +++- .../views/collections/CollectionDockingView.tsx | 2 +- src/client/views/collections/TreeView.scss | 4 + .../collectionFreeForm/CollectionFreeFormView.tsx | 14 ++- .../collectionSchema/CollectionSchemaView.scss | 7 +- .../collections/collectionSchema/SchemaRowBox.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 6 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 55 +++++----- .../views/nodes/formattedText/PaintButtonView.tsx | 113 --------------------- .../views/nodes/formattedText/RichTextRules.ts | 49 +++------ src/fields/Doc.ts | 25 +++-- 21 files changed, 127 insertions(+), 206 deletions(-) delete mode 100644 src/client/views/nodes/formattedText/PaintButtonView.tsx (limited to 'src/client/views/collections/collectionSchema') diff --git a/package-lock.json b/package-lock.json index aa4108243..aafc14a86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -154,7 +154,7 @@ "prosemirror-commands": "^1.5.2", "prosemirror-find-replace": "^0.9.0", "prosemirror-history": "^1.3.2", - "prosemirror-inputrules": "github:bobzel/prosemirror-inputrules#3b3b3e0b1a1dcf80490d81675206369b6be96276", + "prosemirror-inputrules": "^1.4.0", "prosemirror-keymap": "^1.2.2", "prosemirror-model": "^1.19.3", "prosemirror-schema-list": "^1.3.0", @@ -28699,10 +28699,9 @@ } }, "node_modules/prosemirror-inputrules": { - "version": "1.3.0", - "resolved": "git+ssh://git@github.com/bobzel/prosemirror-inputrules.git#3b3b3e0b1a1dcf80490d81675206369b6be96276", - "integrity": "sha512-l81tcwS7ugPJEvCy78RtEvR2/2mVaTkFHJD9ACRxRDXhrfPWV0FkFYBAO7GolN4XlzIbIsal2MVvq2baLQ2guw==", - "license": "MIT", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz", + "integrity": "sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==", "dependencies": { "prosemirror-state": "^1.0.0", "prosemirror-transform": "^1.0.0" diff --git a/package.json b/package.json index f8144a0b3..a94f8c9be 100644 --- a/package.json +++ b/package.json @@ -237,7 +237,7 @@ "prosemirror-commands": "^1.5.2", "prosemirror-find-replace": "^0.9.0", "prosemirror-history": "^1.3.2", - "prosemirror-inputrules": "github:bobzel/prosemirror-inputrules#3b3b3e0b1a1dcf80490d81675206369b6be96276", + "prosemirror-inputrules": "^1.4.0", "prosemirror-keymap": "^1.2.2", "prosemirror-model": "^1.19.3", "prosemirror-schema-list": "^1.3.0", diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index f730d17fe..53d472c66 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -355,8 +355,8 @@ export function DocFocusOrOpen(doc: Doc, options: FocusViewOptions = { willZoomC }); } }; - if (Doc.IsDataProto(doc) && DocListCast(doc.proto_embeddings).some(embed => embed.hidden && [AclAdmin, AclEdit].includes(GetEffectiveAcl(embed)))) { - doc = DocListCast(doc.proto_embeddings).find(embed => embed.hidden && [AclAdmin, AclEdit].includes(GetEffectiveAcl(embed)))!; + if (Doc.IsDataProto(doc) && Doc.GetEmbeddings(doc).some(embed => embed.hidden && [AclAdmin, AclEdit].includes(GetEffectiveAcl(embed)))) { + doc = Doc.GetEmbeddings(doc).find(embed => embed.hidden && [AclAdmin, AclEdit].includes(GetEffectiveAcl(embed)))!; } if (doc.hidden) { doc.hidden = false; diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts index ba981145d..54066d267 100644 --- a/src/client/util/DropConverter.ts +++ b/src/client/util/DropConverter.ts @@ -73,6 +73,7 @@ export function convertDropDataToButtons(data: DragManager.DocumentDragData) { _nativeHeight: 100, _width: 100, _height: 100, + _layout_hideContextMenu: true, backgroundColor: StrCast(doc.backgroundColor), title: StrCast(layoutDoc.title), btnType: ButtonType.ClickButton, diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index dfaacf318..f5e162d16 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -61,7 +61,8 @@ function Run(script: string | undefined, customParams: string[], diagnostics: an const compiledFunction = (() => { try { return new Function(...paramNames, `return ${script}`); - } catch { + } catch (e) { + console.log(e); return undefined; } })(); diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 73fa6709c..58be41f53 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -189,7 +189,7 @@ export function ViewBoxAnnotatableComponent

() { toRemove.forEach(doc => { leavePushpin && DocUtils.LeavePushpin(doc, annotationKey ?? this.annotationKey); Doc.RemoveDocFromList(targetDataDoc, annotationKey ?? this.annotationKey, doc, true); - Doc.RemoveDocFromList(doc[DocData], 'proto_embeddings', doc, true); + Doc.RemoveEmbedding(doc, doc); doc.embedContainer = undefined; if (recent && !dontAddToRemoved) { doc.type !== DocumentType.LOADING && Doc.AddDocToList(recent, 'data', doc, undefined, true, true); diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 2193acf62..dec109d7b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -283,7 +283,7 @@ export class DocumentDecorations extends ObservableReactComponent !embedding.embedContainer) ?? Doc.MakeEmbedding(openDoc); + openDoc = Doc.GetEmbeddings(openDoc).find(embedding => !embedding.embedContainer) ?? Doc.MakeEmbedding(openDoc); Doc.deiconifyView(openDoc); } LightboxView.Instance.SetLightboxDoc( diff --git a/src/client/views/PropertiesDocContextSelector.tsx b/src/client/views/PropertiesDocContextSelector.tsx index 54f141a36..361451c4d 100644 --- a/src/client/views/PropertiesDocContextSelector.tsx +++ b/src/client/views/PropertiesDocContextSelector.tsx @@ -28,14 +28,14 @@ export class PropertiesDocContextSelector extends ObservableReactComponent embedding.embedContainer && embedding.embedContainer instanceof Doc).reduce((set, embedding) => set.add(Cast(embedding.embedContainer, Doc, null)), new Set()); - const containerSets = Array.from(containerProtos.keys()).map(container => DocListCast(container.proto_embeddings)); + const containerSets = Array.from(containerProtos.keys()).map(container => Doc.GetEmbeddings(container)); const containers = containerSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set()); - const doclayoutSets = Array.from(containers.keys()).map(dp => DocListCast(dp.proto_embeddings)); + const doclayoutSets = Array.from(containers.keys()).map(dp => Doc.GetEmbeddings(dp)); const doclayouts = Array.from( doclayoutSets .reduce((p, set) => { diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 208ed56c9..a7a065a95 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -173,7 +173,7 @@ export class PropertiesView extends ObservableReactComponent(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))); + docs.forEach(doc => Object.keys(doc).forEach(key => doc[key] !== ComputedField.undefined && key && ids.add(key))); // prettier-ignore Array.from(ids).filter(filter).sort().map(key => { @@ -263,8 +263,7 @@ export class PropertiesView extends ObservableReactComponent Doc.toggleLockedPosition(doc), 'toggleBackground'); } +function togglePaintView(e: React.MouseEvent, doc: Opt, props: Opt) { + const scriptProps = { + this: doc, + _readOnly_: false, + documentView: props?.DocumentView?.(), + value: undefined, + }; + e.stopPropagation(); + UndoManager.RunInBatch(() => doc && ScriptCast(doc.onPaint).script.run(scriptProps), 'togglePaintView'); +} export function wavyBorderPath(pw: number, ph: number, inset: number = 0.05) { return `M ${pw * 0.5} ${ph * inset} C ${pw * 0.6} ${ph * inset} ${pw * (1 - 2 * inset)} 0 ${pw * (1 - inset)} ${ph * inset} C ${pw} ${ph * (2 * inset)} ${pw * (1 - inset)} ${ph * 0.25} ${pw * (1 - inset)} ${ph * 0.3} C ${ @@ -267,6 +277,11 @@ export function DefaultStyleProvider(doc: Opt, props: Opt

); + const paint = () => !doc?.onPaint ? null : ( +
togglePaintView(e, doc, props)}> + +
+ ); const filter = () => { const dashView = untracked(() => DocumentManager.Instance.getDocumentView(Doc.ActiveDashboard)); const showFilterIcon = @@ -329,6 +344,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt + {paint()} {lock()} {filter()} {audio()} diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 87973fd81..31ca86f0f 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -490,7 +490,7 @@ export class CollectionDockingView extends CollectionSubView() { // if you close a tab that is not embedded somewhere else (an embedded Doc can be opened simultaneously in a tab), then add the tab to recently closed if (tab.DashDoc.embedContainer === this.Document) tab.DashDoc.embedContainer = undefined; if (!tab.DashDoc.embedContainer) Doc.AddDocToList(Doc.MyRecentlyClosed, 'data', tab.DashDoc, undefined, true, true); - Doc.RemoveDocFromList(tab.DashDoc[DocData], 'proto_embeddings', tab.DashDoc); + Doc.RemoveEmbedding(tab.DashDoc, tab.DashDoc); } if (CollectionDockingView.Instance) { const dview = CollectionDockingView.Instance.Document; diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 0a1946f09..09701ddb5 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -128,6 +128,10 @@ position: relative; z-index: 1; + .treeView-rightButtons > .iconButton-container { + min-height: unset; + } + .treeView-background { width: 100%; height: 100%; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 54e8b08b6..9368560e9 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -54,6 +54,7 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso import './CollectionFreeFormView.scss'; import { MarqueeView } from './MarqueeView'; import { RichTextField } from '../../../../fields/RichTextField'; +import { CompileScript } from '../../../util/Scripting'; export interface collectionFreeformViewProps { NativeWidth?: () => number; @@ -80,8 +81,10 @@ export class CollectionFreeFormView extends CollectionSubView { ${paintFunc} })()`; + : paintFunc.includes('dashDiv') + ? `const dashDiv = document.querySelector('#${this._paintedId}'); + (async () => { ${paintFunc} })()` + : paintFunc; } constructor(props: any) { super(props); @@ -1496,7 +1499,12 @@ export class CollectionFreeFormView extends CollectionSubView ({ code: this.paintFunc, first: this._firstRender, width: this.Document._width, height: this.Document._height }), - ({ code, first }) => code && !first && eval(code), + ({ code, first }) => { + if (!code.includes('dashDiv')) { + const script = CompileScript(code, { params: { docView: 'any' }, typecheck: false, editable: true }); + if (script.compiled) script.run({ this: this.Document, docView: this.DocumentView?.() }); + } else code && !first && eval(code); + }, { fireImmediately: true } ); diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 29d121974..29491569a 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -128,7 +128,7 @@ .row-menu { display: flex; - justify-content: flex-end; + justify-content: center; } } @@ -224,7 +224,10 @@ display: flex; flex-direction: row; min-width: 50px; - justify-content: flex-end; + justify-content: center; + .iconButton-container { + min-width: unset !important; + } } .row-cells { diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index f2fe0dde7..39fea2d2e 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -121,7 +121,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { pointerEvents: !this._props.isContentActive() ? 'none' : undefined, }}> : } size={Size.XSMALL} onPointerDown={e => diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 51f4b1a68..b5355fb99 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -456,8 +456,8 @@ export class DocumentViewInternal extends DocComponent this._props.removeDocument?.(this.Document), 'delete doc'); setToggleDetail = undoable( - (defaultLayout: string) => - (this.Document.onClick = ScriptField.MakeScript( + (defaultLayout: string, scriptFieldKey: 'onClick') => + (this.Document[scriptFieldKey] = ScriptField.MakeScript( `toggleDetail(documentView, "${StrCast(this.Document.layout_fieldKey) .replace('layout_', '') .replace(/^layout$/, 'detail')}", "${defaultLayout}")`, @@ -1212,7 +1212,7 @@ export class DocumentView extends DocComponent() { }; public noOnClick = () => this._docViewInternal?.noOnClick(); public toggleFollowLink = (zoom?: boolean, setTargetToggle?: boolean): void => this._docViewInternal?.toggleFollowLink(zoom, setTargetToggle); - public setToggleDetail = (defaultLayout = '') => this._docViewInternal?.setToggleDetail(defaultLayout); + public setToggleDetail = (defaultLayout = '', scriptFieldKey = 'onClick') => this._docViewInternal?.setToggleDetail(defaultLayout, scriptFieldKey); public onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => this._docViewInternal?.onContextMenu?.(e, pageX, pageY); public cleanupPointerEvents = () => this._docViewInternal?.cleanupPointerEvents(); public startDragging = (x: number, y: number, dropAction: dropActionType, hideSource = false) => this._docViewInternal?.startDragging(x, y, dropAction, hideSource); diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 973f90501..b82ab4219 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -67,8 +67,6 @@ import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu'; import { RichTextRules } from './RichTextRules'; import { schema } from './schema_rts'; import { SummaryView } from './SummaryView'; -import { CollectionView } from '../../collections/CollectionView'; -import { PaintButtonView } from './PaintButtonView'; // import * as applyDevTools from 'prosemirror-dev-tools'; @observer export class FormattedTextBox extends ViewBoxAnnotatableComponent() implements ViewBoxInterface { @@ -488,14 +486,29 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent, or ^@ + * The last of these is interpreted as an include directive when converting the text into evaluated code in the paint + * function of a freeform view that is driven by the text box's text. The include directive will copy the code of the published + * document into the code being evaluated. + */ hyperlinkTerm = (tr: any, target: Doc, newAutoLinks: Set) => { const editorView = this._editorView; if (editorView && (editorView as any).docView && !Doc.AreProtosEqual(target, this.Document)) { const autoLinkTerm = StrCast(target.title).replace(/^@/, ''); var alink: Doc | undefined; this.findInNode(editorView, editorView.state.doc, autoLinkTerm).forEach(sel => { - const splitter = editorView.state.schema.marks.splitter.create({ id: Utils.GenerateGuid() }); - if (!sel.$anchor.pos || [autoLinkTerm, StrCast(target.title)].includes(editorView.state.doc.textBetween(sel.$anchor.pos - 1, sel.$to.pos).trim())) { + if ( + !sel.$anchor.pos || + autoLinkTerm === + editorView.state.doc + .textBetween(sel.$anchor.pos - 1, sel.$to.pos) + .trim() + .replace(/[\^@]+/, '') + ) { + const splitter = editorView.state.schema.marks.splitter.create({ id: Utils.GenerateGuid() }); tr = tr.addMark(sel.from, sel.to, splitter); tr.doc.nodesBetween(sel.from, sel.to, (node: any, pos: number, parent: any) => { if (node.firstChild === null && !node.marks.find((m: Mark) => m.type.name === schema.marks.noAutoLinkAnchor.name) && node.marks.find((m: Mark) => m.type.name === schema.marks.splitter.name)) { @@ -668,12 +681,22 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent -1) { - const sel = new TextSelection(pm.state.doc.resolve(ep.from + index + foundAt + 1), pm.state.doc.resolve(ep.from + index + foundAt + find.length + 1)); - ret.push(sel); - index = index + foundAt + find.length; + var blockOffset = 0; + for (var i = 0; i < node.childCount; i++) { + var textContent = ''; + while (i < node.childCount && node.child(i).type === pm.state.schema.nodes.text) { + textContent += node.child(i).textContent; + i++; + } + while (ep && (foundAt = textContent.slice(index).search(regexp)) > -1) { + const sel = new TextSelection(pm.state.doc.resolve(ep.from + index + blockOffset + foundAt + 1), pm.state.doc.resolve(ep.from + index + blockOffset + foundAt + find.length + 1)); + ret.push(sel); + index = index + foundAt + find.length; + } + blockOffset += textContent.length; + if (i < node.childCount) blockOffset += node.child(i).nodeSize; } } } else { @@ -934,17 +957,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent (this.layoutDoc._createDocOnCR = !this.layoutDoc._createDocOnCR), icon: !this.Document._createDocOnCR ? 'grip-lines' : 'bars', }); - optionItems.push({ - description: 'Make Paint Function', - event: () => { - this.dataDoc.layout_painted = CollectionView.LayoutString('painted'); - this.layoutDoc.layout_fieldKey = 'layout_painted'; - this.layoutDoc.type_collection = CollectionViewType.Freeform; - this.DocumentView?.().setToggleDetail(); - this.dataDoc.paintFunc = ComputedField.MakeFunction(`toJavascriptString(this['${this.fieldKey}']?.Text)`); - }, - icon: !this.Document._layout_enableAltContentUI ? 'eye-slash' : 'eye', - }); !Doc.noviceMode && optionItems.push({ description: `${this.Document._layout_autoHeight ? 'Lock' : 'Auto'} Height`, @@ -1411,9 +1423,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent); - } - destroy() { - setTimeout(() => { - try { - this.root.unmount(); - } catch {} - }); - } - deselectNode() { - this.dom.classList.remove('ProseMirror-selectednode'); - } - selectNode() { - this.dom.classList.add('ProseMirror-selectednode'); - } -} - -interface IPaintButtonViewInternal { - tbox: FormattedTextBox; - width: number; - height: number; - node: any; - getPos: any; -} - -@observer -export class PaintButtonViewInternal extends ObservableReactComponent { - _reactionDisposer: IReactionDisposer | undefined; - _textBoxDoc: Doc; - - constructor(props: IPaintButtonViewInternal) { - super(props); - makeObservable(this); - this._textBoxDoc = this._props.tbox.Document; - } - - return100 = () => 100; - @computed get _checked() { - return this._props.tbox.Document.onClick ? true : false; - } - - onCheckClick = () => { - const textView = this._props.tbox.DocumentView?.(); - if (textView) { - const paintedField = 'layout_' + this._props.tbox.fieldKey + 'Painted'; - const layoutFieldKey = StrCast(textView.layoutDoc.layout_fieldKey, 'layout'); - if (textView.layoutDoc.onClick) { - textView.layoutDoc[paintedField] = undefined; - textView.layoutDoc.onClick = undefined; - } else { - textView.layoutDoc.type_collection = CollectionViewType.Freeform; - textView.dataDoc[paintedField] = CollectionView.LayoutString(this._props.tbox.fieldKey); - textView.layoutDoc.layout_fieldKey = paintedField; - textView.setToggleDetail(layoutFieldKey.replace('layout_', '').replace('layout', '')); - textView.layoutDoc.layout_fieldKey = layoutFieldKey; - } - } - }; - - render() { - return ( -
- this.onCheckClick()} /> -
- ); - } -} diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts index 8f7bc5282..ce2c33fb4 100644 --- a/src/client/views/nodes/formattedText/RichTextRules.ts +++ b/src/client/views/nodes/formattedText/RichTextRules.ts @@ -68,40 +68,21 @@ export class RichTextRules { ), // ``` create code block - textblockTypeInputRule(/^```$/, schema.nodes.code_block), - new InputRule( - new RegExp(/(^|\n)\^@paint/), // for code blocks '^' means the beginning of the block, not the line, so need to test for \n - (state, match, start, end) => { - const { dataDoc, layoutDoc, fieldKey } = this.TextBox; - layoutDoc.type_collection = CollectionViewType.Freeform; - const paintedField = 'layout_' + this.TextBox.fieldKey + 'Painted'; - dataDoc[paintedField] = CollectionView.LayoutString(this.TextBox.fieldKey); - const layoutFieldKey = StrCast(layoutDoc.layout_fieldKey); - layoutDoc.layout_fieldKey = paintedField; - this.TextBox.DocumentView?.().setToggleDetail(layoutFieldKey.replace('layout_', '').replace('layout', '')); - layoutDoc.layout_fieldKey = layoutFieldKey; - const comment = '/* enable as paint function '; - const endComment = ' */\n'; - const inCode = state.tr.selection.$anchor.node().type === schema.nodes.code_block; - if (inCode) { - const tr = state.tr - .deleteRange(start, end) - .insertText(comment) - .insert(start + comment.length, schema.nodes.paintButton.create()) - .insertText(endComment); - return tr.setSelection(new TextSelection(tr.doc.resolve(start + comment.length + endComment.length + 1))); - } else { - const tr = state.tr - .deleteRange(start, end) - .insertText(comment) - .insert(start + comment.length, schema.nodes.paintButton.create()) - .insertText(endComment) - .insert(start + comment.length + endComment.length + 1, schema.nodes.code_block.create()); - return tr.setSelection(new TextSelection(tr.doc.resolve(start + comment.length + endComment.length + 3))); - } - }, - { inCode: true } - ), + new InputRule(/^```$/, (state, match, start, end) => { + let $start = state.doc.resolve(start); + if (!$start.node(-1).canReplaceWith($start.index(-1), $start.indexAfter(-1), schema.nodes.code_block)) return null; + + // this enables text with code blocks to be used as a 'paint' function via a styleprovider button that is added to Docs that have an onPaint script + this.TextBox.layoutDoc.type_collection = CollectionViewType.Freeform; // make it a freeform when rendered as a collection since those are the only views that know about the paint function + const paintedField = 'layout_' + this.TextBox.fieldKey + 'Painted'; // make a layout field key for storing the CollectionView jsx string pointing to the textbox's text + this.TextBox.dataDoc[paintedField] = CollectionView.LayoutString(this.TextBox.fieldKey); + const layoutFieldKey = StrCast(this.TextBox.layoutDoc.layout_fieldKey); // save the current layout fieldkey + this.TextBox.layoutDoc.layout_fieldKey = paintedField; // setup the paint layout field key + this.TextBox.DocumentView?.().setToggleDetail(layoutFieldKey.replace('layout_', '').replace('layout', ''), 'onPaint'); // create the script to toggle between the painted and regular view + this.TextBox.layoutDoc.layout_fieldKey = layoutFieldKey; // restore the layout field key to text + + return state.tr.delete(start, end).setBlockType(start, start, schema.nodes.code_block); + }), // % set the font size new InputRule(new RegExp(/%([0-9]+)\s$/), (state, match, start, end) => { diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 30e3aa5f0..f3fc51671 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -572,6 +572,16 @@ export namespace Doc { return false; } + export function RemoveEmbedding(doc: Doc, embedding: Doc) { + Doc.RemoveDocFromList(doc[DocData], 'proto_embeddings', embedding); + } + export function AddEmbedding(doc: Doc, embedding: Doc) { + Doc.AddDocToList(doc[DocData], 'proto_embeddings', embedding, undefined, undefined, undefined, undefined, undefined, true); + } + export function GetEmbeddings(doc: Doc) { + return DocListCast(Doc.Get(doc[DocData], 'proto_embeddings', true)); + } + export function MakeEmbedding(doc: Doc, id?: string) { const embedding = (!GetT(doc, 'isDataDoc', 'boolean', true) && doc.proto) || doc.type === DocumentType.CONFIG ? Doc.MakeCopy(doc, undefined, id) : Doc.MakeDelegate(doc, id); const layout = Doc.LayoutField(embedding); @@ -579,20 +589,18 @@ export namespace Doc { Doc.SetLayout(embedding, Doc.MakeEmbedding(layout)); } embedding.createdFrom = doc; - embedding.proto_embeddingId = doc[DocData].proto_embeddingId = DocListCast(doc[DocData].proto_embeddings).length - 1; + embedding.proto_embeddingId = doc[DocData].proto_embeddingId = Doc.GetEmbeddings(doc).length - 1; !Doc.GetT(embedding, 'title', 'string', true) && (embedding.title = ComputedField.MakeFunction(`renameEmbedding(this)`)); embedding.author = Doc.CurrentUserEmail; - Doc.AddDocToList(doc[DocData], 'proto_embeddings', embedding); - return embedding; } export function BestEmbedding(doc: Doc) { const dataDoc = doc[DocData]; - const availableEmbeddings = DocListCast(dataDoc.proto_embeddings); + const availableEmbeddings = Doc.GetEmbeddings(dataDoc); const bestEmbedding = [...(dataDoc !== doc ? [doc] : []), ...availableEmbeddings].find(doc => !doc.embedContainer && doc.author === Doc.CurrentUserEmail); - bestEmbedding && Doc.AddDocToList(dataDoc, 'protoEmbeddings', doc); + bestEmbedding && Doc.AddDocToList(dataDoc, 'protoEmbeddings', doc, undefined, undefined, undefined, undefined, undefined, true); return bestEmbedding ?? Doc.MakeEmbedding(doc); } @@ -951,7 +959,7 @@ export namespace Doc { Doc.GetProto(copy).embedContainer = undefined; Doc.GetProto(copy).proto_embeddings = new List([copy]); } else { - Doc.AddDocToList(copy[DocData], 'proto_embeddings', copy); + Doc.AddEmbedding(copy, copy); } copy.embedContainer = undefined; if (retitle) { @@ -972,9 +980,10 @@ export namespace Doc { Object.keys(doc) .filter(key => key.startsWith('acl')) .forEach(key => (delegate[key] = doc[key])); - if (!Doc.IsSystem(doc)) Doc.AddDocToList(doc[DocData], 'proto_embeddings', delegate); + if (!Doc.IsSystem(doc)) Doc.AddEmbedding(doc, delegate); title && (delegate.title = title); delegate[Initializing] = false; + Doc.AddEmbedding(doc, delegate); return delegate; } return undefined; @@ -995,7 +1004,7 @@ export namespace Doc { delegate[Initializing] = true; delegate.proto = delegateProto; delegate.author = Doc.CurrentUserEmail; - Doc.AddDocToList(delegateProto[DocData], 'proto_embeddings', delegate); + Doc.AddEmbedding(delegateProto, delegate); delegate[Initializing] = false; delegateProto[Initializing] = false; return delegate; -- cgit v1.2.3-70-g09d2 From a60c3ecd243d293ff6843c4868fd953d465b45a1 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 10 Feb 2024 19:02:14 -0500 Subject: more updates to npm packages. --- package-lock.json | 122 ++++++++++----------- package.json | 8 +- .../collectionSchema/SchemaTableCell.tsx | 6 +- 3 files changed, 67 insertions(+), 69 deletions(-) (limited to 'src/client/views/collections/collectionSchema') diff --git a/package-lock.json b/package-lock.json index f7c10358e..158aaf09b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,7 +48,7 @@ "@types/pdf-parse": "^1.1.4", "@types/reveal": "^4.2.0", "@types/supercluster": "^7.1.3", - "@types/web": "^0.0.135", + "@types/web": "^0.0.138", "@webscopeio/react-textarea-autocomplete": "^4.9.2", "adm-zip": "^0.5.10", "archiver": "^6.0.1", @@ -104,7 +104,7 @@ "function-plot": "^1.23.3", "golden-layout": "^2.6.0", "google-auth-library": "^9.4.1", - "googleapis": "^129.0.0", + "googleapis": "^133.0.0", "googlephotos": "^0.3.5", "got": "^14.0.0", "howler": "^2.2.4", @@ -171,7 +171,7 @@ "react-awesome-reveal": "^4.2.7", "react-color": "^2.19.3", "react-compound-slider": "^3.4.0", - "react-datepicker": "^4.24.0", + "react-datepicker": "^6.1.0", "react-dom": "^18.2.0", "react-grid-layout": "^1.4.4", "react-icons": "^5.0.1", @@ -281,7 +281,7 @@ "eslint-plugin-prettier": "^5.0.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", - "jsdom": "^23.0.1", + "jsdom": "^24.0.0", "mocha": "^10.2.0", "prettier": "^3.1.0", "react-type-animation": "^3.2.0", @@ -402,17 +402,6 @@ "node": ">=6.0.0" } }, - "node_modules/@asamuzakjp/dom-selector": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-2.0.2.tgz", - "integrity": "sha512-x1KXOatwofR6ZAYzXRBL5wrdV0vwNxlTCK9NCuLqAzQYARqGcvFwiJA6A1ERuh+dgeA4Dxm3JBYictIes+SqUQ==", - "dev": true, - "dependencies": { - "bidi-js": "^1.0.3", - "css-tree": "^2.3.1", - "is-potential-custom-element-name": "^1.0.1" - } - }, "node_modules/@azure/abort-controller": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-1.1.0.tgz", @@ -2575,6 +2564,20 @@ "@floating-ui/utils": "^0.2.1" } }, + "node_modules/@floating-ui/react": { + "version": "0.26.9", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.9.tgz", + "integrity": "sha512-p86wynZJVEkEq2BBjY/8p2g3biQ6TlgT4o/3KgFKyTWoJLU1GZ8wpctwRqtkEl2tseYA+kw7dBAIDFcednfI5w==", + "dependencies": { + "@floating-ui/react-dom": "^2.0.8", + "@floating-ui/utils": "^0.2.1", + "tabbable": "^6.0.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@floating-ui/react-dom": { "version": "2.0.8", "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", @@ -9758,9 +9761,9 @@ "dev": true }, "node_modules/@types/web": { - "version": "0.0.135", - "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.135.tgz", - "integrity": "sha512-3fNGUqpXzakTUJ9FQVoplG+fpzVn1WhQRz3eIE7dTGY4uI8/ngi9KbAtaK4nrIUk8dAI0qYPMIvq2ydTLYbJyA==" + "version": "0.0.138", + "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.138.tgz", + "integrity": "sha512-oQD74hl+cNCZdSWIupJCXZ2azTuB3MJ/mrWlgYt+v4pD7/Dr78gl5hKAdieZNf9NrAqwUez79bHtnFVSNSscWA==" }, "node_modules/@types/webidl-conversions": { "version": "7.0.3", @@ -10978,15 +10981,6 @@ "url": "https://github.com/Pomax/bezierjs/blob/master/FUNDING.md" } }, - "node_modules/bidi-js": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz", - "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==", - "dev": true, - "dependencies": { - "require-from-string": "^2.0.2" - } - }, "node_modules/big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -15345,19 +15339,6 @@ "postcss-value-parser": "^4.0.2" } }, - "node_modules/css-tree": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dev": true, - "dependencies": { - "mdn-data": "2.0.30", - "source-map-js": "^1.0.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" - } - }, "node_modules/css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -15873,6 +15854,7 @@ "version": "2.30.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dev": true, "dependencies": { "@babel/runtime": "^7.21.0" }, @@ -19990,9 +19972,9 @@ } }, "node_modules/googleapis": { - "version": "129.0.0", - "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-129.0.0.tgz", - "integrity": "sha512-gFatrzby+oh/GxEeMhJOKzgs9eG7yksRcTon9b+kPie4ZnDSgGQ85JgtUaBtLSBkcKpUKukdSP6Km1aCjs4y4Q==", + "version": "133.0.0", + "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-133.0.0.tgz", + "integrity": "sha512-6xyc49j+x7N4smawJs/q1i7mbSkt6SYUWWd9RbsmmDW7gRv+mhwZ4xT+XkPihZcNyo/diF//543WZq4szdS74w==", "dependencies": { "google-auth-library": "^9.0.0", "googleapis-common": "^7.0.0" @@ -22223,12 +22205,11 @@ "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==" }, "node_modules/jsdom": { - "version": "23.2.0", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.2.0.tgz", - "integrity": "sha512-L88oL7D/8ufIES+Zjz7v0aes+oBMh2Xnh3ygWvL0OaICOomKEPKuPnIfBJekiXr+BHbbMjrWn/xqrDQuxFTeyA==", + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.0.0.tgz", + "integrity": "sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==", "dev": true, "dependencies": { - "@asamuzakjp/dom-selector": "^2.0.1", "cssstyle": "^4.0.1", "data-urls": "^5.0.0", "decimal.js": "^10.4.3", @@ -22237,6 +22218,7 @@ "http-proxy-agent": "^7.0.0", "https-proxy-agent": "^7.0.2", "is-potential-custom-element-name": "^1.0.1", + "nwsapi": "^2.2.7", "parse5": "^7.1.2", "rrweb-cssom": "^0.6.0", "saxes": "^6.0.0", @@ -23403,12 +23385,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/mdn-data": { - "version": "2.0.30", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", - "dev": true - }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -27518,6 +27494,12 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/nwsapi": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz", + "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==", + "dev": true + }, "node_modules/oauth": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.10.0.tgz", @@ -29331,22 +29313,30 @@ "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" }, "node_modules/react-datepicker": { - "version": "4.25.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz", - "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.1.0.tgz", + "integrity": "sha512-8uz+hAOpvHqZGvD4Ky1hJ0/tLI4S9B0Gu9LV7LtLxRKXODs/xrxEay0aMVp7AW9iizTeImZh/6aA00fFaRZpJw==", "dependencies": { - "@popperjs/core": "^2.11.8", + "@floating-ui/react": "^0.26.2", "classnames": "^2.2.6", - "date-fns": "^2.30.0", + "date-fns": "^3.3.1", "prop-types": "^15.7.2", - "react-onclickoutside": "^6.13.0", - "react-popper": "^2.3.0" + "react-onclickoutside": "^6.13.0" }, "peerDependencies": { "react": "^16.9.0 || ^17 || ^18", "react-dom": "^16.9.0 || ^17 || ^18" } }, + "node_modules/react-datepicker/node_modules/date-fns": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz", + "integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -29383,7 +29373,8 @@ "node_modules/react-fast-compare": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", - "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", + "dev": true }, "node_modules/react-grid-layout": { "version": "1.4.4", @@ -29559,6 +29550,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dev": true, "dependencies": { "react-fast-compare": "^3.0.1", "warning": "^4.0.2" @@ -32125,6 +32117,11 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, "node_modules/table": { "version": "5.4.6", "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", @@ -32327,7 +32324,8 @@ "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", + "dev": true }, "node_modules/textarea-caret": { "version": "3.1.0", diff --git a/package.json b/package.json index 258bd4550..7df948acf 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "eslint-plugin-prettier": "^5.0.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", - "jsdom": "^23.0.1", + "jsdom": "^24.0.0", "mocha": "^10.2.0", "prettier": "^3.1.0", "react-type-animation": "^3.2.0", @@ -131,7 +131,7 @@ "@types/pdf-parse": "^1.1.4", "@types/reveal": "^4.2.0", "@types/supercluster": "^7.1.3", - "@types/web": "^0.0.135", + "@types/web": "^0.0.138", "@webscopeio/react-textarea-autocomplete": "^4.9.2", "adm-zip": "^0.5.10", "archiver": "^6.0.1", @@ -187,7 +187,7 @@ "function-plot": "^1.23.3", "golden-layout": "^2.6.0", "google-auth-library": "^9.4.1", - "googleapis": "^129.0.0", + "googleapis": "^133.0.0", "googlephotos": "^0.3.5", "got": "^14.0.0", "howler": "^2.2.4", @@ -254,7 +254,7 @@ "react-awesome-reveal": "^4.2.7", "react-color": "^2.19.3", "react-compound-slider": "^3.4.0", - "react-datepicker": "^4.24.0", + "react-datepicker": "^6.1.0", "react-dom": "^18.2.0", "react-grid-layout": "^1.4.4", "react-icons": "^5.0.1", diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index dbaa6e110..5c0eba860 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -261,18 +261,18 @@ export class SchemaDateCell extends ObservableReactComponent { + handleChange = (date: Date | null) => { // const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } }); // if (script.compiled) { // this.applyToDoc(this._document, this._props.row, this._props.col, script.run); // } else { // ^ DateCast is always undefined for some reason, but that is what the field should be set to - this._props.Document[this._props.fieldKey] = new DateField(date as Date); + date && (this._props.Document[this._props.fieldKey] = new DateField(date)); //} }; render() { - return this.handleChange(date)} />; + return this.handleChange(date)} />; } } @observer -- cgit v1.2.3-70-g09d2 From 1fcd36514f24fbd2f2591111f6038f8ebf4bc2d8 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 10 Feb 2024 20:29:27 -0500 Subject: minimal fix to get react date picker to work. --- src/client/documents/Documents.ts | 1 + .../collectionSchema/SchemaTableCell.tsx | 37 ++++++++++++++++++---- 2 files changed, 32 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/collectionSchema') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 355a4c937..2d2f5fe4a 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -252,6 +252,7 @@ export class DocumentOptions { layout_hideDecorationTitle?: BOOLt = new BoolInfo('whether to suppress the document decortations title when selected'); _layout_hideContextMenu?: BOOLt = new BoolInfo('whether the context menu can be shown'); layout_borderRounding?: string; + _layout_modificationDate?: DATEt = new DateInfo('last modification date of doc layout', false); _layout_nativeDimEditable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers', false); _layout_reflowVertical?: BOOLt = new BoolInfo('native height can be changed independent of width by dragging decoration resizers'); _layout_reflowHorizontal?: BOOLt = new BoolInfo('whether a doc with a native size can be horizonally resized, causing some form of reflow'); diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 5c0eba860..001ad5ab6 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -24,6 +24,11 @@ import { KeyValueBox } from '../../nodes/KeyValueBox'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { ColumnType, FInfotoColType } from './CollectionSchemaView'; import './CollectionSchemaView.scss'; +import 'react-datepicker/dist/react-datepicker.css'; +import { Popup, Size, Type } from 'browndash-components'; +import { IconLookup, faCaretDown } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { SettingsManager } from '../../../util/SettingsManager'; export interface SchemaTableCellProps { Document: Doc; @@ -162,7 +167,7 @@ export class SchemaTableCell extends ObservableReactComponent; case ColumnType.RTF: return ; case ColumnType.Enumeration: return val.toString())} />; - case ColumnType.Date: // return ; + case ColumnType.Date: return ; default: return this.defaultCellContent; } } @@ -260,8 +265,7 @@ export class SchemaDateCell extends ObservableReactComponent { + handleChange = undoable((date: Date | null) => { // const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } }); // if (script.compiled) { // this.applyToDoc(this._document, this._props.row, this._props.col, script.run); @@ -269,10 +273,31 @@ export class SchemaDateCell extends ObservableReactComponent this.handleChange(date)} />; + const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); + return ( + <> +
+ {}} /> +
+ {pointerEvents === 'none' ? null : ( + } + size={Size.XSMALL} + type={Type.TERT} + color={SettingsManager.userColor} + background={SettingsManager.userBackgroundColor} + popup={ +
+ +
+ } + /> + )} + + ); } } @observer @@ -394,7 +419,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent