fixed document decorations on lightbox. made translations an option for text boxes.

4 files changed, 18 insertions, 18 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 22e120167..461ea0fef 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -4,6 +4,7 @@ $linkGap : 3px;
 
 .documentDecorations {
     position: absolute;
+    z-index: 20000;
 }
 
 .documentDecorations-container {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b8500c263..226eef658 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -604,7 +604,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
                 left: bounds.x - this._resizeBorderWidth / 2,
                 top: bounds.y - this._resizeBorderWidth / 2,
                 pointerEvents: KeyManager.Instance.ShiftPressed || this.Interacting ? "none" : "all",
-                zIndex: SelectionManager.Views().length > 1 ? 900 : 0,
+                display: SelectionManager.Views().length <= 1 ? "none" : undefined
             }} onPointerDown={this.onBackgroundDown} onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} >
             </div>
             {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 08d590fd4..8598a7303 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -59,7 +59,7 @@ import { AnchorMenu } from './pdf/AnchorMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { SearchBox } from './search/SearchBox';
-import { DefaultStyleProvider, StyleProp } from './StyleProvider';
+import { DefaultStyleProvider, StyleProp, DefaultLayerProvider } from './StyleProvider';
 const _global = (window /* browser */ || global /* node */) as any;
 
 @observer
@@ -596,6 +596,7 @@ export class MainView extends React.Component {
 
     lightboxWidth = () => window.innerWidth - Math.min(window.innerWidth / 4, 200) * 2;
     lightboxHeight = () => window.innerHeight - Math.min(window.innerHeight / 4, 100) * 2;
+    lightboxScreenToLocal = () => new Transform(-Math.min(window.innerWidth / 4, 200), -Math.min(window.innerHeight / 4, 100), 1);
     @computed get lightboxView() {
         return !this.LightboxDoc ? (null) :
             <div className="mainView-lightBoxFrame" onPointerDown={action(() => this.LightboxDoc = undefined)}  >
@@ -614,7 +615,8 @@ export class MainView extends React.Component {
                         rootSelected={returnTrue}
                         removeDocument={undefined}
                         styleProvider={DefaultStyleProvider}
-                        ScreenToLocalTransform={Transform.Identity}
+                        layerProvider={DefaultLayerProvider(this.LightboxDoc)}
+                        ScreenToLocalTransform={this.lightboxScreenToLocal}
                         PanelWidth={this.lightboxWidth}
                         PanelHeight={this.lightboxHeight}
                         focus={emptyFunction}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 634165bab..8b1e58ceb 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -67,7 +67,7 @@ import { StyleProp } from '../../StyleProvider';
 import { AnchorMenu } from '../../pdf/AnchorMenu';
 import { CurrentUserUtils } from '../../../util/CurrentUserUtils';
 import { DocumentManager } from '../../../util/DocumentManager';
-var translateGoogleApi = require("translate-google-api")
+const translateGoogleApi = require("translate-google-api")
 
 export interface FormattedTextBoxProps {
     makeLink?: () => Opt<Doc>;  // bcz: hack: notifies the text document when the container has made a link.  allows the text doc to react and setup a hyeprlink for any selected text
@@ -1551,14 +1551,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
 
         const state = this._editorView!.state;
         const curText = state.doc.textBetween(0, state.doc.content.size, " \n");
-        if (!this.fieldKey.includes("translation") && curText.endsWith(" ") && curText !== this._lastText) {
+        if (this.layoutDoc.sidebarViewType === "translation" && !this.fieldKey.includes("translation") && curText.endsWith(" ") && curText !== this._lastText) {
             try {
-                translateGoogleApi(curText, { from: "en", to: "es", }).then(result => {
-                    this.dataDoc[this.fieldKey + "-translation"] = result[0];
+                translateGoogleApi(curText, { from: "en", to: "es", }).then((result1: any) => {
+                    setTimeout(() => translateGoogleApi(result1[0], { from: "es", to: "en", }).then((result: any) => {
+                        this.dataDoc[this.fieldKey + "-translation"] = result1 + "\r\n\r\n" + result[0];
+                    }), 1000);
                 });
-            } catch (e) {
-                console.log(e.message);
-            }
+            } catch (e) { console.log(e.message); }
             this._lastText = curText;
         }
     }
@@ -1693,14 +1693,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         return this.props.noSidebar || !this.layoutDoc._showSidebar || this.sidebarWidthPercent === "0%" ? (null) :
             <div className={"formattedTextBox-sidebar" + (Doc.GetSelectedTool() !== InkTool.None ? "-inking" : "")}
                 style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
-                <FormattedTextBox
-                    {...collectionProps}
-                    noSidebar={true}
-                    fieldKey={`${this.fieldKey}-translation`}
-                />
-                {/* {this.layoutDoc.sidebarViewType === CollectionViewType.Freeform ?
-                    <CollectionFreeFormView {...collectionProps} /> :
-                    <CollectionStackingView {...collectionProps} />} */}
+                {this.layoutDoc.sidebarViewType === "translation" ?
+                    <FormattedTextBox {...collectionProps} noSidebar={true} fieldKey={`${this.fieldKey}-translation`} /> :
+                    this.layoutDoc.sidebarViewType === CollectionViewType.Freeform ?
+                        <CollectionFreeFormView {...collectionProps} /> :
+                        <CollectionStackingView {...collectionProps} />}
             </div>;
     }