aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/TooltipTextMenu.tsx14
-rw-r--r--src/client/views/DocumentDecorations.scss3
-rw-r--r--src/client/views/Main.scss1
-rw-r--r--src/client/views/Main.tsx23
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx13
5 files changed, 41 insertions, 13 deletions
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index bd5753093..7951e5686 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -12,19 +12,23 @@ const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands");
import { library } from '@fortawesome/fontawesome-svg-core';
import { wrapInList, bulletList } from 'prosemirror-schema-list';
import { faListUl } from '@fortawesome/free-solid-svg-icons';
+import { FieldViewProps } from "../views/nodes/FieldView";
+import { throwStatement } from "babel-types";
//appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc.
export class TooltipTextMenu {
private tooltip: HTMLElement;
+ private editorProps: FieldViewProps;
- constructor(view: EditorView) {
+ constructor(view: EditorView, editorProps: FieldViewProps) {
+ this.editorProps = editorProps;
this.tooltip = document.createElement("div");
this.tooltip.className = "tooltipMenu";
//add the div which is the tooltip
- view.dom.parentNode!.appendChild(this.tooltip);
+ view.dom.parentNode!.parentNode!.appendChild(this.tooltip);
//add additional icons
library.add(faListUl);
@@ -124,13 +128,13 @@ export class TooltipTextMenu {
// Find a center-ish x position from the selection endpoints (when
// crossing lines, end may be more to the left)
let left = Math.max((start.left + end.left) / 2, start.left + 3);
- this.tooltip.style.left = (left - box.left) + "px";
- let width = Math.abs(start.left - end.left) / 2;
+ this.tooltip.style.left = (left - box.left) * this.editorProps.ScreenToLocalTransform().Scale + "px";
+ let width = Math.abs(start.left - end.left) / 2 * this.editorProps.ScreenToLocalTransform().Scale;
let mid = Math.min(start.left, end.left) + width;
//THIS WIDTH IS 15 * NUMBER OF ICONS + 15
this.tooltip.style.width = 122 + "px";
- this.tooltip.style.bottom = (box.bottom - start.top) + "px";
+ this.tooltip.style.bottom = (box.bottom - start.top) * this.editorProps.ScreenToLocalTransform().Scale + "px";
}
destroy() { this.tooltip.remove(); }
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index c4e4aed8e..b2096bccb 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,5 +1,8 @@
@import "global_variables";
+.documentDecorations {
+ position: absolute;
+}
#documentDecorations-container {
position: absolute;
top: 0;
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index c4da47e0e..a68b90dd4 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -176,6 +176,7 @@ button:hover {
overflow: visible;
top: 0;
left: 0;
+ z-index: 1000;
.formattedTextBox-cont {
background-color: rgba(248, 6, 6, 0.001);
width: 100%;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index e96e4cbf8..b73b55fb1 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -28,7 +28,7 @@ import '../northstar/model/ModelExtensions';
import { HistogramOperation } from '../northstar/operations/HistogramOperation';
import '../northstar/utils/Extensions';
import { Server } from '../Server';
-import { setupDrag } from '../util/DragManager';
+import { setupDrag, DragManager } from '../util/DragManager';
import { Transform } from '../util/Transform';
import { UndoManager } from '../util/UndoManager';
import { CollectionDockingView } from './collections/CollectionDockingView';
@@ -38,6 +38,7 @@ import { InkingControl } from './InkingControl';
import "./Main.scss";
import { DocumentView } from './nodes/DocumentView';
import { FormattedTextBox } from './nodes/FormattedTextBox';
+import { REPLCommand } from 'repl';
@observer
export class Main extends React.Component {
@@ -228,6 +229,21 @@ export class Main extends React.Component {
}
}
+ textBoxDown = (e: React.PointerEvent) => {
+ let dragData = new DragManager.DocumentDragData([this._textDoc!]);
+ const [left, top] = this._textXf
+ .inverse()
+ .transformPoint(0, 0);
+ dragData.xOffset = e.clientX - left;
+ dragData.yOffset = e.clientY - top;
+ DragManager.StartDocumentDrag([this._textTargetDiv!], dragData, e.clientX, e.clientY, {
+ handlers: {
+ dragComplete: action(emptyFunction),
+ },
+ hideSource: false
+ });
+ }
+
@computed
get activeTextBox() {
if (this._textDoc) {
@@ -239,9 +255,8 @@ export class Main extends React.Component {
let s = this._textXf.transformPoint(1, 0);
s[0] = Math.sqrt((s[0] - t[0]) * (s[0] - t[0]) + (s[1] - t[1]) * (s[1] - t[1]));
return <div className="mainDiv-textInput" style={{ transform: `translate(${x}px, ${y}px) scale(${1 / s[0]},${1 / s[0]})`, width: "auto", height: "auto" }} >
- <div className="mainDiv-textInput" ref={this._textProxyDiv} onScroll={this.textScroll} style={{ transform: `scale(${1}, ${1})`, width: `${w * s[0]}px`, height: `${h * s[0]}px` }}>
- <FormattedTextBox fieldKey={KeyStore.Archives} Document={this._textDoc} isSelected={returnTrue} select={emptyFunction} isTopMost={true} selectOnLoad={true} onActiveChanged={emptyFunction} active={returnTrue} ScreenToLocalTransform={Transform.Identity} focus={(doc) => { }} />
-
+ <div className="mainDiv-textInput" onPointerDown={this.textBoxDown} ref={this._textProxyDiv} onScroll={this.textScroll} style={{ transform: `scale(${1}, ${1})`, width: `${w * s[0]}px`, height: `${h * s[0]}px` }}>
+ <FormattedTextBox fieldKey={KeyStore.Archives} Document={this._textDoc} isSelected={returnTrue} select={emptyFunction} isTopMost={true} selectOnLoad={true} onActiveChanged={emptyFunction} active={returnTrue} ScreenToLocalTransform={() => this._textXf} focus={(doc) => { }} />
</div>
</ div>;
}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index eb40a03a5..69086df42 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -70,12 +70,16 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
const config = {
schema,
inpRules, //these currently don't do anything, but could eventually be helpful
- plugins: [
+ plugins: this.props.fieldKey === KeyStore.Archives ? [
history(),
keymap({ "Mod-z": undo, "Mod-y": redo }),
keymap(baseKeymap),
this.tooltipMenuPlugin()
- ]
+ ] : [
+ history(),
+ keymap({ "Mod-z": undo, "Mod-y": redo }),
+ keymap(baseKeymap),
+ ]
};
if (this.props.fieldKey === KeyStore.Archives) {
@@ -150,7 +154,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
// doc.SetData(fieldKey, e.target.value, RichTextField);
}
onPointerDown = (e: React.PointerEvent): void => {
- if (e.buttons === 1 && this.props.isSelected() && !e.altKey) {
+ if (e.buttons === 1 && this.props.isSelected() && !e.altKey && !e.ctrlKey && !e.metaKey) {
e.stopPropagation();
}
}
@@ -202,9 +206,10 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
}
tooltipMenuPlugin() {
+ let myprops = this.props;
return new Plugin({
view(_editorView) {
- return new TooltipTextMenu(_editorView);
+ return new TooltipTextMenu(_editorView, myprops);
}
});
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 13:05:31 +0000