Merge branch 'master' into aarav_edit

6 files changed, 356 insertions, 0 deletions

diff --git a/src/client/views/nodes/scrapbook/EmbeddedDocView.tsx b/src/client/views/nodes/scrapbook/EmbeddedDocView.tsx
new file mode 100644
index 000000000..e99bf67c7
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/EmbeddedDocView.tsx
@@ -0,0 +1,52 @@
+//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Doc } from "../../../../fields/Doc";
+import { DocumentView } from "../DocumentView";
+import { Transform } from "../../../util/Transform";
+
+interface EmbeddedDocViewProps {
+    doc: Doc;
+    width?: number;
+    height?: number;
+    slotId?: string;
+}
+
+@observer
+export class EmbeddedDocView extends React.Component<EmbeddedDocViewProps> {
+    render() {
+        const { doc, width = 300, height = 200, slotId } = this.props;
+        
+        // Use either an existing embedding or create one
+        let docToDisplay = doc;
+        
+        // If we need an embedding, create or use one
+        if (!docToDisplay.isEmbedding) {
+            docToDisplay = Doc.BestEmbedding(doc) || Doc.MakeEmbedding(doc);
+            // Set the container to the slot's ID so we can track it
+            if (slotId) {
+                docToDisplay.embedContainer = `scrapbook-slot-${slotId}`;
+            }
+        }
+        
+        return (
+            <DocumentView 
+                Document={docToDisplay}
+                renderDepth={0}
+                // Required sizing functions
+                NativeWidth={() => width}
+                NativeHeight={() => height}
+                PanelWidth={() => width}
+                PanelHeight={() => height}
+                // Required state functions
+                isContentActive={() => true}
+                childFilters={() => []}
+                ScreenToLocalTransform={() => new Transform()}
+                // Display options
+                hideDeleteButton={true}
+                hideDecorations={true}
+                hideResizeHandles={true}
+            />
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
new file mode 100644
index 000000000..6cfe9a62c
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -0,0 +1,143 @@
+import { action, makeObservable, observable } from 'mobx';
+import * as React from 'react';
+import { Doc, DocListCast } from '../../../../fields/Doc';
+import { List } from '../../../../fields/List';
+import { emptyFunction } from '../../../../Utils';
+import { Docs } from '../../../documents/Documents';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { CollectionView } from '../../collections/CollectionView';
+import { ViewBoxAnnotatableComponent } from '../../DocComponent';
+import { DocumentView } from '../DocumentView';
+import { FieldView, FieldViewProps } from '../FieldView';
+import { DragManager } from '../../../util/DragManager';
+import { RTFCast, StrCast, toList } from '../../../../fields/Types';
+import { undoable } from '../../../util/UndoManager';
+// Scrapbook view: a container that lays out its child items in a grid/template
+export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    @observable createdDate: string;
+
+    constructor(props: FieldViewProps) {
+        super(props);
+        makeObservable(this);
+        this.createdDate = this.getFormattedDate();
+
+        // ensure we always have a List<Doc> in dataDoc['items']
+        if (!this.dataDoc[this.fieldKey]) {
+            this.dataDoc[this.fieldKey] = new List<Doc>();
+        }
+        this.createdDate = this.getFormattedDate();
+        this.setTitle();
+    }
+
+    public static LayoutString(fieldStr: string) {
+        return FieldView.LayoutString(ScrapbookBox, fieldStr);
+    }
+
+    getFormattedDate(): string {
+        return new Date().toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+
+    @action
+    setTitle() {
+        const title = `Scrapbook - ${this.createdDate}`;
+        if (this.dataDoc.title !== title) {
+            this.dataDoc.title = title;
+
+            const image = Docs.Create.TextDocument('image');
+            image.accepts_docType = DocumentType.IMG;
+            const placeholder = new Doc();
+            placeholder.proto = image;
+            placeholder.original = image;
+            placeholder._width = 250;
+            placeholder._height = 200;
+            placeholder.x = 0;
+            placeholder.y = -100;
+            //placeholder.overrideFields = new List<string>(['x', 'y']);  // shouldn't need to do this for layout fields since the placeholder already overrides its protos
+
+            const summary = Docs.Create.TextDocument('summary');
+            summary.accepts_docType = DocumentType.RTF;
+            summary.accepts_textType = 'one line';
+            const placeholder2 = new Doc();
+            placeholder2.proto = summary;
+            placeholder2.original = summary;
+            placeholder2.x = 0;
+            placeholder2.y = 200;
+            placeholder2._width = 250;
+            //placeholder2.overrideFields = new List<string>(['x', 'y', '_width']); // shouldn't need to do this for layout fields since the placeholder already overrides its protos
+            this.dataDoc[this.fieldKey] = new List<Doc>([placeholder, placeholder2]);
+        }
+    }
+
+    componentDidMount() {
+        this.setTitle();
+    }
+
+    childRejectDrop = (de: DragManager.DropEvent, subView?: DocumentView) => {
+        return true; // disable dropping documents onto any child of the scrapbook.
+    };
+    rejectDrop = (de: DragManager.DropEvent, subView?: DocumentView) => {
+        // Test to see if the dropped doc is dropped on an acceptable location (anywerhe? on a specific box).
+        // const draggedDocs = de.complete.docDragData?.draggedDocuments;
+        return false; // allow all Docs to be dropped onto scrapbook -- let filterAddDocument make the final decision.
+    };
+
+    filterAddDocument = (docIn: Doc | Doc[]) => {
+        const docs = toList(docIn);
+        if (docs?.length === 1) {
+            const placeholder = DocListCast(this.dataDoc[this.fieldKey]).find(d =>
+                 (d.accepts_docType === docs[0].$type ||   // match fields based on type, or by analyzing content .. simple example of matching text in placeholder to dropped doc's type
+                  RTFCast(d[Doc.LayoutDataKey(d)])?.Text.includes(StrCast(docs[0].$type)))
+            ); // prettier-ignore
+
+            if (placeholder) {
+                // ugh.  we have to tell the underlying view not to add the Doc so that we can add it where we want it.
+                // However, returning 'false' triggers an undo. so this settimeout is needed to make the assignment happen after the undo.
+                setTimeout(
+                    undoable(() => {
+                        //StrListCast(placeholder.overrideFields).map(field => (docs[0][field] = placeholder[field])); // // shouldn't need to do this for layout fields since the placeholder already overrides its protos
+                        placeholder.proto = docs[0];
+                    }, 'Scrapbook add')
+                );
+                return false;
+            }
+        }
+        return false;
+    };
+
+    render() {
+        return (
+            <div style={{ background: 'beige', width: '100%', height: '100%' }}>
+                <CollectionView
+                    {...this._props} //
+                    setContentViewBox={emptyFunction}
+                    rejectDrop={this.rejectDrop}
+                    childRejectDrop={this.childRejectDrop}
+                    filterAddDocument={this.filterAddDocument}
+                />
+                {/* <div style={{ border: '1px black', borderStyle: 'dotted', position: 'absolute', top: '50%', width: '100%', textAlign: 'center' }}>Drop an image here</div> */}
+            </div>
+        );
+    }
+}
+
+// Register scrapbook
+Docs.Prototypes.TemplateMap.set(DocumentType.SCRAPBOOK, {
+    layout: { view: ScrapbookBox, dataField: 'items' },
+    options: {
+        acl: '',
+        _height: 200,
+        _xMargin: 10,
+        _yMargin: 10,
+        _layout_fitWidth: false,
+        _layout_autoHeight: true,
+        _layout_reflowVertical: true,
+        _layout_reflowHorizontal: true,
+        _freeform_fitContentsToBox: true,
+        defaultDoubleClick: 'ignore',
+        systemIcon: 'BsImages',
+    },
+});
diff --git a/src/client/views/nodes/scrapbook/ScrapbookContent.tsx b/src/client/views/nodes/scrapbook/ScrapbookContent.tsx
new file mode 100644
index 000000000..ad1d308e8
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookContent.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+// Import the Doc type from your actual module.
+import { Doc } from "../../../../fields/Doc";
+
+export interface ScrapbookContentProps {
+  doc: Doc;
+}
+
+// A simple view that displays a document's title and content.
+// Adjust how you extract the text if your Doc fields are objects.
+export const ScrapbookContent: React.FC<ScrapbookContentProps> = observer(({ doc }) => {
+  // If doc.title or doc.content are not plain strings, convert them.
+  const titleText = doc.title ? doc.title.toString() : "Untitled";
+  const contentText = doc.content ? doc.content.toString() : "No content available.";
+
+  return (
+    <div className="scrapbook-content">
+      <h3>{titleText}</h3>
+      <p>{contentText}</p>
+    </div>
+  );
+});
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlot.scss b/src/client/views/nodes/scrapbook/ScrapbookSlot.scss
new file mode 100644
index 000000000..ae647ad36
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookSlot.scss
@@ -0,0 +1,85 @@
+//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
+.scrapbook-slot {
+  position: absolute;
+  background-color: rgba(245, 245, 245, 0.7);
+  border: 2px dashed #ccc;
+  border-radius: 5px;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  overflow: hidden;
+
+  &.scrapbook-slot-over {
+    border-color: #4a90e2;
+    background-color: rgba(74, 144, 226, 0.1);
+  }
+
+  &.scrapbook-slot-filled {
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.1);
+    background-color: transparent;
+
+    &.scrapbook-slot-over {
+      border-color: #4a90e2;
+      background-color: rgba(74, 144, 226, 0.1);
+    }
+  }
+
+  .scrapbook-slot-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .scrapbook-slot-placeholder {
+    text-align: center;
+    color: #888;
+  }
+
+  .scrapbook-slot-title {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .scrapbook-slot-instruction {
+    font-size: 0.9em;
+    font-style: italic;
+  }
+
+  .scrapbook-slot-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .scrapbook-slot-controls {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    .scrapbook-slot-remove-btn {
+      background-color: rgba(255, 255, 255, 0.8);
+      border: 1px solid #ccc;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 10px;
+      
+      &:hover {
+        background-color: rgba(255, 0, 0, 0.1);
+      }
+    }
+  }
+
+  &:hover .scrapbook-slot-controls {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx b/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx
new file mode 100644
index 000000000..2c8f93778
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx
@@ -0,0 +1,28 @@
+
+//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
+export interface SlotDefinition {
+    id: string;
+    x: number; y: number;
+    defaultWidth: number;
+    defaultHeight: number;
+  }
+  
+  export interface SlotContentMap {
+    slotId: string;
+    docId?: string;
+  }
+  
+  export interface ScrapbookConfig {
+    slots: SlotDefinition[];
+    contents?: SlotContentMap[];
+  }
+  
+  export const DEFAULT_SCRAPBOOK_CONFIG: ScrapbookConfig = {
+    slots: [
+      { id: "slot1", x: 10, y: 10, defaultWidth: 180, defaultHeight: 120 },
+      { id: "slot2", x: 200, y: 10, defaultWidth: 180, defaultHeight: 120 },
+      // …etc
+    ],
+    contents: []
+  };
+  
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlotTypes.ts b/src/client/views/nodes/scrapbook/ScrapbookSlotTypes.ts
new file mode 100644
index 000000000..686917d9a
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookSlotTypes.ts
@@ -0,0 +1,25 @@
+// ScrapbookSlotTypes.ts
+export interface SlotDefinition {
+    id: string;
+    title: string;
+    x: number;
+    y: number;
+    defaultWidth: number;
+    defaultHeight: number;
+  }
+  
+  export interface ScrapbookConfig {
+    slots: SlotDefinition[];
+    contents?: { slotId: string; docId: string }[];
+  }
+  
+  // give it three slots by default:
+  export const DEFAULT_SCRAPBOOK_CONFIG: ScrapbookConfig = {
+    slots: [
+      { id: "main",      title: "Main Content", x: 20,  y: 20,  defaultWidth: 360, defaultHeight: 200 },
+      { id: "notes",     title: "Notes",        x: 20,  y: 240, defaultWidth: 360, defaultHeight: 160 },
+      { id: "resources", title: "Resources",    x: 400, y: 20,  defaultWidth: 320, defaultHeight: 380 },
+    ],
+    contents: [],
+  };
+  
\ No newline at end of file