From 8680d1c31d4f835663c070f5b8cef57254e75e28 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 12 Nov 2024 16:42:35 -0500 Subject: made equation background same as text. fixed dflt stroke/link width to both be 1. made function plot axis ranges get saved to Doc. marked equation->function links as being svgs. fixed initial size of equation boxes.. --- src/client/documents/DocUtils.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/client/documents') diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts index 067b9c5e0..741d3a10e 100644 --- a/src/client/documents/DocUtils.ts +++ b/src/client/documents/DocUtils.ts @@ -168,7 +168,7 @@ export namespace DocUtils { return rangeFilteredDocs; } - export function MakeLink(source: Doc, target: Doc, linkSettings: { link_relationship?: string; link_description?: string }, id?: string, showPopup?: number[]) { + export function MakeLink(source: Doc, target: Doc, linkSettings: { layout_isSvg?: boolean; link_relationship?: string; link_description?: string }, id?: string, showPopup?: number[]) { if (!linkSettings.link_relationship) linkSettings.link_relationship = target.type === DocumentType.RTF ? 'Commentary:Comments On' : 'link'; if (target.doc === Doc.UserDoc()) return undefined; @@ -220,6 +220,7 @@ export namespace DocUtils { link_anchor_2_useSmallAnchor: target.useSmallAnchor ? true : undefined, link_relationship: linkSettings.link_relationship, link_description: linkSettings.link_description, + layout_isSvg: linkSettings.layout_isSvg, x: ComputedField.MakeFunction(`((this.${a}?.x||0)+(this.${b}?.x||0))/2`) as unknown as number, // x can accept functions even though type says it can't y: ComputedField.MakeFunction(`((this.${a}?.y||0)+(this.${b}?.y||0))/2`) as unknown as number, // y can accept functions even though type says it can't link_autoMoveAnchors: true, -- cgit v1.2.3-70-g09d2 From 6a6215a447c3104f5fea8a813270b8c1fc39ad75 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 12 Nov 2024 18:03:12 -0500 Subject: fixed resizing height to 0 to autoResize. fixed setting background color default for equations (and everything else) to textBackgroundColor from user doc. Added a math pseudo-font to trigger entering equations instead of rich text. --- src/client/documents/DocUtils.ts | 70 +++++++++++++++++++++----------- src/client/util/CurrentUserUtils.ts | 4 +- src/client/views/DocumentDecorations.tsx | 6 +-- src/client/views/nodes/EquationBox.tsx | 14 +++++-- 4 files changed, 63 insertions(+), 31 deletions(-) (limited to 'src/client/documents') diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts index 741d3a10e..c466344b3 100644 --- a/src/client/documents/DocUtils.ts +++ b/src/client/documents/DocUtils.ts @@ -358,6 +358,16 @@ export namespace DocUtils { return ctor ? ctor(path, overwriteDoc ? { ...options, title: StrCast(overwriteDoc.title, path) } : options, overwriteDoc) : undefined; } + /** + * Adds items to the doc creator (':') context menu for creating each document type + * @param docTextAdder + * @param docAdder + * @param x + * @param y + * @param simpleMenu + * @param pivotField + * @param pivotValue + */ export function addDocumentCreatorMenuItems(docTextAdder: (d: Doc) => void, docAdder: (d: Doc) => void, x: number, y: number, simpleMenu: boolean = false, pivotField?: string, pivotValue?: string | number | boolean): void { const documentList: ContextMenuProps[] = DocListCast(DocListCast(Doc.MyTools?.data)[0]?.data) .filter(btnDoc => !btnDoc.hidden) @@ -371,6 +381,7 @@ export namespace DocUtils { newDoc.author = ClientUtils.CurrentUserEmail(); newDoc.x = x; newDoc.y = y; + newDoc[DocData].backgroundColor = Doc.UserDoc().textBackgroundColor; Doc.SetSelectOnLoad(newDoc); if (pivotField) { newDoc[pivotField] = pivotValue; @@ -675,30 +686,43 @@ export namespace DocUtils { export function GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number, annotationOn?: Doc, backgroundColor?: string) { const defaultTextTemplate = DocCast(Doc.UserDoc().defaultTextLayout); - const tbox = Docs.Create.TextDocument('', { - annotationOn, - backgroundColor, - x, - y, - title, - ...(defaultTextTemplate - ? {} // if the new doc will inherit from a template, don't set any layout fields since that would block the inheritance - : { - _width: width || BoolCast(Doc.UserDoc().fitBox) ? Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')) * 1.5 * 6 : 200, - _height: BoolCast(Doc.UserDoc().fitBox) ? Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')) * 1.5 : 35, - _layout_centered: BoolCast(Doc.UserDoc()._layout_centered), - _layout_fitWidth: true, - _layout_autoHeight: true, - backgroundColor: StrCast(Doc.UserDoc().textBackgroundColor), - text_fitBox: BoolCast(Doc.UserDoc().fitBox), - text_align: StrCast(Doc.UserDoc().textAlign), + const tbox = + StrCast(Doc.UserDoc().fontFamily) === 'Math' + ? Docs.Create.EquationDocument('', { + // + annotationOn, + backgroundColor: backgroundColor ?? StrCast(Doc.UserDoc().textBackgroundColor), + x, + y, + title, text_fontColor: StrCast(Doc.UserDoc().fontColor), - text_fontFamily: StrCast(Doc.UserDoc().fontFamily), - text_fontWeight: StrCast(Doc.UserDoc().fontWeight), - text_fontStyle: StrCast(Doc.UserDoc().fontStyle), - text_fontDecoration: StrCast(Doc.UserDoc().fontDecoration), - }), - }); + _width: 35, + _height: 35, + }) + : Docs.Create.TextDocument('', { + annotationOn, + backgroundColor, + x, + y, + title, + ...(defaultTextTemplate + ? {} // if the new doc will inherit from a template, don't set any layout fields since that would block the inheritance + : { + _width: width || BoolCast(Doc.UserDoc().fitBox) ? Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')) * 1.5 * 6 : 200, + _height: BoolCast(Doc.UserDoc().fitBox) ? Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')) * 1.5 : 35, + _layout_centered: BoolCast(Doc.UserDoc()._layout_centered), + _layout_fitWidth: true, + _layout_autoHeight: true, + backgroundColor: StrCast(Doc.UserDoc().textBackgroundColor), + text_fitBox: BoolCast(Doc.UserDoc().fitBox), + text_align: StrCast(Doc.UserDoc().textAlign), + text_fontColor: StrCast(Doc.UserDoc().fontColor), + text_fontFamily: StrCast(Doc.UserDoc().fontFamily), + text_fontWeight: StrCast(Doc.UserDoc().fontWeight), + text_fontStyle: StrCast(Doc.UserDoc().fontStyle), + text_fontDecoration: StrCast(Doc.UserDoc().fontDecoration), + }), + }); if (defaultTextTemplate) { tbox.layout_fieldKey = 'layout_' + StrCast(defaultTextTemplate.title); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 7b2a7ae0f..c01f57a59 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -372,7 +372,7 @@ pie title Minerals in my tap water {key: "Note", creator: opts => Docs.Create.TextDocument("", opts), opts: { _width: 200, _layout_autoHeight: true }}, {key: "Flashcard", creator: opts => Docs.Create.FlashcardDocument("", undefined, undefined, opts),opts: { _width: 300, _height: 300}}, {key: "Image", creator: opts => Docs.Create.ImageDocument("", opts), opts: { _width: 400, _height:400 }}, - {key: "Equation", creator: opts => Docs.Create.EquationDocument("",opts), opts: { _width: 300, _height: 35, }}, + {key: "Equation", creator: opts => Docs.Create.EquationDocument("",opts), opts: { _width: 35, _height: 35, }}, {key: "Noteboard", creator: opts => Docs.Create.NoteTakingDocument([], opts), opts: { _width: 250, _height: 200, _layout_fitWidth: true}}, {key: "Simulation", creator: opts => Docs.Create.SimulationDocument(opts), opts: { _width: 300, _height: 300, }}, {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts), opts: { _width: 150, _height: 100, _layout_fitWidth: true }}, @@ -731,7 +731,7 @@ pie title Minerals in my tap water static textTools():Button[] { return [ { title: "Font", toolTip: "Font", width: 100, btnType: ButtonType.DropdownList, toolType:"font", ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'}, - btnList: new List(["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]) }, + btnList: new List(["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text", "Math"]) }, { title: " Size", toolTip: "Font size (%size)", btnType: ButtonType.NumberDropdownButton, toolType:"fontSize", ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'}, numBtnMax: 200, numBtnMin: 9 }, { title: "Color", toolTip: "Font color (%color)", btnType: ButtonType.ColorButton, icon: "font", toolType:"fontColor",ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'} }, { title: "Highlight",toolTip: "Font highlight", btnType: ButtonType.ColorButton, icon: "highlighter", toolType:"highlight",ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'} }, diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 492c2bda1..07e362672 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -506,7 +506,7 @@ export class DocumentDecorations extends ObservableReactComponent { - const [w, h] = [this.Bounds.r - this.Bounds.x, this.Bounds.b - this.Bounds.y]; + const [w, h] = [Math.max(1, this.Bounds.r - this.Bounds.x), Math.max(1, this.Bounds.b - this.Bounds.y)]; const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y]; switch (dragHdl) { case 'topLeft': return { scale: { x: 1 - moveX / w, y: 1 -moveY / h }, refPt: [this.Bounds.r, this.Bounds.b] }; @@ -566,8 +566,8 @@ export class DocumentDecorations extends ObservableReactComponent() { @@ -56,6 +57,8 @@ export class EquationBox extends ViewBoxBaseComponent() { { fireImmediately: true } ); } + @computed get fontSize() { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize) as string; } // prettier-ignore + @computed get fontColor() { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontColor) as string; } // prettier-ignore @action keyPressed = (e: KeyboardEvent) => { @@ -68,6 +71,9 @@ export class EquationBox extends ViewBoxBaseComponent() { _height: 25, x: NumCast(this.layoutDoc.x), y: NumCast(this.layoutDoc.y) + _height + 10, + backgroundColor: StrCast(this.Document.backgroundColor), + color: StrCast(this.Document.color), + fontSize: this.fontSize, }); Doc.SetSelectOnLoad(nextEq); this._props.addDocument?.(nextEq); @@ -118,10 +124,12 @@ export class EquationBox extends ViewBoxBaseComponent() { className="equationBox-cont" onPointerDown={e => !e.ctrlKey && e.stopPropagation()} style={{ + minWidth: `${100 / scale}%`, transform: `scale(${scale})`, height: `${100 / scale}%`, pointerEvents: !this._props.isSelected() ? 'none' : undefined, - fontSize: StrCast(this.Document._text_fontSize), + fontSize: this.fontSize, + color: this.fontColor, }} onKeyDown={e => e.stopPropagation()}> @@ -132,5 +140,5 @@ export class EquationBox extends ViewBoxBaseComponent() { Docs.Prototypes.TemplateMap.set(DocumentType.EQUATION, { layout: { view: EquationBox, dataField: 'text' }, - options: { acl: '', fontSize: '14px', _layout_reflowHorizontal: true, _layout_reflowVertical: true, _layout_nativeDimEditable: true, layout_hideDecorationTitle: true, systemIcon: 'BsCalculatorFill' }, // systemIcon: 'BsSuperscript' + BsSubscript + options: { acl: '', fontSize: '14px', _nativeWidth: 35, _nativeHeight: 35, _layout_reflowHorizontal: false, _layout_reflowVertical: false, _layout_nativeDimEditable: false, layout_hideDecorationTitle: true, systemIcon: 'BsCalculatorFill' }, // systemIcon: 'BsSuperscript' + BsSubscript }); -- cgit v1.2.3-70-g09d2 From d57fdc07fb88282903157b414c4a0886ddaf8bc6 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 12 Nov 2024 21:06:42 -0500 Subject: updated equationBox to support margins/padding like text. fixed initial undo of newly typed equation. --- src/client/documents/DocUtils.ts | 8 +++++-- src/client/documents/Documents.ts | 6 +++-- src/client/util/CurrentUserUtils.ts | 2 +- src/client/views/PropertiesView.tsx | 2 +- src/client/views/nodes/EquationBox.tsx | 42 ++++++++++++++++++++++++++-------- 5 files changed, 44 insertions(+), 16 deletions(-) (limited to 'src/client/documents') diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts index c466344b3..d11a3e235 100644 --- a/src/client/documents/DocUtils.ts +++ b/src/client/documents/DocUtils.ts @@ -696,8 +696,12 @@ export namespace DocUtils { y, title, text_fontColor: StrCast(Doc.UserDoc().fontColor), - _width: 35, - _height: 35, + _width: 50, + _height: 50, + _yMargin: 10, + _xMargin: 10, + nativeWidth: 40, + nativeHeight: 40, }) : Docs.Create.TextDocument('', { annotationOn, diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index d898fe0c5..6828a1929 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -197,8 +197,10 @@ export class DocumentOptions { data_nativeWidth?: NUMt = new NumInfo('native width of data field contents (e.g., the pixel width of an image)', false); data_nativeHeight?: NUMt = new NumInfo('native height of data field contents (e.g., the pixel height of an image)', false); linearBtnWidth?: NUMt = new NumInfo('unexpanded width of a linear menu button (button "width" changes when it expands)', false); - _nativeWidth?: NUMt = new NumInfo('native width of document contents (e.g., the pixel width of an image)', false); - _nativeHeight?: NUMt = new NumInfo('native height of document contents (e.g., the pixel height of an image)', false); + _nativeWidth?: NUMt = new NumInfo('Deprecated: use nativeWidth. native width of document contents (e.g., the pixel width of an image)', false); + _nativeHeight?: NUMt = new NumInfo('Deprecated: use nativeHeight. native height of document contents (e.g., the pixel height of an image)', false); + nativeWidth?: NUMt = new NumInfo('native width of document contents (e.g., the pixel width of an image)', false); + nativeHeight?: NUMt = new NumInfo('native height of document contents (e.g., the pixel height of an image)', false); acl?: STRt = new StrInfo('unused except as a display category in KeyValueBox'); acl_Guest?: STRt = new StrInfo("permissions granted to users logged in as 'guest' (either view, or private)"); // public permissions diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index c01f57a59..49a4a981a 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -372,7 +372,7 @@ pie title Minerals in my tap water {key: "Note", creator: opts => Docs.Create.TextDocument("", opts), opts: { _width: 200, _layout_autoHeight: true }}, {key: "Flashcard", creator: opts => Docs.Create.FlashcardDocument("", undefined, undefined, opts),opts: { _width: 300, _height: 300}}, {key: "Image", creator: opts => Docs.Create.ImageDocument("", opts), opts: { _width: 400, _height:400 }}, - {key: "Equation", creator: opts => Docs.Create.EquationDocument("",opts), opts: { _width: 35, _height: 35, }}, + {key: "Equation", creator: opts => Docs.Create.EquationDocument("",opts), opts: { _width: 50, _height: 50, nativeWidth: 40, nativeHeight: 40, _xMargin: 10, _yMargin: 10}}, {key: "Noteboard", creator: opts => Docs.Create.NoteTakingDocument([], opts), opts: { _width: 250, _height: 200, _layout_fitWidth: true}}, {key: "Simulation", creator: opts => Docs.Create.SimulationDocument(opts), opts: { _width: 300, _height: 300, }}, {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts), opts: { _width: 150, _height: 100, _layout_fitWidth: true }}, diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 2bd8bc98a..1158d93e9 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -141,7 +141,7 @@ export class PropertiesView extends ObservableReactComponent() { @@ -68,7 +69,7 @@ export class EquationBox extends ViewBoxBaseComponent() { const nextEq = Docs.Create.EquationDocument(e.shiftKey ? StrCast(this.dataDoc.text) : 'x', { title: '# math', _width, - _height: 25, + _height: 20, x: NumCast(this.layoutDoc.x), y: NumCast(this.layoutDoc.y) + _height + 10, backgroundColor: StrCast(this.Document.backgroundColor), @@ -102,27 +103,32 @@ export class EquationBox extends ViewBoxBaseComponent() { updateSize = () => { const style = this._ref.current?.element.current && getComputedStyle(this._ref.current.element.current); if (style?.width.endsWith('px') && style?.height.endsWith('px')) { + const mathWidth = Math.max(35, NumCast(this.layoutDoc.xMargin) * 2 + Number(style.width.replace('px', ''))); + const mathHeight = Math.max(20, NumCast(this.layoutDoc.yMargin) * 2 + Number(style.height.replace('px', ''))); if (this.layoutDoc._nativeWidth) { // if equation has been scaled then editing the expression must also edit the native dimensions to keep the aspect ratio const prevNwidth = NumCast(this.layoutDoc._nativeWidth); - const newNwidth = (this.layoutDoc._nativeWidth = Math.max(35, Number(style.width.replace('px', '')))); - const newNheight = (this.layoutDoc._nativeHeight = Math.max(25, Number(style.height.replace('px', '')))); - this.layoutDoc._width = (NumCast(this.layoutDoc._width) * NumCast(this.layoutDoc._nativeWidth)) / prevNwidth; - this.layoutDoc._height = (NumCast(this.layoutDoc._width) * newNheight) / newNwidth; + this.layoutDoc._nativeWidth = mathWidth; + this.layoutDoc._nativeHeight = mathHeight; + this.layoutDoc._width = mathWidth * (NumCast(this.layoutDoc._width) / prevNwidth); + this.layoutDoc._height = mathHeight * (NumCast(this.layoutDoc._width) / mathWidth); } else { - this.layoutDoc._width = Math.max(35, Number(style.width.replace('px', ''))); - this.layoutDoc._height = Math.max(25, Number(style.height.replace('px', ''))); + this.layoutDoc._width = mathWidth; + this.layoutDoc._height = mathHeight; } } }; render() { TraceMobx(); - const scale = (this._props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1); + const scale = this._props.NativeDimScaling?.() || 1; return (
this.updateSize()} className="equationBox-cont" onPointerDown={e => !e.ctrlKey && e.stopPropagation()} + onBlur={() => { + FormattedTextBox.LiveTextUndo?.end(); + }} style={{ minWidth: `${100 / scale}%`, transform: `scale(${scale})`, @@ -130,6 +136,10 @@ export class EquationBox extends ViewBoxBaseComponent() { pointerEvents: !this._props.isSelected() ? 'none' : undefined, fontSize: this.fontSize, color: this.fontColor, + paddingLeft: NumCast(this.layoutDoc.xMargin), + paddingRight: NumCast(this.layoutDoc.xMargin), + paddingTop: NumCast(this.layoutDoc.yMargin), + paddingBottom: NumCast(this.layoutDoc.yMargin), }} onKeyDown={e => e.stopPropagation()}> @@ -140,5 +150,17 @@ export class EquationBox extends ViewBoxBaseComponent() { Docs.Prototypes.TemplateMap.set(DocumentType.EQUATION, { layout: { view: EquationBox, dataField: 'text' }, - options: { acl: '', fontSize: '14px', _nativeWidth: 35, _nativeHeight: 35, _layout_reflowHorizontal: false, _layout_reflowVertical: false, _layout_nativeDimEditable: false, layout_hideDecorationTitle: true, systemIcon: 'BsCalculatorFill' }, // systemIcon: 'BsSuperscript' + BsSubscript + options: { + acl: '', + _xMargin: 10, + _yMargin: 10, + fontSize: '14px', + _nativeWidth: 40, + _nativeHeight: 40, + _layout_reflowHorizontal: false, + _layout_reflowVertical: false, + _layout_nativeDimEditable: false, + layout_hideDecorationTitle: true, + systemIcon: 'BsCalculatorFill', + }, // systemIcon: 'BsSuperscript' + BsSubscript }); -- cgit v1.2.3-70-g09d2