From 0c33bc8033c9877abbe6e4074a687559bc4948d0 Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Tue, 23 Apr 2024 15:16:06 -0400 Subject: erase multiple segments bug --- src/client/views/global/globalScripts.ts | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 2a5732708..279d3c24c 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -12,7 +12,7 @@ import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SelectionManager } from '../../util/SelectionManager'; import { UndoManager, undoable } from '../../util/UndoManager'; import { GestureOverlay } from '../GestureOverlay'; -import { ActiveFillColor, ActiveInkColor, ActiveInkHideTextLabels, ActiveInkWidth, ActiveIsInkMask, InkingStroke, SetActiveFillColor, SetActiveInkColor, SetActiveInkHideTextLabels, SetActiveInkWidth, SetActiveIsInkMask } from '../InkingStroke'; +import { ActiveFillColor, ActiveInkColor, ActiveInkHideTextLabels, ActiveInkWidth, ActiveIsInkMask, ActiveEraserWidth, InkingStroke, SetActiveFillColor, SetActiveInkColor, SetActiveInkHideTextLabels, SetActiveInkWidth, SetActiveIsInkMask, SetEraserWidth } from '../InkingStroke'; import { CollectionFreeFormView } from '../collections/collectionFreeForm'; // import { InkTranscription } from '../InkTranscription'; import { DocData } from '../../../fields/DocSymbols'; @@ -338,11 +338,19 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode'); +// ScriptingGlobals.add(function setEraserProperty(option: 'eraseWidth', value: any, checkResult?: boolean) { +// setInk: (doc: Doc) => (doc[DocData].eraserWidth = NumCast(value)) +// InkingStroke.setEraserRadius(NumCast(value)); +// }) + // toggle: Set overlay status of selected document -ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor', value: any, checkResult?: boolean) { +ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', value: any, checkResult?: boolean) { const selected = SelectionManager.Docs.lastElement() ?? Doc.UserDoc(); + if (option === 'eraserWidth') { + console.log('eraserWidth', value) + } // prettier-ignore - const map: Map<'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ + const map: Map<'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ ['inkMask', { checkResult: () => ((selected?._layout_isSvg ? BoolCast(selected[DocData].stroke_isInkMask) : ActiveIsInkMask())), setInk: (doc: Doc) => (doc[DocData].stroke_isInkMask = !doc.stroke_isInkMask), @@ -368,6 +376,11 @@ ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fil setInk: (doc: Doc) => (doc[DocData].color = String(value)), setMode: () => { SetActiveInkColor(StrCast(value)); selected?.type === DocumentType.INK && setActiveTool(GestureOverlay.Instance.InkShape ?? InkTool.Pen, true, false);}, }], + [ 'eraserWidth', { + checkResult: () => (selected?._layout_isSvg ? NumCast(selected[DocData].eraser_width) : ActiveEraserWidth()), + setInk: (doc: Doc) => (doc[DocData].eraserWidth = NumCast(value)), + setMode: () => { SetEraserWidth(value.toString());}, + }] ]); if (checkResult) { -- cgit v1.2.3-70-g09d2 From af67724dc3a1390cd0c2aded4aeda69f948a0f66 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 26 Apr 2024 01:32:57 -0400 Subject: fixed eraser buttons so that you can switch to the previous eraser, then click again to choose a different eraser --- package-lock.json | 11 +++++----- package.json | 2 +- src/client/util/CurrentUserUtils.ts | 10 ++++----- src/client/views/GlobalKeyHandler.ts | 2 +- src/client/views/global/globalScripts.ts | 25 ++++++++++++++++++++-- src/client/views/nodes/FontIconBox/FontIconBox.tsx | 17 +++++++++------ src/fields/InkField.ts | 1 - 7 files changed, 45 insertions(+), 23 deletions(-) (limited to 'src/client/views/global') diff --git a/package-lock.json b/package-lock.json index eda529cad..cf4317fb2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,7 +63,7 @@ "body-parser": "^1.20.2", "bootstrap": "^5.3.2", "brotli": "^1.3.3", - "browndash-components": "^0.1.36", + "browndash-components": "^0.1.44", "browser-assert": "^1.2.1", "bson": "^6.2.0", "canvas": "^2.11.2", @@ -10868,9 +10868,9 @@ } }, "node_modules/browndash-components": { - "version": "0.1.36", - "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.1.36.tgz", - "integrity": "sha512-++Xxn67r9ETz7pQr9dE09dMgPJ6rltEzwYWifpI98AQct4RmEBfiPp5eLG94+143XllxZy++KBf9YJ8AYpTEkQ==", + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.1.44.tgz", + "integrity": "sha512-+QYEHDqd3iauijdKiVA0jXGFkOMEKn+qb7Y2iG+VK0xAh8Fho3rAUoSMv6snfg+kMc1oMGhACzJa5XauTtvguQ==", "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", @@ -10880,8 +10880,7 @@ "npm": "^9.8.1", "react-color": "^2.19.3", "react-icons": "^4.3.1", - "react-measure": "^2.5.2", - "styled-components": "^6.0.3" + "react-measure": "^2.5.2" } }, "node_modules/browndash-components/node_modules/npm": { diff --git a/package.json b/package.json index a29f39444..56fdb2920 100644 --- a/package.json +++ b/package.json @@ -146,7 +146,7 @@ "body-parser": "^1.20.2", "bootstrap": "^5.3.2", "brotli": "^1.3.3", - "browndash-components": "^0.1.36", + "browndash-components": "^0.1.44", "browser-assert": "^1.2.1", "bson": "^6.2.0", "canvas": "^2.11.2", diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 59fc30635..ed81862c2 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -752,13 +752,11 @@ pie title Minerals in my tap water return [ { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen-nib", toolType: "pen", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }}, { title: "Write", toolTip: "Write (Ctrl+Shift+P)", btnType: ButtonType.ToggleButton, icon: "pen", toolType: "write", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, - // { title: "Eraser", toolTip: "Eraser (Ctrl+E)", width: 50, btnType: ButtonType.DropdownList, icon: "eraser", toolType: "eraser", ignoreClick: true, scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }, - // btnList: new List(["Stroke Erase", "Segment Erase", "Radius Erase"]) }, - { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.MultiToggleButton, toolType:"eraser", scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}, + { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.MultiToggleButton, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}, funcs: {toolType:"activeEraserTool()"}, subMenu: [ - { title: "Stroke", toolTip: "Stroke Erase", btnType: ButtonType.ToggleButton, icon: "eraser", toolType:"strokeeraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, - { title: "Segment", toolTip: "Segment Erase", btnType: ButtonType.ToggleButton, icon: "xmarks-lines", toolType:"segmenteraser",ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, - { title: "Radius", toolTip: "Radius Erase", btnType: ButtonType.ToggleButton, icon: "circle-xmark", toolType:"radiuseraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, + { title: "Stroke", toolTip: "Stroke Erase", btnType: ButtonType.ToggleButton, icon: "eraser", toolType:InkTool.StrokeEraser, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, + { title: "Segment", toolTip: "Segment Erase", btnType: ButtonType.ToggleButton, icon: "xmarks-lines",toolType:InkTool.SegmentEraser,ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, + { title: "Radius", toolTip: "Radius Erase", btnType: ButtonType.ToggleButton, icon: "circle-xmark",toolType:InkTool.RadiusEraser, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, ]}, { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle", toolType:GestureUtils.Gestures.Circle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square", toolType:GestureUtils.Gestures.Rectangle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 2f64ea28c..3349fb5dc 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -273,7 +273,7 @@ export class KeyManager { } break; case 'e': - Doc.ActiveTool = Doc.ActiveTool === InkTool.Eraser ? InkTool.None : InkTool.Eraser; + Doc.ActiveTool = [InkTool.StrokeEraser, InkTool.SegmentEraser, InkTool.RadiusEraser].includes(Doc.ActiveTool) ? InkTool.None : InkTool.StrokeEraser; break; case 'p': Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen; diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 279d3c24c..d565a530b 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -12,7 +12,21 @@ import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SelectionManager } from '../../util/SelectionManager'; import { UndoManager, undoable } from '../../util/UndoManager'; import { GestureOverlay } from '../GestureOverlay'; -import { ActiveFillColor, ActiveInkColor, ActiveInkHideTextLabels, ActiveInkWidth, ActiveIsInkMask, ActiveEraserWidth, InkingStroke, SetActiveFillColor, SetActiveInkColor, SetActiveInkHideTextLabels, SetActiveInkWidth, SetActiveIsInkMask, SetEraserWidth } from '../InkingStroke'; +import { + ActiveFillColor, + ActiveInkColor, + ActiveInkHideTextLabels, + ActiveInkWidth, + ActiveIsInkMask, + ActiveEraserWidth, + InkingStroke, + SetActiveFillColor, + SetActiveInkColor, + SetActiveInkHideTextLabels, + SetActiveInkWidth, + SetActiveIsInkMask, + SetEraserWidth, +} from '../InkingStroke'; import { CollectionFreeFormView } from '../collections/collectionFreeForm'; // import { InkTranscription } from '../InkTranscription'; import { DocData } from '../../../fields/DocSymbols'; @@ -323,6 +337,9 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, GestureOverlay.Instance.InkShape = tool as GestureUtils.Gestures; } } else if (tool) { + if ([InkTool.StrokeEraser, InkTool.RadiusEraser, InkTool.SegmentEraser].includes(tool as any)) { + Doc.UserDoc().activeEraserTool = tool; + } // pen or eraser if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) { Doc.ActiveTool = InkTool.None; @@ -338,6 +355,10 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode'); +ScriptingGlobals.add(function activeEraserTool() { + return StrCast(Doc.UserDoc().activeEraserTool, InkTool.StrokeEraser); +}, 'returns the current eraser tool'); + // ScriptingGlobals.add(function setEraserProperty(option: 'eraseWidth', value: any, checkResult?: boolean) { // setInk: (doc: Doc) => (doc[DocData].eraserWidth = NumCast(value)) // InkingStroke.setEraserRadius(NumCast(value)); @@ -347,7 +368,7 @@ ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode'); ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', value: any, checkResult?: boolean) { const selected = SelectionManager.Docs.lastElement() ?? Doc.UserDoc(); if (option === 'eraserWidth') { - console.log('eraserWidth', value) + console.log('eraserWidth', value); } // prettier-ignore const map: Map<'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index 57ae92359..754c6a68c 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -6,7 +6,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc'; import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils'; +import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils'; import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes'; import { SelectionManager } from '../../../util/SelectionManager'; import { SettingsManager } from '../../../util/SettingsManager'; @@ -20,6 +20,7 @@ import { OpenWhere } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; import './FontIconBox.scss'; import TrailsIcon from './TrailsIcon'; +import { InkTool } from '../../../../fields/InkField'; export enum ButtonType { TextButton = 'textBtn', @@ -274,24 +275,28 @@ export class FontIconBox extends ViewBoxBaseComponent() { // Determine the type of toggle button const tooltip: string = StrCast(this.Document.toolTip); - const script = ScriptCast(this.Document.onClick); - const toggleStatus = script ? script.script.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result : false; + const script = ScriptCast(this.Document.onClick).script; + const toggleStatus = script?.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result; // Colors const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); const items = DocListCast(this.dataDoc.data); + const multiDoc = this.Document; return ( script && !toggleStatus && setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => script.run({ this: multiDoc, value: undefined, _readOnly_: false }))} + isToggle={script ? true : false} + toggleStatus={toggleStatus} + //background={SettingsManager.userBackgroundColor} label={this.label} items={DocListCast(this.dataDoc.data).map(item => ({ icon: , tooltip: StrCast(item.toolTip), val: StrCast(item.toolType), }))} - selectedVal={StrCast(items.find(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, self: itemDoc, value: undefined, _readOnly_: true }).result)?.toolType)} + selectedVal={StrCast(items.find(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, self: itemDoc, value: undefined, _readOnly_: true }).result)?.toolType ?? StrCast(multiDoc.toolType))} setSelectedVal={(val: string | number) => { const itemDoc = items.find(item => item.toolType === val); itemDoc && ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, self: itemDoc, value: val, _readOnly_: false }); @@ -322,7 +327,7 @@ export class FontIconBox extends ViewBoxBaseComponent() { toggleStatus={toggleStatus} text={buttonText} color={color} - //background={SettingsManager.userBackgroundColor} + // background={SettingsManager.userBackgroundColor} icon={this.Icon(color)!} label={this.label} onPointerDown={e => diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts index 9c8c5df2c..1c01a5d7c 100644 --- a/src/fields/InkField.ts +++ b/src/fields/InkField.ts @@ -10,7 +10,6 @@ export enum InkTool { None = 'none', Pen = 'pen', Highlighter = 'highlighter', - Eraser = 'eraser', StrokeEraser = 'strokeeraser', SegmentEraser = 'segmenteraser', RadiusEraser = 'radiuseraser', -- cgit v1.2.3-70-g09d2 From 82f8c4bac5c9d8a6aef4b42936bd1839fcb8939e Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Sat, 27 Apr 2024 17:53:25 -0400 Subject: pull --- src/client/util/CurrentUserUtils.ts | 5 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 95 +++++++++++++++++----- src/client/views/global/globalScripts.ts | 5 +- 3 files changed, 80 insertions(+), 25 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 59fc30635..d5b571141 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -752,21 +752,20 @@ pie title Minerals in my tap water return [ { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen-nib", toolType: "pen", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }}, { title: "Write", toolTip: "Write (Ctrl+Shift+P)", btnType: ButtonType.ToggleButton, icon: "pen", toolType: "write", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, - // { title: "Eraser", toolTip: "Eraser (Ctrl+E)", width: 50, btnType: ButtonType.DropdownList, icon: "eraser", toolType: "eraser", ignoreClick: true, scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }, - // btnList: new List(["Stroke Erase", "Segment Erase", "Radius Erase"]) }, { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.MultiToggleButton, toolType:"eraser", scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}, subMenu: [ { title: "Stroke", toolTip: "Stroke Erase", btnType: ButtonType.ToggleButton, icon: "eraser", toolType:"strokeeraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, { title: "Segment", toolTip: "Segment Erase", btnType: ButtonType.ToggleButton, icon: "xmarks-lines", toolType:"segmenteraser",ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, { title: "Radius", toolTip: "Radius Erase", btnType: ButtonType.ToggleButton, icon: "circle-xmark", toolType:"radiuseraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, ]}, + // { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.ToggleButton, icon: "eraser", toolType:"eraser", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, + { title: "Eraser Width", toolTip: "Eraser Width", btnType: ButtonType.NumberSliderButton, toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1}, { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle", toolType:GestureUtils.Gestures.Circle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square", toolType:GestureUtils.Gestures.Rectangle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, { title: "Line", toolTip: "Line (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "minus", toolType:GestureUtils.Gestures.Line, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, { title: "Mask", toolTip: "Mask", btnType: ButtonType.ToggleButton, icon: "user-circle",toolType: "inkMask", scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"IsNoviceMode()" } }, { title: "Labels", toolTip: "Lab els", btnType: ButtonType.ToggleButton, icon: "text-width", toolType: "labels", scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, }, { title: "Width", toolTip: "Stroke width", btnType: ButtonType.NumberSliderButton, toolType: "strokeWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1}, - { title: "Eraser Width", toolTip: "Eraser Width", btnType: ButtonType.NumberSliderButton, toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1}, { title: "Ink", toolTip: "Stroke color", btnType: ButtonType.ColorButton, icon: "pen", toolType: "strokeColor", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'} }, ]; } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 9df9c5492..eedee0b18 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -787,6 +787,55 @@ export class CollectionFreeFormView extends CollectionSubView { + const radius = ActiveEraserWidth() / 2 + 3; // reduce values to avoid extreme radii + const c = 0.551915024494; // circle tangent length to side ratio + const movement = { x: endInkCoordsIn.X - startInkCoordsIn.X, y: endInkCoordsIn.Y - startInkCoordsIn.Y }; + const moveLen = Math.sqrt(movement.x ** 2 + movement.y ** 2); + const direction = { x: (movement.x / moveLen) * radius, y: (movement.y / moveLen) * radius }; + const normal = { x: -direction.y, y: direction.x }; // prettier-ignore + + const startCoords = { X: startInkCoordsIn.X - direction.x, Y: startInkCoordsIn.Y - direction.y }; + const endCoords = { X: endInkCoordsIn.X + direction.x, Y: endInkCoordsIn.Y + direction.y }; + return new InkField([ + // left bot arc + { X: startCoords.X, Y: startCoords.Y }, // prettier-ignore + { X: startCoords.X + normal.x * c, Y: startCoords.Y + normal.y * c }, // prettier-ignore + { X: startCoords.X + direction.x + normal.x - direction.x * c, Y: startCoords.Y + direction.y + normal.y - direction.y * c }, + { X: startCoords.X + direction.x + normal.x, Y: startCoords.Y + direction.y + normal.y }, // prettier-ignore + + // bot + { X: startCoords.X + direction.x + normal.x, Y: startCoords.Y + direction.y + normal.y }, // prettier-ignore + { X: startCoords.X + direction.x + normal.x + direction.x * c, Y: startCoords.Y + direction.y + normal.y + direction.y * c }, + { X: endCoords.X - direction.x + normal.x - direction.x * c, Y: endCoords.Y - direction.y + normal.y - direction.y * c }, // prettier-ignore + { X: endCoords.X - direction.x + normal.x, Y: endCoords.Y - direction.y + normal.y }, // prettier-ignore + + // right bot arc + { X: endCoords.X - direction.x + normal.x, Y: endCoords.Y - direction.y + normal.y }, // prettier-ignore + { X: endCoords.X - direction.x + normal.x + direction.x * c, Y: endCoords.Y - direction.y + normal.y + direction.y * c}, // prettier-ignore + { X: endCoords.X + normal.x * c, Y: endCoords.Y + normal.y * c }, // prettier-ignore + { X: endCoords.X, Y: endCoords.Y }, // prettier-ignore + + // right top arc + { X: endCoords.X, Y: endCoords.Y }, // prettier-ignore + { X: endCoords.X - normal.x * c, Y: endCoords.Y - normal.y * c }, // prettier-ignore + { X: endCoords.X - direction.x - normal.x + direction.x * c, Y: endCoords.Y - direction.y - normal.y + direction.y * c}, // prettier-ignore + { X: endCoords.X - direction.x - normal.x, Y: endCoords.Y - direction.y - normal.y }, // prettier-ignore + + // top + { X: endCoords.X - direction.x - normal.x, Y: endCoords.Y - direction.y - normal.y }, // prettier-ignore + { X: endCoords.X - direction.x - normal.x - direction.x * c, Y: endCoords.Y - direction.y - normal.y - direction.y * c}, // prettier-ignore + { X: startCoords.X + direction.x - normal.x + direction.x * c, Y: startCoords.Y + direction.y - normal.y + direction.y * c }, + { X: startCoords.X + direction.x - normal.x, Y: startCoords.Y + direction.y - normal.y }, // prettier-ignore + + // left top arc + { X: startCoords.X + direction.x - normal.x, Y: startCoords.Y + direction.y - normal.y }, // prettier-ignore + { X: startCoords.X + direction.x - normal.x - direction.x * c, Y: startCoords.Y + direction.y - normal.y - direction.y * c }, // prettier-ignore + { X: startCoords.X - normal.x * c, Y: startCoords.Y - normal.y * c }, // prettier-ignore + { X: startCoords.X, Y: startCoords.Y }, // prettier-ignore + ]); + }; + /** * Determines if the Eraser tool has intersected with an ink stroke in the current freeform collection. * @returns an array of tuples containing the intersected ink DocumentView and the t-value where it was intersected @@ -1163,30 +1212,34 @@ export class CollectionFreeFormView extends CollectionSubView): Map => { - // InkingStroke of other ink strokes - const otherInk = otherInkDocView.ComponentView as InkingStroke; - // ink Data of other ink strokes - const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] }; - for (var j = 0; j < otherInkData.length - 3; j += 4) { - const curve: Bezier = InkField.Segment(points, i); // eraser curve - const otherCurve: Bezier = InkField.Segment(otherInkData, j); // other curve - this.bintersects(otherCurve, curve).forEach((val: string | number, k: number) => { - // Converting the Bezier.js Split type to a t-value number. - const t = +val.toString().split('/')[0]; - if (k % 2 === 0) { - // here, add to the map - const inkList = strokeToTVals.get(otherInk); - if (inkList !== undefined) { - const inList = inkList.some(val => Math.abs(val - (t + Math.floor(j / 4))) <= 0.01); - if (!inList) { - inkList.push(t + Math.floor(j / 4)); + this.childDocs + .filter(doc => doc.type === DocumentType.INK && !doc.dontIntersect) + .forEach(doc => { + // InkingStroke of other ink strokes + const otherInk = otherInkDocView.ComponentView as InkingStroke; + // ink Data of other ink strokes + const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] }; + for (var j = 0; j < otherInkData.length - 3; j += 4) { + const curve: Bezier = InkField.Segment(points, i); // eraser curve + const otherCurve: Bezier = InkField.Segment(otherInkData, j); // other curve + this.bintersects(otherCurve, curve).forEach((val: string | number, k: number) => { + // Converting the Bezier.js Split type to a t-value number. + const t = +val.toString().split('/')[0]; + if (k % 2 === 0) { + // here, add to the map + const inkList = strokeToTVals.get(otherInk); + if (inkList !== undefined) { + const inList = inkList.some(val => Math.abs(val - (t + Math.floor(j / 4))) <= 0.01); + if (!inList) { + inkList.push(t + Math.floor(j / 4)); + } + } else { + strokeToTVals.set(otherInk, [t + Math.floor(j / 4)]); + } } - } else { - strokeToTVals.set(otherInk, [t + Math.floor(j / 4)]); - } + }); } }); - } return strokeToTVals; }; diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 279d3c24c..86bd684be 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -324,7 +324,10 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, } } else if (tool) { // pen or eraser - if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) { + if (Doc.ActiveTool === tool && tool === InkTool.Eraser) { + Doc.ActiveTool = InkTool.SegmentEraser; + console.log("erase click twice") + } else if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) { Doc.ActiveTool = InkTool.None; } else { Doc.ActiveTool = tool as any; -- cgit v1.2.3-70-g09d2 From 8ca77556c3a9caba66faf37fbf259762c2084c0b Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Tue, 7 May 2024 17:28:21 -0400 Subject: hm --- src/client/documents/Documents.ts | 6 +++ src/client/util/CurrentUserUtils.ts | 10 +++++ src/client/views/MainView.tsx | 2 + .../views/collections/CollectionCardDeckView.tsx | 42 ++++++++++++----- src/client/views/global/globalScripts.ts | 52 +++++++++++++++++++++- 5 files changed, 100 insertions(+), 12 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index c453fd793..b4aa1c90c 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -495,6 +495,12 @@ export class DocumentOptions { hoverBackgroundColor?: string; // background color of a label when hovered userBackgroundColor?: STRt = new StrInfo('background color associated with a Dash user (seen in header fields of shared documents)'); userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)'); + + card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); + card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); + card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); + + } export const DocOptions = new DocumentOptions(); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 15c3ddad6..cb10f0658 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -719,6 +719,14 @@ pie title Minerals in my tap water { title: "Center", icon: "align-center", toolTip: "Center Align Stack", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"center", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform ] } + static cardTools(): Button[] { + return [ + { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ClickButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ClickButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ClickButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + + ] + } static viewTools(): Button[] { return [ { title: "Snap", icon: "th", toolTip: "Show Snap Lines", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform @@ -727,6 +735,7 @@ pie title Minerals in my tap water { title: "Clusters", icon: "braille", toolTip: "Show Doc Clusters", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"clusters", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform { title: "Cards", icon: "brain", toolTip: "Flashcards", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"flashcards", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform { title: "Arrange", icon:"arrow-down-short-wide",toolTip:"Toggle Auto Arrange", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"arrange", funcs: {hidden: 'IsNoviceMode()'}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + ] } static textTools():Button[] { @@ -811,6 +820,7 @@ pie title Minerals in my tap water { title: "Doc", icon: "Doc", toolTip: "Freeform Doc tools", subMenu: CurrentUserUtils.freeTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode, true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "View", icon: "View", toolTip: "View tools", subMenu: CurrentUserUtils.viewTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Stack", icon: "View", toolTip: "Stacking tools", subMenu: CurrentUserUtils.stackTools(), expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + { title: "Card", icon: "Sort", toolTip: "Card sort", subMenu: CurrentUserUtils.cardTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Web", icon: "Web", toolTip: "Web functions", subMenu: CurrentUserUtils.webTools(), expertMode: false, toolType:DocumentType.WEB, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected { title: "Video", icon: "Video", toolTip: "Video functions", subMenu: CurrentUserUtils.videoTools(), expertMode: false, toolType:DocumentType.VID, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected { title: "Schema", icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(),expertMode: false,toolType:CollectionViewType.Schema,funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Schema is selected diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 56d28ee5d..e6ae57911 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -526,6 +526,8 @@ export class MainView extends ObservableReactComponent<{}> { fa.faZ, fa.faArrowsUpToLine, fa.faArrowsDownToLine, + fa.faPalette, + fa.faHourglassHalf ] ); } diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index d0a796218..ab7aac267 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -159,14 +159,18 @@ export class CollectionCardView extends CollectionSubView() { }; @computed get sortedDocsType() { - // This field is set to 'type' to sort documents by their type - // const typeField = 'type'; - - // Whether to sort in descending order + const desc = BoolCast(this.layoutDoc.sortDesc); + let sorted = [] + + for (let i=0; i< this.childLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list + sorted[i] = this.childLayoutPairs[i] + } + + // Copy and sort documents by type - const docs = this.childLayoutPairs.sort((docA, docB) => { + const docs = sorted.sort((docA, docB) => { const typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string const typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string @@ -177,10 +181,15 @@ export class CollectionCardView extends CollectionSubView() { if (desc) out *= -1; // Reverse the sort order if descending is true return out; }); + return { docs }; } + + + + @observable docRefs = new ObservableMap(); @computed get contentSorted() { @@ -213,9 +222,10 @@ export class CollectionCardView extends CollectionSubView() { // Map sorted documents to their rendered components return sortedDocs.map((childPair, index) => { // const childPair = { layout: doc, data: doc }; - const isSelected = this.isSelected(index); const isHovered = this.hoveredNodeIndex === index; - const inactiveIndex = this.sortedDocsType.docs.indexOf(childPair); + const inactiveIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair); + const isSelected = SelectionManager.IsSelected(childPair.layout); + @@ -234,7 +244,7 @@ export class CollectionCardView extends CollectionSubView() { height: this.panelHeight(childPair.layout)(), transform: ` rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) - translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px) + translateY(${isHovered ? this.translateHover(inactiveIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px) translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px) scale(${isSelected ? 1.25 : 1}) `, @@ -250,7 +260,7 @@ export class CollectionCardView extends CollectionSubView() { // const currentIndex = NumCast(this.layoutDoc._carousel_index); const amCards = this.inactiveDocs().length; console.log(amCards + "lol") - const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents + // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents // const myInactives = const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { @@ -328,6 +338,18 @@ export class CollectionCardView extends CollectionSubView() { return 0; } + @computed get renderCardsSort(){ + if (BoolCast(this._props.Document.card_sort_type) == true){ + return this.contentSorted + } + + else{ + return this.content + } + } + + + render() { return (
this.setHoveredNodeIndex(-1)}> - {this.contentSorted} + {this.renderCardsSort}
{/* diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 3fdc9a488..ffb1d751d 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -102,10 +102,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed'); }); -ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce', checkResult?: boolean, persist?: boolean) { +ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', checkResult?: boolean, persist?: boolean) { const selected = SelectionManager.Docs.lastElement(); // prettier-ignore - const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ + const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ ['grid', { checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, @@ -135,6 +135,19 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid checkResult: (doc:Doc) => BoolCast(Doc.UserDoc().defaultToFlashcards, false), setDoc: (doc:Doc,dv:DocumentView) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards, }], + ['time', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_time = !doc.card_sort_time, + }], + ['docType', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_type = !doc.card_sort_type, + }], + ['color', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_color = !doc.card_sort_color, + }], + ]); if (checkResult) { @@ -145,6 +158,39 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid setTimeout(() => batch.end(), 100); }); +// ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) { +// // const editorView = RichTextMenu.Instance?.TextView?.EditorView; +// const selected = SelectionManager.Docs.lastElement(); +// // prettier-ignore +// const map: Map<'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ +// ['time', { +// checkResult: (doc:Doc) => StrCast(doc?.cardSort), +// setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "time", +// }], +// ['docType', { +// checkResult: (doc:Doc) => StrCast(doc?.cardSort), +// setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "type", +// }], +// ['color', { +// checkResult: (doc:Doc) => StrCast(doc?.cardSort), +// setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "color", +// }], +// // ['custom', { +// // checkResult: () => RichTextMenu.Instance.textAlign, +// // setDoc: () => value && editorView?.state ? RichTextMenu.Instance.align(editorView, editorView.dispatch, value):(Doc.UserDoc().textAlign = value), +// // }] +// // , +// ]); + +// if (checkResult) { +// return map.get(attr)?.checkResult(selected); +// } + +// console.log('hey') +// SelectionManager.Views.map(dv => map.get(attr)?.setDoc(dv.layoutDoc, dv)); +// console.log('success') +// }); + ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highlight' | 'fontSize' | 'alignment', value: any, checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; const selected = SelectionManager.Docs.lastElement(); @@ -182,6 +228,8 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh map.get(attr)?.setDoc?.(); }); + + type attrname = 'noAutoLink' | 'dictation' | 'bold' | 'italics' | 'elide' | 'underline' | 'left' | 'center' | 'right' | 'vcent' | 'bullet' | 'decimal'; type attrfuncs = [attrname, { checkResult: () => boolean; toggle: () => any }]; -- cgit v1.2.3-70-g09d2 From 2537b9e62f38129fd2b7db528dda066d2ed97261 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Tue, 7 May 2024 17:41:31 -0400 Subject: fixing merge stuff --- src/client/views/global/globalScripts.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index ffb1d751d..9f571aa18 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -12,7 +12,7 @@ import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SelectionManager } from '../../util/SelectionManager'; import { UndoManager, undoable } from '../../util/UndoManager'; import { GestureOverlay } from '../GestureOverlay'; -import { ActiveFillColor, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, InkingStroke, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth, SetActiveIsInkMask } from '../InkingStroke'; +import { ActiveFillColor, ActiveInkColor, ActiveInkHideTextLabels, ActiveInkWidth, ActiveIsInkMask, InkingStroke, SetActiveFillColor, SetActiveInkColor, SetActiveInkHideTextLabels, SetActiveInkWidth, SetActiveIsInkMask } from '../InkingStroke'; import { CollectionFreeFormView } from '../collections/collectionFreeForm'; // import { InkTranscription } from '../InkTranscription'; import { DocData } from '../../../fields/DocSymbols'; @@ -21,6 +21,7 @@ import { DocumentView } from '../nodes/DocumentView'; import { VideoBox } from '../nodes/VideoBox'; import { WebBox } from '../nodes/WebBox'; import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; +import { ImageBox } from '../nodes/ImageBox'; ScriptingGlobals.add(function IsNoneSelected() { return SelectionManager.Views.length <= 0; @@ -58,7 +59,9 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b obj[fieldKey] = color; CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.Document, obj); } else { - dv.Document[DocData][fieldKey] = color; + const dataKey = Doc.LayoutFieldKey(dv.Document); + const alternate = (dv.layoutDoc[dataKey + '_usePath'] ? '_' + dv.layoutDoc[dataKey + '_usePath'] : '').replace(':hover', ''); + dv.dataDoc[fieldKey + alternate] = color; } }); } else { @@ -87,8 +90,8 @@ ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boole }); } else { Doc.SharingDoc().headingColor = undefined; - Doc.GetProto(Doc.SharingDoc()).headingColor = color; - Doc.UserDoc().layout_showTitle = color === 'transparent' ? undefined : StrCast(Doc.UserDoc().layout_showTitle, 'author_date'); + Doc.GetProto(Doc.SharingDoc()).headingColor = color === 'transparent' ? undefined : color; + Doc.UserDoc().layout_showTitle = color === 'transparent' ? undefined : StrCast(Doc.UserDoc().layout_showTitle, 'title'); } }); -- cgit v1.2.3-70-g09d2 From ce50b3e3f2f76438b3e3bd9b178b0a8573aa0343 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Tue, 7 May 2024 17:43:08 -0400 Subject: fixed --- src/client/views/global/globalScripts.ts | 70 +++++++++++++++++++------------- 1 file changed, 41 insertions(+), 29 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 9f571aa18..0c6095346 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -201,26 +201,26 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh const map: Map<'font'|'fontColor'|'highlight'|'fontSize'|'alignment', { checkResult: () => any; setDoc: () => void;}> = new Map([ ['font', { checkResult: () => RichTextMenu.Instance?.fontFamily, - setDoc: () => value && RichTextMenu.Instance.setFontFamily(value), + setDoc: () => value && RichTextMenu.Instance?.setFontFamily(value), }], ['highlight', { - checkResult: () =>(selected ?? Doc.UserDoc())._fontHighlight, - setDoc: () => value && RichTextMenu.Instance.setHighlight(value), + checkResult: () => RichTextMenu.Instance?.fontHighlight, + setDoc: () => value && RichTextMenu.Instance?.setHighlight(value), }], ['fontColor', { checkResult: () => RichTextMenu.Instance?.fontColor, - setDoc: () => value && RichTextMenu.Instance.setColor(value), + setDoc: () => value && RichTextMenu.Instance?.setColor(value), }], ['alignment', { - checkResult: () => RichTextMenu.Instance.textAlign, - setDoc: () => value && editorView?.state ? RichTextMenu.Instance.align(editorView, editorView.dispatch, value):(Doc.UserDoc().textAlign = value), + checkResult: () => RichTextMenu.Instance?.textAlign, + setDoc: () => value && editorView?.state ? RichTextMenu.Instance?.align(editorView, editorView.dispatch, value):(Doc.UserDoc().textAlign = value), }], ['fontSize', { checkResult: () => RichTextMenu.Instance?.fontSize.replace('px', ''), setDoc: () => { if (typeof value === 'number') value = value.toString(); if (value && Number(value).toString() === value) value += 'px'; - RichTextMenu.Instance.setFontSize(value); + RichTextMenu.Instance?.setFontSize(value); }, }], ]); @@ -231,48 +231,46 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh map.get(attr)?.setDoc?.(); }); - - type attrname = 'noAutoLink' | 'dictation' | 'bold' | 'italics' | 'elide' | 'underline' | 'left' | 'center' | 'right' | 'vcent' | 'bullet' | 'decimal'; -type attrfuncs = [attrname, { checkResult: () => boolean; toggle: () => any }]; +type attrfuncs = [attrname, { checkResult: () => boolean; toggle?: () => any }]; ScriptingGlobals.add(function toggleCharStyle(charStyle: attrname, checkResult?: boolean) { const textView = RichTextMenu.Instance?.TextView; const editorView = textView?.EditorView; // prettier-ignore const alignments:attrfuncs[] = (['left','right','center','vcent'] as ("left"|"center"|"right"|"vcent")[]).map((where) => - [ where, { checkResult: () =>(editorView ? (where === 'vcent' ? RichTextMenu.Instance.textVcenter: - (RichTextMenu.Instance.textAlign === where)): + [ where, { checkResult: () =>(editorView ? (where === 'vcent' ? RichTextMenu.Instance?.textVcenter ?? false: + (RichTextMenu.Instance?.textAlign === where)): where === 'vcent' ? BoolCast(Doc.UserDoc()._layout_centered): (Doc.UserDoc().textAlign ===where) ? true:false), - toggle: () => (editorView?.state ? (where === 'vcent' ? RichTextMenu.Instance.vcenterToggle(editorView, editorView.dispatch): - RichTextMenu.Instance.align(editorView, editorView.dispatch, where)): + toggle: () => (editorView?.state ? (where === 'vcent' ? RichTextMenu.Instance?.vcenterToggle(editorView, editorView.dispatch): + RichTextMenu.Instance?.align(editorView, editorView.dispatch, where)): where === 'vcent' ? Doc.UserDoc()._layout_centered = !Doc.UserDoc()._layout_centered: (Doc.UserDoc().textAlign = where))}]); // prettier-ignore // prettier-ignore const listings:attrfuncs[] = (['bullet','decimal'] as attrname[]).map(list => - [ list, { checkResult: () => (editorView ? RichTextMenu.Instance.getActiveListStyle() === list:false), - toggle: () => editorView?.state && RichTextMenu.Instance.changeListType(list) }]); + [ list, { checkResult: () => (editorView ? RichTextMenu.Instance?.listStyle === list:false), + toggle: () => editorView?.state && RichTextMenu.Instance?.changeListType(list) }]); // prettier-ignore const attrs:attrfuncs[] = [ ['dictation', { checkResult: () => textView?._recordingDictation ? true:false, toggle: () => textView && runInAction(() => (textView._recordingDictation = !textView._recordingDictation)) }], ['elide', { checkResult: () => false, toggle: () => editorView ? RichTextMenu.Instance?.elideSelection(): 0}], - ['noAutoLink',{ checkResult: () => (editorView ? RichTextMenu.Instance.noAutoLink : false), + ['noAutoLink',{ checkResult: () => ((editorView && RichTextMenu.Instance?.noAutoLink) ?? false), toggle: () => editorView && RichTextMenu.Instance?.toggleNoAutoLinkAnchor()}], - ['bold', { checkResult: () => (editorView ? RichTextMenu.Instance.bold : (Doc.UserDoc().fontWeight === 'bold') ? true:false), - toggle: editorView ? RichTextMenu.Instance.toggleBold : () => (Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === 'bold' ? undefined : 'bold')}], - ['italics', { checkResult: () => (editorView ? RichTextMenu.Instance.italics : (Doc.UserDoc().fontStyle === 'italics') ? true:false), - toggle: editorView ? RichTextMenu.Instance.toggleItalics : () => (Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === 'italics' ? undefined : 'italics')}], - ['underline', { checkResult: () => (editorView ? RichTextMenu.Instance.underline : (Doc.UserDoc().textDecoration === 'underline') ? true:false), - toggle: editorView ? RichTextMenu.Instance.toggleUnderline : () => (Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === 'underline' ? undefined : 'underline') }]] + ['bold', { checkResult: () => (editorView ? RichTextMenu.Instance?.bold??false : (Doc.UserDoc().fontWeight === 'bold') ? true:false), + toggle: editorView ? RichTextMenu.Instance?.toggleBold : () => (Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === 'bold' ? undefined : 'bold')}], + ['italics', { checkResult: () => (editorView ? RichTextMenu.Instance?.italics ?? false : (Doc.UserDoc().fontStyle === 'italics') ? true:false), + toggle: editorView ? RichTextMenu.Instance?.toggleItalics : () => (Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === 'italics' ? undefined : 'italics')}], + ['underline', { checkResult: () => (editorView ? RichTextMenu.Instance?.underline ?? false: (Doc.UserDoc().textDecoration === 'underline') ? true:false), + toggle: editorView ? RichTextMenu.Instance?.toggleUnderline : () => (Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === 'underline' ? undefined : 'underline') }]] const map = new Map(attrs.concat(alignments).concat(listings)); if (checkResult) { return map.get(charStyle)?.checkResult(); } - undoable(() => map.get(charStyle)?.toggle(), 'toggle ' + charStyle)(); + undoable(() => map.get(charStyle)?.toggle?.(), 'toggle ' + charStyle)(); }); export function checkInksToGroup() { @@ -391,15 +389,20 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode'); // toggle: Set overlay status of selected document -ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', value: any, checkResult?: boolean) { +ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor', value: any, checkResult?: boolean) { const selected = SelectionManager.Docs.lastElement() ?? Doc.UserDoc(); // prettier-ignore - const map: Map<'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ + const map: Map<'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ ['inkMask', { checkResult: () => ((selected?._layout_isSvg ? BoolCast(selected[DocData].stroke_isInkMask) : ActiveIsInkMask())), setInk: (doc: Doc) => (doc[DocData].stroke_isInkMask = !doc.stroke_isInkMask), setMode: () => selected?.type !== DocumentType.INK && SetActiveIsInkMask(!ActiveIsInkMask()), }], + ['labels', { + checkResult: () => ((selected?._stroke_showLabel ? BoolCast(selected[DocData].stroke_showLabel) : ActiveInkHideTextLabels())), + setInk: (doc: Doc) => (doc[DocData].stroke_showLabel = !doc.stroke_showLabel), + setMode: () => selected?.type !== DocumentType.INK && SetActiveInkHideTextLabels(!ActiveInkHideTextLabels()), + }], ['fillColor', { checkResult: () => (selected?._layout_isSvg ? StrCast(selected[DocData].fillColor) : ActiveFillColor() ?? "transparent"), setInk: (doc: Doc) => (doc[DocData].fillColor = StrCast(value)), @@ -454,6 +457,15 @@ ScriptingGlobals.add(function videoSnapshot() { selected?.Snapshot(); }); +ScriptingGlobals.add(function imageSetPixelSize() { + const selected = SelectionManager.Views.lastElement()?.ComponentView as ImageBox; + selected?.setNativeSize(); +}); +ScriptingGlobals.add(function imageRotate90() { + const selected = SelectionManager.Views.lastElement()?.ComponentView as ImageBox; + selected?.rotate(); +}); + /** Schema * toggleSchemaPreview **/ @@ -486,10 +498,10 @@ ScriptingGlobals.add(function toggleSingleLineSchema(checkResult?: boolean) { */ ScriptingGlobals.add(function setGroupBy(key: string, checkResult?: boolean) { SelectionManager.Docs.map(doc => (doc._text_fontFamily = key)); - const editorView = RichTextMenu.Instance.TextView?.EditorView; + const editorView = RichTextMenu.Instance?.TextView?.EditorView; if (checkResult) { - return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); + return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc())?.fontFamily); } - if (editorView) RichTextMenu.Instance.setFontFamily(key); + if (editorView) RichTextMenu.Instance?.setFontFamily(key); else Doc.UserDoc().fontFamily = key; }); -- cgit v1.2.3-70-g09d2 From 4a01680bd22a0652dbdd0da5c3a7167ca8117440 Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Wed, 8 May 2024 22:22:29 -0400 Subject: close curve and bounding box fixes --- src/client/util/CurrentUserUtils.ts | 10 +- src/client/views/MainView.tsx | 1 + .../collectionFreeForm/CollectionFreeFormView.tsx | 347 ++++++++++++--------- src/client/views/global/globalScripts.ts | 10 +- 4 files changed, 214 insertions(+), 154 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index b1673ff1c..3ee1b42aa 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -752,13 +752,13 @@ pie title Minerals in my tap water return [ { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen-nib", toolType: "pen", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }}, { title: "Write", toolTip: "Write (Ctrl+Shift+P)", btnType: ButtonType.ToggleButton, icon: "pen", toolType: "write", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, - { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.MultiToggleButton, toolType:"eraser", scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}, + { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.MultiToggleButton, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}, funcs: {toolType:"activeEraserTool()"}, subMenu: [ { title: "Stroke", toolTip: "Stroke Erase", btnType: ButtonType.ToggleButton, icon: "eraser", toolType:InkTool.StrokeEraser, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, - { title: "Segment", toolTip: "Segment Erase", btnType: ButtonType.ToggleButton, icon: "xmarks-lines",toolType:InkTool.SegmentEraser,ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, + { title: "Segment", toolTip: "Segment Erase", btnType: ButtonType.ToggleButton, icon: "xmark",toolType:InkTool.SegmentEraser,ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, { title: "Radius", toolTip: "Radius Erase", btnType: ButtonType.ToggleButton, icon: "circle-xmark",toolType:InkTool.RadiusEraser, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, - ]}, - { title: "Eraser Width", toolTip: "Eraser Width", btnType: ButtonType.NumberSliderButton, toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1, funcs: {hidden:"isRadiusEraser()" }}, + ]}, + { title: "Eraser Width", toolTip: "Eraser Width", btnType: ButtonType.NumberSliderButton, toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1, funcs: {hidden:"NotRadiusEraser()"}}, { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle", toolType:GestureUtils.Gestures.Circle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square", toolType:GestureUtils.Gestures.Rectangle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, { title: "Line", toolTip: "Line (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "minus", toolType:GestureUtils.Gestures.Line, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, @@ -1119,7 +1119,7 @@ pie title Minerals in my tap water ScriptingGlobals.add(function MySharedDocs() { return Doc.MySharedDocs; }, "document containing all shared Docs"); ScriptingGlobals.add(function IsExploreMode() { return SnappingManager.ExploreMode; }, "is Dash in exploration mode"); ScriptingGlobals.add(function IsNoviceMode() { return Doc.noviceMode; }, "is Dash in novice mode"); -ScriptingGlobals.add(function isRadiusEraser() { return !(Doc.ActiveTool === InkTool.RadiusEraser); }, "is the eraser selected"); +ScriptingGlobals.add(function NotRadiusEraser() { return Doc.ActiveTool !== InkTool.RadiusEraser; }, "is the active tool anything but the radius eraser"); ScriptingGlobals.add(function toggleComicMode() { Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }, "switches between comic and normal document rendering"); ScriptingGlobals.add(function importDocument() { return CurrentUserUtils.importDocument(); }, "imports files from device directly into the import sidebar"); ScriptingGlobals.add(function setInkToolDefaults() { Doc.ActiveTool = InkTool.None; }); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 56db0c488..d0b3221b4 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -361,6 +361,7 @@ export class MainView extends ObservableReactComponent<{}> { fa.faDeleteLeft, fa.faXmarksLines, fa.faCircleXmark, + fa.faXmark, fa.faExclamation, fa.faFileAlt, fa.faFileAudio, diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index eedee0b18..2e174be30 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,5 +1,7 @@ +import { inside } from '@turf/turf'; import { Bezier } from 'bezier-js'; import { Colors } from 'browndash-components'; +import { validationResult } from 'express-validator'; import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; @@ -35,7 +37,7 @@ import { Timeline } from '../../animationtimeline/Timeline'; import { ContextMenu } from '../../ContextMenu'; import { GestureOverlay } from '../../GestureOverlay'; import { CtrlKey } from '../../GlobalKeyHandler'; -import { ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke'; +import { ActiveEraserWidth, ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke'; import { LightboxView } from '../../LightboxView'; import { CollectionFreeFormDocumentView } from '../../nodes/CollectionFreeFormDocumentView'; import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp'; @@ -618,11 +620,15 @@ export class CollectionFreeFormView extends CollectionSubView { @@ -750,10 +755,7 @@ export class CollectionFreeFormView extends CollectionSubView this.forceStrokeGesture( e, @@ -764,12 +766,44 @@ export class CollectionFreeFormView extends CollectionSubView this._eraserLock--); } // Lower ink opacity to give the user a visual indicator of deletion. - intersect.inkView.layoutDoc.opacity = 0.2; + intersect.inkView.layoutDoc.opacity = 0; intersect.inkView.layoutDoc.dontIntersect = true; } }); return false; }; + + @action + onRadiusEraserMove = (e: PointerEvent, down: number[], delta: number[]) => { + const currPoint = { X: e.clientX, Y: e.clientY }; + this._eraserPts.push([currPoint.X, currPoint.Y]); + this._eraserPts = this._eraserPts.slice(Math.max(0, this._eraserPts.length - 5)); + if (this._eraserLock) return false; // bcz: should be fixed by putting it on a queue to be processed after the last eraser movement is processed. + const strokeMap: Map = this.getRadiusEraserIntersections({ X: currPoint.X - delta[0], Y: currPoint.Y - delta[1] }, currPoint); + strokeMap.forEach((intersects, stroke) => { + if (!this._deleteList.includes(stroke)) { + this._deleteList.push(stroke); + SetActiveInkWidth(StrCast(stroke.Document.stroke_width?.toString()) || '1'); + SetActiveInkColor(StrCast(stroke.Document.color?.toString()) || 'black'); + this._eraserLock++; + // create a new curve by appending all curves of the current segment together in order to render a single new stroke. + const segments = this.radiusErase(stroke, intersects.sort()); + segments?.forEach(segment => + this.forceStrokeGesture( + e, + GestureUtils.Gestures.Stroke, + segment.reduce((data, curve) => [...data, ...curve.points.map(p => stroke.ComponentView?.ptToScreen?.({ X: p.x, Y: p.y }) ?? { X: 0, Y: 0 })], [] as PointData[]) + ) + ); + setTimeout(() => this._eraserLock--); + } + // Lower ink opacity to give the user a visual indicator of deletion. + stroke.layoutDoc.opacity = 0; + stroke.layoutDoc.dontIntersect = true; + }); + return false; + }; + forceStrokeGesture = (e: PointerEvent, gesture: GestureUtils.Gestures, points: InkData, text?: any) => { this.onGesture(e, new GestureUtils.GestureEvent(gesture, points, GestureOverlay.getBounds(points), text)); }; @@ -788,7 +822,7 @@ export class CollectionFreeFormView extends CollectionSubView { - const radius = ActiveEraserWidth() / 2 + 3; // reduce values to avoid extreme radii + const radius = ActiveEraserWidth() + 3; // add 3 to avoid eraser being too thin const c = 0.551915024494; // circle tangent length to side ratio const movement = { x: endInkCoordsIn.X - startInkCoordsIn.X, y: endInkCoordsIn.Y - startInkCoordsIn.Y }; const moveLen = Math.sqrt(movement.x ** 2 + movement.y ** 2); @@ -836,6 +870,39 @@ export class CollectionFreeFormView extends CollectionSubView { + var isInside = false; + if (!isNaN(eraserOutline[0].X) && !isNaN(eraserOutline[0].Y)) { + var minX = eraserOutline[0].X, maxX = eraserOutline[0].X; + var minY = eraserOutline[0].Y, maxY = eraserOutline[0].Y; + for (var i = 1; i < eraserOutline.length; i++) { + const currPoint: {X: number, Y: number} = eraserOutline[i]; + minX = Math.min(currPoint.X, minX); + maxX = Math.max(currPoint.X, maxX); + minY = Math.min(currPoint.Y, minY); + maxY = Math.max(currPoint.Y, maxY); + } + + if (point.X < minX || point.X > maxX || point.Y < minY || point.Y > maxY) { + return false; + } + + for (var i = 0, j = eraserOutline.length - 1; i < eraserOutline.length; j = i, i++) { + if ((eraserOutline[i].Y > point.Y) != (eraserOutline[j].Y > point.Y) && + point.X < (eraserOutline[j].X - eraserOutline[i].X) * (point.Y - eraserOutline[i].Y) / (eraserOutline[j].Y - eraserOutline[i].Y) + eraserOutline[i].X ) { + isInside = !isInside; + } + } + } + return isInside; + }; + /** * Determines if the Eraser tool has intersected with an ink stroke in the current freeform collection. * @returns an array of tuples containing the intersected ink DocumentView and the t-value where it was intersected @@ -880,94 +947,141 @@ export class CollectionFreeFormView extends CollectionSubView { + const eraserRadius = ActiveEraserWidth() + 3; + const eraserMin = { X: Math.min(lastPoint.X, currPoint.X) - eraserRadius, Y: Math.min(lastPoint.Y, currPoint.Y) - eraserRadius }; + const eraserMax = { X: Math.max(lastPoint.X, currPoint.X) + eraserRadius, Y: Math.max(lastPoint.Y, currPoint.Y) + eraserRadius}; + const strokeToTVals = new Map(); + const intersectingStrokes = this.childDocs + .map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())) + .filter(inkView => inkView?.ComponentView instanceof InkingStroke) // filter to all inking strokes + .map(inkView => ({ inkViewBounds: inkView!.getBounds, inkStroke: inkView!.ComponentView as InkingStroke, inkView: inkView! })) + .filter( + ({ inkViewBounds }) => + inkViewBounds && // bounding box of eraser segment and ink stroke overlap + eraserMin.X <= inkViewBounds.right && + eraserMin.Y <= inkViewBounds.bottom && + eraserMax.X >= inkViewBounds.left && + eraserMax.Y >= inkViewBounds.top + ); + console.log("itersectnig strokes", intersectingStrokes); + intersectingStrokes.forEach(({ inkStroke, inkView }) => { + const { inkData } = inkStroke.inkScaledData(); + const prevPointInkSpace = inkStroke.ptFromScreen(lastPoint); + const currPointInkSpace = inkStroke.ptFromScreen(currPoint); + const eraserInkData = this.createEraserOutline(prevPointInkSpace, currPointInkSpace).inkData; + // add the ends of the stroke in as "intersections" + if (this.insideEraserOutline(eraserInkData, inkData[0])) { + strokeToTVals.set(inkView, [0]); + } + if (this.insideEraserOutline(eraserInkData, inkData[inkData.length - 1])) { + const inkList = strokeToTVals.get(inkView); + if (inkList !== undefined) { + inkList.push(Math.floor(inkData.length / 4) + 1); + } else { + strokeToTVals.set(inkView, [Math.floor(inkData.length / 4) + 1]); + } + } + for (var i = 0; i < inkData.length - 3; i += 4) { + // iterate over each segment of bezier curve + for (var j = 0; j < eraserInkData.length - 3; j += 4) { + const intersectCurve: Bezier = InkField.Segment(inkData, i); // other curve + const eraserCurve: Bezier = InkField.Segment(eraserInkData, j); // eraser curve + this.bintersects(intersectCurve, eraserCurve).forEach((val: string | number, k: number) => { + // Converting the Bezier.js Split type to a t-value number. + const t = +val.toString().split('/')[0]; + if (k % 2 === 0) { + // here, add to the map + const inkList = strokeToTVals.get(inkView); + if (inkList !== undefined) { + const tValOffset = ActiveEraserWidth() / 1030; // to prevent tVals from being added when too close, but scaled by eraser width + const inList = inkList.some(val => Math.abs(val - (t + Math.floor(i / 4))) <= tValOffset); + if (!inList) { + inkList.push(t + Math.floor(i / 4)); + } + } else { + strokeToTVals.set(inkView, [t + Math.floor(i / 4)]); + } + } + }); + } + } + }); + console.log("strokeToTVals", strokeToTVals); + return strokeToTVals; + }; + + /** + * Splits the passed in ink stroke at the intersection t values. Generally operates in pairs of t values, where + * the first t value is the start of the erased portion and the following t value is the end. + * @param ink the ink stroke DocumentView to split + * @param tVals all the t values to split the ink stroke at + * @returns a list of the new segments with the erased part removed + */ @action - radiusErase = (ink: DocumentView, startPt: { X: number; Y: number }, screenEraserPt: { X: number; Y: number }): Segment[] => { + radiusErase = (ink: DocumentView, tVals: number[]): Segment[] => { const segments: Segment[] = []; - const startInkCoords = ink.ComponentView?.ptFromScreen?.(startPt); - const inkCoords = ink.ComponentView?.ptFromScreen?.(screenEraserPt); // coordinates in ink space - if (!inkCoords || !startInkCoords) return []; - - var eraseSegment: Segment = []; // for eraser visualization const inkStroke = ink?.ComponentView as InkingStroke; - - const eraserStroke: InkData = inkStroke.splitByEraser(startInkCoords, inkCoords).inkData; - const strokeToTVals: Map = new Map(); - for (var i = 0; i < eraserStroke.length - 3; i += 4) { - eraseSegment.push(InkField.Segment(eraserStroke, i)); // for eraser visualization - this.getOtherInkIntersections(ink, i, eraserStroke, strokeToTVals); + const { inkData } = inkStroke.inkScaledData(); + var currSegment: Segment = []; + if (tVals.length % 2 !== 0) { // should always have even tVals + for (var i = 0; i < inkData.length - 3; i +=4) { + currSegment.push(InkField.Segment(inkData, i)); + } + if (currSegment.length > 0) { + segments.push(currSegment); + return segments; + } } - strokeToTVals.forEach((tVals, inkStroke) => { - var segment1: Segment = []; - var segment2: Segment = []; - const { inkData } = inkStroke.inkScaledData(); - tVals.sort(); - console.log('TVALS', inkStroke, tVals); - var hasSplit = false; - var continueErasing = false; - - // below is curve splitting logic - if (tVals.length) { - for (var i = 0; i < inkData.length - 3; i += 4) { - const inkSegment: Bezier = InkField.Segment(inkData, i); - const currCurveT = Math.floor(i / 4); + var continueErasing = false; + var firstSegment: Segment = []; + // early return if nothing to split on + if (tVals.length === 0 || (tVals.length === 1 && tVals[0] === 0)) { + return segments; + } - if (tVals.length === 2) { - if (tVals[0] > currCurveT && tVals[0] < currCurveT + 1) { - segment1.push(inkSegment.split(0, tVals[0] - currCurveT)); + for (var i = 0; i < inkData.length - 3; i += 4) { + const currCurveT = Math.floor(i/4); + const inkBezier: Bezier = InkField.Segment(inkData, i); + const segmentTs = tVals.filter(t => t >= currCurveT && t < currCurveT + 1); + + if (segmentTs.length > 0) { + for (var j = 0; j < segmentTs.length; j++) { + // if the first end of the segment is within the eraser + if (segmentTs[j] === 0 ) { + continueErasing = true; + } else if (segmentTs[j] === Math.floor(inkData.length / 4) + 1) { + break; + }else { + if (!continueErasing) { + currSegment.push(inkBezier.split(0, segmentTs[j] - currCurveT)); continueErasing = true; - if (tVals[1] > currCurveT && tVals[1] < currCurveT + 1) { - segment2.push(inkSegment.split(tVals[1] - currCurveT, 1)); - continueErasing = false; - hasSplit = true; - } - } else if (tVals[1] > currCurveT && tVals[1] < currCurveT + 1) { - segment2.push(inkSegment.split(tVals[1] - currCurveT, 1)); - continueErasing = false; - hasSplit = true; - } else if (!continueErasing) { - if (hasSplit) { - segment2.push(inkSegment); - } else { - segment1.push(inkSegment); - } - } - } else if (tVals.length === 1) { - if (tVals[0] > currCurveT && tVals[0] < currCurveT + 1) { - // this heuristic for determine which segment to keep is not quite right even though it will work most of the time. - // We should really store the eraser intersection normal in getOtherInkIntersections, - // and then test its dot product with the tangent of the stroke at the intersection point. - // if the dot product is positive, then erase the first part of the stroke, otherwise the second. - const leftDist = Utils.ptDistance({ x: inkCoords.X, y: inkCoords.Y }, inkSegment.points.lastElement()); - const rightDist = Utils.ptDistance({ x: inkCoords.X, y: inkCoords.Y }, inkSegment.points[0]); - const splits = inkSegment.split(tVals[0] - currCurveT); - if (leftDist < rightDist) { - // if it's on the first end - segment1.push(splits.left); - hasSplit = true; - } else { - segment1.push(splits.right); - hasSplit = true; - } } else { - if (tVals[0] < Math.floor(inkData.length / 4) - tVals[0] && hasSplit) { - segment1.push(inkSegment); - } else if (tVals[0] >= Math.floor(inkData.length / 4) - tVals[0] && !hasSplit) { - segment1.push(inkSegment); + continueErasing = false; + if (currSegment.length > 0) { + segments.push(currSegment); + if (firstSegment.length === 0) { + firstSegment = currSegment; + } + currSegment = []; } + currSegment.push(inkBezier.split(segmentTs[j] - currCurveT, 1)); } } } + } else { + if (!continueErasing) { // push the bezier piece if not in the eraser circle + currSegment.push(inkBezier); + } } - if (segment1.length && (Math.abs(segment1[0].points[0].x - segment1[0].points.lastElement().x) > 0.5 || Math.abs(segment1[0].points[0].y - segment1[0].points.lastElement().y) > 0.5)) { - segments.push(segment1); - } - if (segment2.length && (Math.abs(segment2[0].points[0].x - segment2[0].points.lastElement().x) > 0.5 || Math.abs(segment2[0].points[0].y - segment2[0].points.lastElement().y) > 0.5)) { - segments.push(segment2); + } + if (currSegment.length > 0) { + if (InkingStroke.IsClosed(inkData)) { + currSegment = currSegment.concat(firstSegment); } - }); - - segments.push(eraseSegment); // for eraser visualization + segments.push(currSegment); + } return segments; }; @@ -993,7 +1107,7 @@ export class CollectionFreeFormView extends CollectionSubView tVal + Math.floor(i / 4)); + currIntersects = currIntersects.filter(tVal => tVal > 0 && tVal < 1).map(tVal => tVal + Math.floor(i / 4)); if (currIntersects.length) { intersections = [...intersections, ...currIntersects]; for (var j = 0; j < currIntersects.length; j++) { @@ -1002,19 +1116,9 @@ export class CollectionFreeFormView extends CollectionSubView (value > 0.0001 && value < Math.floor(inkData.length / 4) ? index : -1)).filter(index => index !== -1); - - // Filter intersections and segmentIndexes based on validIndices - intersections = indices.map(index => intersections[index]); - segmentIndexes = indices.map(index => segmentIndexes[index]); - // intersections = intersections.slice(1, intersections.length ); // take the 0 intersection out - // segmentIndexes = segmentIndexes.slice(1, segmentIndexes.length); // same for indexes } if (intersections.length) { @@ -1068,7 +1172,7 @@ export class CollectionFreeFormView extends CollectionSubView 0 && segment2.length > 0) { + segment2 = segment2.concat(segment1); + segment1 = []; + } + // push 1 or both segments if they are not empty if (segment1.length && (Math.abs(segment1[0].points[0].x - segment1[0].points.lastElement().x) > 0.5 || Math.abs(segment1[0].points[0].y - segment1[0].points.lastElement().y) > 0.5)) { segments.push(segment1); @@ -1203,46 +1310,6 @@ export class CollectionFreeFormView extends CollectionSubView): Map => { - this.childDocs - .filter(doc => doc.type === DocumentType.INK && !doc.dontIntersect) - .forEach(doc => { - // InkingStroke of other ink strokes - const otherInk = otherInkDocView.ComponentView as InkingStroke; - // ink Data of other ink strokes - const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] }; - for (var j = 0; j < otherInkData.length - 3; j += 4) { - const curve: Bezier = InkField.Segment(points, i); // eraser curve - const otherCurve: Bezier = InkField.Segment(otherInkData, j); // other curve - this.bintersects(otherCurve, curve).forEach((val: string | number, k: number) => { - // Converting the Bezier.js Split type to a t-value number. - const t = +val.toString().split('/')[0]; - if (k % 2 === 0) { - // here, add to the map - const inkList = strokeToTVals.get(otherInk); - if (inkList !== undefined) { - const inList = inkList.some(val => Math.abs(val - (t + Math.floor(j / 4))) <= 0.01); - if (!inList) { - inkList.push(t + Math.floor(j / 4)); - } - } else { - strokeToTVals.set(otherInk, [t + Math.floor(j / 4)]); - } - } - }); - } - }); - return strokeToTVals; - }; - @action zoom = (pointX: number, pointY: number, deltaY: number): void => { if (this.Document.isGroup || this.Document[(this._props.viewField ?? '_') + 'freeform_noZoom']) return; diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 5c5f8de03..19741e2e0 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -341,10 +341,7 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, Doc.UserDoc().activeEraserTool = tool; } // pen or eraser - if (Doc.ActiveTool === tool && tool === InkTool.Eraser) { - Doc.ActiveTool = InkTool.SegmentEraser; - console.log("erase click twice") - } else if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) { + if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) { Doc.ActiveTool = InkTool.None; } else { Doc.ActiveTool = tool as any; @@ -362,11 +359,6 @@ ScriptingGlobals.add(function activeEraserTool() { return StrCast(Doc.UserDoc().activeEraserTool, InkTool.StrokeEraser); }, 'returns the current eraser tool'); -// ScriptingGlobals.add(function setEraserProperty(option: 'eraseWidth', value: any, checkResult?: boolean) { -// setInk: (doc: Doc) => (doc[DocData].eraserWidth = NumCast(value)) -// InkingStroke.setEraserRadius(NumCast(value)); -// }) - // toggle: Set overlay status of selected document ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', value: any, checkResult?: boolean) { const selected = SelectionManager.Docs.lastElement() ?? Doc.UserDoc(); -- cgit v1.2.3-70-g09d2 From 4429a0565888d9118e37f1e58dec300220831661 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Sat, 11 May 2024 22:30:39 -0400 Subject: transformations are being unbelieveably silly rn --- src/client/documents/Documents.ts | 7 +- src/client/util/CurrentUserUtils.ts | 8 +- .../views/collections/CollectionCardDeckView.scss | 31 +- .../views/collections/CollectionCardDeckView.tsx | 417 ++++++++++++++------- src/client/views/global/globalScripts.ts | 15 +- 5 files changed, 316 insertions(+), 162 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1c57c5d63..77cc5f51e 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -499,9 +499,10 @@ export class DocumentOptions { userBackgroundColor?: STRt = new StrInfo('background color associated with a Dash user (seen in header fields of shared documents)'); userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)'); - card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); - card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); - card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); + cardSort?: STRt = new StrInfo('way cards are sorted in deck view'); + // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); + // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); + // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 88fcf098b..767d6c635 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -713,9 +713,11 @@ pie title Minerals in my tap water } static cardTools(): Button[] { return [ - { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ClickButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ClickButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ClickButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Links", icon:"link", toolTip:"Sort by its links", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"links", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + ] } diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index ff9c0a569..aafc3b556 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -2,26 +2,43 @@ .collectionCardView-outer { height: 100%; + width: 100%; position: relative; background-color: white; overflow: hidden; } .card-wrapper { - display: flex; + display: grid; + grid-template-columns: repeat(10, 1fr); /* Creates 10 columns, adjust number as needed */ + // width: 100%; + position: absolute; align-items: center; + justify-items: center; + justify-content: center; + transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); } -.card-row{ - display: flex; - position: absolute; - align-items: center; - transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); +// .card-wrapper::after { +// content: ""; +// width: 100%; /* Forces wrapping */ +// } +// .card-wrapper > .card-item:nth-child(10n)::after { +// content: ""; +// width: 100%; /* Forces wrapping after every 10th item */ +// } -} +// .card-row{ +// display: flex; +// position: absolute; +// align-items: center; +// transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); + + +// } .card-item-active, .card-item { diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index ab7aac267..bda72b2d6 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils'; import { Doc, DocListCast, Field } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; -import { NumCast, ScriptCast, StrCast, BoolCast } from '../../../fields/Types'; +import { NumCast, ScriptCast, StrCast, BoolCast, DocCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; import { StyleProp } from '../StyleProvider'; @@ -12,7 +12,10 @@ import { DocumentView } from '../nodes/DocumentView'; import './CollectionCardDeckView.scss'; import { CollectionSubView } from './CollectionSubView'; import { Transform } from '../../util/Transform'; +import { LinkManager } from '../../util/LinkManager'; // import Card from 'react-bootstrap/Card'; +import { DocumentType } from '../../documents/DocumentTypes'; +import { forEach } from 'lodash'; @observer @@ -21,6 +24,10 @@ export class CollectionCardView extends CollectionSubView() { @observable hoveredNodeIndex = -1; + @computed get myChildLayoutPairs(){ + return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK) + } + @action setHoveredNodeIndex = (index: number) => { if (!this.isSelected(index)) { @@ -38,10 +45,10 @@ export class CollectionCardView extends CollectionSubView() { @action setSelectedNodeIndex = (index: number) => { const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - console.log('goodnight'); + // console.log('goodnight'); if (SelectionManager.IsSelected(docs[index])) { - console.log('good mornings'); + // console.log('good mornings'); this.setSelectedNodeIndex(index); } }; @@ -53,12 +60,11 @@ export class CollectionCardView extends CollectionSubView() { }; inactiveDocs = () => { - const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - + const docs = this.myChildLayoutPairs; + return docs.filter(d => !SelectionManager.IsSelected(d.layout)); + }; - return docs.filter(d => !SelectionManager.IsSelected(d)); - }; middleIndex = Math.floor(this.inactiveDocs().length / 2); @@ -81,12 +87,21 @@ export class CollectionCardView extends CollectionSubView() { } }; + + childDocumentWidth = 600; // target width of a Doc... /** * how much to scale down the contents of the view so that everything will fit */ @computed get fitContentScale() { - return (this.childDocumentWidth * this.childLayoutPairs.length) / this._props.PanelWidth(); + if (this.myChildLayoutPairs.length< this.maxRowCount){ + length = this.myChildLayoutPairs.length + } + + else{ + length = this.maxRowCount + } + return (this.childDocumentWidth * length) / this._props.PanelWidth(); } panelWidth = () => this.childDocumentWidth; panelHeight = (layout: Doc) => () => (2 * (this.panelWidth() * NumCast(layout._height))) / NumCast(layout._width); @@ -95,7 +110,7 @@ export class CollectionCardView extends CollectionSubView() { isChildContentActive = () => (this.isContentActive() ? true : false); rotate = (amCards: number, index: number) => { - console.log(amCards + "wtf") + // console.log(amCards + "wtf") const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); const stepMag = Math.abs(-30 + (amCards / 2 - 1) * (30 / ((amCards - (amCards % 2)) / 2))); @@ -113,31 +128,39 @@ export class CollectionCardView extends CollectionSubView() { return possRotate; }; - translateY = (amCards: number, index: number) => { + translateY = (amCards: number, index: number, realIndex: number) => { const evenOdd = amCards % 2; const apex = (amCards - evenOdd) / 2; const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25); + let rowOffset = 0 - console.log('steo' + stepMag); + if (realIndex > this.maxRowCount -1){ + // 11 - 1 = 10 + rowOffset = 400 * ((realIndex - (realIndex % this.maxRowCount)) / this.maxRowCount) + } + + + + // console.log('steo' + stepMag); if (evenOdd == 1 || index < apex - 1) { - console.log('hi' + index); - return Math.abs(stepMag * (apex - index)); + // console.log('hi' + index); + return Math.abs(stepMag * (apex - index)) - rowOffset; } else { if (index == apex || index == apex - 1) { - return 0; + return 0 - rowOffset; } - return Math.abs(stepMag * (apex - index - 1)); + return Math.abs(stepMag * (apex - index - 1)) - rowOffset; } }; - translateOverFlowY = (amCards: number, index: number) => { - if (amCards > 8 && index > amCards / 2) { - return 100; - } - return 0; - }; + // translateOverFlowY = (amCards: number, index: number) => { + // if (amCards > 8 && index > amCards / 2) { + // return 100; + // } + // return 0; + // }; translateSelected = (index: number): number => { if (this.isSelected(index)) { @@ -161,78 +184,190 @@ export class CollectionCardView extends CollectionSubView() { @computed get sortedDocsType() { const desc = BoolCast(this.layoutDoc.sortDesc); - let sorted = [] + let docs = [] - for (let i=0; i< this.childLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list - sorted[i] = this.childLayoutPairs[i] + for (let i=0; i< this.myChildLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list + sorted[i] = this.myChildLayoutPairs[i] } + switch(this._props.Document.cardSort){ + case "type": + // Copy and sort documents by type + return this.sort(sorted, "type", desc) + case "color": + return this.sort(sorted, "color", desc) + case "links": + console.log("hi") + + let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout) + + console.log(links) + + // } - // Copy and sort documents by type - const docs = sorted.sort((docA, docB) => { - const typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string - const typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string + default: + docs = this.myChildLayoutPairs + return {docs} + + + + } + } + + + + + hexToHsv = (hex: string): [number, number, number] => { + if (!hex) return [0, 0, 0]; // Default to black if hex is not defined + const r = parseInt(hex.slice(1, 3), 16) / 255; + const g = parseInt(hex.slice(3, 5), 16) / 255; + const b = parseInt(hex.slice(5, 7), 16) / 255; + const max = Math.max(r, g, b), min = Math.min(r, g, b); + const d = max - min; + let h: number; + const s = (max === 0 ? 0 : d / max); + const v = max; + + switch (max) { + case min: h = 0; break; + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + default: h = 0; break; + } + h /= 6; + return [h, s, v]; + }; + + + + sort = (docs: {layout: Doc; data: Doc; }[], sortType: string, isDesc: boolean) => { + + docs.sort((docA, docB) => { + let typeA; + let typeB + + switch(sortType) { + case "color": + typeA = this.hexToHsv(StrCast(docA.layout.backgroundColor)) ?? ''; // If docA.type is undefined, use an empty string + typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string + break + + default: + typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string + typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string + break + } + // Perform a basic string comparison if types are strings let out = 0; if (typeA < typeB) out = -1; if (typeA > typeB) out = 1; - if (desc) out *= -1; // Reverse the sort order if descending is true + if (isDesc) out *= -1; // Reverse the sort order if descending is true return out; - }); - + }); - return { docs }; + return {docs} } + // @computed get cards(){ + + + // } + + + displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { + return ( + r?.ContentDiv && this.docRefs.set(childPair.layout, r))} + Document={childPair.layout} + TemplateDataDocument={childPair.data} + // onClickScript={this.toggleIcon} + //suppressSetHeight={true} + NativeWidth={returnZero} + NativeHeight={returnZero} + layout_fitWidth={returnFalse} + onDoubleClickScript={this.onChildDoubleClick} + renderDepth={this._props.renderDepth + 1} + LayoutTemplate={this._props.childLayoutTemplate} + LayoutTemplateString={this._props.childLayoutString} + // focus={this.focus} + ScreenToLocalTransform={screenToLocalTransform} //makes sure the box wrapper thing is in the right spot + isContentActive={this.isChildContentActive} + isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} + PanelWidth={this.panelWidth} + PanelHeight={this.panelHeight(childPair.layout)} + /> + ); + }; @observable docRefs = new ObservableMap(); + @observable maxRowCount = 10; + + overflowAmCardsCalc(index: number) { + if (this.inactiveDocs().length < this.maxRowCount){ + return this.inactiveDocs().length + } + // 13 - 3 = 10 + const totalCards = this.inactiveDocs().length + // if 9 or less + if ( index < ((totalCards - (totalCards % 10)))){ + return this.maxRowCount + } + //(3) + return totalCards % 10 + + } + + overflowIndexCalc(realIndex: number) { + if (realIndex < 10){ + return realIndex + } + + return realIndex % 10 + + } + + translateOverflowX(realIndex: number, calcRowCards: number){ + if (realIndex < this.maxRowCount){ + return 0 + } + + return (10 - calcRowCards) * (this.panelWidth()/2) + + + + + } + @computed get contentSorted() { const sortedDocs = this.sortedDocsType.docs; - const amCards = this.inactiveDocs().length; - - const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { - return ( - r?.ContentDiv && this.docRefs.set(childPair.layout, r))} - Document={childPair.layout} - TemplateDataDocument={childPair.data} - NativeWidth={returnZero} - NativeHeight={returnZero} - layout_fitWidth={returnFalse} - onDoubleClickScript={this.onChildDoubleClick} - renderDepth={this._props.renderDepth + 1} - LayoutTemplate={this._props.childLayoutTemplate} - LayoutTemplateString={this._props.childLayoutString} - ScreenToLocalTransform={screenToLocalTransform} - isContentActive={this.isChildContentActive} - isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} - PanelWidth={this.panelWidth} - PanelHeight={this.panelHeight(childPair.layout)} - /> - ); - }; + // const amCards = this.inactiveDocs().length; // Map sorted documents to their rendered components return sortedDocs.map((childPair, index) => { // const childPair = { layout: doc, data: doc }; - const isHovered = this.hoveredNodeIndex === index; - const inactiveIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair); - const isSelected = SelectionManager.IsSelected(childPair.layout); + const isHovered = this.hoveredNodeIndex === index; + const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair); + const calcRowIndex = this.overflowIndexCalc(realIndex) + + const amCards = this.overflowAmCardsCalc(realIndex) + const isSelected = SelectionManager.IsSelected(childPair.layout); const childScreenToLocal = () => { const dref = this.docRefs.get(childPair.layout); const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv); - return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0); + return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0); }; return ( @@ -243,111 +378,105 @@ export class CollectionCardView extends CollectionSubView() { width: this.panelWidth(), height: this.panelHeight(childPair.layout)(), transform: ` - rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) - translateY(${isHovered ? this.translateHover(inactiveIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px) - translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px) + rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) + translateY(${isHovered ? this.translateHover(realIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, calcRowIndex, realIndex)}px) + translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : this.translateOverflowX(realIndex, amCards)}px) scale(${isSelected ? 1.25 : 1}) `, }} onMouseEnter={() => this.setHoveredNodeIndex(index)}> - {displayDoc(childPair, childScreenToLocal)} + {this.displayDoc(childPair, childScreenToLocal)} + + {/* */} + ); }); } - @computed get content() { - // const currentIndex = NumCast(this.layoutDoc._carousel_index); - const amCards = this.inactiveDocs().length; - console.log(amCards + "lol") - // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents - - // const myInactives = - const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { - return ( - r?.ContentDiv && this.docRefs.set(childPair.layout, r))} - Document={childPair.layout} - TemplateDataDocument={childPair.data} - // onClickScript={this.toggleIcon} - //suppressSetHeight={true} - NativeWidth={returnZero} - NativeHeight={returnZero} - layout_fitWidth={returnFalse} - onDoubleClickScript={this.onChildDoubleClick} - renderDepth={this._props.renderDepth + 1} - LayoutTemplate={this._props.childLayoutTemplate} - LayoutTemplateString={this._props.childLayoutString} - // focus={this.focus} - ScreenToLocalTransform={screenToLocalTransform} //makes sure the box wrapper thing is in the right spot - isContentActive={this.isChildContentActive} - isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} - PanelWidth={this.panelWidth} - PanelHeight={this.panelHeight(childPair.layout)} - /> - ); - }; + - return this.childLayoutPairs.map((childPair, index) => { - const isSelected = this.isSelected(index); - const isHovered = this.hoveredNodeIndex === index; - const isOverflow = amCards > 8 && index > amCards / 2; - // const inactiveIndex = this.sortedDocsType.docs.indexOf(childPair); - const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout); - // const yOffset = this.verticalOffset(index); + // @computed get content() { + // // const currentIndex = NumCast(this.layoutDoc._carousel_index); + // const amCards = this.inactiveDocs().length; + // console.log(amCards + "lol") + // // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents - const childScreenToLocal = () => { - const dref = this.docRefs.get(childPair.layout); - const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv); - // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform. so we have to subtract that off - return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0); - }; + // // const myInactives = + - return ( -
{ + // const isSelected = this.isSelected(index); + // const isHovered = this.hoveredNodeIndex === index; + // const isOverflow = amCards > 8 && index > amCards / 2; + // // const inactiveIndex = this.sortedDocsType.docs.indexOf(childPair); + // const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout); + // // const yOffset = this.verticalOffset(index); + + // const childScreenToLocal = () => { + // const dref = this.docRefs.get(childPair.layout); + // const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv); + // // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform. so we have to subtract that off + // return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0); + // }; + + // return ( + //
this.setSelectedNodeIndex(index)} + // `, //scale has to be applied last or selected offset gets messed up + // }} + // // onClick={() => this.setSelectedNodeIndex(index)} - onMouseEnter={() => this.setHoveredNodeIndex(index)}> - {/* {this.lol(childPair.data, index)} */} + // onMouseEnter={() => this.setHoveredNodeIndex(index)}> + // {/* {this.lol(childPair.data, index)} */} - {displayDoc(childPair, childScreenToLocal)} -
- ); - }); - } + // {this.displayDoc(childPair, childScreenToLocal)} + //
+ // ); + // }); + // } @computed get translateWrapperX() { - if (this.inactiveDocs().length != this.childLayoutPairs.length) { - return this.panelWidth() / 2; - } - return 0; - } + let translate = 0 - @computed get renderCardsSort(){ - if (BoolCast(this._props.Document.card_sort_type) == true){ - return this.contentSorted + if (this.inactiveDocs().length != this.myChildLayoutPairs.length) { + translate += this.panelWidth() / 2; } - else{ - return this.content - } + console.log("in" + this.inactiveDocs().length) + console.log("max" + this.maxRowCount) + + // if (this.inactiveDocs().length > this.maxRowCount){ + // translate += ((this.inactiveDocs().length % this.maxRowCount) * this.panelWidth()) / 2 + // console.log("trans" + (this.inactiveDocs().length % this.maxRowCount) / 2 ) + // } + + + + return translate; } + // @computed get renderCardsSort(){ + // if (StrCast(this._props.Document.cardSort) == "type"){ + // return this.contentSorted + // } + + // else{ + // return this.content + // } + // } + render() { @@ -367,7 +496,7 @@ export class CollectionCardView extends CollectionSubView() { height: `${100 * this.fitContentScale}%`, }} onMouseLeave={() => this.setHoveredNodeIndex(-1)}> - {this.renderCardsSort} + {this.contentSorted} {/* @@ -386,4 +515,4 @@ export class CollectionCardView extends CollectionSubView() { ); } -} +} \ No newline at end of file diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 0c6095346..526315802 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -105,10 +105,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed'); }); -ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', checkResult?: boolean, persist?: boolean) { +ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', checkResult?: boolean, persist?: boolean) { const selected = SelectionManager.Docs.lastElement(); // prettier-ignore - const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ + const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ ['grid', { checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, @@ -140,15 +140,20 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid }], ['time', { checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_time = !doc.card_sort_time, + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "time", }], ['docType', { checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_type = !doc.card_sort_type, + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "type", }], ['color', { checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_color = !doc.card_sort_color, + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "color", + }], + + ['links', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links", }], ]); -- cgit v1.2.3-70-g09d2 From 13b4aa868ac664399bfd320902f3ddee57072392 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Mon, 13 May 2024 09:21:29 -0400 Subject: create technically working --- src/client/documents/Documents.ts | 1 + src/client/util/CurrentUserUtils.ts | 18 +++- src/client/util/SelectionManager.ts | 1 + src/client/views/MainView.tsx | 3 +- .../views/collections/CollectionCardDeckView.scss | 27 ++++- .../views/collections/CollectionCardDeckView.tsx | 111 ++++++++++++++++++--- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/global/globalScripts.ts | 21 +++- 8 files changed, 163 insertions(+), 21 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 77cc5f51e..df69e215a 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -500,6 +500,7 @@ export class DocumentOptions { userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)'); cardSort?: STRt = new StrInfo('way cards are sorted in deck view'); + customSortCount?: NUMt = new NumInfo('number of custom sorts the user has created'); // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 767d6c635..59560dd78 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -9,7 +9,7 @@ import { PrefetchProxy } from "../../fields/Proxy"; import { RichTextField } from "../../fields/RichTextField"; import { listSpec } from "../../fields/Schema"; import { ScriptField } from "../../fields/ScriptField"; -import { Cast, DateCast, DocCast, StrCast } from "../../fields/Types"; +import { Cast, DateCast, DocCast, StrCast, NumCast } from "../../fields/Types"; import { WebField, nullAudio } from "../../fields/URLField"; import { SetCachedGroups, SharingPermissions } from "../../fields/util"; import { GestureUtils } from "../../pen-gestures/GestureUtils"; @@ -34,6 +34,9 @@ import { SnappingManager } from "./SnappingManager"; import { UndoManager } from "./UndoManager"; import { LabelBox } from "../views/nodes/LabelBox"; import { ImageBox } from "../views/nodes/ImageBox"; +import { CollectionFreeFormView } from "../views/collections/collectionFreeForm"; +import { CollectionCardView } from "../views/collections/CollectionCardDeckView"; +import { SelectionManager } from "./SelectionManager"; interface Button { // DocumentOptions fields a button can set @@ -712,12 +715,23 @@ pie title Minerals in my tap water ] } static cardTools(): Button[] { + + + // if (view != undefined){ + // for (let i=0; i< NumCast(view.layoutDoc.customSortCount); i++){ + // customs.push( + // { title: "Custom " + i, icon:"robot", toolTip:"Custom sort option " + i, btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}} + // ) + + // } + // } return [ { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Links", icon:"link", toolTip:"Sort by its links", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"links", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - + { title: "Create", icon:"plus", toolTip:"Create new custom groupings!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + // ...customs ] } diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 36b926053..d507e35ad 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -68,6 +68,7 @@ export class SelectionManager { public static IsSelected = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []).some(dv => dv?.IsSelected); public static get Views() { return this.Instance.SelectedViews; } // prettier-ignore public static get SelectedSchemaDoc() { return this.Instance.SelectedSchemaDocument; } // prettier-ignore + public static get Docs() { return this.Instance.SelectedViews.map(dv => dv.Document).filter(doc => doc?._type_collection !== CollectionViewType.Docking); } // prettier-ignore } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index abdb5abef..a5882dcf3 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -526,7 +526,8 @@ export class MainView extends ObservableReactComponent<{}> { fa.faArrowsUpToLine, fa.faArrowsDownToLine, fa.faPalette, - fa.faHourglassHalf + fa.faHourglassHalf, + fa.faRobot ] ); } diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index aafc3b556..222a1d226 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -10,7 +10,7 @@ .card-wrapper { display: grid; - grid-template-columns: repeat(10, 1fr); /* Creates 10 columns, adjust number as needed */ + grid-template-columns: repeat(10, 1fr); // width: 100%; position: absolute; @@ -21,6 +21,31 @@ transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); } +.card-button-container { + display: flex; + padding: 3px; + // width: 300px; + background-color: rgb(218, 218, 218); /* Background color of the container */ + border-radius: 50px; /* Rounds the corners of the container */ + transform: translateY(-50px); + // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */ + align-items: center; /* Centers buttons vertically */ + justify-content: start;/* Centers buttons horizontally */ +} + +button { + width: 35px; + height: 35px; + border-radius: 50%; + background-color: $dark-gray; + // border-color: $medium-blue; + margin: 5px; // transform: translateY(-50px); +} + +// button:hover { +// transform: translateY(-50px); +// } + // .card-wrapper::after { // content: ""; // width: 100%; /* Forces wrapping */ diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index bda72b2d6..bf26ad4b5 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -37,7 +37,7 @@ export class CollectionCardView extends CollectionSubView() { translateHover = (index: number): number => { if (this.hoveredNodeIndex == index && !this.isSelected(index)) { - return -50 * this.fitContentScale; + return -50; } return 0; }; @@ -109,6 +109,10 @@ export class CollectionCardView extends CollectionSubView() { isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); isChildContentActive = () => (this.isContentActive() ? true : false); + + + + rotate = (amCards: number, index: number) => { // console.log(amCards + "wtf") const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); @@ -163,7 +167,7 @@ export class CollectionCardView extends CollectionSubView() { // }; translateSelected = (index: number): number => { - if (this.isSelected(index)) { + // if (this.isSelected(index)) { const middleOfPanel = this._props.PanelWidth() / 2; const scaledNodeWidth = this.panelWidth() * 1.25; @@ -173,12 +177,12 @@ export class CollectionCardView extends CollectionSubView() { const scaledNodeCenter = nodeLeftEdge + scaledNodeWidth / 2; // Calculate the translation needed to align the scaled node's center with the panel's center - const translation = middleOfPanel - scaledNodeCenter; + const translation = middleOfPanel - scaledNodeCenter - scaledNodeWidth - (scaledNodeWidth /4); return translation; - } + // } - return 0; + // return 0; }; @computed get sortedDocsType() { @@ -197,15 +201,20 @@ export class CollectionCardView extends CollectionSubView() { return this.sort(sorted, "type", desc) case "color": return this.sort(sorted, "color", desc) - case "links": - console.log("hi") + // case "links": + // console.log("hi") - let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout) + // let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout) - console.log(links) + // console.log(links) // } + case "custom": + console.log("hiiiii") + return this.sort(sorted, "custom", desc) + + default: docs = this.myChildLayoutPairs return {docs} @@ -254,6 +263,14 @@ export class CollectionCardView extends CollectionSubView() { typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string break + case "custom": + typeA = this.customGroupDictionary.get(docs.indexOf(docA)) ?? '' + // console.log(typeA + "A") + typeB = this.customGroupDictionary.get(docs.indexOf(docB)) ?? '' + // console.log(typeB + 'b') + break + + default: typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string @@ -341,10 +358,24 @@ export class CollectionCardView extends CollectionSubView() { } return (10 - calcRowCards) * (this.panelWidth()/2) + } + + calculateTranslateY(isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) { + let trans = 0; + if (isHovered) { + trans += this.translateHover(realIndex); + } + + trans += this.translateY(amCards, calcRowIndex, realIndex); + + if (isSelected) { + trans = 50 * this.fitContentScale; + } + return trans } @computed get contentSorted() { @@ -357,6 +388,7 @@ export class CollectionCardView extends CollectionSubView() { const isHovered = this.hoveredNodeIndex === index; + const childPairIndex = this.myChildLayoutPairs.indexOf(childPair) const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair); const calcRowIndex = this.overflowIndexCalc(realIndex) @@ -379,21 +411,72 @@ export class CollectionCardView extends CollectionSubView() { height: this.panelHeight(childPair.layout)(), transform: ` rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) - translateY(${isHovered ? this.translateHover(realIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, calcRowIndex, realIndex)}px) - translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : this.translateOverflowX(realIndex, amCards)}px) + translateY(${this.calculateTranslateY(isHovered, isSelected, realIndex, amCards, calcRowIndex)}px) + translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px) scale(${isSelected ? 1.25 : 1}) `, }} - onMouseEnter={() => this.setHoveredNodeIndex(index)}> + onMouseEnter={() => this.setHoveredNodeIndex(index)} + + > {this.displayDoc(childPair, childScreenToLocal)} - {/* */} + {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex) : ''} ); }); } + @observable amGroups = 0 + @observable customGroupDictionary = new Map< + number, number>(); + + + @action toggleButton(childPairIndex: number, buttonID: number) { + + this.customGroupDictionary.set(childPairIndex, buttonID); + } + + renderButtons (childPairIndex: number) { + const buttons = []; // Array to hold the button elements + + let amButtons = 4 + + if (this.amGroups > 4){ + amButtons = this.amGroups + } + + let activeButtonIndex = this.customGroupDictionary.get(childPairIndex) + + for (let i = 0; i < amButtons; i++) { + const isActive = activeButtonIndex == i + + buttons.push( + ); + } + + const totalWidth = amButtons * 35 + (amButtons * 2* 5) + 6; + return ( +
+ {buttons} +
+ ); + } + + + + + + + + + + + // @computed get content() { @@ -450,7 +533,7 @@ export class CollectionCardView extends CollectionSubView() { let translate = 0 - if (this.inactiveDocs().length != this.myChildLayoutPairs.length) { + if (this.inactiveDocs().length != this.myChildLayoutPairs.length && this.inactiveDocs().length < 10) { translate += this.panelWidth() / 2; } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 2d05b5490..11193f496 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -2010,4 +2010,4 @@ ScriptingGlobals.add(function datavizFromSchema(doc: Doc) { SchemaCSVPopUp.Instance.setVisible(true); } }); -}); +}); \ No newline at end of file diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 526315802..9056917fe 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -105,10 +105,12 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed'); }); -ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', checkResult?: boolean, persist?: boolean) { + + +ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom' | 'create', checkResult?: boolean, persist?: boolean, customNumber?: number) { const selected = SelectionManager.Docs.lastElement(); // prettier-ignore - const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ + const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom' | 'create', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ ['grid', { checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, @@ -156,6 +158,21 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links", }], + ['custom', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "custom", + }], + + //in an ideal world lol + + + // ['create', { + // checkResult: (doc:Doc) => NumCast(doc?.customSortCount), + // setDoc: (doc:Doc,dv:DocumentView) => doc.customSortCount = NumCast(doc.customSortCount) + 1, + // }], + + + ]); if (checkResult) { -- cgit v1.2.3-70-g09d2 From 3c5b2353cb20843e968e51fdff58cc92f101ed51 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Tue, 14 May 2024 02:14:58 -0400 Subject: getting close to done --- src/client/documents/Documents.ts | 3 +- src/client/util/CurrentUserUtils.ts | 6 ++- src/client/views/MainView.tsx | 4 +- .../views/collections/CollectionCardDeckView.scss | 2 +- .../views/collections/CollectionCardDeckView.tsx | 63 +++++++++++++++++----- .../CollectionFreeFormLayoutEngines.tsx | 26 ++++----- .../collections/collectionFreeForm/MarqueeView.tsx | 4 +- src/client/views/global/globalScripts.ts | 35 +++++++----- 8 files changed, 94 insertions(+), 49 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index df69e215a..57f91399a 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -500,7 +500,8 @@ export class DocumentOptions { userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)'); cardSort?: STRt = new StrInfo('way cards are sorted in deck view'); - customSortCount?: NUMt = new NumInfo('number of custom sorts the user has created'); + customSortNumber?: NUMt = new NumInfo('number of custom sorts the user has created'); + customHashMap?: List // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 59560dd78..abc728cd3 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -730,7 +730,11 @@ pie title Minerals in my tap water { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Links", icon:"link", toolTip:"Sort by its links", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"links", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"plus", toolTip:"Create new custom groupings!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Create", icon:"robot", toolTip:"Create your first custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Create", icon:"star", toolTip:"Create your second custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom2", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Create", icon:"satellite", toolTip:"Create your third custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom3", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + + // ...customs ] diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index a5882dcf3..f1296e46a 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -527,7 +527,9 @@ export class MainView extends ObservableReactComponent<{}> { fa.faArrowsDownToLine, fa.faPalette, fa.faHourglassHalf, - fa.faRobot + fa.faRobot, + fa.faSatellite, + fa.faStar ] ); } diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index 09d6f70ea..babc604b5 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -68,7 +68,7 @@ button { .card-item-active, .card-item { position: relative; - transition: transform 0.3s ease-in-out; + transition: transform 0.5s ease-in-out; } .card-item-active { diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 996c5711b..fc183b72b 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -2,7 +2,7 @@ import { ObservableMap, action, computed, makeObservable, observable } from 'mob import { observer } from 'mobx-react'; import * as React from 'react'; import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils'; -import { Doc, DocListCast, Field } from '../../../fields/Doc'; +import { Doc, DocListCast, Field, StrListCast } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { NumCast, ScriptCast, StrCast, BoolCast, DocCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; @@ -17,6 +17,7 @@ import { LinkManager } from '../../util/LinkManager'; import { DocumentType } from '../../documents/DocumentTypes'; import { forEach } from 'lodash'; import { SnappingManager } from '../../util/SnappingManager'; +import { List } from '../../../fields/List'; @observer export class CollectionCardView extends CollectionSubView() { @@ -70,11 +71,49 @@ export class CollectionCardView extends CollectionSubView() { super(props); makeObservable(this); // this.rotationDegree(7); + + if (this._props.Document.customHashMap != undefined){ + this.customGroupDictionary = this.getCustoms(StrListCast(this._props.Document.customHashMap)) + } + } + + @observable customGroupDictionary: Map[] = [new Map(), new Map(), new Map()]; + + @computed get mapToField(): List { + const resultList = new List(); // Creating a new ListImpl instance for strings + + this.customGroupDictionary.forEach(map => { + // Convert each map to a single string with entries formatted as "key:value" + const mapString = Array.from(map.entries()) + .map(([key, value]) => `${key}:${value}`) + .join(','); // Join all key-value pairs with commas + resultList.push(mapString); // Add the formatted string of the current map to the list + }); + + return resultList; + } + + getCustoms = (stringFrom: string[]): Map[] => { + return stringFrom.map(s => { + // Create a new Map object for each string. + const map = new Map(); + // Split the string by commas to get key-value pairs, then process each pair. + s.split(',').forEach(pair => { + const [key, value] = pair.split(':'); + map.set(Number(key), Number(value)); + }); + return map; + }); } + + + + private _dropDisposer?: DragManager.DragDropDisposer; componentWillUnmount() { + console.log("hey hey hey") this._dropDisposer?.(); } @@ -253,9 +292,11 @@ export class CollectionCardView extends CollectionSubView() { break; case 'custom': - typeA = this.customGroupDictionary.get(docs.indexOf(docA)) ?? ''; + + console.log(this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)]) + typeA = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docA)) ?? '9999'; // console.log(typeA + "A") - typeB = this.customGroupDictionary.get(docs.indexOf(docB)) ?? ''; + typeB = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docB)) ?? '9999'; // console.log(typeB + 'b') break; @@ -397,7 +438,7 @@ export class CollectionCardView extends CollectionSubView() { SnappingManager.SetIsResizing(undefined); this._forceChildXf = !this._forceChildXf; }), - 400 + 700 ); }} style={{ @@ -419,11 +460,13 @@ export class CollectionCardView extends CollectionSubView() { }); } - @observable amGroups = 0; - @observable customGroupDictionary = new Map(); + + + @action toggleButton(childPairIndex: number, buttonID: number) { - this.customGroupDictionary.set(childPairIndex, buttonID); + this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].set(childPairIndex, buttonID); + this._props.Document.customHashMap = this.mapToField } renderButtons(childPairIndex: number) { @@ -431,11 +474,7 @@ export class CollectionCardView extends CollectionSubView() { let amButtons = 4; - if (this.amGroups > 4) { - amButtons = this.amGroups; - } - - let activeButtonIndex = this.customGroupDictionary.get(childPairIndex); + let activeButtonIndex = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(childPairIndex); for (let i = 0; i < amButtons; i++) { const isActive = activeButtonIndex == i; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx index becad63f6..22005eb23 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx @@ -126,27 +126,20 @@ export function computeStarburstLayout(poolData: Map, pivotDoc } // export function computeCardDeckLayout(poolData: Map, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) { -// console.log('hi'); // const docMap = new Map(); -// const spreadWidth = Math.min(panelDim[0], childPairs.length * 50); // Total width of the spread -// const startX = -(spreadWidth / 2); // Starting X position -// const fanAngle = 5; // Angle in degrees for fanning out cards -// const baseZIndex = 1000; // Base Z-index to ensure cards are stacked in order +// const burstDiam = [NumCast(pivotDoc._width), NumCast(pivotDoc._height)]; +// const burstScale = NumCast(pivotDoc._starburstDocScale, 1); // childPairs.forEach(({ layout, data }, i) => { // const aspect = NumCast(layout._height) / NumCast(layout._width); -// const docSize = Math.min(400, NumCast(layout._width)) * NumCast(pivotDoc._starburstDocScale, 1); -// const posX = startX + (spreadWidth / childPairs.length) * i; -// const posY = 0; // Adjust if you want to change the vertical alignment -// const rotation = (i - (childPairs.length / 2)) * fanAngle; // Calculate rotation for fanning effect - +// const docSize = Math.min(Math.min(400, NumCast(layout._width)), Math.min(400, NumCast(layout._width)) / aspect) * burstScale; +// const deg = (i / childPairs.length) * Math.PI * 2; // docMap.set(layout[Id], { -// x: posX, -// y: posY, +// x: Math.min(burstDiam[0] / 2 - docSize, Math.max(-burstDiam[0] / 2, (Math.cos(deg) * burstDiam[0]) / 2 - docSize / 2)), +// y: Math.min(burstDiam[1] / 2 - docSize * aspect, Math.max(-burstDiam[1] / 2, (Math.sin(deg) * burstDiam[1]) / 2 - (docSize / 2) * aspect)), // width: docSize, // height: docSize * aspect, -// zIndex: baseZIndex + i, -// rotation: rotation, +// zIndex: NumCast(layout.zIndex), // pair: { layout, data }, // replica: '', // color: 'white', @@ -154,9 +147,8 @@ export function computeStarburstLayout(poolData: Map, pivotDoc // transition: 'all 0.3s', // }); // }); - -// const divider = { type: 'div', color: 'transparent', x: -panelDim[0] / 2, y: -panelDim[1] / 2, width: 15, height: 15, payload: undefined }; -// return normalizeResults(panelDim, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]); +// const divider = { type: 'div', color: 'transparent', x: -burstDiam[0] / 2, y: -burstDiam[1] / 2, width: 15, height: 15, payload: undefined }; +// return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]); // } export function computePivotLayout(poolData: Map, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) { diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 98684ae98..7e7a5c2c6 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -533,7 +533,7 @@ export class MarqueeView extends ObservableReactComponent any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ + const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ ['grid', { checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, @@ -158,21 +158,28 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links", }], - ['custom', { + ['custom1', { checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "custom", - }], - - //in an ideal world lol - - - // ['create', { - // checkResult: (doc:Doc) => NumCast(doc?.customSortCount), - // setDoc: (doc:Doc,dv:DocumentView) => doc.customSortCount = NumCast(doc.customSortCount) + 1, - // }], + setDoc: (doc, dv) => { + doc.cardSort = "custom"; + doc.customSortNumber = 0; + } + }], - + ['custom2', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc, dv) => { + doc.cardSort = "custom"; + doc.customSortNumber = 1; + console.log(doc.customSortNumber + " numberrrrrrrr") + } }], + ['custom3', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc, dv) => { + doc.cardSort = "custom"; + doc.customSortNumber = 2; + } }], ]); if (checkResult) { -- cgit v1.2.3-70-g09d2 From 84098c41aaa4970d43b88645489e64c1cac22934 Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Wed, 15 May 2024 14:33:50 -0400 Subject: three eraser modes implemented --- src/client/views/InkingStroke.tsx | 49 ------- .../collectionFreeForm/CollectionFreeFormView.tsx | 141 +++++++++++---------- src/client/views/global/globalScripts.ts | 3 - 3 files changed, 73 insertions(+), 120 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 03acd5393..9e09c0aa9 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -331,55 +331,6 @@ export class InkingStroke extends ViewBoxAnnotatableComponent() ); }; - splitByEraser = (startInkCoordsIn: { X: number; Y: number }, endInkCoordsIn: { X: number; Y: number }) => { - const radius = ActiveEraserWidth() / 2 + 3; // reduce values to avoid extreme radii - const c = 0.551915024494; // circle tangent length to side ratio - const movement = { x: endInkCoordsIn.X - startInkCoordsIn.X, y: endInkCoordsIn.Y - startInkCoordsIn.Y }; - const moveLen = Math.sqrt(movement.x ** 2 + movement.y ** 2); - const direction = { x: (movement.x / moveLen) * radius, y: (movement.y / moveLen) * radius }; - const normal = { x: -direction.y, y: direction.x }; // prettier-ignore - - const startCoords = { X: startInkCoordsIn.X - direction.x, Y: startInkCoordsIn.Y - direction.y }; - const endCoords = { X: endInkCoordsIn.X + direction.x, Y: endInkCoordsIn.Y + direction.y }; - return new InkField([ - // left bot arc - { X: startCoords.X, Y: startCoords.Y }, // prettier-ignore - { X: startCoords.X + normal.x * c, Y: startCoords.Y + normal.y * c }, // prettier-ignore - { X: startCoords.X + direction.x + normal.x - direction.x * c, Y: startCoords.Y + direction.y + normal.y - direction.y * c }, - { X: startCoords.X + direction.x + normal.x, Y: startCoords.Y + direction.y + normal.y }, // prettier-ignore - - // bot - { X: startCoords.X + direction.x + normal.x, Y: startCoords.Y + direction.y + normal.y }, // prettier-ignore - { X: startCoords.X + direction.x + normal.x + direction.x * c, Y: startCoords.Y + direction.y + normal.y + direction.y * c }, - { X: endCoords.X - direction.x + normal.x - direction.x * c, Y: endCoords.Y - direction.y + normal.y - direction.y * c }, // prettier-ignore - { X: endCoords.X - direction.x + normal.x, Y: endCoords.Y - direction.y + normal.y }, // prettier-ignore - - // right bot arc - { X: endCoords.X - direction.x + normal.x, Y: endCoords.Y - direction.y + normal.y }, // prettier-ignore - { X: endCoords.X - direction.x + normal.x + direction.x * c, Y: endCoords.Y - direction.y + normal.y + direction.y * c}, // prettier-ignore - { X: endCoords.X + normal.x * c, Y: endCoords.Y + normal.y * c }, // prettier-ignore - { X: endCoords.X, Y: endCoords.Y }, // prettier-ignore - - // right top arc - { X: endCoords.X, Y: endCoords.Y }, // prettier-ignore - { X: endCoords.X - normal.x * c, Y: endCoords.Y - normal.y * c }, // prettier-ignore - { X: endCoords.X - direction.x - normal.x + direction.x * c, Y: endCoords.Y - direction.y - normal.y + direction.y * c}, // prettier-ignore - { X: endCoords.X - direction.x - normal.x, Y: endCoords.Y - direction.y - normal.y }, // prettier-ignore - - // top - { X: endCoords.X - direction.x - normal.x, Y: endCoords.Y - direction.y - normal.y }, // prettier-ignore - { X: endCoords.X - direction.x - normal.x - direction.x * c, Y: endCoords.Y - direction.y - normal.y - direction.y * c}, // prettier-ignore - { X: startCoords.X + direction.x - normal.x + direction.x * c, Y: startCoords.Y + direction.y - normal.y + direction.y * c }, - { X: startCoords.X + direction.x - normal.x, Y: startCoords.Y + direction.y - normal.y }, // prettier-ignore - - // left top arc - { X: startCoords.X + direction.x - normal.x, Y: startCoords.Y + direction.y - normal.y }, // prettier-ignore - { X: startCoords.X + direction.x - normal.x - direction.x * c, Y: startCoords.Y + direction.y - normal.y - direction.y * c }, // prettier-ignore - { X: startCoords.X - normal.x * c, Y: startCoords.Y - normal.y * c }, // prettier-ignore - { X: startCoords.X, Y: startCoords.Y }, // prettier-ignore - ]); - }; - _subContentView: ViewBoxInterface | undefined; setSubContentView = (doc: ViewBoxInterface) => (this._subContentView = doc); @computed get fillColor() { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 14d20eb4a..e2965c1ba 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -738,12 +738,12 @@ export class CollectionFreeFormView extends CollectionSubView { const currPoint = { X: e.clientX, Y: e.clientY }; @@ -776,7 +776,7 @@ export class CollectionFreeFormView extends CollectionSubView this._eraserLock--); + // setTimeout(() => this._eraserLock--); } // Lower ink opacity to give the user a visual indicator of deletion. intersect.inkView.layoutDoc.opacity = 0; @@ -797,23 +797,17 @@ export class CollectionFreeFormView extends CollectionSubView { - // const currZoom = this.zoomScaling(); - // console.log("curr zoom", currZoom); - // console.log("prev zoom", this.prevZoom); const currPoint = { X: e.clientX, Y: e.clientY }; this._eraserPts.push([currPoint.X, currPoint.Y]); this._eraserPts = this._eraserPts.slice(Math.max(0, this._eraserPts.length - 5)); - const intersections: any[] = this.getRadiusEraserIntersections({ X: currPoint.X - delta[0], Y: currPoint.Y - delta[1] }, currPoint); - // if (intersections[0].size > 0 && currZoom === this.prevZoom) { - const strokeMap: Map = intersections[0]; - const eraserStroke = intersections[1]; + const strokeMap: Map = this.getRadiusEraserIntersections({ X: currPoint.X - delta[0], Y: currPoint.Y - delta[1] }, currPoint); strokeMap.forEach((intersects, stroke) => { if (!this._deleteList.includes(stroke)) { this._deleteList.push(stroke); SetActiveInkWidth(StrCast(stroke.Document.stroke_width?.toString()) || '1'); SetActiveInkColor(StrCast(stroke.Document.color?.toString()) || 'black'); - const segments = this.radiusErase(stroke, intersects.sort(), eraserStroke); + const segments = this.radiusErase(stroke, intersects.sort()); segments?.forEach(segment => this.forceStrokeGesture( e, @@ -825,12 +819,6 @@ export class CollectionFreeFormView extends CollectionSubView 0) { - // this.prevZoom = currZoom; - // console.log("skipping occurred"); - // } else if (this.prevZoom = currZoom) { - // this.prevZoom = currZoom; - // } return false; }; @@ -852,7 +840,8 @@ export class CollectionFreeFormView extends CollectionSubView { // increase radius slightly based on the erased stroke's width, added to make eraser look more realistic - var radius = ActiveEraserWidth() + inkStrokeWidth * 0.2; + var radius = ActiveEraserWidth() + 5 + inkStrokeWidth * 0.1; // add 5 to prevent eraser from being too small const c = 0.551915024494; // circle tangent length to side ratio const movement = { x: endInkCoordsIn.X - startInkCoordsIn.X, y: endInkCoordsIn.Y - startInkCoordsIn.Y }; const moveLen = Math.sqrt(movement.x ** 2 + movement.y ** 2); @@ -909,7 +898,7 @@ export class CollectionFreeFormView extends CollectionSubView { var isInside = false; if (!isNaN(eraserOutline[0].X) && !isNaN(eraserOutline[0].Y)) { - let minX = eraserOutline[0].X, maxX = eraserOutline[0].X; // prettier-ignore - let minY = eraserOutline[0].Y, maxY = eraserOutline[0].Y; // prettier-ignore + let minX = eraserOutline[0].X, maxX = eraserOutline[0].X; + let minY = eraserOutline[0].Y, maxY = eraserOutline[0].Y; for (let i = 1; i < eraserOutline.length; i++) { const currPoint: { X: number; Y: number } = eraserOutline[i]; minX = Math.min(currPoint.X, minX); @@ -985,14 +974,18 @@ export class CollectionFreeFormView extends CollectionSubView { - const eraserRadius = ActiveEraserWidth() / this.zoomScaling(); - const eraserMin = { X: Math.min(lastPoint.X, currPoint.X) - eraserRadius, Y: Math.min(lastPoint.Y, currPoint.Y) - eraserRadius }; - const eraserMax = { X: Math.max(lastPoint.X, currPoint.X) + eraserRadius, Y: Math.max(lastPoint.Y, currPoint.Y) + eraserRadius }; + // set distance of the eraser's bounding box based on the zoom + var boundingBoxDist = ActiveEraserWidth() + 5; + this.zoomScaling() < 1 ? boundingBoxDist = boundingBoxDist / (this.zoomScaling() * 1.5) : boundingBoxDist *= this.zoomScaling(); + + const eraserMin = { X: Math.min(lastPoint.X, currPoint.X) - boundingBoxDist, Y: Math.min(lastPoint.Y, currPoint.Y) - boundingBoxDist }; + const eraserMax = { X: Math.max(lastPoint.X, currPoint.X) + boundingBoxDist, Y: Math.max(lastPoint.Y, currPoint.Y) + boundingBoxDist }; const strokeToTVals = new Map(); const intersectingStrokes = this.childDocs .map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())) @@ -1006,13 +999,12 @@ export class CollectionFreeFormView extends CollectionSubView= inkViewBounds.left && eraserMax.Y >= inkViewBounds.top ); - const erasers: InkData[] = []; + intersectingStrokes.forEach(({ inkStroke, inkView }) => { const { inkData, inkStrokeWidth } = inkStroke.inkScaledData(); const prevPointInkSpace = inkStroke.ptFromScreen(lastPoint); const currPointInkSpace = inkStroke.ptFromScreen(currPoint); const eraserInkData = this.createEraserOutline(prevPointInkSpace, currPointInkSpace, inkStrokeWidth).inkData; - // erasers.push(eraserInkData); // add the ends of the stroke in as "intersections" if (this.insideEraserOutline(eraserInkData, inkData[0])) { @@ -1039,7 +1031,7 @@ export class CollectionFreeFormView extends CollectionSubView Math.abs(val - (t + Math.floor(i / 4))) <= tValOffset); if (!inList) { inkList.push(t + Math.floor(i / 4)); @@ -1052,42 +1044,34 @@ export class CollectionFreeFormView extends CollectionSubView { + radiusErase = (ink: DocumentView, tVals: number[]): Segment[] => { const segments: Segment[] = []; - var eraser: Segment = []; - // for (var i = 0; i < erasers.length; i ++) { - // for (var j = 0; j < erasers[i].length - 3; j +=4) { - // eraser.push(InkField.Segment(erasers[i], j)); - // } - // segments.push(eraser); - // eraser = []; - // } - const inkStroke = ink?.ComponentView as InkingStroke; const { inkData } = inkStroke.inkScaledData(); var currSegment: Segment = []; + + // any radius erase stroke will always result in even tVals, since the ends are included if (tVals.length % 2 !== 0) { - // any radius erase stroke will always result in even tVals, since the ends are included for (var i = 0; i < inkData.length - 3; i += 4) { currSegment.push(InkField.Segment(inkData, i)); } segments.push(currSegment); - return segments; // want to return the full original stroke + return segments; // return the full original stroke } var continueErasing = false; // used to erase segments if they are completely enclosed in the eraser - var firstSegment: Segment = []; // used to keep track of the first segment for closed curves + var firstSegment: Segment = []; // used to keep track of the first segment for closed curves // early return if nothing to split on if (tVals.length === 0 || (tVals.length === 1 && tVals[0] === 0)) { @@ -1108,15 +1092,18 @@ export class CollectionFreeFormView extends CollectionSubView 0) { for (var j = 0; j < segmentTs.length; j++) { - if (segmentTs[j] === 0) { // if the first end of the segment is within the eraser + if (segmentTs[j] === 0) { + // if the first end of the segment is within the eraser continueErasing = true; - } else if (segmentTs[j] === Math.floor(inkData.length / 4) + 1) { // the last end + } else if (segmentTs[j] === Math.floor(inkData.length / 4) + 1) { + // the last end break; } else { if (!continueErasing) { currSegment.push(inkBezier.split(0, segmentTs[j] - currCurveT)); continueErasing = true; - } else { // we've reached the end of the part to take out... + } else { + // we've reached the end of the part to take out... continueErasing = false; if (currSegment.length > 0) { segments.push(currSegment); // ...so we add it to the list and reset currSegment @@ -1168,7 +1155,7 @@ export class CollectionFreeFormView extends CollectionSubView tVal > 0 && tVal < 1).map(tVal => tVal + Math.floor(i / 4)); if (currIntersects.length) { intersections = [...intersections, ...currIntersects]; @@ -1181,6 +1168,9 @@ export class CollectionFreeFormView extends CollectionSubView { @@ -2045,14 +2043,19 @@ export class CollectionFreeFormView extends CollectionSubView { this._eraserX = e.clientX; this._eraserY = e.clientY; - if (this._eraserX < 0 || this._eraserY < 0) { - this._showEraserCircle = false; - } else { - this._showEraserCircle = true; - } // super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY)); }; + @action + onMouseLeave = () => { + this._showEraserCircle = false; + }; + + @action + onMouseEnter = () => { + this._showEraserCircle = true; + }; + @undoBatch promoteCollection = () => { const childDocs = this.childDocs.slice(); @@ -2321,6 +2324,8 @@ export class CollectionFreeFormView extends CollectionSubView - {Doc.ActiveTool === InkTool.RadiusEraser && ( + {(Doc.ActiveTool === InkTool.RadiusEraser && this._showEraserCircle) && (
any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ ['inkMask', { -- cgit v1.2.3-70-g09d2 From df7532553db3df270fcbd25a46e7a349a82bd712 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Thu, 16 May 2024 12:52:14 -0400 Subject: pdfs being weird --- src/client/apis/gpt/GPT.ts | 35 +++++------ src/client/util/CurrentUserUtils.ts | 4 +- .../views/collections/CollectionCardDeckView.tsx | 70 ++++++++++++++++++++-- src/client/views/global/globalScripts.ts | 8 ++- src/client/views/nodes/PDFBox.tsx | 1 + 5 files changed, 92 insertions(+), 26 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts index 30194f9f8..1f50ad0b8 100644 --- a/src/client/apis/gpt/GPT.ts +++ b/src/client/apis/gpt/GPT.ts @@ -5,7 +5,8 @@ enum GPTCallType { SUMMARY = 'summary', COMPLETION = 'completion', EDIT = 'edit', - DATA = 'data', + // MERMAID='mermaid' + SORT = 'sort' } type GPTCallOpts = { @@ -15,45 +16,40 @@ type GPTCallOpts = { prompt: string; }; -/** - * Replace completions (deprecated) with chat - */ - const callTypeMap: { [type: string]: GPTCallOpts } = { - // newest model: gpt-4 - summary: { model: 'gpt-3.5-turbo', maxTokens: 256, temp: 0.5, prompt: 'Summarize the text given in simpler terms.' }, - edit: { model: 'gpt-3.5-turbo', maxTokens: 256, temp: 0.5, prompt: 'Reword the text.' }, - completion: { model: 'gpt-3.5-turbo', maxTokens: 256, temp: 0.5, prompt: "You are a helpful assistant. Answer the user's prompt." }, - data: { model: 'gpt-3.5-turbo', maxTokens: 256, temp: 0.5, prompt: "You are a helpful resarch assistant. Analyze the user's data to find meaningful patterns and/or correlation. Please keep your response short and to the point." }, + summary: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' }, + edit: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' }, + completion: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: '' }, + sort:{model:'gpt-4-turbo',maxTokens:2048,temp:0,prompt:"I'm going to give you a list of strings. Sort them into lists by shared content. The format of should be: '[string1, string2], [string 3, string4][string5, string6]' where the actual numbers of strings in each category / total categorys is arbritray and up to your interpretation"} }; -/** + +/**` * Calls the OpenAI API. * * @param inputText Text to process * @returns AI Output */ -const gptAPICall = async (inputText: string, callType: GPTCallType, prompt?: any) => { +const gptAPICall = async (inputText: string, callType: GPTCallType) => { if (callType === GPTCallType.SUMMARY) inputText += '.'; const opts: GPTCallOpts = callTypeMap[callType]; try { const configuration: ClientOptions = { - apiKey: process.env.OPENAI_KEY, + apiKey: "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", dangerouslyAllowBrowser: true, }; const openai = new OpenAI(configuration); - let usePrompt = prompt ? opts.prompt + prompt : opts.prompt; let messages: ChatCompletionMessageParam[] = [ - { role: 'system', content: usePrompt }, + { role: 'system', content: opts.prompt }, { role: 'user', content: inputText }, ]; const response = await openai.chat.completions.create({ model: opts.model, - max_tokens: opts.maxTokens, + messages: messages, temperature: opts.temp, - messages, + max_tokens: opts.maxTokens, }); const content = response.choices[0].message.content; return content; @@ -76,11 +72,12 @@ const gptImageCall = async (prompt: string, n?: number) => { n: n ?? 1, size: '1024x1024', }); - return response.data.map(data => data.url); + return response.data.map((data: any) => data.url); + // return response.data.data[0].url; } catch (err) { console.error(err); return; } }; -export { gptAPICall, gptImageCall, GPTCallType }; +export { gptAPICall, gptImageCall, GPTCallType }; \ No newline at end of file diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index abc728cd3..e18c22bac 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -730,9 +730,11 @@ pie title Minerals in my tap water { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Links", icon:"link", toolTip:"Sort by its links", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"links", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"robot", toolTip:"Create your first custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Create", icon:"heart", toolTip:"Create your first custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Create", icon:"star", toolTip:"Create your second custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom2", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Create", icon:"satellite", toolTip:"Create your third custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom3", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Create", icon:"robot", toolTip:"Have ChatGPT sort your text-based nodes !", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"chat", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + // ...customs diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 7af6eb614..561b9f806 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils'; import { Doc, DocListCast, Field, StrListCast } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; -import { NumCast, ScriptCast, StrCast, BoolCast, DocCast, RTFCast } from '../../../fields/Types'; +import { NumCast, ScriptCast, StrCast, BoolCast, DocCast, RTFCast, Cast} from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; import { StyleProp } from '../StyleProvider'; @@ -18,6 +18,9 @@ import { DocumentType } from '../../documents/DocumentTypes'; import { forEach } from 'lodash'; import { SnappingManager } from '../../util/SnappingManager'; import { List } from '../../../fields/List'; +import { gptAPICall } from '../../apis/gpt/GPT'; +import { GPTCallType } from '../../apis/gpt/GPT'; +import { ImageField } from '../../../fields/URLField'; @observer export class CollectionCardView extends CollectionSubView() { @@ -249,6 +252,11 @@ export class CollectionCardView extends CollectionSubView() { // console.log('hiiiii'); return this.sort(sorted, 'custom', desc); + case 'chat': + this.smartSort() + docs = this.myChildLayoutPairs; + return {docs} + default: docs = this.myChildLayoutPairs; return { docs }; @@ -306,7 +314,7 @@ export class CollectionCardView extends CollectionSubView() { // console.log(typeA + "A") typeB = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docB)) ?? '9999'; // console.log(typeB + 'b') - break; + break; default: typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string @@ -468,6 +476,8 @@ export class CollectionCardView extends CollectionSubView() { }); } + + @@ -476,10 +486,62 @@ export class CollectionCardView extends CollectionSubView() { this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].set(childPairIndex, buttonID); this._props.Document.customHashMap = this.mapToField - // const queryText = RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1'])); - // console.log(queryText) + // Cast(selected.Document.data, WebField, null)?.url?.href) + + // StrCast(selected.Document.data, Cast(selected.Document.data, WebField, null)?.url?.href) + + + + // const + const imgurlperchance = Cast(this.childDocs[1].data, ImageField, null)?.url; + + console.log('Print Front of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text); + console.log('Print Back of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text); + + + // const queryText = (RTFCast(this.myChildLayoutPairs[0].layout.text)).Text; + // const queryText = RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text; + + console.log(imgurlperchance ?? "sad") } + childPairStringList () { + let string = "" + for (let i=0; i < this.myChildLayoutPairs.length; i++){ + string += StrCast((RTFCast(this.myChildLayoutPairs[i].layout.text)).Text) + ", " + } + return string + } + + @observable isLoading = false + + @action async smartSort() { + this.isLoading = true; + console.log("loading") + let prompt= "" + + if (this.childPairStringList() == ""){ + console.log("no child pairs :(") + } + + else{ + console.log(this.childPairStringList() + "og list") + prompt = "Sort this list of strings by shared content " + this.childPairStringList() + } + + + let res = await gptAPICall(prompt, GPTCallType.SORT); + this.isLoading = false; + if (res == 'Error connecting with API.') { + // If GPT call failed + console.error('GPT call failed'); + } else if (res != null) { + // If GPT call succeeded, set htmlCode;;; TODO: check if valid html + console.log(res) + } + this.isLoading = false; + }; + renderButtons(childPairIndex: number) { const buttons = []; // Array to hold the button elements diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 30602ea0b..14f83beb6 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -107,10 +107,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { -ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3', checkResult?: boolean, persist?: boolean, customNumber?: number) { +ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3'| 'chat', checkResult?: boolean, persist?: boolean, customNumber?: number) { const selected = SelectionManager.Docs.lastElement(); // prettier-ignore - const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ + const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3'| 'chat', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ ['grid', { checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, @@ -180,6 +180,10 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid doc.cardSort = "custom"; doc.customSortNumber = 2; } }], + ['chat', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "chat", + }], ]); if (checkResult) { diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 1274220b6..90d6133e4 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -33,6 +33,7 @@ import { FocusViewOptions, FieldView, FieldViewProps } from './FieldView'; import { ImageBox } from './ImageBox'; import './PDFBox.scss'; import { PinProps, PresBox } from './trails'; +import { Networking } from '../../Network'; @observer export class PDFBox extends ViewBoxAnnotatableComponent() implements ViewBoxInterface { -- cgit v1.2.3-70-g09d2 From 6c7615110dcf8334196bbfddfd89b684e4ceee4f Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Fri, 17 May 2024 21:30:02 -0400 Subject: GOD IS GOOD --- src/client/apis/gpt/GPT.ts | 2 +- src/client/documents/Documents.ts | 2 + src/client/util/CurrentUserUtils.ts | 29 ++- .../views/collections/CollectionCardDeckView.tsx | 231 +++++++++++++-------- src/client/views/global/globalScripts.ts | 153 ++++++++++---- src/client/views/pdf/GPTPopup/GPTPopup.scss | 6 +- src/client/views/pdf/GPTPopup/GPTPopup.tsx | 102 +++++---- 7 files changed, 343 insertions(+), 182 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts index 9a24c808c..398f8ae39 100644 --- a/src/client/apis/gpt/GPT.ts +++ b/src/client/apis/gpt/GPT.ts @@ -20,7 +20,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = { summary: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' }, edit: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' }, completion: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: '' }, - sort:{model:'gpt-4o',maxTokens:2048,temp:0.5,prompt:"I'm going to give you a list of descriptions. Each one is seperated by ====== on either side. They will vary in length, so make sure to only seperate when you see ======. Sort them into lists by shared content. MAKE SURE EACH DESCRIPTOR IS IN ONLY ONE LIST. Generate only the list with each list seperated by ====== with the elements seperated by ~~~~~~"}, + sort:{model:'gpt-4o',maxTokens:2048,temp:0.5,prompt:"I'm going to give you a list of descriptions. Each one is seperated by ====== on either side. They will vary in length, so make sure to only seperate when you see ======. Sort them into lists by shared content. MAKE SURE EACH DESCRIPTOR IS IN ONLY ONE LIST. Generate only the list with each list seperated by ====== with the elements seperated by ~~~~~~. Try to do around 4 groups, but a little more or less is ok."}, describe:{model:'gpt-4-vision-preview',maxTokens:2048,temp:0,prompt:"Describe these images in 3-5 words"}, diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 57f91399a..eded2b485 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -502,6 +502,8 @@ export class DocumentOptions { cardSort?: STRt = new StrInfo('way cards are sorted in deck view'); customSortNumber?: NUMt = new NumInfo('number of custom sorts the user has created'); customHashMap?: List + visibleGroupNumbers?: List + // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index e18c22bac..251771e8e 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -729,18 +729,34 @@ pie title Minerals in my tap water { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Links", icon:"link", toolTip:"Sort by its links", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"links", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"heart", toolTip:"Create your first custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"star", toolTip:"Create your second custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom2", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"satellite", toolTip:"Create your third custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom3", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"robot", toolTip:"Have ChatGPT sort your text-based nodes !", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"chat", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Smart Sort", icon:"robot", toolTip:"Have ChatGPT sort your text-based nodes !", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"chat", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + ] + } + static customCardTools(): Button[] { + return [ + { title: "Create", icon:"heart", toolTip:"Create your first custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Create", icon:"star", toolTip:"Create your second custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom2", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Create", icon:"satellite", toolTip:"Create your third custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom3", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Custom 1", icon: "Custom 1", width: 10, toolTip: "Set visibilty!", subMenu: CurrentUserUtils.cardGroupTools("heart"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!isThatCardGroup(0)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + { title: "Custom 2", icon: "Custom 2", width: 80, toolTip: "Set visibilty!", subMenu: CurrentUserUtils.cardGroupTools("star"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!isThatCardGroup(1)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + { title: "Custom 3", icon: "Custom 3", width: 80, toolTip: "Set visibilty!", subMenu: CurrentUserUtils.cardGroupTools("satellite"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!isThatCardGroup(2)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + ] + } - // ...customs + static cardGroupTools(icon: string): Button[] { + return [ + { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"2", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"3", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"4", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, ] } + + + static viewTools(): Button[] { return [ { title: "Snap", icon: "th", toolTip: "Show Snap Lines", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform @@ -842,6 +858,7 @@ pie title Minerals in my tap water { title: "View", icon: "View", toolTip: "View tools", subMenu: CurrentUserUtils.viewTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Stack", icon: "View", toolTip: "Stacking tools", subMenu: CurrentUserUtils.stackTools(), expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Card", icon: "Sort", toolTip: "Card sort", subMenu: CurrentUserUtils.cardTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + { title: "CustomCard", icon: "Create", toolTip: "Create custom groupings!", subMenu: CurrentUserUtils.customCardTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Web", icon: "Web", toolTip: "Web functions", subMenu: CurrentUserUtils.webTools(), expertMode: false, toolType:DocumentType.WEB, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected { title: "Video", icon: "Video", toolTip: "Video functions", subMenu: CurrentUserUtils.videoTools(), expertMode: false, toolType:DocumentType.VID, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when video is selected { title: "Image", icon: "Image", toolTip: "Image functions", subMenu: CurrentUserUtils.imageTools(), expertMode: false, toolType:DocumentType.IMG, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when image is selected diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index e96fbc161..42c82ca74 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -24,6 +24,7 @@ import { ImageField, PdfField, URLField } from '../../../fields/URLField'; import { GPTPopup } from '../pdf/GPTPopup/GPTPopup'; import { GPTPopupMode } from '../pdf/GPTPopup/GPTPopup'; import { reaction } from 'mobx'; +import { NumListCast } from '../../../fields/Doc'; @observer export class CollectionCardView extends CollectionSubView() { @@ -32,8 +33,42 @@ export class CollectionCardView extends CollectionSubView() { // documents themselves @observable hoveredNodeIndex = -1; + //index to group + @observable customGroupDictionary: Map[] = [new Map(), new Map(), new Map()]; + @computed get myChildLayoutPairs() { + let activeGroups = NumListCast(this._props.Document.visibleGroupNumbers); + let currCustom = NumCast(this._props.Document.customSortNumber); + + // console.log("Active Groups:", activeGroups); + + for (let i=0; i< activeGroups.length; i++){ + console.log("Active Groups" + activeGroups[i]) + } + // console.log("Current Custom Sort Number:", currCustom); + + if (activeGroups.length <= 0) { + return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK); + } + + if (StrCast(this._props.Document.cardSort).includes("custom")) { + return this.childLayoutPairs.filter((l, index) => { + if (l.layout.type === DocumentType.LINK) { + return false; + } + + // Get the group number for the current index from the customGroupDictionary + const groupNumber = this.customGroupDictionary[currCustom].get(index); + + // console.log(`Index: ${index}, Group Number: ${groupNumber}`); + + // Check if the group number is in the active groups + return groupNumber !== undefined && activeGroups.includes(groupNumber); + }); + } + + // Default return for non-custom cardSort or other cases, filtering out links return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK); } @@ -90,6 +125,9 @@ export class CollectionCardView extends CollectionSubView() { if (this._props.Document.customHashMap != undefined){ this.customGroupDictionary = this.getCustoms(StrListCast(this._props.Document.customHashMap)) } + // this._props.Document.visibleGroupNumbers = new List([1,2,3,4]) + + reaction( () => this._props.Document.cardSort, @@ -101,7 +139,6 @@ export class CollectionCardView extends CollectionSubView() { ); } - @observable customGroupDictionary: Map[] = [new Map(), new Map(), new Map()]; @computed get mapToField(): List { const resultList = new List(); @@ -272,7 +309,8 @@ export class CollectionCardView extends CollectionSubView() { case 'custom': return this.sort(sorted, 'custom', desc); case 'chat': - return { docs: this.sortedDocs || this.myChildLayoutPairs}; // Use the sorted docs from the observable + return this.sort(this.myChildLayoutPairs, 'gpt', BoolCast(this.layoutDoc.sortDesc)); + default: docs = this.myChildLayoutPairs; return { docs }; @@ -458,7 +496,8 @@ export class CollectionCardView extends CollectionSubView() { // const childPair = { layout: doc, data: doc }; const isHovered = this.hoveredNodeIndex === index; - const childPairIndex = this.myChildLayoutPairs.indexOf(childPair); + // const childPairIndex = this.myChildLayoutPairs.indexOf(childPair); + const childPairIndex = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK).indexOf(childPair) const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair); const calcRowIndex = this.overflowIndexCalc(realIndex); @@ -501,6 +540,8 @@ export class CollectionCardView extends CollectionSubView() { {this.displayDoc(childPair, childScreenToLocal)} {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex) : ''} + {this._props.Document.cardSort == 'chat' ? this.renderButtons(childPairIndex, childPair.layout, true) : ''} +
); }); @@ -512,38 +553,23 @@ export class CollectionCardView extends CollectionSubView() { - @action toggleButton(childPairIndex: number, buttonID: number) { - this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].set(childPairIndex, buttonID); - this._props.Document.customHashMap = this.mapToField - - // Cast(selected.Document.data, WebField, null)?.url?.href) - - //note richtext - - // StrCast(selected.Document.data, Cast(selected.Document.data, WebField, null)?.url?.href) - - - - // const - const imgurlperchance = Cast(this.childDocs[1].data, ImageField, null)?.url.href; - const perchance = this.imageUrlToBase64(imgurlperchance) - // const imgurlperchance = Cast(this.childDocs[1].data, PdfField, null)?.url.; - - - // console.log('Print Front of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text); - // console.log('Print Back of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text); - - // const perchance = StrCast(this.childDocs[0].text); - - - - // const pdf = (StrCast(this.myChildLayoutPairs[0].layout.text)); //pdf - const queryText = this.myChildLayoutPairs[0].layout.type; //everything else - - // const queryText = RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text; - - console.log(queryText ?? "sad") + @action toggleButton(childPairIndex: number, buttonID: number, isChat = false, doc?: Doc) { + if (!isChat) { + this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].set(childPairIndex, buttonID); + this._props.Document.customHashMap = this.mapToField; + } + + if (isChat && doc) { + this.gptGroups.set(doc, buttonID); + } + + // console.log(`Toggled button for childPairIndex: ${childPairIndex}, buttonID: ${buttonID}, isChat: ${isChat}`); + // console.log(`Updated customGroupDictionary:`, this.customGroupDictionary); + if (isChat && doc) { + console.log(`Updated gptGroups for doc ${doc}:`, this.gptGroups.get(doc)); + } } + async childPairStringList(): Promise { let string = ""; @@ -598,20 +624,25 @@ export class CollectionCardView extends CollectionSubView() { textToDoc = new Map() gptProccessedImages = new Set() - @action async getImageDesc(image: Doc){ - let href = (image['data'] as URLField).url.href; - let hrefParts = href.split('.'); - let hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`; - try { - let hrefBase64 = await this.imageUrlToBase64(hrefComplete); - let response = await gptImageLabel(hrefBase64); - this.textToDoc.set(response.trim(), image); - this.gptProccessedImages.add(image); - console.log(response); - return response; // Return the response from gptImageLabel - } catch (error) { - console.log("bad things have happened"); - } + @action async getImageDesc(image: Doc) { + if (this.gptProccessedImages.has(image)) { + // Return the already processed description + return Array.from(this.textToDoc.keys()).find(key => this.textToDoc.get(key) === image) || ''; + } + + let href = (image['data'] as URLField).url.href; + let hrefParts = href.split('.'); + let hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`; + try { + let hrefBase64 = await this.imageUrlToBase64(hrefComplete); + let response = await gptImageLabel(hrefBase64); + this.textToDoc.set(response.trim(), image); + this.gptProccessedImages.add(image); + console.log(response); + return response; // Return the response from gptImageLabel + } catch (error) { + console.log("bad things have happened"); + } } @@ -620,41 +651,43 @@ export class CollectionCardView extends CollectionSubView() { //a map from the text to the Doc (for everything) - @action async smartSort() { - this.isLoading = true; - console.log("loading"); + // @action async smartSort() { + // this.isLoading = true; + // console.log("loading"); - // Store the result of childPairStringList in a variable - const childPairStrings = await this.childPairStringList(); + // // Store the result of childPairStringList in a variable + // const childPairStrings = await this.childPairStringList(); - if (childPairStrings === "") { - console.log("no child pairs :("); - } else { - console.log(childPairStrings + " og list"); - let prompt = childPairStrings; + // if (childPairStrings === "") { + // console.log("no child pairs :("); + // } else { + // console.log(childPairStrings + " og list"); + // let prompt = childPairStrings; - let res = await gptAPICall(prompt, GPTCallType.SORT); - this.isLoading = false; - if (res == 'Error connecting with API.') { - // If GPT call failed - console.error('GPT call failed'); - } else if (res != null) { - console.log(res); - this.processGptOutput(res); - // Update the observable with the sorted documents - this.sortedDocs = this.sort(this.myChildLayoutPairs, 'gpt', BoolCast(this.layoutDoc.sortDesc)).docs; - } - this.isLoading = false; - } - } + // let res = await gptAPICall(prompt, GPTCallType.SORT); + // this.isLoading = false; + // if (res == 'Error connecting with API.') { + // // If GPT call failed + // console.error('GPT call failed'); + // } else if (res != null) { + // console.log(res); + // this.processGptOutput(res); + // // Update the observable with the sorted documents + // this.sortedDocs = this.sort(this.myChildLayoutPairs, 'gpt', BoolCast(this.layoutDoc.sortDesc)).docs; + // } + // this.isLoading = false; + // } + // } - gptGroups = new Map + gptGroups = new ObservableMap + @observable amGPTGroups = 0 // Method to convert the GPT-produced string into a map processGptOutput(gptOutput: string) { // Split the string into individual list items const listItems = gptOutput.split('======').filter(item => item.trim() !== ''); + this.amGPTGroups = listItems.length listItems.forEach((item, index) => { // Split the item by '~~~~~~' to get all descriptors @@ -678,14 +711,15 @@ export class CollectionCardView extends CollectionSubView() { @observable isChatPopupOpen = false; @action openChatPopup = async () => { - this.isChatPopupOpen = true; - GPTPopup.Instance.setVisible(true); - GPTPopup.Instance.setMode(GPTPopupMode.SORT); - - // Await the promise to get the string result - const sortDesc = await this.childPairStringList(); - GPTPopup.Instance.setSortDesc(sortDesc); - GPTPopup.Instance.onSortComplete = this.handleGptSortResult; + this.isChatPopupOpen = true; + GPTPopup.Instance.setVisible(true); + GPTPopup.Instance.setMode(GPTPopupMode.SORT); + + // Await the promise to get the string result + const sortDesc = await this.childPairStringList(); + GPTPopup.Instance.setCardsDoneLoading(true); // Set dataDoneLoading to true after data is loaded + GPTPopup.Instance.setSortDesc(sortDesc); + GPTPopup.Instance.onSortComplete = this.handleGptSortResult; }; @action handleGptSortResult = (sortResult: string) => { this.processGptOutput(sortResult); @@ -696,19 +730,34 @@ export class CollectionCardView extends CollectionSubView() { - renderButtons(childPairIndex: number) { + renderButtons(childPairIndex: number, doc?: Doc, isChat = false) { const buttons = []; // Array to hold the button elements - - let amButtons = 4; - - let activeButtonIndex = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(childPairIndex); - + const groupNumber = NumCast(this._props.Document.customSortNumber); + + let amButtons = 4; // Adjusted to your context + let activeButtonIndex = this.customGroupDictionary[groupNumber].get(childPairIndex); + + if (isChat && doc) { + if (this.amGPTGroups > 4){ + amButtons = this.amGPTGroups; + } + activeButtonIndex = this.gptGroups.get(doc); + } + + console.log("childPairIndex:", childPairIndex, "activeButtonIndex:", activeButtonIndex, "groupNumber:", groupNumber); + for (let i = 0; i < amButtons; i++) { - const isActive = activeButtonIndex == i; - - buttons.push(); + const isActive = activeButtonIndex === i; + console.log(`Rendering button ${i} for childPairIndex ${childPairIndex} isActive: ${isActive}`); + buttons.push( + + ); } - + const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6; return (
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 14f83beb6..496d7482c 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -22,7 +22,8 @@ import { VideoBox } from '../nodes/VideoBox'; import { WebBox } from '../nodes/WebBox'; import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; import { ImageBox } from '../nodes/ImageBox'; - +import { NumListCast } from '../../../fields/Doc'; +import { List } from '../../../fields/List'; ScriptingGlobals.add(function IsNoneSelected() { return SelectionManager.Views.length <= 0; }, 'are no document selected'); @@ -107,84 +108,146 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { -ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3'| 'chat', checkResult?: boolean, persist?: boolean, customNumber?: number) { +ScriptingGlobals.add(function showFreeform( + attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3' | 'chat' | '1' | '2' | '3' | '4', + checkResult?: boolean, + persist?: boolean, + isDoubleClick?: boolean +) { const selected = SelectionManager.Docs.lastElement(); // prettier-ignore - const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3'| 'chat', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ + const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3' | 'chat' | '1' | '2' | '3' | '4', + { + waitForRender?: boolean; + checkResult: (doc: Doc) => any; + setDoc: (doc: Doc, dv: DocumentView) => void; + }> = new Map([ ['grid', { - checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), - setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, + checkResult: (doc: Doc) => BoolCast(doc?._freeform_backgroundGrid, false), + setDoc: (doc: Doc, dv: DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, }], ['snaplines', { - checkResult: (doc:Doc) => BoolCast(doc?._freeform_snapLines, false), - setDoc: (doc:Doc, dv:DocumentView) => doc._freeform_snapLines = !doc._freeform_snapLines, + checkResult: (doc: Doc) => BoolCast(doc?._freeform_snapLines, false), + setDoc: (doc: Doc, dv: DocumentView) => doc._freeform_snapLines = !doc._freeform_snapLines, }], ['viewAll', { - checkResult: (doc:Doc) => BoolCast(doc?._freeform_fitContentsToBox, false), - setDoc: (doc:Doc,dv:DocumentView) => { + checkResult: (doc: Doc) => BoolCast(doc?._freeform_fitContentsToBox, false), + setDoc: (doc: Doc, dv: DocumentView) => { if (persist) doc._freeform_fitContentsToBox = !doc._freeform_fitContentsToBox; else if (doc._freeform_fitContentsToBox) doc._freeform_fitContentsToBox = undefined; else (dv.ComponentView as CollectionFreeFormView)?.fitContentOnce(); }, }], ['center', { - checkResult: (doc:Doc) => BoolCast(doc?._stacking_alignCenter, false), - setDoc: (doc:Doc,dv:DocumentView) => doc._stacking_alignCenter = !doc._stacking_alignCenter, + checkResult: (doc: Doc) => BoolCast(doc?._stacking_alignCenter, false), + setDoc: (doc: Doc, dv: DocumentView) => doc._stacking_alignCenter = !doc._stacking_alignCenter, }], ['clusters', { - waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire - checkResult: (doc:Doc) => BoolCast(doc?._freeform_useClusters, false), - setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_useClusters = !doc._freeform_useClusters, + waitForRender: true, + checkResult: (doc: Doc) => BoolCast(doc?._freeform_useClusters, false), + setDoc: (doc: Doc, dv: DocumentView) => doc._freeform_useClusters = !doc._freeform_useClusters, }], ['flashcards', { - checkResult: (doc:Doc) => BoolCast(Doc.UserDoc().defaultToFlashcards, false), - setDoc: (doc:Doc,dv:DocumentView) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards, + checkResult: (doc: Doc) => BoolCast(Doc.UserDoc().defaultToFlashcards, false), + setDoc: (doc: Doc, dv: DocumentView) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards, }], ['time', { - checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "time", + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "time", + setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "time", }], ['docType', { - checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "type", + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "type", + setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "type", }], ['color', { - checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "color", + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "color", + setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "color", }], - ['links', { - checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links", + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "links", + setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "links", }], - ['custom1', { - checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc, dv) => { + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 0, + setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; doc.customSortNumber = 0; + doc.visibleGroupNumbers = new List(); } - }], - + }], ['custom2', { - checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc, dv) => { + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 1, + setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; doc.customSortNumber = 1; - console.log(doc.customSortNumber + " numberrrrrrrr") - } }], - + doc.visibleGroupNumbers = new List(); + } + }], ['custom3', { - checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc, dv) => { + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 2, + setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; doc.customSortNumber = 2; - } }], + doc.visibleGroupNumbers = new List(); + } + }], ['chat', { - checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "chat", + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "chat", + setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "chat", + }], + ['1', { + checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(0), + setDoc: (doc: Doc, dv: DocumentView) => { + let list = NumListCast(doc.visibleGroupNumbers); + if (list.includes(0)) { + let newList = new List(list.filter(d => d !== 0)); + doc.visibleGroupNumbers = newList; + } else { + list.push(0); + doc.visibleGroupNumbers = new List(list); + } + } }], - ]); + ['2', { + checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(1), + setDoc: (doc: Doc, dv: DocumentView) => { + let list = NumListCast(doc.visibleGroupNumbers); + if (list.includes(1)) { + let newList = new List(list.filter(d => d !== 1)); + doc.visibleGroupNumbers = newList; + } else { + list.push(1); + doc.visibleGroupNumbers = new List(list); + } + } + }], + ['3', { + checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(2), + setDoc: (doc: Doc, dv: DocumentView) => { + let list = NumListCast(doc.visibleGroupNumbers); + if (list.includes(2)) { + let newList = new List(list.filter(d => d !== 2)); + doc.visibleGroupNumbers = newList; + } else { + list.push(2); + doc.visibleGroupNumbers = new List(list); + } + } + }], + ['4', { + checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(3), + setDoc: (doc: Doc, dv: DocumentView) => { + let list = NumListCast(doc.visibleGroupNumbers); + if (list.includes(3)) { + let newList = new List(list.filter(d => d !== 3)); + doc.visibleGroupNumbers = newList; + } else { + list.push(3); + doc.visibleGroupNumbers = new List(list); + } + } + }], + ]); if (checkResult) { return map.get(attr)?.checkResult(selected); @@ -194,6 +257,14 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid setTimeout(() => batch.end(), 100); }); + +ScriptingGlobals.add(function isThatCardGroup(n: number){ + const canvas = SelectionManager.Docs.lastElement(); + return canvas.customSortNumber == n + + +}) + // ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) { // // const editorView = RichTextMenu.Instance?.TextView?.EditorView; // const selected = SelectionManager.Docs.lastElement(); diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss index 4425cf158..551c8e5af 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.scss +++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss @@ -55,10 +55,10 @@ $highlightedText: #82e0ff; overflow-y: auto; } - .btns-wrapper { + .btns-wrapper-gpt { height: 50px; display: flex; - justify-content: space-between; + justify-content: center; align-items: center; transform: translateY(30px); @@ -76,6 +76,8 @@ $highlightedText: #82e0ff; display: flex; align-items: center; } + + } button { diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index faf66af85..d94be1860 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -154,6 +154,13 @@ export class GPTPopup extends ObservableReactComponent { } @observable onSortComplete?: (sortResult: string) => void; + @observable cardsDoneLoading = false; + + @action setCardsDoneLoading(done: boolean) { + console.log(done + "HI HIHI") + this.cardsDoneLoading = done; + } + @@ -169,12 +176,14 @@ export class GPTPopup extends ObservableReactComponent { this.setSortDone(false); try { - const res = await gptAPICall(this.sortPrompt + this.sortDesc, GPTCallType.SORT); + + const res = await gptAPICall(this.sortDesc, GPTCallType.SORT); this.setSortText(res || 'Something went wrong :('); // Trigger the callback with the result if (this.onSortComplete) { this.onSortComplete(res || 'Something went wrong :('); + console.log(res) } } catch (err) { console.error(err); @@ -313,52 +322,63 @@ export class GPTPopup extends ObservableReactComponent { {this.heading("SORTING")} {this.loading ? (
-
- - Loading... -
-
- ) : !this.sortDone && ( -
- { - if (e.key === 'Enter') { - this.generateSort(); - } - e.stopPropagation(); - }} - type="text" - placeholder="Enter sorting instructions..." - id="search-input" - className="searchBox-input" - style={{ width: "100%" }} - /> +
+ + Loading...
- )} +
+ ) : ( + <> + {!this.cardsDoneLoading ? ( +
+
+ + Reading Cards... +
+
+ ) : ( + !this.sortDone && ( +
+
+ ) + )} - {this.sortDone && ( -
-
- -

{this.text== "Something went wrong :(" ? "Something went wrong :(" : "Sorting done! Feel free to move things around / regenerate :) !"}

- - - this.setSortDone(false)} - icon={} - color={StrCast(Doc.UserDoc().userVariantColor)} - /> - -
-
+ {this.sortDone && ( +
+
+

+ {this.text === "Something went wrong :(" ? + "Something went wrong :(" : + "Sorting done! Feel free to move things around / regenerate :) !"} +

+ this.setSortDone(false)} + icon={} + color={StrCast(Doc.UserDoc().userVariantColor)} + /> +
+
+ )} + )}
); + -- cgit v1.2.3-70-g09d2 From 38d2d361aa723917b5721e2635933d2d8b9f483a Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 18 May 2024 22:57:22 -0400 Subject: updated cardDeckView code --- src/client/util/CurrentUserUtils.ts | 59 +- .../views/collections/CollectionCardDeckView.scss | 25 +- .../views/collections/CollectionCardDeckView.tsx | 859 ++++++++------------- src/client/views/global/globalScripts.ts | 105 +-- 4 files changed, 373 insertions(+), 675 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 89f1375bc..f2a7f953d 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -715,48 +715,35 @@ pie title Minerals in my tap water ] } static cardTools(): Button[] { - - - // if (view != undefined){ - // for (let i=0; i< NumCast(view.layoutDoc.customSortCount); i++){ - // customs.push( - // { title: "Custom " + i, icon:"robot", toolTip:"Custom sort option " + i, btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}} - // ) - - // } - // } return [ - { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Smart Sort", icon:"robot", toolTip:"Have ChatGPT sort your text-based nodes !", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"chat", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType",funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + ] + } + static labelTools(): Button[] { + return [ + { title: "AI", icon:"robot", toolTip:"Add AI labels", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"chat", funcs: {hidden:`showFreeform ("chat", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "AIs", icon:"AI Sort", toolTip:"Filter AI labels", subMenu: this.cardGroupTools("chat"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("chat", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, + { title: "Like", icon:"heart", toolTip:"Add Like labels", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"like", funcs: {hidden:`showFreeform ("like", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Likes", icon:"Likes", toolTip:"Filter likes", width: 10, subMenu: this.cardGroupTools("heart"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("like", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, + { title: "Star", icon:"star", toolTip:"Add Star labels", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"star", funcs: {hidden:`showFreeform ("star", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Stars", icon:"Stars", toolTip:"Filter stars", width: 80, subMenu: this.cardGroupTools("star"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("star", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, + { title: "Idea", icon:"satellite", toolTip:"Add Idea labels", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"idea", funcs: {hidden:`showFreeform ("idea", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Ideas", icon:"Ideas", toolTip:"Filter ideas", width: 80, subMenu: this.cardGroupTools("satellite"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("idea", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, ] } - - static customCardTools(): Button[] { - return [ - { title: "Create", icon:"heart", toolTip:"Create your first custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"star", toolTip:"Create your second custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom2", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"satellite", toolTip:"Create your third custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom3", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Custom 1", icon: "Custom", width: 10, toolTip: "Set visibilty!", subMenu: CurrentUserUtils.cardGroupTools("heart"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!showFreeform("custom1", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available - { title: "Custom 2", icon: "Custom", width: 80, toolTip: "Set visibilty!", subMenu: CurrentUserUtils.cardGroupTools("star"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!showFreeform("custom2", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available - { title: "Custom 3", icon: "Custom", width: 80, toolTip: "Set visibilty!", subMenu: CurrentUserUtils.cardGroupTools("satellite"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!showFreeform("custom3", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available - - ] - } - static cardGroupTools(icon: string): Button[] { return [ - { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"2", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"3", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"4", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - + { title: "1", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"1", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "2", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"2", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "3", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"3", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "4", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"4", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "5", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"5", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "6", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"6", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "7", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"7", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, ] } - - - static viewTools(): Button[] { return [ { title: "Snap", icon: "th", toolTip: "Show Snap Lines", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform @@ -858,7 +845,7 @@ pie title Minerals in my tap water { title: "View", icon: "View", toolTip: "View tools", subMenu: CurrentUserUtils.viewTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Stack", icon: "View", toolTip: "Stacking tools", subMenu: CurrentUserUtils.stackTools(), expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Card", icon: "Sort", toolTip: "Card sort", subMenu: CurrentUserUtils.cardTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available - { title: "CustomCard", icon: "Create", toolTip: "Create custom groupings!", subMenu: CurrentUserUtils.customCardTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + { title: "Label", icon: "Label", toolTip: "Assign card labels", subMenu: CurrentUserUtils.labelTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Web", icon: "Web", toolTip: "Web functions", subMenu: CurrentUserUtils.webTools(), expertMode: false, toolType:DocumentType.WEB, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected { title: "Video", icon: "Video", toolTip: "Video functions", subMenu: CurrentUserUtils.videoTools(), expertMode: false, toolType:DocumentType.VID, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when video is selected { title: "Image", icon: "Image", toolTip: "Image functions", subMenu: CurrentUserUtils.imageTools(), expertMode: false, toolType:DocumentType.IMG, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when image is selected diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index babc604b5..a089b248d 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -12,6 +12,7 @@ display: grid; grid-template-columns: repeat(10, 1fr); // width: 100%; + transform-origin: top left; position: absolute; align-items: center; @@ -22,15 +23,15 @@ } .card-button-container { - display: flex; + display: flex; padding: 3px; - // width: 300px; + // width: 300px; background-color: rgb(218, 218, 218); /* Background color of the container */ - border-radius: 50px; /* Rounds the corners of the container */ - transform: translateY(-50px); + border-radius: 50px; /* Rounds the corners of the container */ + transform: translateY(75px); // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */ - align-items: center; /* Centers buttons vertically */ - justify-content: start;/* Centers buttons horizontally */ + align-items: center; /* Centers buttons vertically */ + justify-content: start; /* Centers buttons horizontally */ } button { @@ -39,11 +40,11 @@ button { border-radius: 50%; background-color: $dark-gray; // border-color: $medium-blue; - margin: 5px; // transform: translateY(-50px); + margin: 5px; // transform: translateY(-50px); } // button:hover { -// transform: translateY(-50px); +// transform: translateY(-50px); // } // .card-wrapper::after { @@ -62,13 +63,19 @@ button { // align-items: center; // transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); - // } +.card-item-inactive, .card-item-active, .card-item { position: relative; transition: transform 0.5s ease-in-out; + display: flex; + flex-direction: column; +} + +.card-item-inactive { + opacity: 0.5; } .card-item-active { diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index b2a94c3c6..9e5668ffa 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -1,182 +1,173 @@ -import { ObservableMap, action, computed, makeObservable, observable } from 'mobx'; +import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils'; -import { Doc, DocListCast, Field, StrListCast } from '../../../fields/Doc'; +import { DashColor, Utils, numberRange, returnFalse, returnZero } from '../../../Utils'; +import { Doc, NumListCast } from '../../../fields/Doc'; +import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; -import { NumCast, ScriptCast, StrCast, BoolCast, DocCast, RTFCast, Cast} from '../../../fields/Types'; +import { BoolCast, Cast, DateCast, NumCast, RTFCast, ScriptCast, StrCast } from '../../../fields/Types'; +import { URLField } from '../../../fields/URLField'; +import { gptImageLabel } from '../../apis/gpt/GPT'; +import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; +import { SnappingManager } from '../../util/SnappingManager'; +import { Transform } from '../../util/Transform'; +import { undoable } from '../../util/UndoManager'; import { StyleProp } from '../StyleProvider'; import { DocumentView } from '../nodes/DocumentView'; +import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup'; import './CollectionCardDeckView.scss'; import { CollectionSubView } from './CollectionSubView'; -import { Transform } from '../../util/Transform'; -import { LinkManager } from '../../util/LinkManager'; -// import Card from 'react-bootstrap/Card'; -import { DocumentType } from '../../documents/DocumentTypes'; -import { forEach } from 'lodash'; -import { SnappingManager } from '../../util/SnappingManager'; -import { List } from '../../../fields/List'; -import { gptAPICall, gptImageLabel } from '../../apis/gpt/GPT'; -import { GPTCallType } from '../../apis/gpt/GPT'; -import { ImageField, PdfField, URLField } from '../../../fields/URLField'; -import { GPTPopup } from '../pdf/GPTPopup/GPTPopup'; -import { GPTPopupMode } from '../pdf/GPTPopup/GPTPopup'; -import { reaction } from 'mobx'; -import { NumListCast } from '../../../fields/Doc'; -import { undoBatch } from '../../util/UndoManager'; -import { CalendarContainer } from 'react-datepicker'; + +enum cardSortings { + Time = 'time', + Type = 'type', + Color = 'color', + Custom = 'custom', + None = '', +} @observer export class CollectionCardView extends CollectionSubView() { + private _dropDisposer?: DragManager.DragDropDisposer; + private _childDocumentWidth = 600; // target width of a Doc... + private _disposers: { [key: string]: IReactionDisposer } = {}; + private _textToDoc = new Map(); - @observable hoveredNodeIndex = -1; - - //key is the index in the child pair list, value is the id# for the group its in - @observable customGroupDictionary: Map[] = [new Map(), new Map(), new Map()]; - - /** - * The child documents to be rendered-- either all of them except the Links or the docs in the currently active - * custom group - */ - @computed get myChildLayoutPairs() { - let activeGroups = NumListCast(this._props.Document.visibleGroupNumbers); - let currCustom = NumCast(this._props.Document.customSortNumber); - - if (activeGroups.length <= 0) { - return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK); - } - - if (StrCast(this._props.Document.cardSort).includes("custom")) { - return this.childLayoutPairs.filter((l, index) => { - if (l.layout.type === DocumentType.LINK) { - return false; - } - // Get the group number for the current index from the customGroupDictionary - const groupNumber = this.getButtonGroup(currCustom, l.layout) - // Check if the group number is in the active groups - return groupNumber !== undefined && activeGroups.includes(groupNumber); - }); - } + @observable _forceChildXf = false; + @observable _isLoading = false; + @observable _hoveredNodeIndex = -1; + @observable _docRefs = new ObservableMap(); + @observable _maxRowCount = 10; - // Default return for non-custom cardSort or other cases, filtering out links - return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK); + static getButtonGroup(groupFieldKey: 'chat' | 'star' | 'idea' | 'like', doc: Doc): number | undefined { + return Cast(doc[groupFieldKey], 'number', null); } + static imageUrlToBase64 = async (imageUrl: string): Promise => { + try { + const response = await fetch(imageUrl); + const blob = await response.blob(); - @action - setHoveredNodeIndex = (index: number) => { - if (!this.isSelected(index)) { - this.hoveredNodeIndex = index; - } - }; - /** - * Translates the hovered node to the center of the screen - * @param index - * @returns - */ - translateHover = (index: number): number => { - if (this.hoveredNodeIndex == index && !this.isSelected(index)) { - return -50; + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(blob); + reader.onloadend = () => resolve(reader.result as string); + reader.onerror = error => reject(error); + }); + } catch (error) { + console.error('Error:', error); + throw error; } - return 0; }; - @action - setSelectedNodeIndex = (index: number) => { - const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - if (SelectionManager.IsSelected(docs[index])) { - this.setSelectedNodeIndex(index); + protected createDashEventsTarget = (ele: HTMLDivElement | null) => { + this._dropDisposer?.(); + if (ele) { + this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc); } }; - isSelected = (index: number): boolean => { - const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - return SelectionManager.IsSelected(docs[index]); - }; - - /** - * Returns all the documents except the one that's currently selected - */ - inactiveDocs = () => { - const docs = this.myChildLayoutPairs; - return docs.filter(d => !SelectionManager.IsSelected(d.layout)); - }; - - middleIndex = Math.floor(this.inactiveDocs().length / 2); - constructor(props: any) { super(props); makeObservable(this); - const pairs = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK); + } - //gets the values from the last time the view was loaded and puts them into their respective places in the hashmaps(s) - for (let i=0; i< pairs.length; i++){ - if (pairs[i].layout.custom1Group != undefined){ - this.customGroupDictionary[0].set(i, NumCast(pairs[i].layout.custom1Group)) - } + componentDidMount(): void { + this._disposers.sort = reaction( + () => ({ cardSort: this.cardSort, field: this.customSortField }), + ({ cardSort, field }) => (cardSort === cardSortings.Custom && field === 'chat' ? this.openChatPopup() : GPTPopup.Instance.setVisible(false)) + ); + } - if (pairs[i].layout.custom2Group != undefined){ - this.customGroupDictionary[1].set(i, NumCast(pairs[i].layout.custom2Group)) - } + componentWillUnmount() { + Object.keys(this._disposers).forEach(key => this._disposers[key]?.()); + this._dropDisposer?.(); + } - if (pairs[i].layout.custom3Group != undefined){ - this.customGroupDictionary[2].set(i, NumCast(pairs[i].layout.custom3Group)) - } + @computed get customSortField() { + return StrCast(this.Document.customSortField) as any as 'chat' | 'star' | 'idea' | 'like'; + } - if (pairs[i].layout.chatGroup != undefined){ - this.gptGroups.set(pairs[i].layout, NumCast(pairs[i].layout.chatGroup)) - this.amGPTGroups = NumCast(this._props.Document.chatAmGroups) + @computed get cardSort() { + return StrCast(this.Document.cardSort) as any as cardSortings; + } + /** + * how much to scale down the contents of the view so that everything will fit + */ + @computed get fitContentScale() { + const length = Math.min(this.childDocsWithoutLinks.length, this._maxRowCount); + return (this._childDocumentWidth * length) / this._props.PanelWidth(); + } - } + @computed get translateWrapperX() { + let translate = 0; + + if (this.inactiveDocs().length !== this.childDocsWithoutLinks.length && this.inactiveDocs().length < 10) { + translate += this.panelWidth() / 2; } - reaction( - () => this._props.Document.cardSort, - (cardSort) => { - if (cardSort === 'chat') { - this.openChatPopup(); - } - } - ); + return translate; } - private _dropDisposer?: DragManager.DragDropDisposer; + /** + * The child documents to be rendered-- either all of them except the Links or the docs in the currently active + * custom group + */ + @computed get childDocsWithoutLinks() { + const regularDocs = this.childDocs.filter(l => l.type !== DocumentType.LINK); + const activeGroups = NumListCast(this.Document.visibleGroupNumbers); + + if (activeGroups.length > 0 && this.cardSort === cardSortings.Custom) { + return regularDocs.filter(doc => { + // Get the group number for the current index + const groupNumber = CollectionCardView.getButtonGroup(this.customSortField, doc); + // Check if the group number is in the active groups + return groupNumber !== undefined && activeGroups.includes(groupNumber); + }); + } - componentWillUnmount() { - this._dropDisposer?.(); + // Default return for non-custom cardSort or other cases, filtering out links + return regularDocs; } - protected createDashEventsTarget = (ele: HTMLDivElement | null) => { - this._dropDisposer?.(); - if (ele) { - this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc); + /** + * Determines the order in which the cards will be rendered depending on the current sort type + */ + @computed get sortedDocs() { + return this.sort(this.childDocsWithoutLinks, this.cardSort, BoolCast(this.layoutDoc.sortDesc)); + } + + @action + setHoveredNodeIndex = (index: number) => { + if (!SelectionManager.IsSelected(this.childDocs[index])) { + this._hoveredNodeIndex = index; } }; + /** + * Translates the hovered node to the center of the screen + * @param index + * @returns + */ + translateHover = (index: number) => (this._hoveredNodeIndex === index && !SelectionManager.IsSelected(this.childDocs[index]) ? -50 : 0); + + isSelected = (index: number) => SelectionManager.IsSelected(this.childDocs[index]); - childDocumentWidth = 600; // target width of a Doc... /** - * how much to scale down the contents of the view so that everything will fit + * Returns all the documents except the one that's currently selected */ - @computed get fitContentScale() { - if (this.myChildLayoutPairs.length < this.maxRowCount) { - length = this.myChildLayoutPairs.length; - } else { - length = this.maxRowCount; - } - return (this.childDocumentWidth * length) / this._props.PanelWidth(); - } + inactiveDocs = () => this.childDocsWithoutLinks.filter(d => !SelectionManager.IsSelected(d)); - panelWidth = () => this.childDocumentWidth; - panelHeight = (layout: Doc) => () => (2 * (this.panelWidth() * NumCast(layout._height))) / NumCast(layout._width); + panelWidth = () => this._childDocumentWidth; + panelHeight = (layout: Doc) => () => (this.panelWidth() * NumCast(layout._height)) / NumCast(layout._width); onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); isChildContentActive = () => (this.isContentActive() ? true : false); /** * Returns the degree to rotate a card dependind on the amount of cards in their row and their index in said row - * @param amCards - * @param index - * @returns + * @param amCards + * @param index + * @returns */ rotate = (amCards: number, index: number) => { const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); @@ -184,7 +175,8 @@ export class CollectionCardView extends CollectionSubView() { if (amCards % 2 == 0 && possRotate == 0) { return possRotate + Math.abs(-30 + (index - 1) * (30 / (amCards / 2))); - } else if (amCards % 2 == 0 && index > (amCards + 1) / 2) { + } + if (amCards % 2 == 0 && index > (amCards + 1) / 2) { return possRotate + stepMag; } @@ -197,26 +189,25 @@ export class CollectionCardView extends CollectionSubView() { const evenOdd = amCards % 2; const apex = (amCards - evenOdd) / 2; const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25); - let rowOffset = 0; - if (realIndex > this.maxRowCount - 1) { - rowOffset = 400 * ((realIndex - (realIndex % this.maxRowCount)) / this.maxRowCount); + let rowOffset = 0; + if (realIndex > this._maxRowCount - 1) { + rowOffset = 400 * ((realIndex - (realIndex % this._maxRowCount)) / this._maxRowCount); } if (evenOdd == 1 || index < apex - 1) { return Math.abs(stepMag * (apex - index)) - rowOffset; - } else { - if (index == apex || index == apex - 1) { - return 0 - rowOffset; - } - - return Math.abs(stepMag * (apex - index - 1)) - rowOffset; } + if (index == apex || index == apex - 1) { + return 0 - rowOffset; + } + + return Math.abs(stepMag * (apex - index - 1)) - rowOffset; }; /** * Translates the selected node to the middle fo the screen - * @param index - * @returns + * @param index + * @returns */ translateSelected = (index: number): number => { // if (this.isSelected(index)) { @@ -234,126 +225,46 @@ export class CollectionCardView extends CollectionSubView() { return translation; }; - /** - * Determines the order in which the cards will be rendered depending on the current sort type - */ - @computed get sortedDocsType() { - const desc = BoolCast(this.layoutDoc.sortDesc); - let sorted = []; - let docs = []; - - for (let i = 0; i < this.myChildLayoutPairs.length; i++) { - //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list - sorted[i] = this.myChildLayoutPairs[i]; - } - - switch (this._props.Document.cardSort) { - case 'type': - // Copy and sort documents by type - return this.sort(sorted, 'type', desc); - case 'color': - return this.sort(sorted, 'color', desc); - case 'custom': - return this.sort(sorted, 'custom', desc); - case 'chat': - return this.sort(this.myChildLayoutPairs, 'gpt', BoolCast(this.layoutDoc.sortDesc)); - - default: - docs = this.myChildLayoutPairs; - return { docs }; - } - } - /** - * Converts a hex # to its hsv color value - * @param hex - * @returns - */ - hexToHsv = (hex: string): [number, number, number] => { - if (!hex) return [0, 0, 0]; // Default to black if hex is not defined - const r = parseInt(hex.slice(1, 3), 16) / 255; - const g = parseInt(hex.slice(3, 5), 16) / 255; - const b = parseInt(hex.slice(5, 7), 16) / 255; - const max = Math.max(r, g, b), - min = Math.min(r, g, b); - const d = max - min; - let h: number; - const s = max === 0 ? 0 : d / max; - const v = max; - - switch (max) { - case min: - h = 0; - break; - case r: - h = (g - b) / d + (g < b ? 6 : 0); - break; - case g: - h = (b - r) / d + 2; - break; - case b: - h = (r - g) / d + 4; - break; - default: - h = 0; - break; - } - h /= 6; - return [h, s, v]; - }; /** * Called in the sortedDocsType method. Compares the cards' value in regards to the desired sort type-- earlier cards are move to the * front, latter cards to the back - * @param docs - * @param sortType - * @param isDesc - * @returns + * @param docs + * @param sortType + * @param isDesc + * @returns */ - sort = (docs: { layout: Doc; data: Doc }[], sortType: string, isDesc: boolean) => { + sort = (docs: Doc[], sortType: cardSortings, isDesc: boolean) => { + if (sortType === cardSortings.None) return docs; docs.sort((docA, docB) => { - let typeA; - let typeB; - - switch (sortType) { - case 'color': - typeA = this.hexToHsv(StrCast(docA.layout.backgroundColor)) ?? ''; // If docA.type is undefined, use an empty string - typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string - break; - - case 'custom': - typeA = this.getButtonGroup(NumCast(this._props.Document.customSortNumber), docA.layout) ?? '9999' - typeB = this.getButtonGroup(NumCast(this._props.Document.customSortNumber), docB.layout) ?? '9999' - break; - - case 'gpt': - typeA = this.getButtonGroup(99999, docA.layout, true) ?? '9999'; - typeB = this.getButtonGroup(99999, docB.layout, true) ?? '9999'; - break; - - default: - typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string - typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string - break; - } - - // Perform a basic string comparison if types are strings - let out = 0; - if (typeA < typeB) out = -1; - if (typeA > typeB) out = 1; - if (isDesc) out *= -1; // Reverse the sort order if descending is true - return out; + const [typeA, typeB] = (() => { + switch (sortType) { + case cardSortings.Time: + return [DateCast(docA.author_date)?.date ?? Date.now(), + DateCast(docB.author_date)?.date ?? Date.now()]; + case cardSortings.Color: + return [DashColor(StrCast(docA.backgroundColor)).hsv().toString(), // If docA.type is undefined, use an empty string + DashColor(StrCast(docB.backgroundColor)).hsv().toString()]; // If docB.type is undefined, use an empty string + case cardSortings.Custom: + return [CollectionCardView.getButtonGroup(this.customSortField, docA)??0, + CollectionCardView.getButtonGroup(this.customSortField, docB)??0]; + default: return [StrCast(docA.type), // If docA.type is undefined, use an empty string + StrCast(docB.type)]; // If docB.type is undefined, use an empty string + } // prettier-ignore + })(); + + const out = typeA < typeB ? -1 : typeA > typeB ? 1 : 0; + return isDesc ? -out : out; // Reverse the sort order if descending is true }); - return { docs }; + return docs; }; - - displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { + displayDoc = (doc: Doc, screenToLocalTransform: () => Transform) => { return ( r?.ContentDiv && this.docRefs.set(childPair.layout, r))} - Document={childPair.layout} - TemplateDataDocument={childPair.data} + ref={action((r: DocumentView) => r?.ContentDiv && this._docRefs.set(doc, r))} + Document={doc} NativeWidth={returnZero} NativeHeight={returnZero} layout_fitWidth={returnFalse} @@ -365,382 +276,219 @@ export class CollectionCardView extends CollectionSubView() { isContentActive={this.isChildContentActive} isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} PanelWidth={this.panelWidth} - PanelHeight={this.panelHeight(childPair.layout)} + PanelHeight={this.panelHeight(doc)} /> ); }; - @observable docRefs = new ObservableMap(); - - @observable maxRowCount = 10; - /** * Determines how many cards are in the row of a card at a specific index - * @param index - * @returns + * @param index + * @returns */ - overflowAmCardsCalc(index: number) { - if (this.inactiveDocs().length < this.maxRowCount) { + overflowAmCardsCalc = (index: number) => { + if (this.inactiveDocs().length < this._maxRowCount) { return this.inactiveDocs().length; } // 13 - 3 = 10 const totalCards = this.inactiveDocs().length; // if 9 or less if (index < totalCards - (totalCards % 10)) { - return this.maxRowCount; + return this._maxRowCount; } //(3) return totalCards % 10; - } + }; /** * Determines the index a card is in in a row - * @param realIndex - * @returns + * @param realIndex + * @returns */ - overflowIndexCalc(realIndex: number) { - if (realIndex < 10) { - return realIndex; - } - - return realIndex % 10; - } + overflowIndexCalc = (realIndex: number) => realIndex % 10; /** * Translates the cards in the second rows and beyond over to the right - * @param realIndex - * @param calcIndex - * @param calcRowCards - * @returns + * @param realIndex + * @param calcIndex + * @param calcRowCards + * @returns */ - translateOverflowX(realIndex: number, calcIndex: number, calcRowCards: number) { - - if (realIndex < this.maxRowCount) { - return 0; - } + translateOverflowX = (realIndex: number, calcRowCards: number) => (realIndex < this._maxRowCount ? 0 : (10 - calcRowCards) * (this.panelWidth() / 2)); - return (10 - calcRowCards) * (this.panelWidth() / 2); - } /** * Determines how far to translate a card in the y direction depending on its index, whether or not its being hovered, or if it's selected - * @param isHovered - * @param isSelected - * @param realIndex - * @param amCards - * @param calcRowIndex - * @returns + * @param isHovered + * @param isSelected + * @param realIndex + * @param amCards + * @param calcRowIndex + * @returns */ - calculateTranslateY(isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) { - let trans = 0; - if (isHovered) { - trans += this.translateHover(realIndex); - } - - trans += this.translateY(amCards, calcRowIndex, realIndex); - if (isSelected) { - trans = 50 * this.fitContentScale; - } - return trans; - } - - @observable _forceChildXf = false; + calculateTranslateY = (isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) => { + if (isSelected) return 50 * this.fitContentScale; + const trans = isHovered ? this.translateHover(realIndex) : 0; + return trans + this.translateY(amCards, calcRowIndex, realIndex); + }; /** - * Actually renders all the cards + * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt + * @param childPairIndex + * @param buttonID + * @param doc */ - @computed get contentSorted() { - const sortedDocs = this.sortedDocsType.docs; - // Map sorted documents to their rendered components - return sortedDocs.map((childPair, index) => { - - const isHovered = this.hoveredNodeIndex === index; - const childPairIndex = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK).indexOf(childPair) - const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair); - const calcRowIndex = this.overflowIndexCalc(realIndex); - - const amCards = this.overflowAmCardsCalc(realIndex); - - const isSelected = SelectionManager.IsSelected(childPair.layout); - - const childScreenToLocal = () => { - this._forceChildXf; - const dref = this.docRefs.get(childPair.layout); - const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv); - return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0); - }; - - return ( -
{ - SnappingManager.SetIsResizing(this.Document); - setTimeout( - action(() => { - SnappingManager.SetIsResizing(undefined); - this._forceChildXf = !this._forceChildXf; - }), - 700 - ); - }} - style={{ - width: this.panelWidth(), - height: this.panelHeight(childPair.layout)(), - transform: ` - translateY(${this.calculateTranslateY(isHovered, isSelected, realIndex, amCards, calcRowIndex)}px) - translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, calcRowIndex, amCards)}px) - rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) - scale(${isSelected ? 1.25 : 1}) - `, - }} - onMouseEnter={() => this.setHoveredNodeIndex(index)}> - {this.displayDoc(childPair, childScreenToLocal)} - - {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex, childPair.layout, false) : ''} - {this._props.Document.cardSort == 'chat' ? this.renderButtons(childPairIndex, childPair.layout, true) : ''} - -
- ); - }); - } + toggleButton = undoable((buttonID: number, doc: Doc) => this.customSortField && (doc[this.customSortField] = buttonID), 'toggle custom button'); /** - * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt - * @param childPairIndex - * @param buttonID - * @param isChat - * @param doc - */ - - @undoBatch - @action toggleButton(childPairIndex: number, buttonID: number, isChat = false, doc: Doc) { - if (!isChat) { - const sortNumber = NumCast(this._props.Document.customSortNumber) - this.customGroupDictionary[sortNumber].set(childPairIndex, buttonID) - switch (sortNumber){ - case 0: - doc.custom1Group = buttonID - break - case 1: - doc.custom2Group = buttonID - break - case 2: - doc.custom3Group = buttonID - break - default: - break - } - } - - if (isChat && doc) { - this.gptGroups.set(doc, buttonID); - doc.chatGroup = buttonID - } - } - - /** - * A list of the text content of all the child docs. RTF documents will have just their text and pdf documents will have the first 50 words. + * A list of the text content of all the child docs. RTF documents will have just their text and pdf documents will have the first 50 words. * Image documents are converted to bse64 and gpt generates a description for them. all other documents use their title. This string is - * inputted into the gpt prompt to sort everything together - * @returns + * inputted into the gpt prompt to sort everything together + * @returns */ - async childPairStringList(): Promise { - let string = ""; - for (let i = 0; i < this.childDocs.length; i++) { - switch (this.childDocs[i].type) { - case DocumentType.IMG: - string += `======${await this.getImageDesc(this.childDocs[i])}======`; - break; - - case DocumentType.PDF: - let pdfText = StrCast(this.childDocs[i].text); - let words = pdfText.split(/\s+/); - let first50Words = words.slice(0, 50); - string += `======${first50Words.join(' ')}======`; - - this.textToDoc.set(first50Words.join(' ').trim(), this.childDocs[i]); - break; - - case DocumentType.RTF: - let rtfText = StrCast((RTFCast(this.childDocs[i].text)).Text); - string += `======${StrCast((RTFCast(this.childDocs[i].text)).Text)}======`; - this.textToDoc.set(rtfText.trim(), this.childDocs[i]); - break; - - default: - string += `======${StrCast(this.childDocs[i].title)}======`; - this.textToDoc.set(StrCast(this.childDocs[i].title).trim(), this.childDocs[i]); - } - } - return string; - } - - @observable isLoading = false - - - imageUrlToBase64 = async (imageUrl: string): Promise => { - try { - const response = await fetch(imageUrl); - const blob = await response.blob(); - - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.readAsDataURL(blob); - reader.onloadend = () => resolve(reader.result as string); - reader.onerror = error => reject(error); - }); - } catch (error) { - console.error('Error:', error); - throw error; - } + childPairStringList = () => { + const docToText = (doc: Doc) => { + switch (doc.type) { + case DocumentType.PDF: const words = StrCast(doc.text).split(/\s+/); + return words.slice(0, 50).join(' '); // first 50 words of pdf text + case DocumentType.IMG: return this.getImageDesc(doc); + case DocumentType.RTF: return StrCast(RTFCast(doc.text).Text); + default: return StrCast(doc.title); + } // prettier-ignore + }; + const docTextPromises = this.childDocsWithoutLinks.map(async doc => { + const docText = (await docToText(doc)) ?? ''; + this._textToDoc.set(docText.trim(), doc); + return `======${docText.replace(/\n/g, ' ').trim()}======`; + }); + return Promise.all(docTextPromises); }; - textToDoc = new Map() - gptProccessedImages = new Set() - /** * Calls the gpt API to generate descriptions for the images in the view - * @param image - * @returns + * @param image + * @returns */ - @action async getImageDesc(image: Doc) { - if (this.gptProccessedImages.has(image)) { - // Return the already processed description - return Array.from(this.textToDoc.keys()).find(key => this.textToDoc.get(key) === image) || ''; - } - - let href = (image['data'] as URLField).url.href; - let hrefParts = href.split('.'); - let hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`; + getImageDesc = async (image: Doc) => { + if (StrCast(image.description)) return StrCast(image.description); // Return existing description + const href = (image.data as URLField).url.href; + const hrefParts = href.split('.'); + const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`; try { - let hrefBase64 = await this.imageUrlToBase64(hrefComplete); - let response = await gptImageLabel(hrefBase64); - this.textToDoc.set(response.trim(), image); - this.gptProccessedImages.add(image); - console.log(response); + const hrefBase64 = await CollectionCardView.imageUrlToBase64(hrefComplete); + const response = await gptImageLabel(hrefBase64); + image[DocData].description = response.trim(); return response; // Return the response from gptImageLabel } catch (error) { - console.log("bad things have happened"); + console.log('bad things have happened'); } - } + return ''; + }; - //child doc to its group determind by gpt - gptGroups = new ObservableMap - @observable amGPTGroups = 0 - /** * Converts the gpt output into a hashmap that can be used for sorting. lists are seperated by ==== while elements within the list are seperated by ~~~~~~ - * @param gptOutput + * @param gptOutput */ - processGptOutput(gptOutput: string) { - + processGptOutput = (gptOutput: string) => { // Split the string into individual list items const listItems = gptOutput.split('======').filter(item => item.trim() !== ''); - this.amGPTGroups = listItems.length - this._props.Document.chatAmGroups = this.amGPTGroups - listItems.forEach((item, index) => { // Split the item by '~~~~~~' to get all descriptors const parts = item.split('~~~~~~').map(part => part.trim()); parts.forEach(part => { - console.log(part + "part") // Find the corresponding Doc in the textToDoc map - if (this.textToDoc.has(part)) { - const doc = this.textToDoc.get(part); - if (doc) { - this.gptGroups.set(doc, index); - doc.chatGroup = index - } + const doc = this._textToDoc.get(part); + if (doc) { + doc.chat = index; } }); }); - } - - @observable isChatPopupOpen = false; + }; /** - * Opens up the chat popup and starts the process for smart sorting. + * Opens up the chat popup and starts the process for smart sorting. */ - @action openChatPopup = async () => { - this.isChatPopupOpen = true; + openChatPopup = async () => { GPTPopup.Instance.setVisible(true); GPTPopup.Instance.setMode(GPTPopupMode.SORT); - - // Await the promise to get the string result - const sortDesc = await this.childPairStringList(); + const sortDesc = await this.childPairStringList(); // Await the promise to get the string result GPTPopup.Instance.setCardsDoneLoading(true); // Set dataDoneLoading to true after data is loaded - GPTPopup.Instance.setSortDesc(sortDesc); - GPTPopup.Instance.onSortComplete = this.handleGptSortResult; -}; - @action handleGptSortResult = (sortResult: string) => { - this.processGptOutput(sortResult); + GPTPopup.Instance.setSortDesc(sortDesc.join()); + GPTPopup.Instance.onSortComplete = (sortResult: string) => this.processGptOutput(sortResult); }; /** - * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups - * @param childPairIndex - * @param doc - * @param isChat - * @returns + * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups + * @param childPairIndex + * @param doc + * @returns */ - renderButtons(childPairIndex: number, doc: Doc, isChat = false) { - const buttons = []; - const groupNumber = NumCast(this._props.Document.customSortNumber); - - let amButtons = 4; - let activeButtonIndex = this.getButtonGroup(groupNumber, doc) - - if (isChat && doc) { - if (this.amGPTGroups > 4){ - amButtons = this.amGPTGroups; - } - activeButtonIndex = this.getButtonGroup(9999, doc, true); - } - - for (let i = 0; i < amButtons; i++) { - const isActive = activeButtonIndex === i; - buttons.push( - - ); - } - + renderButtons = (doc: Doc, cardSort: cardSortings) => { + if (cardSort !== cardSortings.Custom) return ''; + const amButtons = Math.max(4, this.childDocs?.reduce((set, doc) => this.customSortField && set.add(NumCast(doc[this.customSortField])), new Set()).size ?? 0); + const activeButtonIndex = CollectionCardView.getButtonGroup(this.customSortField, doc); const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6; return (
- {buttons} + {numberRange(amButtons).map(i => ( +
); - } - - getButtonGroup(groupNumber: number, doc: Doc, isChat?: boolean) { - if (isChat){ - return NumCast(doc.chatGroup) - } - switch (groupNumber){ - case 0: - return NumCast(doc.custom1Group) - case 1: - return NumCast(doc.custom2Group) - case 2: - return NumCast(doc.custom3Group) - default: - break - } - - - } - + }; + /** + * Actually renders all the cards + */ + renderCards = () => { + const anySelected = this.childDocs.some(doc => SelectionManager.IsSelected(doc)); + // Map sorted documents to their rendered components + return this.sortedDocs.map((doc, index) => { + const realIndex = this.sortedDocs.filter(sortDoc => !SelectionManager.IsSelected(sortDoc)).indexOf(doc); + const calcRowIndex = this.overflowIndexCalc(realIndex); + const amCards = this.overflowAmCardsCalc(realIndex); + const isSelected = SelectionManager.IsSelected(doc); - @computed get translateWrapperX() { - let translate = 0; + const childScreenToLocal = () => { + this._forceChildXf; + const dref = this._docRefs.get(doc); + const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv); + return new Transform(-translateX + (dref?.centeringX || 0) * scale, + -translateY + (dref?.centeringY || 0) * scale, 1) + .scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0); // prettier-ignore + }; - if (this.inactiveDocs().length != this.myChildLayoutPairs.length && this.inactiveDocs().length < 10) { - translate += this.panelWidth() / 2; - } - return translate; - } + return ( +
{ + // this turns off documentDecorations during a transition, then turns them back on afterward. + SnappingManager.SetIsResizing(this.Document); + setTimeout( + action(() => { + SnappingManager.SetIsResizing(undefined); + this._forceChildXf = !this._forceChildXf; + }), + 700 + ); + }} + style={{ + width: this.panelWidth(), + height: 'max-content', // this.panelHeight(childPair.layout)(), + transform: `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, isSelected, realIndex, amCards, calcRowIndex)}px) + translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px) + rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) + scale(${isSelected ? 1.25 : 1})`, + }} + onMouseEnter={() => this.setHoveredNodeIndex(index)}> + {this.displayDoc(doc, childScreenToLocal)} + {this.renderButtons(doc, this.cardSort)} +
+ ); + }); + }; render() { return (
this.setHoveredNodeIndex(-1)}> - {this.contentSorted} + {this.renderCards()}
); diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 496d7482c..35a3a2e31 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -1,7 +1,7 @@ import { Colors } from 'browndash-components'; import { action, runInAction } from 'mobx'; import { aggregateBounds } from '../../../Utils'; -import { Doc, Opt } from '../../../fields/Doc'; +import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { InkTool } from '../../../fields/InkField'; import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; @@ -106,17 +106,15 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed'); }); - - ScriptingGlobals.add(function showFreeform( - attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3' | 'chat' | '1' | '2' | '3' | '4', + attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'like' | 'star' | 'idea' | 'chat' | '1' | '2' | '3' | '4', checkResult?: boolean, persist?: boolean, isDoubleClick?: boolean ) { const selected = SelectionManager.Docs.lastElement(); // prettier-ignore - const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3' | 'chat' | '1' | '2' | '3' | '4', + const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'like' | 'star' | 'idea' | 'chat' | '1' | '2' | '3' | '4', { waitForRender?: boolean; checkResult: (doc: Doc) => any; @@ -167,87 +165,48 @@ ScriptingGlobals.add(function showFreeform( checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "links", setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "links", }], - ['custom1', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 0, + ['like', { + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "like", setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; - doc.customSortNumber = 0; + doc.customSortField = "like"; doc.visibleGroupNumbers = new List(); } }], - ['custom2', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 1, + ['star', { + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "star", setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; - doc.customSortNumber = 1; + doc.customSortField = "star"; doc.visibleGroupNumbers = new List(); } }], - ['custom3', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 2, + ['idea', { + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "idea", setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; - doc.customSortNumber = 2; + doc.customSortField = "idea"; doc.visibleGroupNumbers = new List(); } }], ['chat', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "chat", - setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "chat", - }], - ['1', { - checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(0), - setDoc: (doc: Doc, dv: DocumentView) => { - let list = NumListCast(doc.visibleGroupNumbers); - if (list.includes(0)) { - let newList = new List(list.filter(d => d !== 0)); - doc.visibleGroupNumbers = newList; - } else { - list.push(0); - doc.visibleGroupNumbers = new List(list); - } - } - }], - ['2', { - checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(1), - setDoc: (doc: Doc, dv: DocumentView) => { - let list = NumListCast(doc.visibleGroupNumbers); - if (list.includes(1)) { - let newList = new List(list.filter(d => d !== 1)); - doc.visibleGroupNumbers = newList; - } else { - list.push(1); - doc.visibleGroupNumbers = new List(list); - } - } - }], - ['3', { - checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(2), - setDoc: (doc: Doc, dv: DocumentView) => { - let list = NumListCast(doc.visibleGroupNumbers); - if (list.includes(2)) { - let newList = new List(list.filter(d => d !== 2)); - doc.visibleGroupNumbers = newList; - } else { - list.push(2); - doc.visibleGroupNumbers = new List(list); - } - } - }], - ['4', { - checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(3), + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "chat", setDoc: (doc: Doc, dv: DocumentView) => { - let list = NumListCast(doc.visibleGroupNumbers); - if (list.includes(3)) { - let newList = new List(list.filter(d => d !== 3)); - doc.visibleGroupNumbers = newList; - } else { - list.push(3); - doc.visibleGroupNumbers = new List(list); - } - } + doc.cardSort = "custom"; + doc.customSortField = "chat"; + doc.visibleGroupNumbers = new List(); + }, }], ]); + for (let i = 0; i < 8; i++) { + map.set((i + 1 + '') as any, { + checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(i), + setDoc: (doc: Doc, dv: DocumentView) => { + const list = NumListCast(doc.visibleGroupNumbers); + doc.visibleGroupNumbers = new List(list.includes(i) ? list.filter(d => d !== i) : [...list, i]); + }, + }); + } if (checkResult) { return map.get(attr)?.checkResult(selected); @@ -257,13 +216,11 @@ ScriptingGlobals.add(function showFreeform( setTimeout(() => batch.end(), 100); }); - -ScriptingGlobals.add(function isThatCardGroup(n: number){ - const canvas = SelectionManager.Docs.lastElement(); - return canvas.customSortNumber == n - - -}) +ScriptingGlobals.add(function cardHasLabel(label: string) { + const selected = SelectionManager.Docs.lastElement(); + const labelNum = Number(label) - 1; + return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.customSortField)] == labelNum)); +}, ''); // ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) { // // const editorView = RichTextMenu.Instance?.TextView?.EditorView; -- cgit v1.2.3-70-g09d2 From 9badfc489f00afd10489f0dde0a3b9e21817feb5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 18 May 2024 23:15:49 -0400 Subject: more cardView cleanup --- src/Utils.ts | 1 - src/client/apis/gpt/GPT.ts | 22 ++-- src/client/documents/Documents.ts | 65 +---------- src/client/util/SelectionManager.ts | 1 - src/client/views/DocComponent.tsx | 2 +- .../views/collections/CollectionCardDeckView.tsx | 20 ++-- src/client/views/collections/CollectionMenu.tsx | 2 - src/client/views/collections/CollectionView.tsx | 2 - .../CollectionFreeFormLayoutEngines.tsx | 26 ----- .../collectionFreeForm/CollectionFreeFormView.tsx | 8 +- .../collections/collectionFreeForm/MarqueeView.tsx | 19 +--- .../collectionSchema/CollectionSchemaView.tsx | 2 +- src/client/views/global/globalScripts.ts | 32 +++--- src/client/views/nodes/PDFBox.tsx | 3 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 7 +- src/client/views/pdf/GPTPopup/GPTPopup.tsx | 126 +++++++++------------ 16 files changed, 105 insertions(+), 233 deletions(-) (limited to 'src/client/views/global') diff --git a/src/Utils.ts b/src/Utils.ts index fb72a5836..291d7c799 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -179,7 +179,6 @@ export namespace Utils { export function toRGBAstr(col: { r: number; g: number; b: number; a?: number }) { return 'rgba(' + col.r + ',' + col.g + ',' + col.b + (col.a !== undefined ? ',' + col.a : '') + ')'; } - export function HSLtoRGB(h: number, s: number, l: number) { // Must be fractions of 1 diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts index 398f8ae39..3b3b3b9a0 100644 --- a/src/client/apis/gpt/GPT.ts +++ b/src/client/apis/gpt/GPT.ts @@ -6,7 +6,7 @@ enum GPTCallType { COMPLETION = 'completion', EDIT = 'edit', SORT = 'sort', - DESCRIBE = 'describe' + DESCRIBE = 'describe', } type GPTCallOpts = { @@ -20,13 +20,15 @@ const callTypeMap: { [type: string]: GPTCallOpts } = { summary: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' }, edit: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' }, completion: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: '' }, - sort:{model:'gpt-4o',maxTokens:2048,temp:0.5,prompt:"I'm going to give you a list of descriptions. Each one is seperated by ====== on either side. They will vary in length, so make sure to only seperate when you see ======. Sort them into lists by shared content. MAKE SURE EACH DESCRIPTOR IS IN ONLY ONE LIST. Generate only the list with each list seperated by ====== with the elements seperated by ~~~~~~. Try to do around 4 groups, but a little more or less is ok."}, - describe:{model:'gpt-4-vision-preview',maxTokens:2048,temp:0,prompt:"Describe these images in 3-5 words"}, - - + sort: { + model: 'gpt-4o', + maxTokens: 2048, + temp: 0.5, + prompt: "I'm going to give you a list of descriptions. Each one is seperated by ====== on either side. They will vary in length, so make sure to only seperate when you see ======. Sort them into lists by shared content. MAKE SURE EACH DESCRIPTOR IS IN ONLY ONE LIST. Generate only the list with each list seperated by ====== with the elements seperated by ~~~~~~. Try to do around 4 groups, but a little more or less is ok.", + }, + describe: { model: 'gpt-4-vision-preview', maxTokens: 2048, temp: 0, prompt: 'Describe these images in 3-5 words' }, }; - /**` * Calls the OpenAI API. * @@ -39,7 +41,7 @@ const gptAPICall = async (inputText: string, callType: GPTCallType) => { const opts: GPTCallOpts = callTypeMap[callType]; try { const configuration: ClientOptions = { - apiKey: "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", + apiKey: process.env.OPENAI_KEY, dangerouslyAllowBrowser: true, }; const openai = new OpenAI(configuration); @@ -63,11 +65,10 @@ const gptAPICall = async (inputText: string, callType: GPTCallType) => { } }; - const gptImageLabel = async (imgUrl: string): Promise => { try { const configuration: ClientOptions = { - apiKey: "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", + apiKey: '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', dangerouslyAllowBrowser: true, }; @@ -100,7 +101,6 @@ const gptImageLabel = async (imgUrl: string): Promise => { } }; - const gptImageCall = async (prompt: string, n?: number) => { try { const configuration: ClientOptions = { @@ -122,4 +122,4 @@ const gptImageCall = async (prompt: string, n?: number) => { } }; -export { gptAPICall, gptImageCall, gptImageLabel, GPTCallType }; \ No newline at end of file +export { gptAPICall, gptImageCall, gptImageLabel, GPTCallType }; diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 80774f4ad..903bd907a 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -500,27 +500,8 @@ export class DocumentOptions { userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)'); cardSort?: STRt = new StrInfo('way cards are sorted in deck view'); - customSortNumber?: NUMt = new NumInfo('number of custom sorts the user has created'); - // customGroup1?: List - // customGroup2?: List - // customGroup3?: List - visibleGroupNumbers?: List - custom1Group?: NUMt = new NumInfo('Which group a card is in for the 1st custom grouping'); - custom2Group?: NUMt = new NumInfo('Which group a card is in for the 2nd custom grouping'); - custom3Group?: NUMt = new NumInfo('Which group a card is in for the 3rd custom grouping'); - chatGroup?: NUMt = new NumInfo("Which group a card is in for the chat's grouping"); - chatAmGroups?: NUMt = new NumInfo("Number of cards created by chat sort"); - - - - - - - // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); - // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); - // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); - - + cardSort_customField?: STRt = new StrInfo('field key used for sorting cards'); + cardSort_visibleSortGroups?: List; // which sorting values are being filtered (shown) } export const DocOptions = new DocumentOptions(); @@ -1239,8 +1220,6 @@ export namespace Docs { ); } - - export function LinearDocument(documents: Array, options: DocumentOptions, id?: string) { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Linear }, id); } @@ -1258,7 +1237,7 @@ export namespace Docs { } export function CardDeckDocument(documents: Array, options: DocumentOptions, id?: string) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Card}); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Card }); } export function SchemaDocument(schemaHeaders: SchemaHeaderField[], documents: Array, options: DocumentOptions) { @@ -1911,44 +1890,6 @@ export namespace DocUtils { } } - export function spreadCards(docList: Doc[], x: number = 0, y: number = 0, spreadAngle: number = 30, radius: number = 100, create: boolean = true) { - console.log('spread cards'); - const totalCards = docList.length; - const halfSpreadAngle = spreadAngle * 0.5; - const angleStep = spreadAngle / (totalCards - 1); - - runInAction(() => { - docList.forEach((d, i) => { - DocUtils.iconify(d); - const angle = (-halfSpreadAngle + angleStep * i) * (Math.PI / 180); // Convert degrees to radians - d.x = x + Math.cos(angle) * radius; - d.y = y + Math.sin(angle) * radius; - d.rotation = angle; - d._timecodeToShow = undefined; - }); - }); - - if (create) { - const newCollection = Docs.Create.CardDeckDocument(docList, { - title: 'card-spread', - _freeform_noZoom: true, - x: x - radius, - y: y - radius, - _width: radius * 2, - _height: radius * 2, - dragWhenActive: true, - _layout_fitWidth: false - }); - // Adjust position based on the collection's dimensions if needed - newCollection.x = NumCast(newCollection.x) + NumCast(newCollection._width) / 2 - radius; - newCollection.y = NumCast(newCollection.y) + NumCast(newCollection._height) / 2 - radius; - newCollection._width = newCollection._height = radius * 2; - return newCollection; - } - } - - - export function makeIntoPortal(doc: Doc, layoutDoc: Doc, allLinks: Doc[]) { const portalLink = allLinks.find(d => d.link_anchor_1 === doc && d.link_relationship === 'portal to:portal from'); if (!portalLink) { diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index d507e35ad..36b926053 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -68,7 +68,6 @@ export class SelectionManager { public static IsSelected = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []).some(dv => dv?.IsSelected); public static get Views() { return this.Instance.SelectedViews; } // prettier-ignore public static get SelectedSchemaDoc() { return this.Instance.SelectedSchemaDocument; } // prettier-ignore - public static get Docs() { return this.Instance.SelectedViews.map(dv => dv.Document).filter(doc => doc?._type_collection !== CollectionViewType.Docking); } // prettier-ignore } diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index ef4257937..de4df1830 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -35,7 +35,7 @@ export interface ViewBoxInterface { addDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; // add a document (used only by collections) removeDocument?: (doc: Doc | Doc[], annotationKey?: string, leavePushpin?: boolean, dontAddToRemoved?: boolean) => boolean; // add a document (used only by collections) select?: (ctrlKey: boolean, shiftKey: boolean) => void; - focus?: (textAnchor: Doc, options: FocusViewOptions) => Opt; + focus?: (textAnchor: Doc, options: FocusViewOptions) => Opt; viewTransition?: () => Opt; // duration of a view transition animation isAnyChildContentActive?: () => boolean; // is any child content of the document active onClickScriptDisable?: () => 'never' | 'always'; // disable click scripts : never, always, or undefined = only when selected diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 9e5668ffa..5f8ddd5c1 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -75,7 +75,7 @@ export class CollectionCardView extends CollectionSubView() { componentDidMount(): void { this._disposers.sort = reaction( - () => ({ cardSort: this.cardSort, field: this.customSortField }), + () => ({ cardSort: this.cardSort, field: this.cardSort_customField }), ({ cardSort, field }) => (cardSort === cardSortings.Custom && field === 'chat' ? this.openChatPopup() : GPTPopup.Instance.setVisible(false)) ); } @@ -85,8 +85,8 @@ export class CollectionCardView extends CollectionSubView() { this._dropDisposer?.(); } - @computed get customSortField() { - return StrCast(this.Document.customSortField) as any as 'chat' | 'star' | 'idea' | 'like'; + @computed get cardSort_customField() { + return StrCast(this.Document.cardSort_customField) as any as 'chat' | 'star' | 'idea' | 'like'; } @computed get cardSort() { @@ -115,12 +115,12 @@ export class CollectionCardView extends CollectionSubView() { */ @computed get childDocsWithoutLinks() { const regularDocs = this.childDocs.filter(l => l.type !== DocumentType.LINK); - const activeGroups = NumListCast(this.Document.visibleGroupNumbers); + const activeGroups = NumListCast(this.Document.cardSort_visibleSortGroups); if (activeGroups.length > 0 && this.cardSort === cardSortings.Custom) { return regularDocs.filter(doc => { // Get the group number for the current index - const groupNumber = CollectionCardView.getButtonGroup(this.customSortField, doc); + const groupNumber = CollectionCardView.getButtonGroup(this.cardSort_customField, doc); // Check if the group number is in the active groups return groupNumber !== undefined && activeGroups.includes(groupNumber); }); @@ -245,8 +245,8 @@ export class CollectionCardView extends CollectionSubView() { return [DashColor(StrCast(docA.backgroundColor)).hsv().toString(), // If docA.type is undefined, use an empty string DashColor(StrCast(docB.backgroundColor)).hsv().toString()]; // If docB.type is undefined, use an empty string case cardSortings.Custom: - return [CollectionCardView.getButtonGroup(this.customSortField, docA)??0, - CollectionCardView.getButtonGroup(this.customSortField, docB)??0]; + return [CollectionCardView.getButtonGroup(this.cardSort_customField, docA)??0, + CollectionCardView.getButtonGroup(this.cardSort_customField, docB)??0]; default: return [StrCast(docA.type), // If docA.type is undefined, use an empty string StrCast(docB.type)]; // If docB.type is undefined, use an empty string } // prettier-ignore @@ -335,7 +335,7 @@ export class CollectionCardView extends CollectionSubView() { * @param buttonID * @param doc */ - toggleButton = undoable((buttonID: number, doc: Doc) => this.customSortField && (doc[this.customSortField] = buttonID), 'toggle custom button'); + toggleButton = undoable((buttonID: number, doc: Doc) => this.cardSort_customField && (doc[this.cardSort_customField] = buttonID), 'toggle custom button'); /** * A list of the text content of all the child docs. RTF documents will have just their text and pdf documents will have the first 50 words. @@ -422,8 +422,8 @@ export class CollectionCardView extends CollectionSubView() { */ renderButtons = (doc: Doc, cardSort: cardSortings) => { if (cardSort !== cardSortings.Custom) return ''; - const amButtons = Math.max(4, this.childDocs?.reduce((set, doc) => this.customSortField && set.add(NumCast(doc[this.customSortField])), new Set()).size ?? 0); - const activeButtonIndex = CollectionCardView.getButtonGroup(this.customSortField, doc); + const amButtons = Math.max(4, this.childDocs?.reduce((set, doc) => this.cardSort_customField && set.add(NumCast(doc[this.cardSort_customField])), new Set()).size ?? 0); + const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc); const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6; return (
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 81d9f4eea..94896f277 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -321,8 +321,6 @@ export class CollectionViewBaseChrome extends React.Component(); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index b7805bf3f..97a0b7bef 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -137,8 +137,6 @@ export class CollectionView extends ViewBoxAnnotatableComponent; case CollectionViewType.Grid: return ; case CollectionViewType.Card: return ; - - } }; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx index 22005eb23..c83c26509 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx @@ -125,32 +125,6 @@ export function computeStarburstLayout(poolData: Map, pivotDoc return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]); } -// export function computeCardDeckLayout(poolData: Map, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) { -// const docMap = new Map(); -// const burstDiam = [NumCast(pivotDoc._width), NumCast(pivotDoc._height)]; -// const burstScale = NumCast(pivotDoc._starburstDocScale, 1); - -// childPairs.forEach(({ layout, data }, i) => { -// const aspect = NumCast(layout._height) / NumCast(layout._width); -// const docSize = Math.min(Math.min(400, NumCast(layout._width)), Math.min(400, NumCast(layout._width)) / aspect) * burstScale; -// const deg = (i / childPairs.length) * Math.PI * 2; -// docMap.set(layout[Id], { -// x: Math.min(burstDiam[0] / 2 - docSize, Math.max(-burstDiam[0] / 2, (Math.cos(deg) * burstDiam[0]) / 2 - docSize / 2)), -// y: Math.min(burstDiam[1] / 2 - docSize * aspect, Math.max(-burstDiam[1] / 2, (Math.sin(deg) * burstDiam[1]) / 2 - (docSize / 2) * aspect)), -// width: docSize, -// height: docSize * aspect, -// zIndex: NumCast(layout.zIndex), -// pair: { layout, data }, -// replica: '', -// color: 'white', -// backgroundColor: 'white', -// transition: 'all 0.3s', -// }); -// }); -// const divider = { type: 'div', color: 'transparent', x: -burstDiam[0] / 2, y: -burstDiam[1] / 2, width: 15, height: 15, payload: undefined }; -// return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]); -// } - export function computePivotLayout(poolData: Map, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) { const docMap = new Map(); const fieldKey = 'data'; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 11193f496..079a5d977 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -49,9 +49,7 @@ import { CollectionSubView } from '../CollectionSubView'; import { TreeViewType } from '../CollectionTreeView'; import { CollectionFreeFormBackgroundGrid } from './CollectionFreeFormBackgroundGrid'; import { CollectionFreeFormInfoUI } from './CollectionFreeFormInfoUI'; -import { computePassLayout, computePivotLayout, computeStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult, - // computeCardDeckLayout - } from './CollectionFreeFormLayoutEngines'; +import { computePassLayout, computePivotLayout, computeStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult } from './CollectionFreeFormLayoutEngines'; import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannableContents'; import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors'; import './CollectionFreeFormView.scss'; @@ -1385,8 +1383,6 @@ export class CollectionFreeFormView extends CollectionSubView { - // const selected = this.marqueeSelect(false); - // SelectionManager.DeselectAll(); - // selected.forEach(d => this._props.removeDocument?.(d)); - // const newCollection = DocUtils.spreadCards(selected, this.Bounds.left + this.Bounds.width / 2, this.Bounds.top + this.Bounds.height / 2)!; - // this._props.addDocument?.(newCollection); - // this._props.selectDocuments([newCollection]); - // MarqueeOptionsMenu.Instance.fadeOut(true); - // this.hideMarquee(); - // }); - /** * This triggers the TabDocView.PinDoc method which is the universal method * used to pin documents to the currently active presentation trail. @@ -522,7 +510,6 @@ export class MarqueeView extends ObservableReactComponent { - if (this._commandExecuted || (e as any).propagationIsStopped) { return; } @@ -533,8 +520,7 @@ export class MarqueeView extends ObservableReactComponent doc.cardSort = "links", }], ['like', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "like", + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "like", setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; - doc.customSortField = "like"; - doc.visibleGroupNumbers = new List(); + doc.cardSort_customField = "like"; + doc.cardSort_visibleSortGroups = new List(); } }], ['star', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "star", + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "star", setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; - doc.customSortField = "star"; - doc.visibleGroupNumbers = new List(); + doc.cardSort_customField = "star"; + doc.cardSort_visibleSortGroups = new List(); } }], ['idea', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "idea", + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "idea", setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; - doc.customSortField = "idea"; - doc.visibleGroupNumbers = new List(); + doc.cardSort_customField = "idea"; + doc.cardSort_visibleSortGroups = new List(); } }], ['chat', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "chat", + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "chat", setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; - doc.customSortField = "chat"; - doc.visibleGroupNumbers = new List(); + doc.cardSort_customField = "chat"; + doc.cardSort_visibleSortGroups = new List(); }, }], ]); for (let i = 0; i < 8; i++) { map.set((i + 1 + '') as any, { - checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(i), + checkResult: (doc: Doc) => NumListCast(doc?.cardSort_visibleSortGroups).includes(i), setDoc: (doc: Doc, dv: DocumentView) => { - const list = NumListCast(doc.visibleGroupNumbers); - doc.visibleGroupNumbers = new List(list.includes(i) ? list.filter(d => d !== i) : [...list, i]); + const list = NumListCast(doc.cardSort_visibleSortGroups); + doc.cardSort_visibleSortGroups = new List(list.includes(i) ? list.filter(d => d !== i) : [...list, i]); }, }); } @@ -219,7 +219,7 @@ ScriptingGlobals.add(function showFreeform( ScriptingGlobals.add(function cardHasLabel(label: string) { const selected = SelectionManager.Docs.lastElement(); const labelNum = Number(label) - 1; - return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.customSortField)] == labelNum)); + return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.cardSort_customField)] == labelNum)); }, ''); // ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) { diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 90d6133e4..3e0270aa3 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -29,11 +29,10 @@ import { CreateImage } from '../nodes/WebBoxRenderer'; import { PDFViewer } from '../pdf/PDFViewer'; import { SidebarAnnos } from '../SidebarAnnos'; import { DocumentView, OpenWhere } from './DocumentView'; -import { FocusViewOptions, FieldView, FieldViewProps } from './FieldView'; +import { FieldView, FieldViewProps, FocusViewOptions } from './FieldView'; import { ImageBox } from './ImageBox'; import './PDFBox.scss'; import { PinProps, PresBox } from './trails'; -import { Networking } from '../../Network'; @observer export class PDFBox extends ViewBoxAnnotatableComponent() implements ViewBoxInterface { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index f856d9637..43010b2ed 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -972,8 +972,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent (this.layoutDoc._layout_autoHeight = !this.layoutDoc._layout_autoHeight), icon: this.Document._layout_autoHeight ? 'lock' : 'unlock', }); - optionItems.push({ description: `show markdown options`, event: RTFMarkup.Instance.open, icon: }); - !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'sliders' }); + !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' }); + const help = cm.findByDescription('Help...'); + const helpItems = help && 'subitems' in help ? help.subitems : []; + helpItems.push({ description: `show markdown options`, event: RTFMarkup.Instance.open, icon: }); + !help && cm.addItem({ description: 'Help...', subitems: helpItems, icon: 'eye' }); this._downX = this._downY = Number.NaN; }; diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index 4fb757d8a..0ba62d60e 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -21,7 +21,7 @@ export enum GPTPopupMode { EDIT, IMAGE, DATA, - SORT + SORT, } interface GPTPopupProps {} @@ -60,7 +60,7 @@ export class GPTPopup extends ObservableReactComponent { public dataChatPrompt: string | null = null; @action public setDataJson = (text: string) => { - if (text=="") this.dataChatPrompt = ""; + if (text == '') this.dataChatPrompt = ''; this.dataJson = text; }; @@ -95,21 +95,18 @@ export class GPTPopup extends ObservableReactComponent { private done: boolean = false; @action public setDone = (done: boolean) => { - console.log("HIIIIIIIII") this.done = done; this.chatMode = false; }; @observable - private sortDone: boolean = false // this is so redundant but the og done variable was causing weird unknown problems and im just a girl + private sortDone: boolean = false; // this is so redundant but the og done variable was causing weird unknown problems and im just a girl @action public setSortDone = (done: boolean) => { - console.log("HIIIIIIIII") this.sortDone = done; }; - // change what can be a ref into a ref @observable private sidebarId: string = ''; @@ -133,26 +130,20 @@ export class GPTPopup extends ObservableReactComponent { }; @observable - public sortDesc: string = '' + public sortDesc: string = ''; - @action public setSortDesc = (t:string) => { - this.sortDesc = t - } + @action public setSortDesc = (t: string) => { + this.sortDesc = t; + }; @observable onSortComplete?: (sortResult: string) => void; @observable cardsDoneLoading = false; @action setCardsDoneLoading(done: boolean) { - console.log(done + "HI HIHI") + console.log(done + 'HI HIHI'); this.cardsDoneLoading = done; } - - - - - - public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false; public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined; @@ -164,12 +155,11 @@ export class GPTPopup extends ObservableReactComponent { this.setSortDone(false); try { - const res = await gptAPICall(this.sortDesc, GPTCallType.SORT); // Trigger the callback with the result if (this.onSortComplete) { this.onSortComplete(res || 'Something went wrong :('); - console.log(res) + console.log(res); } } catch (err) { console.error(err); @@ -177,9 +167,7 @@ export class GPTPopup extends ObservableReactComponent { this.setLoading(false); this.setSortDone(true); - } - - + }; /** * Generates a Dalle image and uploads it to the server. @@ -219,7 +207,7 @@ export class GPTPopup extends ObservableReactComponent { console.error(err); } GPTPopup.Instance.setLoading(false); - } + }; generateDataAnalysis = async () => { GPTPopup.Instance.setVisible(true); @@ -231,7 +219,7 @@ export class GPTPopup extends ObservableReactComponent { console.error(err); } GPTPopup.Instance.setLoading(false); - } + }; /** * Transfers the summarization text to a sidebar annotation text document. @@ -282,7 +270,7 @@ export class GPTPopup extends ObservableReactComponent { */ private chatWithAI = () => { this.chatMode = true; - } + }; dataPromptChanged = action((e: React.ChangeEvent) => { this.dataChatPrompt = e.target.value; }); @@ -304,14 +292,14 @@ export class GPTPopup extends ObservableReactComponent { sortBox = () => ( <>
- {this.heading("SORTING")} + {this.heading('SORTING')} {this.loading ? (
-
- - Loading... +
+ + Loading... +
-
) : ( <> {!this.cardsDoneLoading ? ( @@ -334,27 +322,18 @@ export class GPTPopup extends ObservableReactComponent { width: '90%', // Almost as wide as the container textAlign: 'center', color: '#ffffff', // White text - fontSize: '16px' // Adjust font size as needed + fontSize: '16px', // Adjust font size as needed }} />
) )} - + {this.sortDone && (
-

- {this.text === "Something went wrong :(" ? - "Something went wrong :(" : - "Sorting done! Feel free to move things around / regenerate :) !"} -

- this.setSortDone(false)} - icon={} - color={StrCast(Doc.UserDoc().userVariantColor)} - /> +

{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : 'Sorting done! Feel free to move things around / regenerate :) !'}

+ this.setSortDone(false)} icon={} color={StrCast(Doc.UserDoc().userVariantColor)} />
)} @@ -364,21 +343,17 @@ export class GPTPopup extends ObservableReactComponent { ); - - - - -// <> -//
-// )} + // <> + //