aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Utils.ts5
-rw-r--r--src/client/views/DocumentDecorations.tsx3
-rw-r--r--src/client/views/GlobalKeyHandler.ts2
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx5
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx2
-rw-r--r--src/client/views/document_templates/image_card/ImageCard.tsx3
-rw-r--r--src/client/views/linking/LinkFollowBox.tsx2
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.scss5
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx48
-rw-r--r--src/client/views/nodes/DocumentView.scss42
-rw-r--r--src/client/views/nodes/DocumentView.tsx286
-rw-r--r--src/client/views/nodes/ImageBox.tsx5
12 files changed, 215 insertions, 193 deletions
diff --git a/src/Utils.ts b/src/Utils.ts
index 3921a49c3..415023ac4 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -37,6 +37,7 @@ export class Utils {
public static prepend(extension: string): string {
return window.location.origin + extension;
}
+
public static CorsProxy(url: string): string {
return this.prepend(RouteStore.corsProxy + "/") + encodeURIComponent(url);
}
@@ -239,6 +240,10 @@ export function timenow() {
return now.toLocaleDateString() + ' ' + h + ':' + m + ' ' + ampm;
}
+export function percent2frac(percent: string) {
+ return Number(percent.substr(0, percent.length - 1)) / 100;
+}
+
export function numberRange(num: number) { return Array.from(Array(num)).map((v, i) => i); }
export function returnTrue() { return true; }
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 240abaf6b..7829bd7f1 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -16,7 +16,7 @@ import { undoBatch, UndoManager } from "../util/UndoManager";
import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss";
import { CollectionView } from "./collections/CollectionView";
import './DocumentDecorations.scss';
-import { DocumentView, PositionDocument } from "./nodes/DocumentView";
+import { DocumentView } from "./nodes/DocumentView";
import { FieldView } from "./nodes/FieldView";
import { FormattedTextBox, GoogleRef } from "./nodes/FormattedTextBox";
import { IconBox } from "./nodes/IconBox";
@@ -34,6 +34,7 @@ import { ObjectField } from '../../new_fields/ObjectField';
import { DocServer } from '../DocServer';
import { CompileScript } from '../util/Scripting';
import { ComputedField } from '../../new_fields/ScriptField';
+import { PositionDocument } from './nodes/CollectionFreeFormDocumentView';
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index f9ee22f61..ba125d6e5 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -166,7 +166,7 @@ export default class KeyManager {
break;
case "o":
let target = SelectionManager.SelectedDocuments()[0];
- target && target.fullScreenClicked();
+ target && CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(target)
break;
case "r":
preventDefault = false;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index bf55dba31..a350cfcc5 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -86,6 +86,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
dragSource._dragListener.onMouseDown(e);
}
+ @undoBatch
@action
public OpenFullScreen(docView: DocumentView) {
let document = Doc.MakeAlias(docView.props.Document);
@@ -101,6 +102,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
this._maximizedSrc = docView;
this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig());
this.stateChanged();
+ SelectionManager.DeselectAll();
}
public CloseFullScreen = () => {
@@ -169,6 +171,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
//
// Creates a vertical split on the right side of the docking view, and then adds the Document to that split
//
+ @undoBatch
@action
public AddRightSplit = (document: Doc, dataDoc: Doc | undefined, minimize: boolean = false) => {
let docs = Cast(this.props.Document.data, listSpec(Doc));
@@ -207,6 +210,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
return newContentItem;
}
+
+ @undoBatch
@action
public AddTab = (stack: any, document: Doc, dataDocument: Doc | undefined) => {
Doc.GetProto(document).lastOpened = new DateField;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e2d9bbb33..f32843d98 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -862,7 +862,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
let layoutItems: ContextMenuProps[] = [];
if (this.childDocs.some(d => BoolCast(d.isTemplate))) {
- layoutItems.push({ description: "Template Layout Instance", event: () => this.props.addDocTab && this.props.addDocTab(Doc.ApplyTemplate(this.props.Document)!, undefined, "onRight"), icon: "project-diagram" });
+ layoutItems.push({ description: "Template Layout Instance", event: () => this.props.addDocTab(Doc.ApplyTemplate(this.props.Document)!, undefined, "onRight"), icon: "project-diagram" });
}
layoutItems.push({ description: "reset view", event: () => { this.props.Document.panX = this.props.Document.panY = 0; this.props.Document.scale = 1; }, icon: "compress-arrows-alt" });
layoutItems.push({ description: `${this.fitToBox ? "Unset" : "Set"} Fit To Container`, event: async () => this.Document.fitToBox = !this.fitToBox, icon: !this.fitToBox ? "expand-arrows-alt" : "compress-arrows-alt" });
diff --git a/src/client/views/document_templates/image_card/ImageCard.tsx b/src/client/views/document_templates/image_card/ImageCard.tsx
index 9931515f3..868afc423 100644
--- a/src/client/views/document_templates/image_card/ImageCard.tsx
+++ b/src/client/views/document_templates/image_card/ImageCard.tsx
@@ -1,8 +1,5 @@
import * as React from 'react';
-import { DocComponent } from '../../DocComponent';
import { FieldViewProps } from '../../nodes/FieldView';
-import { createSchema, makeInterface } from '../../../../new_fields/Schema';
-import { createInterface } from 'readline';
import { ImageBox } from '../../nodes/ImageBox';
export default class ImageCard extends React.Component<FieldViewProps> {
diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx
index f8807641b..b1c6c367f 100644
--- a/src/client/views/linking/LinkFollowBox.tsx
+++ b/src/client/views/linking/LinkFollowBox.tsx
@@ -172,7 +172,6 @@ export class LinkFollowBox extends React.Component<FieldViewProps> {
if (LinkFollowBox.destinationDoc) {
let view: DocumentView | null = DocumentManager.Instance.getDocumentView(LinkFollowBox.destinationDoc);
view && CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(view);
- SelectionManager.DeselectAll();
}
}
@@ -188,7 +187,6 @@ export class LinkFollowBox extends React.Component<FieldViewProps> {
let view = DocumentManager.Instance.getDocumentView(options.context);
view && CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(view);
this.highlightDoc();
- SelectionManager.DeselectAll();
}
}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.scss b/src/client/views/nodes/CollectionFreeFormDocumentView.scss
new file mode 100644
index 000000000..c0d9e1267
--- /dev/null
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.scss
@@ -0,0 +1,5 @@
+.collectionFreeFormDocumentView-container {
+ transform-origin: left top;
+ position: absolute;
+ background-color: transparent;
+} \ No newline at end of file
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 865eb27d5..9f0bd736d 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,11 +1,12 @@
import { computed } from "mobx";
import { observer } from "mobx-react";
import { createSchema, makeInterface } from "../../../new_fields/Schema";
-import { BoolCast, FieldValue, NumCast, StrCast, Cast } from "../../../new_fields/Types";
+import { FieldValue, NumCast, StrCast, Cast } from "../../../new_fields/Types";
import { Transform } from "../../util/Transform";
import { DocComponent } from "../DocComponent";
-import { DocumentView, DocumentViewProps, positionSchema } from "./DocumentView";
-import "./DocumentView.scss";
+import { percent2frac } from "../../../Utils"
+import { DocumentView, DocumentViewProps, documentSchema } from "./DocumentView";
+import "./CollectionFreeFormDocumentView.scss";
import React = require("react");
import { Doc } from "../../../new_fields/Doc";
import { random } from "animejs";
@@ -17,30 +18,31 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
height?: number;
jitterRotation: number;
}
-
-const schema = createSchema({
+const positionSchema = createSchema({
zIndex: "number",
+ x: "number",
+ y: "number",
+ z: "number",
});
-//TODO Types: The import order is wrong, so positionSchema is undefined
-type FreeformDocument = makeInterface<[typeof schema, typeof positionSchema]>;
-const FreeformDocument = makeInterface(schema, positionSchema);
+export type PositionDocument = makeInterface<[typeof documentSchema, typeof positionSchema]>;
+export const PositionDocument = makeInterface(documentSchema, positionSchema);
@observer
-export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps, FreeformDocument>(FreeformDocument) {
+export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps, PositionDocument>(PositionDocument) {
@computed get transform() { return `scale(${this.props.ContentScaling()}) translate(${this.X}px, ${this.Y}px) rotate(${random(-1, 1) * this.props.jitterRotation}deg)`; }
@computed get X() { return this.renderScriptDim ? this.renderScriptDim.x : this.props.x !== undefined ? this.props.x : this.Document.x || 0; }
@computed get Y() { return this.renderScriptDim ? this.renderScriptDim.y : this.props.y !== undefined ? this.props.y : this.Document.y || 0; }
- @computed get width(): number { return BoolCast(this.props.Document.willMaximize) ? 0 : this.renderScriptDim ? this.renderScriptDim.width : this.props.width !== undefined ? this.props.width : this.Document.width || 0; }
- @computed get height(): number { return BoolCast(this.props.Document.willMaximize) ? 0 : this.renderScriptDim ? this.renderScriptDim.height : this.props.height !== undefined ? this.props.height : this.Document.height || 0; }
- @computed get nativeWidth(): number { return FieldValue(this.Document.nativeWidth, 0); }
- @computed get nativeHeight(): number { return FieldValue(this.Document.nativeHeight, 0); }
- @computed get scaleToOverridingWidth() { return this.width / NumCast(this.props.Document.width, this.width); }
+ @computed get width() { return this.Document.willMaximize ? 0 : this.renderScriptDim ? this.renderScriptDim.width : this.props.width !== undefined ? this.props.width : this.Document.width || 0; }
+ @computed get height() { return this.Document.willMaximize ? 0 : this.renderScriptDim ? this.renderScriptDim.height : this.props.height !== undefined ? this.props.height : this.Document.height || 0; }
+ @computed get nativeWidth() { return FieldValue(this.Document.nativeWidth, 0); }
+ @computed get nativeHeight() { return FieldValue(this.Document.nativeHeight, 0); }
+ @computed get scaleToOverridingWidth() { return this.width / FieldValue(this.Document.width, this.width); }
@computed get renderScriptDim() {
if (this.Document.renderScript) {
- let someView = Cast(this.Document.someView, Doc);
- let minimap = Cast(this.Document.minimap, Doc);
+ let someView = Cast(this.props.Document.someView, Doc);
+ let minimap = Cast(this.props.Document.minimap, Doc);
if (someView instanceof Doc && minimap instanceof Doc) {
let x = (NumCast(someView.panX) - NumCast(someView.width) / 2 / NumCast(someView.scale) - (NumCast(minimap.fitX) - NumCast(minimap.fitW) / 2)) / NumCast(minimap.fitW) * NumCast(minimap.width) - NumCast(minimap.width) / 2;
let y = (NumCast(someView.panY) - NumCast(someView.height) / 2 / NumCast(someView.scale) - (NumCast(minimap.fitY) - NumCast(minimap.fitH) / 2)) / NumCast(minimap.fitH) * NumCast(minimap.height) - NumCast(minimap.height) / 2;
@@ -52,7 +54,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
return undefined;
}
- contentScaling = () => this.nativeWidth > 0 && !BoolCast(this.props.Document.ignoreAspect) ? this.width / this.nativeWidth : 1;
+ contentScaling = () => this.nativeWidth > 0 && !this.props.Document.ignoreAspect ? this.width / this.nativeWidth : 1;
panelWidth = () => this.props.PanelWidth();
panelHeight = () => this.props.PanelHeight();
getTransform = (): Transform => this.props.ScreenToLocalTransform()
@@ -74,15 +76,12 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
}
borderRounding = () => {
- let ruleProvider = this.props.ruleProvider;
- let ruleRounding = ruleProvider ? StrCast(Doc.GetProto(ruleProvider)["ruleRounding_" + NumCast(this.props.Document.heading)]) : undefined;
- let br = StrCast(this.layoutDoc.layout instanceof Doc ? this.layoutDoc.layout.borderRounding : this.props.Document.borderRounding);
+ let ruleRounding = this.props.ruleProvider ? StrCast(this.props.ruleProvider["ruleRounding_" + this.Document.heading]) : undefined;
+ let br = StrCast(((this.layoutDoc.layout as Doc) || this.Document).borderRounding);
br = !br && ruleRounding ? ruleRounding : br;
if (br.endsWith("%")) {
- let percent = Number(br.substr(0, br.length - 1)) / 100;
let nativeDim = Math.min(NumCast(this.layoutDoc.nativeWidth), NumCast(this.layoutDoc.nativeHeight));
- let minDim = percent * (nativeDim ? nativeDim : Math.min(this.props.PanelWidth(), this.props.PanelHeight()));
- return minDim;
+ return percent2frac(br) * (nativeDim ? nativeDim : Math.min(this.props.PanelWidth(), this.props.PanelHeight()));
}
return undefined;
}
@@ -103,9 +102,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
return (
<div className="collectionFreeFormDocumentView-container"
style={{
- transformOrigin: "left top",
- position: "absolute",
- backgroundColor: "transparent",
boxShadow:
this.layoutDoc.opacity === 0 ? undefined : // if it's not visible, then no shadow
this.layoutDoc.z ? `#9c9396 ${StrCast(this.layoutDoc.boxShadow, "10px 10px 0.9vw")}` : // if it's a floating doc, give it a big shadow
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 7c72fb6e6..63011f271 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -4,6 +4,8 @@
position: inherit;
top: 0;
left:0;
+ border-radius: inherit;
+
// background: $light-color; //overflow: hidden;
transform-origin: left top;
@@ -30,4 +32,44 @@
}
.documentView-node-topmost {
background: white;
+}
+
+.documentView-styleWrapper {
+ position: absolute;
+ display: inline-block;
+ width:100%;
+ height:100%;
+ pointer-events: none;
+
+ .documentView-styleContentWrapper {
+ width:100%;
+ display: inline-block;
+ position: absolute;
+ }
+ .documentView-titleWrapper {
+ overflow:hidden;
+ color: white;
+ transform-origin: top left;
+ top: 0;
+ height: 25;
+ background: rgba(0, 0, 0, .4);
+ padding: 4px;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: pre;
+ }
+
+ .documentView-searchHighlight {
+ position: absolute;
+ background: yellow;
+ bottom: -20px;
+ border-radius: 5px;
+ transform-origin: bottom left;
+ }
+
+ .documentView-captionWrapper {
+ position: absolute;
+ bottom: 0;
+ transform-origin: bottom left;
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c9bd60d35..92acfffb3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -106,31 +106,38 @@ export interface DocumentViewProps {
ChromeHeight?: () => number;
}
-const schema = createSchema({
- layout: "string",
+export const documentSchema = createSchema({
+ layout: "string", // should also allow Doc but that can't be expressed in the schema
+ title: "string",
nativeWidth: "number",
nativeHeight: "number",
backgroundColor: "string",
opacity: "number",
hidden: "boolean",
onClick: ScriptField,
-});
-
-export const positionSchema = createSchema({
- nativeWidth: "number",
- nativeHeight: "number",
+ willMaximize: "boolean",
+ ignoreAspect: "boolean",
+ autoHeight: "boolean",
+ isTemplate: "boolean",
+ isButton: "boolean",
+ isBackground: "boolean",
+ ignoreClick: "boolean",
+ type: "string",
+ maximizeLocation: "string",
+ lockedPosition: "boolean",
+ excludeFromLibrary: "boolean",
width: "number",
height: "number",
- x: "number",
- y: "number",
- z: "number",
+ borderRounding: "string",
+ fitToBox: "boolean",
+ searchFields: "string",
+ heading: "number",
+ showCaption: "string",
+ showTitle: "string"
});
-export type PositionDocument = makeInterface<[typeof positionSchema]>;
-export const PositionDocument = makeInterface(positionSchema);
-
-type Document = makeInterface<[typeof schema]>;
-const Document = makeInterface(schema);
+type Document = makeInterface<[typeof documentSchema]>;
+const Document = makeInterface(documentSchema);
@observer
export class DocumentView extends DocComponent<DocumentViewProps, Document>(Document) {
@@ -259,7 +266,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
if (e.nativeEvent.cancelBubble) return; // || SelectionManager.IsSelected(this)) -- bcz: needed because EditableView may stopPropagation which won't apparently stop this event from firing.
if (this.onClickHandler && this.onClickHandler.script) {
e.stopPropagation();
- this.onClickHandler.script.run({ this: this.props.Document.isTemplate && this.props.DataDoc ? this.props.DataDoc : this.props.Document });
+ this.onClickHandler.script.run({ this: this.Document.isTemplate && this.props.DataDoc ? this.props.DataDoc : this.props.Document });
e.preventDefault();
return;
}
@@ -268,23 +275,18 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
if (this._doubleTap && this.props.renderDepth) {
e.stopPropagation();
let fullScreenAlias = Doc.MakeAlias(this.props.Document);
- fullScreenAlias.templates = new List<string>();
Doc.UseDetailLayout(fullScreenAlias);
- fullScreenAlias.showCaption = true;
+ fullScreenAlias.showCaption = "caption";
this.props.addDocTab(fullScreenAlias, this.dataDoc, "inTab");
SelectionManager.DeselectAll();
Doc.UnBrushDoc(this.props.Document);
}
- else if (CurrentUserUtils.MainDocId !== this.props.Document[Id] &&
+ else if (!this.Document.ignoreClick && CurrentUserUtils.MainDocId !== this.props.Document[Id] &&
(Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
- if (BoolCast(this.props.Document.ignoreClick)) {
- return;
- }
e.stopPropagation();
SelectionManager.SelectDoc(this, e.ctrlKey);
- let isExpander = (e.target as any).id === "isExpander";
- if (BoolCast(this.props.Document.isButton) || this.props.Document.type === DocumentType.BUTTON || isExpander) {
+ if (this.Document.isButton || this.Document.type === DocumentType.BUTTON) {
let maximizedDocs = await DocListCastAsync(this.props.Document.maximizedDocs);
let summarizedDocs = await DocListCastAsync(this.props.Document.summarizedDocs);
let linkedDocs = LinkManager.Instance.getAllRelatedLinks(this.props.Document);
@@ -292,12 +294,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
expandedDocs = maximizedDocs ? [...maximizedDocs, ...expandedDocs] : expandedDocs;
expandedDocs = summarizedDocs ? [...summarizedDocs, ...expandedDocs] : expandedDocs;
// let expandedDocs = [ ...(maximizedDocs ? maximizedDocs : []), ...(summarizedDocs ? summarizedDocs : []),];
- if (expandedDocs.length) { // bcz: need a better way to associate behaviors with click events on widget-documents
+ if (expandedDocs.length) {
SelectionManager.DeselectAll();
- let maxLocation = StrCast(this.props.Document.maximizeLocation, "inPlace");
+ let maxLocation = StrCast(this.Document.maximizeLocation, "inPlace");
let getDispDoc = (target: Doc) => Object.getOwnPropertyNames(target).indexOf("isPrototype") === -1 ? target : Doc.MakeDelegate(target);
if (altKey || ctrlKey) {
- maxLocation = this.props.Document.maximizeLocation = (ctrlKey ? maxLocation : (maxLocation === "inPlace" || !maxLocation ? "inTab" : "inPlace"));
+ maxLocation = this.Document.maximizeLocation = (ctrlKey ? maxLocation : (maxLocation === "inPlace" || !maxLocation ? "inTab" : "inPlace"));
if (!maxLocation || maxLocation === "inPlace") {
let hadView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedDocs[0], this.props.ContainingCollectionView);
let wasMinimized = !hadView && expandedDocs.reduce((min, d) => !min && !d.isMinimized, false);
@@ -379,8 +381,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
document.removeEventListener("pointermove", this.onPointerMove);
}
else if (!e.cancelBubble && this.active) {
- if (!this.props.Document.excludeFromLibrary && (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3)) {
- if (!e.altKey && !this.topMost && e.buttons === 1 && !BoolCast(this.props.Document.lockedPosition)) {
+ if (!this.Document.excludeFromLibrary && (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3)) {
+ if (!e.altKey && !this.topMost && e.buttons === 1 && !BoolCast(this.Document.lockedPosition)) {
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey ? "alias" : undefined, this._hitTemplateDrag);
@@ -401,38 +403,32 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
deleteClicked = (): void => { SelectionManager.DeselectAll(); this.props.removeDocument && this.props.removeDocument(this.props.Document); }
@undoBatch
- fieldsClicked = (): void => {
- let kvp = Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 });
- this.props.addDocTab(kvp, this.dataDoc, "onRight");
- }
-
- @undoBatch
makeNativeViewClicked = (): void => {
makeNativeView(this.props.Document);
}
@undoBatch
makeCustomViewClicked = (): void => {
- this.props.Document.nativeLayout = this.props.Document.layout;
- this.props.Document.nativeType = this.props.Document.type;
- this.props.Document.nonCustomAutoHeight = this.props.Document.autoHeight;
- this.props.Document.nonCustomWidth = this.props.Document.width;
- this.props.Document.nonCustomHeight = this.props.Document.height;
- this.props.Document.nonCustomNativeWidth = this.props.Document.nativeWidth;
- this.props.Document.nonCustomNativeHeight = this.props.Document.nativeHeight;
- this.props.Document.nonCustomIgnoreAspect = this.props.Document.ignoreAspect;
+ this.props.Document.nativeLayout = this.Document.layout;
+ this.props.Document.nativeType = this.Document.type;
+ this.props.Document.nonCustomAutoHeight = this.Document.autoHeight;
+ this.props.Document.nonCustomWidth = this.Document.width;
+ this.props.Document.nonCustomHeight = this.Document.height;
+ this.props.Document.nonCustomNativeWidth = this.Document.nativeWidth;
+ this.props.Document.nonCustomNativeHeight = this.Document.nativeHeight;
+ this.props.Document.nonCustomIgnoreAspect = this.Document.ignoreAspect;
PromiseValue(Cast(this.props.Document.customLayout, Doc)).then(custom => {
if (custom) {
- this.props.Document.type = DocumentType.TEMPLATE;
+ this.Document.type = DocumentType.TEMPLATE;
this.props.Document.layout = custom;
- !custom.nativeWidth && (this.props.Document.nativeWidth = 0);
- !custom.nativeHeight && (this.props.Document.nativeHeight = 0);
- !custom.nativeWidth && (this.props.Document.ignoreAspect = true);
- this.props.Document.autoHeight = this.props.Document.autoHeight;
- this.props.Document.width = this.props.Document.customWidth;
- this.props.Document.height = this.props.Document.customHeight;
- this.props.Document.nativeWidth = this.props.Document.customNativeWidth;
- this.props.Document.nativeHeight = this.props.Document.customNativeHeight;
- this.props.Document.ignoreAspect = this.props.Document.ignoreAspect;
+ !custom.nativeWidth && (this.Document.nativeWidth = 0);
+ !custom.nativeHeight && (this.Document.nativeHeight = 0);
+ !custom.nativeWidth && (this.Document.ignoreAspect = true);
+ this.Document.autoHeight = BoolCast(this.Document.customAutoHeight);
+ this.Document.width = NumCast(this.props.Document.customWidth);
+ this.Document.height = NumCast(this.props.Document.customHeight);
+ this.Document.nativeWidth = NumCast(this.props.Document.customNativeWidth);
+ this.Document.nativeHeight = NumCast(this.props.Document.customNativeHeight);
+ this.Document.ignoreAspect = BoolCast(this.Document.customIgnoreAspect);
this.props.Document.customAutoHeight = undefined;
this.props.Document.customWidth = undefined;
this.props.Document.customHeight = undefined;
@@ -440,21 +436,21 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
this.props.Document.customNativeHeight = undefined;
this.props.Document.customIgnoreAspect = undefined;
} else {
- let options = { title: "data", width: NumCast(this.props.Document.width), x: -NumCast(this.props.Document.width) / 2, y: -NumCast(this.props.Document.height) / 2, };
- let fieldTemplate = this.props.Document.type === DocumentType.TEXT ? Docs.Create.TextDocument(options) :
- this.props.Document.type === DocumentType.VID ? Docs.Create.VideoDocument("http://www.cs.brown.edu", options) :
+ let options = { title: "data", width: (this.Document.width || 0), x: -(this.Document.width || 0) / 2, y: - (this.Document.height || 0) / 2, };
+ let fieldTemplate = this.Document.type === DocumentType.TEXT ? Docs.Create.TextDocument(options) :
+ this.Document.type === DocumentType.VID ? Docs.Create.VideoDocument("http://www.cs.brown.edu", options) :
Docs.Create.ImageDocument("http://www.cs.brown.edu", options);
- fieldTemplate.backgroundColor = StrCast(this.props.Document.backgroundColor);
+ fieldTemplate.backgroundColor = this.Document.backgroundColor;
fieldTemplate.heading = 1;
fieldTemplate.autoHeight = true;
- let docTemplate = Docs.Create.FreeformDocument([fieldTemplate], { title: StrCast(this.Document.title) + "layout", width: NumCast(this.props.Document.width) + 20, height: Math.max(100, NumCast(this.props.Document.height) + 45) });
+ let docTemplate = Docs.Create.FreeformDocument([fieldTemplate], { title: this.Document.title + "layout", width: (this.Document.width || 0) + 20, height: Math.max(100, (this.Document.height || 0) + 45) });
let proto = Doc.GetProto(docTemplate);
Doc.MakeMetadataFieldTemplate(fieldTemplate, proto, true);
Doc.ApplyTemplateTo(docTemplate, this.props.Document, undefined, false);
- Doc.GetProto(this.dataDoc || this.props.Document).customLayout = this.props.Document.layout;
+ Doc.GetProto(this.dataDoc || this.props.Document).customLayout = this.Document.layout;
}
});
}
@@ -468,21 +464,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
} else {
doc.isButton = true;
}
-
- // if (doc.isButton) {
- // if (!doc.nativeWidth) {
- // doc.nativeWidth = this.props.Document[WidthSym]();
- // doc.nativeHeight = this.props.Document[HeightSym]();
- // }
- // } else {
- // doc.nativeWidth = doc.nativeHeight = undefined;
- // }
- }
-
- @undoBatch
- public fullScreenClicked = (): void => {
- CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(this);
- SelectionManager.DeselectAll();
}
@undoBatch
@@ -543,10 +524,10 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
@undoBatch
@action
freezeNativeDimensions = (): void => {
- let proto = this.props.Document.isTemplate ? this.props.Document : Doc.GetProto(this.props.Document);
- this.props.Document.autoHeight = proto.autoHeight = false;
- proto.ignoreAspect = !BoolCast(proto.ignoreAspect);
- if (!BoolCast(proto.ignoreAspect) && !proto.nativeWidth) {
+ let proto = this.Document.isTemplate ? this.props.Document : Doc.GetProto(this.props.Document);
+ proto.autoHeight = this.Document.autoHeight = false;
+ proto.ignoreAspect = !proto.ignoreAspect;
+ if (!proto.ignoreAspect && !proto.nativeWidth) {
proto.nativeWidth = this.props.PanelWidth();
proto.nativeHeight = this.props.PanelHeight();
}
@@ -555,12 +536,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
@action
makeIntoPortal = (): void => {
if (!DocListCast(this.props.Document.links).find(doc => {
- if (Cast(doc.anchor2, Doc) instanceof Doc && (Cast(doc.anchor2, Doc) as Doc)!.title === this.props.Document.title + ".portal") return true;
+ if (Cast(doc.anchor2, Doc) instanceof Doc && (Cast(doc.anchor2, Doc) as Doc)!.title === this.Document.title + ".portal") return true;
return false;
})) {
- let portalID = (this.props.Document.title + ".portal").replace(/^-/, "").replace(/\([0-9]*\)$/, "");
+ let portalID = (this.Document.title + ".portal").replace(/^-/, "").replace(/\([0-9]*\)$/, "");
DocServer.GetRefField(portalID).then(existingPortal => {
- let portal = existingPortal instanceof Doc ? existingPortal : Docs.Create.FreeformDocument([], { width: this.props.Document[WidthSym]() + 10, height: this.props.Document[HeightSym](), title: portalID });
+ let portal = existingPortal instanceof Doc ? existingPortal : Docs.Create.FreeformDocument([], { width: (this.Document.width || 0) + 10, height: this.Document.height || 0, title: portalID });
DocUtils.MakeLink(this.props.Document, portal, undefined, portalID);
Doc.GetProto(this.props.Document).isButton = true;
})
@@ -618,15 +599,14 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
const cm = ContextMenu.Instance;
let subitems: ContextMenuProps[] = [];
- subitems.push({ description: "Open Full Screen", event: this.fullScreenClicked, icon: "desktop" });
- subitems.push({ description: "Open Tab", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document, this.dataDoc, "inTab"), icon: "folder" });
- subitems.push({ description: "Open Tab Alias", event: () => this.props.addDocTab && this.props.addDocTab(Doc.MakeAlias(this.props.Document), this.dataDoc, "inTab"), icon: "folder" });
- subitems.push({ description: "Open Right", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document, this.dataDoc, "onRight"), icon: "caret-square-right" });
- subitems.push({ description: "Open Right Alias", event: () => this.props.addDocTab && this.props.addDocTab(Doc.MakeAlias(this.props.Document), this.dataDoc, "onRight"), icon: "caret-square-right" });
- subitems.push({ description: "Open Fields", event: this.fieldsClicked, icon: "layer-group" });
+ subitems.push({ description: "Open Full Screen", event: () => CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(this), icon: "desktop" });
+ subitems.push({ description: "Open Tab ", event: () => this.props.addDocTab(this.props.Document, this.dataDoc, "inTab"), icon: "folder" });
+ subitems.push({ description: "Open Right ", event: () => this.props.addDocTab(this.props.Document, this.dataDoc, "onRight"), icon: "caret-square-right" });
+ subitems.push({ description: "Open Alias Tab ", event: () => this.props.addDocTab(Doc.MakeAlias(this.props.Document), this.dataDoc, "inTab"), icon: "folder" });
+ subitems.push({ description: "Open Alias Right", event: () => this.props.addDocTab(Doc.MakeAlias(this.props.Document), this.dataDoc, "onRight"), icon: "caret-square-right" });
+ subitems.push({ description: "Open Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group" });
cm.addItem({ description: "Open...", subitems: subitems, icon: "external-link-alt" });
-
let existingOnClick = ContextMenu.Instance.findByDescription("OnClick...");
let onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : [];
onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" });
@@ -643,7 +623,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
}, icon: "window-restore"
});
onClicks.push({ description: this.layoutDoc.ignoreClick ? "Select" : "Do Nothing", event: () => this.layoutDoc.ignoreClick = !this.layoutDoc.ignoreClick, icon: this.layoutDoc.ignoreClick ? "unlock" : "lock" });
- onClicks.push({ description: this.props.Document.isButton || this.props.Document.onClick ? "Remove Click Behavior" : "Follow Link", event: this.makeBtnClicked, icon: "concierge-bell" });
+ onClicks.push({ description: this.Document.isButton || this.Document.onClick ? "Remove Click Behavior" : "Follow Link", event: this.makeBtnClicked, icon: "concierge-bell" });
onClicks.push({ description: "Edit onClick Script", icon: "edit", event: (obj: any) => ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", obj.x, obj.y) });
onClicks.push({
description: "Edit onClick Foreach Doc Script", icon: "edit", event: (obj: any) => {
@@ -655,20 +635,20 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
let existing = ContextMenu.Instance.findByDescription("Layout...");
let layoutItems: ContextMenuProps[] = existing && "subitems" in existing ? existing.subitems : [];
- layoutItems.push({ description: this.props.Document.isBackground ? "As Foreground" : "As Background", event: this.makeBackground, icon: this.props.Document.lockedPosition ? "unlock" : "lock" });
+ layoutItems.push({ description: this.Document.isBackground ? "As Foreground" : "As Background", event: this.makeBackground, icon: this.Document.lockedPosition ? "unlock" : "lock" });
if (this.props.DataDoc) {
layoutItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc!), icon: "concierge-bell" })
}
layoutItems.push({ description: `${this.layoutDoc.chromeStatus !== "disabled" ? "Hide" : "Show"} Chrome`, event: () => this.layoutDoc.chromeStatus = (this.layoutDoc.chromeStatus !== "disabled" ? "disabled" : "enabled"), icon: "project-diagram" });
layoutItems.push({ description: `${this.layoutDoc.autoHeight ? "Variable Height" : "Auto Height"}`, event: () => this.layoutDoc.autoHeight = !this.layoutDoc.autoHeight, icon: "plus" });
- layoutItems.push({ description: this.props.Document.ignoreAspect || !this.props.Document.nativeWidth || !this.props.Document.nativeHeight ? "Freeze" : "Unfreeze", event: this.freezeNativeDimensions, icon: "snowflake" });
+ layoutItems.push({ description: this.Document.ignoreAspect || !this.Document.nativeWidth || !this.Document.nativeHeight ? "Freeze" : "Unfreeze", event: this.freezeNativeDimensions, icon: "snowflake" });
layoutItems.push({ description: this.layoutDoc.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.layoutDoc.lockedPosition) ? "unlock" : "lock" });
layoutItems.push({ description: "Center View", event: () => this.props.focus(this.props.Document, false), icon: "crosshairs" });
layoutItems.push({ description: "Zoom to Document", event: () => this.props.focus(this.props.Document, true), icon: "search" });
- if (this.props.Document.detailedLayout && !this.props.Document.isTemplate) {
+ if (this.props.Document.detailedLayout && !this.Document.isTemplate) {
layoutItems.push({ description: "Toggle detail", event: () => Doc.ToggleDetailLayout(this.props.Document), icon: "image" });
}
- if (this.props.Document.type !== DocumentType.COL && this.props.Document.type !== DocumentType.TEMPLATE) {
+ if (this.Document.type !== DocumentType.COL && this.Document.type !== DocumentType.TEMPLATE) {
layoutItems.push({ description: "Use Custom Layout", event: this.makeCustomViewClicked, icon: "concierge-bell" });
} else if (this.props.Document.nativeLayout) {
layoutItems.push({ description: "Use Native Layout", event: this.makeNativeViewClicked, icon: "concierge-bell" });
@@ -700,7 +680,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
}
});
- cm.addItem({ description: "Publish", event: () => DocUtils.Publish(this.props.Document, StrCast(this.props.Document.title), this.props.addDocument, this.props.removeDocument), icon: "file" });
+ cm.addItem({ description: "Publish", event: () => DocUtils.Publish(this.props.Document, this.Document.title || "", this.props.addDocument, this.props.removeDocument), icon: "file" });
cm.addItem({ description: "Delete", event: this.deleteClicked, icon: "trash" });
type User = { email: string, userDocumentId: string };
let usersMenu: ContextMenuProps[] = [];
@@ -780,7 +760,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
select={this.select}
onClick={this.onClickHandler}
layoutKey={"layout"}
- fitToBox={BoolCast(this.props.Document.fitToBox) ? true : this.props.fitToBox}
+ fitToBox={this.Document.fitToBox ? true : this.props.fitToBox}
DataDoc={this.dataDoc} />);
}
@@ -796,55 +776,66 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
return (showTitle ? 25 : 0) + 1;// bcz: why 8??
}
- get layoutDoc() {
+ get layoutDoc(): Document {
// if this document's layout field contains a document (ie, a rendering template), then we will use that
// to determine the render JSX string, otherwise the layout field should directly contain a JSX layout string.
- return this.props.Document.layout instanceof Doc ? this.props.Document.layout : this.props.Document;
+ return Document(this.props.Document.layout instanceof Doc ? this.props.Document.layout : this.props.Document);
}
-
render() {
- let ruleProvider = this.props.ruleProvider;
- let ruleColor = ruleProvider ? StrCast(Doc.GetProto(ruleProvider)["ruleColor_" + NumCast(this.props.Document.heading)]) : undefined;
- let ruleRounding = ruleProvider ? StrCast(Doc.GetProto(ruleProvider)["ruleRounding_" + NumCast(this.props.Document.heading)]) : undefined;
- let colorSet = this.layoutDoc.backgroundColor !== this.layoutDoc.defaultBackgroundColor;
- let clusterCol = this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.Document.clusterOverridesDefaultBackground;
-
- let backgroundColor = this.layoutDoc.isBackground || (clusterCol && !colorSet) ?
+ const ruleColor = this.props.ruleProvider ? StrCast(this.props.ruleProvider["ruleColor_" + this.Document.heading]) : undefined;
+ const ruleRounding = this.props.ruleProvider ? StrCast(this.props.ruleProvider["ruleRounding_" + this.Document.heading]) : undefined;
+ const colorSet = this.layoutDoc.backgroundColor !== this.layoutDoc.defaultBackgroundColor;
+ const clusterCol = this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.Document.clusterOverridesDefaultBackground;
+ const backgroundColor = this.layoutDoc.isBackground || (clusterCol && !colorSet) ?
this.props.backgroundColor(this.layoutDoc) || StrCast(this.layoutDoc.backgroundColor) :
ruleColor && !colorSet ? ruleColor : StrCast(this.layoutDoc.backgroundColor) || this.props.backgroundColor(this.layoutDoc);
- let foregroundColor = StrCast(this.layoutDoc.color);
- var nativeWidth = this.props.Document.willMaximize ? 0 : this.nativeWidth > 0 && !BoolCast(this.props.Document.ignoreAspect) ? `${this.nativeWidth}px` : "100%";
- var nativeHeight = this.props.Document.willMaximize ? 0 : BoolCast(this.props.Document.ignoreAspect) ? this.props.PanelHeight() / this.props.ContentScaling() : this.nativeHeight > 0 ? `${this.nativeHeight}px` : "100%";
- let showOverlays = this.props.showOverlays ? this.props.showOverlays(this.layoutDoc) : undefined;
- let showTitle = showOverlays && "title" in showOverlays ? showOverlays.title : StrCast(this.layoutDoc.showTitle);
- let showCaption = showOverlays && "caption" in showOverlays ? showOverlays.caption : StrCast(this.layoutDoc.showCaption);
- let templates = Cast(this.layoutDoc.templates, listSpec("string"));
- if (!showOverlays && templates instanceof List) {
- templates.map(str => {
- if (!showTitle && str.indexOf("{props.Document.title}") !== -1) showTitle = "title";
- if (!showCaption && str.indexOf("fieldKey={\"caption\"}") !== -1) showCaption = "caption";
- });
- }
- let showTextTitle = showTitle && StrCast(this.layoutDoc.layout).startsWith("<FormattedTextBox") ? showTitle : undefined;
- let fullDegree = Doc.isBrushedHighlightedDegree(this.props.Document);
- let borderRounding = StrCast(Doc.GetProto(this.props.Document).borderRounding, ruleRounding);
- let localScale = this.props.ScreenToLocalTransform().Scale * fullDegree;
- let searchHighlight = (!this.props.Document.search_fields ? (null) :
- <div key="search" style={{ position: "absolute", background: "yellow", bottom: "-20px", borderRadius: "5px", transformOrigin: "bottom left", width: `${100 * this.props.ContentScaling()}%`, transform: `scale(${1 / this.props.ContentScaling()})` }}>
- {StrCast(this.props.Document.search_fields)}
+
+ const nativeWidth = this.Document.willMaximize ? 0 : this.nativeWidth > 0 && !this.Document.ignoreAspect ? `${this.nativeWidth}px` : "100%";
+ const nativeHeight = this.Document.willMaximize ? 0 : this.Document.ignoreAspect ? this.props.PanelHeight() / this.props.ContentScaling() : this.nativeHeight > 0 ? `${this.nativeHeight}px` : "100%";
+ const showOverlays = this.props.showOverlays ? this.props.showOverlays(this.layoutDoc) : undefined;
+ const showTitle = showOverlays && "title" in showOverlays ? showOverlays.title : this.layoutDoc.showTitle;
+ const showCaption = showOverlays && "caption" in showOverlays ? showOverlays.caption : this.layoutDoc.showCaption;
+ const showTextTitle = showTitle && StrCast(this.layoutDoc.layout).indexOf("FormattedTextBox") !== -1 ? showTitle : undefined;
+ const fullDegree = Doc.isBrushedHighlightedDegree(this.props.Document);
+ const borderRounding = this.Document.borderRounding || ruleRounding;
+ const localScale = this.props.ScreenToLocalTransform().Scale * fullDegree;
+ const searchHighlight = (!this.Document.searchFields ? (null) :
+ <div className="documentView-searchHighlight" style={{ width: `${100 * this.props.ContentScaling()}%`, transform: `scale(${1 / this.props.ContentScaling()})` }}>
+ {this.Document.searchFields}
+ </div>);
+ const captionView = (!showCaption ? (null) :
+ <div className="documentView-captionWrapper" style={{ width: `${100 * this.props.ContentScaling()}%`, transform: `scale(${1 / this.props.ContentScaling()})` }}>
+ <FormattedTextBox {...this.props}
+ onClick={this.onClickHandler} DataDoc={this.dataDoc} active={returnTrue}
+ isSelected={this.isSelected} focus={emptyFunction} select={this.select}
+ fieldExt={""} hideOnLeave={true} fieldKey={showCaption}
+ />
+ </div>);
+ const titleView = (!showTitle ? (null) :
+ <div className="documentView-titleWrapper" style={{
+ position: showTextTitle ? "relative" : "absolute",
+ pointerEvents: SelectionManager.GetIsDragging() ? "none" : "all",
+ width: `${100 * this.props.ContentScaling()}%`,
+ transform: `scale(${1 / this.props.ContentScaling()})`
+ }}>
+ <EditableView
+ contents={(this.layoutDoc.isTemplate || !this.dataDoc ? this.layoutDoc : this.dataDoc)[showTitle]}
+ display={"block"} height={72} fontSize={12}
+ GetValue={() => StrCast((this.layoutDoc.isTemplate || !this.dataDoc ? this.layoutDoc : this.dataDoc)[showTitle])}
+ SetValue={(value: string) => ((this.layoutDoc.isTemplate ? this.layoutDoc : Doc.GetProto(this.layoutDoc))[showTitle] = value) ? true : true}
+ />
</div>);
return (
<div className={`documentView-node${this.topMost ? "-topmost" : ""}`}
ref={this._mainCont}
style={{
pointerEvents: this.layoutDoc.isBackground && !this.isSelected() ? "none" : "all",
- color: foregroundColor,
+ color: StrCast(this.layoutDoc.color),
outlineColor: ["transparent", "maroon", "maroon", "yellow"][fullDegree],
outlineStyle: ["none", "dashed", "solid", "solid"][fullDegree],
outlineWidth: fullDegree && !borderRounding ? `${localScale}px` : "0px",
border: fullDegree && borderRounding ? `${["none", "dashed", "solid", "solid"][fullDegree]} ${["transparent", "maroon", "maroon", "yellow"][fullDegree]} ${localScale}px` : undefined,
- borderRadius: "inherit",
background: backgroundColor,
width: nativeWidth,
height: nativeHeight,
@@ -855,37 +846,20 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
>
{!showTitle && !showCaption ?
- this.props.Document.search_fields ? <div>
- {this.contents}
- {searchHighlight}
- </div> :
- this.contents :
- <div style={{ position: "absolute", display: "inline-block", width: "100%", height: "100%", pointerEvents: "none" }}>
- <div style={{ width: "100%", height: showTextTitle ? "calc(100% - 29px)" : "100%", display: "inline-block", position: "absolute", top: showTextTitle ? "29px" : undefined }}>
+ this.Document.searchFields ?
+ (<div className="documentView-searchWrapper">
+ {this.contents}
+ {searchHighlight}
+ </div>)
+ :
+ this.contents
+ :
+ <div className="documentView-styleWrapper" >
+ <div className="documentView-styleContentWrapper" style={{ height: showTextTitle ? "calc(100% - 29px)" : "100%", top: showTextTitle ? "29px" : undefined }}>
{this.contents}
</div>
- {!showTitle ? (null) :
- <div style={{
- position: showTextTitle ? "relative" : "absolute", top: 0, padding: "4px", textAlign: "center", textOverflow: "ellipsis", whiteSpace: "pre",
- pointerEvents: SelectionManager.GetIsDragging() ? "none" : "all",
- overflow: "hidden", width: `${100 * this.props.ContentScaling()}%`, height: 25, background: "rgba(0, 0, 0, .4)", color: "white",
- transformOrigin: "top left", transform: `scale(${1 / this.props.ContentScaling()})`
- }}>
- <EditableView
- contents={(this.layoutDoc.isTemplate || !this.dataDoc ? this.layoutDoc : this.dataDoc)[showTitle]}
- display={"block"}
- height={72}
- fontSize={12}
- GetValue={() => StrCast((this.layoutDoc.isTemplate || !this.dataDoc ? this.layoutDoc : this.dataDoc)[showTitle!])}
- SetValue={(value: string) => ((this.layoutDoc.isTemplate ? this.layoutDoc : Doc.GetProto(this.layoutDoc))[showTitle!] = value) ? true : true}
- />
- </div>
- }
- {!showCaption ? (null) :
- <div style={{ position: "absolute", bottom: 0, transformOrigin: "bottom left", width: `${100 * this.props.ContentScaling()}%`, transform: `scale(${1 / this.props.ContentScaling()})` }}>
- <FormattedTextBox {...this.props} onClick={this.onClickHandler} DataDoc={this.dataDoc} active={returnTrue} isSelected={this.isSelected} focus={emptyFunction} select={this.select} fieldExt={""} hideOnLeave={true} fieldKey={showCaption} />
- </div>
- }
+ {titleView}
+ {captionView}
{searchHighlight}
</div>
}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 95f304641..beccce9dd 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -376,7 +376,6 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
// let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
// let w = bptX - sptX;
- let id = (this.props as any).id; // bcz: used to set id = "isExpander" in templates.tsx
let nativeWidth = FieldValue(this.Document.nativeWidth, pw);
let nativeHeight = FieldValue(this.Document.nativeHeight, 0);
let paths: string[] = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")];
@@ -402,11 +401,11 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
if (!this.props.Document.ignoreAspect && !this.props.leaveNativeSize) this.resize(srcpath, this.props.Document);
return (
- <div id={id} className={`imageBox-cont${interactive}`} style={{ background: "transparent" }}
+ <div className={`imageBox-cont${interactive}`} style={{ background: "transparent" }}
onPointerDown={this.onPointerDown}
onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
<div id="cf">
- <img id={id}
+ <img
key={this._smallRetryCount + (this._mediumRetryCount << 4) + (this._largeRetryCount << 8)} // force cache to update on retrys
src={srcpath}
style={{ transform: `translate(0px, ${shift}px) rotate(${rotation}deg) scale(${aspect})` }}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 05:06:43 +0000