From 9c91debc77000470642d5ddd28b24f3b02d35eb6 Mon Sep 17 00:00:00 2001 From: geireann Date: Wed, 24 Jul 2024 17:13:46 -0400 Subject: switched to using textfit for label fitting text. --- package-lock.json | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'package-lock.json') diff --git a/package-lock.json b/package-lock.json index f11d8a462..5a41a8637 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,6 +49,7 @@ "@types/pdf-parse": "^1.1.4", "@types/reveal": "^4.2.0", "@types/supercluster": "^7.1.3", + "@types/textfit": "^2.4.4", "@types/web": "^0.0.151", "@types/webpack-hot-middleware": "^2.25.9", "@typescript-eslint/parser": "^7.8.0", @@ -220,6 +221,7 @@ "styled-components": "^6.1.1", "supercluster": "^8.0.1", "textarea-caret": "^3.1.0", + "textfit": "^2.4.0", "tough-cookie": "^4.1.3", "tslint": "^6.1.3", "tslint-loader": "^3.5.4", @@ -9411,7 +9413,6 @@ "version": "3.5.30", "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.30.tgz", "integrity": "sha512-nbWKkkyb919DOUxjmRVk8vwtDb0/k8FKncmUKFi+NY+QXqWltooxTrswvz4LspQwxvLdvzBN1TImr6cw3aQx2A==", - "dev": true, "dependencies": { "@types/sizzle": "*" } @@ -9815,8 +9816,7 @@ "node_modules/@types/sizzle": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.8.tgz", - "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==", - "dev": true + "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==" }, "node_modules/@types/sockjs": { "version": "0.3.36", @@ -9852,6 +9852,14 @@ "@types/geojson": "*" } }, + "node_modules/@types/textfit": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/@types/textfit/-/textfit-2.4.4.tgz", + "integrity": "sha512-AYlNcJ5j/WspQfbHIhoF0Wo63F5+REnX/VPFSH5unUUuwRcr6IoXxZki3vYhG4DRVUQe51AsFYyRxml5u+qaAg==", + "dependencies": { + "@types/jquery": "*" + } + }, "node_modules/@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", @@ -39507,6 +39515,11 @@ "resolved": "https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.1.0.tgz", "integrity": "sha512-cXAvzO9pP5CGa6NKx0WYHl+8CHKZs8byMkt3PCJBCmq2a34YA9pO1NrQET5pzeqnBjBdToF5No4rrmkDUgQC2Q==" }, + "node_modules/textfit": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/textfit/-/textfit-2.4.0.tgz", + "integrity": "sha512-/x4aoY5+/tJmu+iwpBH1yw75TFp86M6X15SvaaY/Eep7YySQYtqdOifEtfvVyMwzl7SZ+G4RQw00FD9g5R6i1Q==" + }, "node_modules/thingies": { "version": "1.21.0", "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz", -- cgit v1.2.3-70-g09d2 From ac06e2affd615b926e240a2b15279d3c60360bd4 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 25 Jul 2024 10:52:55 -0400 Subject: cleaned up labelBox --- package-lock.json | 26 +++++----- .../collections/CollectionStackedTimeline.tsx | 2 +- src/client/views/nodes/LabelBox.tsx | 58 ++++++++++------------ 3 files changed, 40 insertions(+), 46 deletions(-) (limited to 'package-lock.json') diff --git a/package-lock.json b/package-lock.json index 5a41a8637..f928cd291 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13537,19 +13537,6 @@ "node": "^12.13.0 || ^14.15.0 || >=16.0.0" } }, - "node_modules/browndash-components/node_modules/npm/node_modules/node-gyp/node_modules/readable-stream": { - "version": "3.6.2", - "inBundle": true, - "license": "MIT", - "dependencies": { - "inherits": "^2.0.3", - "string_decoder": "^1.1.1", - "util-deprecate": "^1.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/browndash-components/node_modules/npm/node_modules/node-gyp/node_modules/signal-exit": { "version": "3.0.7", "inBundle": true, @@ -13995,6 +13982,19 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, + "node_modules/browndash-components/node_modules/npm/node_modules/readable-stream": { + "version": "3.6.2", + "inBundle": true, + "license": "MIT", + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/browndash-components/node_modules/npm/node_modules/retry": { "version": "0.12.0", "inBundle": true, diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index fac885300..b03f0cffa 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -850,7 +850,7 @@ class StackedTimelineAnchor extends ObservableReactComponent() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(LabelBox, fieldKey); } - public static LayoutStringWithTitle(fieldStr: string, label?: string) { - return !label ? LabelBox.LayoutString(fieldStr) : ``; // e.g., "" - } private dropDisposer?: DragManager.DragDropDisposer; private _timeout: NodeJS.Timeout | undefined; - _divRef: HTMLDivElement|null = null; + _divRef: HTMLDivElement | null = null; constructor(props: FieldViewProps) { super(props); @@ -53,8 +50,7 @@ export class LabelBox extends ViewBoxBaseComponent() { this._timeout && clearTimeout(this._timeout); } - specificContextMenu = (): void => { - }; + specificContextMenu = (): void => {}; drop = (/* e: Event, de: DragManager.DropEvent */) => { return false; @@ -73,15 +69,16 @@ export class LabelBox extends ViewBoxBaseComponent() { return anchor; }; - fitTextToBox = (r: HTMLElement | null | undefined): { - minFontSize: number, - maxFontSize: number, - multiLine: boolean, - alignHoriz: boolean, - alignVert: boolean, - detectMultiLine: boolean, - } => - { + fitTextToBox = ( + r: HTMLElement | null | undefined + ): { + minFontSize: number; + maxFontSize: number; + multiLine: boolean; + alignHoriz: boolean; + alignVert: boolean; + detectMultiLine: boolean; + } => { this._timeout && clearTimeout(this._timeout); const textfitParams = { minFontSize: NumCast(this.layoutDoc._label_minFontSize, 1), @@ -105,14 +102,9 @@ export class LabelBox extends ViewBoxBaseComponent() { render() { trace(); const boxParams = this.fitTextToBox(undefined); // this causes mobx to trigger re-render when data changes - const label = this.Title.startsWith("#") ? null : this.Title; + const label = this.Title.startsWith('#') ? null : this.Title; return ( -
+
() { height: this._props.PanelHeight(), whiteSpace: 'multiLine' in boxParams && boxParams.multiLine ? 'pre-wrap' : 'pre', }}> -
{ e.stopPropagation(); })} onKeyUp={action(e => { e.stopPropagation(); if (e.key === 'Enter') { - this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? ""; + this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? ''; setTimeout(() => this._props.select(false)); } })} onBlur={() => { - this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? ""; + this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? ''; }} - contentEditable={this._props.onClickScript?.() ? false: true} - ref={r => {this._divRef = r; + contentEditable={this._props.onClickScript?.() ? false : true} + ref={r => { + this._divRef = r; this.fitTextToBox(r); if (this._props.isSelected() && this._divRef) { const range = document.createRange(); range.setStart(this._divRef, this._divRef.childNodes.length); - range.setEnd(this._divRef, this._divRef.childNodes.length) + range.setEnd(this._divRef, this._divRef.childNodes.length); const sel = window.getSelection(); sel?.removeAllRanges(); sel?.addRange(range); -- cgit v1.2.3-70-g09d2