1 files changed, 89 insertions, 0 deletions
diff --git a/src/client/views/smartdraw/DrawingPalette.tsx b/src/client/views/smartdraw/DrawingPalette.tsx
new file mode 100644
index 000000000..87a39bc85
--- /dev/null
+++ b/src/client/views/smartdraw/DrawingPalette.tsx
@@ -0,0 +1,89 @@
+import { computed, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { returnAll, returnFalse, returnOne, returnZero } from '../../../ClientUtils';
+import { Doc, StrListCast } from '../../../fields/Doc';
+import { emptyFunction } from '../../../Utils';
+import { CollectionViewType } from '../../documents/DocumentTypes';
+import { MarqueeView } from '../collections/collectionFreeForm';
+import { CollectionGridView } from '../collections/collectionGrid';
+import { CollectionStackingView } from '../collections/CollectionStackingView';
+import { DocumentView } from '../nodes/DocumentView';
+import { FieldViewProps } from '../nodes/FieldView';
+import { ObservableReactComponent } from '../ObservableReactComponent';
+import './DrawingPalette.scss';
+
+@observer
+export class DrawingPalette extends ObservableReactComponent<{}> {
+    @observable private _savedDrawings: Doc[] = [];
+    @observable _marqueeViewRef = React.createRef<MarqueeView>();
+    private _stackRef = React.createRef<CollectionStackingView>();
+
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
+    panelWidth = () => 100;
+    panelHeight = () => 100;
+
+    getCollection = () => {
+        return this._marqueeViewRef.current?.collection(undefined, false, this._savedDrawings) || new Doc();
+    };
+
+    @computed get savedDrawingAnnos() {
+        // const savedAnnos = Doc.MyDrawingAnnos;
+        return (
+            <div className="collectionMenu-contMenuButtons" style={{ height: '100%' }}>
+                {/* <DocumentView PanelHeight={this.panelWidth} PanelWidth={this.panelHeight} Document={savedAnnos} renderDepth={2} isContentActive={returnFalse} childFilters={this.childFilters} /> */}
+                {/* <CollectionStackingView
+                    {...this._props}
+                    Document={savedAnnos}
+                    // setContentViewBox={emptyFunction}
+                    // NativeWidth={returnZero}
+                    // NativeHeight={returnZero}
+                    ref={this._stackRef}
+                    PanelHeight={this.panelWidth}
+                    PanelWidth={this.panelHeight}
+                    // childFilters={this.childFilters}
+                    // sortFunc={this.sortByLinkAnchorY}
+                    // setHeight={this.setHeightCallback}
+                    // isAnnotationOverlay={false}
+                    // select={emptyFunction}
+                    NativeDimScaling={returnOne}
+                    // childlayout_showTitle={this.layout_showTitle}
+                    isContentActive={returnFalse}
+                    isSelected={returnFalse}
+                    isAnyChildContentActive={returnFalse}
+                    // childDocumentsActive={this._props.isContentActive}
+                    whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
+                    childHideDecorationTitle
+                    // ScreenToLocalTransform={this.screenToLocalTransform}
+                    renderDepth={this._props.renderDepth + 1}
+                    type_collection={CollectionViewType.Stacking}
+                    // fieldKey={'drawing-palette'}
+                    pointerEvents={returnAll}
+                /> */}
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div className="drawing-palette">
+                {/* {this._savedDrawings.map(doc => {
+                    return <DocumentView 
+                    Document={doc} 
+                    renderDepth={0} 
+                    PanelWidth={this.panelWidth} 
+                    PanelHeight={this.panelHeight} 
+                    isContentActive={this.isContentActive} />;
+                })} */}
+                {/* <CollectionGridView {...this._props} /> */}
+                {}
+                {/* <DocumentView Document={this.getCollection()} /> */}
+                {this.savedDrawingAnnos}
+            </div>
+        );
+    }
+}