aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts17
-rw-r--r--src/client/views/EditableView.tsx2
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx2
-rw-r--r--src/client/views/collections/CollectionFreeFormView.scss15
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx22
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss73
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx7
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx2
-rw-r--r--src/client/views/nodes/FormattedTextBox.scss6
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx6
-rw-r--r--src/client/views/nodes/ImageBox.scss6
-rw-r--r--src/fields/KeyStore.ts1
12 files changed, 99 insertions, 60 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index d8e1db0b0..2dfff6235 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -127,12 +127,18 @@ export namespace Documents {
}
// example of custom display string for an image that shows a caption.
- function CaptionLayoutString() {
- return `<div style="position:absolute; height:100%">
- <div style="position:relative; margin:auto; width:85%; margin:auto" >`
+ function EmbeddedCaption() {
+ return `<div style="height:100%">
+ <div style="position:relative; margin:auto; height:85%;" >`
+ ImageBox.LayoutString() +
`</div>
- <div style="position:relative; min-height:15%; overflow:scroll; max-height:15%; text-align:center; ">`
+ <div style="position:relative; overflow:auto; height:15%; text-align:center; ">`
+ + FormattedTextBox.LayoutString("CaptionKey") +
+ `</div>
+ </div>` };
+ function FixedCaption() {
+ return `<div style="position:absolute; height:30px; bottom:0; width:100%">
+ <div style="position:absolute; width:100%; height:100%; overflow:auto;text-align:center;bottom:0;">`
+ FormattedTextBox.LayoutString("CaptionKey") +
`</div>
</div>` };
@@ -142,7 +148,8 @@ export namespace Documents {
setupOptions(doc, options);
doc.Set(KeyStore.Data, new ImageField(new URL(url)));
doc.Set(KeyStore.Caption, new TextField("my caption..."));
- doc.Set(KeyStore.BackgroundLayout, new TextField(CaptionLayoutString()));
+ doc.Set(KeyStore.BackgroundLayout, new TextField(EmbeddedCaption()));
+ doc.Set(KeyStore.OverlayLayout, new TextField(FixedCaption()));
doc.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations, KeyStore.Caption]));
let annotation = Documents.TextDocument({ title: "hello" });
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 3d1c2ebf4..8d9a47eaa 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -30,7 +30,7 @@ export class EditableView extends React.Component<EditableProps> {
style={{ width: "100%" }}></input>
} else {
return (
- <div style={{ alignItems: "center", display: "flex", height: "100%", maxHeight: `${this.props.height}` }}
+ <div className="editableView-container-editing" style={{ display: "flex", height: "100%", maxHeight: `${this.props.height}` }}
onClick={action(() => this.editing = true)}
>
{this.props.contents}
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 86dc66e39..2230ec14f 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -285,7 +285,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
if (!this._document)
return (null);
var content =
- <div ref={this._mainCont}>
+ <div className="collectionDockingView-content" ref={this._mainCont}>
<DocumentView key={this._document.Id} Document={this._document}
AddDocument={undefined}
RemoveDocument={undefined}
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index 6d678528a..d583a8218 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,4 +1,19 @@
.collectionfreeformview-container {
+
+ ::-webkit-scrollbar {
+ -webkit-appearance: none;
+ width: 10px;
+ }
+ ::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: rgba(0,0,0,.5);
+ }
+
+ .collectionfreeformview > .jsx-parser{
+ position:absolute;
+ height: 100%;
+ }
+
border-style: solid;
box-sizing: border-box;
position: relative;
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index b031c35a7..c40da6eaa 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -120,8 +120,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
private SetPan(panX: number, panY: number) {
const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX));
const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY));
- this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
- this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
+ this.props.Document.SetNumber(KeyStore.PanX, false && this.isAnnotationOverlay ? newPanX : panX);
+ this.props.Document.SetNumber(KeyStore.PanY, false && this.isAnnotationOverlay ? newPanY : panY);
}
@action
@@ -162,6 +162,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
return field.Data;
}
}
+ @computed get overlayLayout(): string | undefined {
+ let field = this.props.Document.GetT(KeyStore.OverlayLayout, TextField);
+ if (field && field !== "<Waiting>") {
+ return field.Data;
+ }
+ }
@computed
get views() {
const { fieldKey, Document } = this.props;
@@ -193,6 +199,17 @@ export class CollectionFreeFormView extends CollectionViewBase {
onError={(test: any) => console.log(test)}
/>);
}
+ @computed
+ get overlayView() {
+ return !this.overlayLayout ? (null) :
+ (<JsxParser
+ components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView }}
+ bindings={this.props.bindings}
+ jsx={this.overlayLayout}
+ showWarnings={true}
+ onError={(test: any) => console.log(test)}
+ />);
+ }
getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
noScaling = () => 1;
@@ -215,6 +232,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
{this.backgroundView}
{this.views}
</div>
+ {this.overlayView}
</div>
);
}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index ba9afee62..3bf84f3cd 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -14,16 +14,6 @@
background-color: rgba(0,0,0,.5);
}
- .collectionfreeformview-container {
- border-width: 0px;
- .collectionfreeformview > .jsx-parser{
- position:absolute
- }
- }
- .imageBox-cont {
- position:relative;
- max-height:100%;
- }
.ReactTable {
position: absolute;
// display: inline-block;
@@ -32,23 +22,40 @@
height: 100%;
background: white;
box-sizing: border-box;
- }
- .ReactTable .rt-table {
- overflow-y: auto;
- overflow-x: auto;
- height: 100%;
+ .rt-table {
+ overflow-y: auto;
+ overflow-x: auto;
+ height: 100%;
- display: -webkit-inline-box;
- direction: ltr;
- // direction:rtl;
- // display:block;
- }
- .ReactTable .rt-tbody {
- //direction: ltr;
- direction: rtl;
- }
- .ReactTable .rt-tr-group {
- direction: ltr;
+ display: -webkit-inline-box;
+ direction: ltr;
+ // direction:rtl;
+ // display:block;
+ }
+ .rt-tbody {
+ //direction: ltr;
+ direction: rtl;
+ }
+ .rt-tr-group {
+ direction: ltr;
+ }
+ .rt-td {
+ border-width: 1;
+ border-right-color: #aaa;
+ .imageBox-cont {
+ position:relative;
+ max-height:100%;
+ }
+ .imageBox-cont img {
+ object-fit: contain;
+ max-width: 100%;
+ height: 100%
+ }
+ }
+ .rt-tr-group {
+ border-width: 1;
+ border-bottom-color: #aaa
+ }
}
.ReactTable .rt-thead.-header {
background:grey;
@@ -61,24 +68,10 @@
border-bottom-style: solid;
border-bottom-width: 1;
}
- .ReactTable .rt-td {
- border-width: 1;
- border-right-color: #aaa
- }
- .ReactTable .rt-tr-group {
- border-width: 1;
- border-bottom-color: #aaa
- }
- .imageBox-cont img {
- object-fit: contain;
- height: 100%
- }
.documentView-node:first-child {
background: grey;
.imageBox-cont img {
object-fit: contain;
- max-width: 100%;
- height: 100%
}
}
}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index d2db93120..dc952ef82 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -16,6 +16,8 @@ import "./CollectionSchemaView.scss";
import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
import { CollectionViewBase } from "./CollectionViewBase";
+// bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
+
@observer
export class CollectionSchemaView extends CollectionViewBase {
private _mainCont = React.createRef<HTMLDivElement>();
@@ -140,7 +142,7 @@ export class CollectionSchemaView extends CollectionViewBase {
let content = this._selectedIndex == -1 || !selected ? (null) : (
<Measure onResize={this.setScaling}>
{({ measureRef }) =>
- <div ref={measureRef}>
+ <div className="collectionSchemaView-content" ref={measureRef}>
<DocumentView Document={selected}
AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument}
isTopMost={false}
@@ -173,7 +175,8 @@ export class CollectionSchemaView extends CollectionViewBase {
}))}
column={{
...ReactTableDefaults.column,
- Cell: this.renderCell
+ Cell: this.renderCell,
+
}}
getTrProps={this.getTrProps}
/>
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 17123bf52..d7243421a 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -88,7 +88,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
render() {
return (
- <div ref={this._mainCont} style={{
+ <div className="collectionFreeFormDocumentView-container" ref={this._mainCont} style={{
transformOrigin: "left top",
transform: this.transform,
width: this.width,
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 872a2138b..0389a3f85 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -10,5 +10,9 @@
.formattedTextBox-cont {
background: beige;
- padding: 1vw;
+ padding: 0;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ color: initial;
+ height: 100%;
} \ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index c0969a8c3..60ee0b5e1 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -112,12 +112,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
}
}
render() {
+ var val = this.props.doc.Get(this.props.fieldKey);
return (<div className="formattedTextBox-cont"
- style={{
- color: "initial",
- whiteSpace: "initial",
- height: "auto"
- }}
onPointerDown={this.onPointerDown}
ref={this._ref} />)
}
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 5b15b3329..ea459b911 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -4,12 +4,14 @@
position: relative;
text-align: center;
width: 100%;
+ height: auto;
max-width: 100%;
max-height: 100%
}
+
.imageBox-cont img {
- max-width: 100%;
- max-height: 100%
+ object-fit: contain;
+ height: 100%;
}
.imageBox-button {
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 290fa2be7..a3b39735d 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -19,6 +19,7 @@ export namespace KeyStore {
export const ViewType = new Key("ViewType");
export const Layout = new Key("Layout");
export const BackgroundLayout = new Key("BackgroundLayout");
+ export const OverlayLayout = new Key("OverlayLayout");
export const LayoutKeys = new Key("LayoutKeys");
export const LayoutFields = new Key("LayoutFields");
export const ColumnsKey = new Key("SchemaColumns");
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:10:03 +0000