aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentDecorations.scss7
-rw-r--r--src/client/views/DocumentDecorations.tsx73
2 files changed, 49 insertions, 31 deletions
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 8af8a1184..f78bf9ff8 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -10,7 +10,7 @@
left:0;
display: grid;
grid-template-rows: 20px 8px 1fr 8px;
- grid-template-columns: 8px 8px 1fr 8px 8px;
+ grid-template-columns: 8px 16px 1fr 8px 8px;
pointer-events: none;
#documentDecorations-centerCont {
@@ -88,6 +88,11 @@
pointer-events: all;
text-align: center;
cursor: pointer;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: $MINIMIZED_ICON_SIZE;
+ height: $MINIMIZED_ICON_SIZE;
}
.documentDecorations-background {
background: lightblue;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 6da1ea52e..cfb9befd5 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -15,6 +15,7 @@ import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss";
import { DocumentView } from "./nodes/DocumentView";
import { LinkMenu } from "./nodes/LinkMenu";
import React = require("react");
+import { CompileScript } from "../util/Scripting";
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -37,7 +38,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
@observable private _hidden = false;
@observable private _opacity = 1;
@observable private _dragging = false;
- @observable private _iconifying: number[] = [];
+ @observable private _iconifying = false;
constructor(props: Readonly<{}>) {
@@ -177,18 +178,13 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
document.removeEventListener("pointerup", this.onCloseUp);
}
}
- _minimizeDownX = 0;
- _minimizeDownY = 0;
- _minimizeDownOffX = 0;
- _minimizeDownOffY = 0;
+ _downX = 0;
+ _downY = 0;
onMinimizeDown = (e: React.PointerEvent): void => {
e.stopPropagation();
if (e.button === 0) {
- this._minimizeDownX = e.clientX;
- this._minimizeDownY = e.clientY;
- let xf = SelectionManager.SelectedDocuments()[0].props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
- this._minimizeDownOffX = xf[0] - e.clientX;
- this._minimizeDownOffY = xf[1] - e.clientY;
+ this._downX = e.pageX;
+ this._downY = e.pageY;
document.removeEventListener("pointermove", this.onMinimizeMove);
document.addEventListener("pointermove", this.onMinimizeMove);
document.removeEventListener("pointerup", this.onMinimizeUp);
@@ -198,25 +194,36 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
@action
onMinimizeMove = (e: PointerEvent): void => {
e.stopPropagation();
- let dx = e.clientX - this._minimizeDownX;
- let dy = e.clientY - this._minimizeDownY;
- if (Math.abs(dx) > 4 || Math.abs(dy) > 4)
- this._iconifying = [e.pageX - Number(MINIMIZED_ICON_SIZE) / 2 + 7, e.pageY - Number(MINIMIZED_ICON_SIZE) / 2 + 4];
+ let dx = e.pageX - this._downX;
+ let dy = e.pageY - this._downY;
+ if (Math.abs(dx) > 4 || Math.abs(dy) > 4) {
+ this._iconifying = true;
+ let xf = SelectionManager.SelectedDocuments()[0].props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+ let dx = e.pageX - xf[0];
+ let dy = e.pageY - xf[1];
+ if (Math.abs(dx) < 20 && Math.abs(dy) < 20)
+ dx = dy = 0;
+ SelectionManager.SelectedDocuments().map(dv => {
+ let where = (dv.props.ScreenToLocalTransform()).scale(dv.props.ContentScaling()).transformDirection(dx, dy);
+ dv.props.Document.SetNumber(KeyStore.MinimizedX, where[0]);
+ dv.props.Document.SetNumber(KeyStore.MinimizedY, where[1]);
+ });
+ }
}
@action
onMinimizeUp = (e: PointerEvent): void => {
e.stopPropagation();
if (e.button === 0) {
- let dx = e.clientX - this._minimizeDownX - this._minimizeDownOffX;
- let dy = e.clientY - this._minimizeDownY - this._minimizeDownOffY;
- if (Math.abs(dx + this._minimizeDownOffX) < 4 && Math.abs(dy + this._minimizeDownOffY) < 4 && this._iconifying.length == 0)
- dx = dy = 0;
- SelectionManager.SelectedDocuments().map(dv => dv.minimize((dv.props.ScreenToLocalTransform()).scale(dv.props.ContentScaling()).transformDirection(dx, dy)));
+ let dx = e.clientX - this._downX;
+ let dy = e.clientY - this._downY;
+ if (Math.abs(dx) < 4 && Math.abs(dy) < 4 && !this._iconifying) {
+ SelectionManager.SelectedDocuments().map(dv => dv.minimize());
+ SelectionManager.DeselectAll();
+ }
document.removeEventListener("pointermove", this.onMinimizeMove);
document.removeEventListener("pointerup", this.onMinimizeUp);
- SelectionManager.DeselectAll();
}
- this._iconifying = [];
+ this._iconifying = false;
}
onPointerDown = (e: React.PointerEvent): void => {
@@ -393,18 +400,25 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
// }
render() {
var bounds = this.Bounds;
- if (bounds.x === Number.MAX_VALUE) {
+ let seldoc = SelectionManager.SelectedDocuments().length ? SelectionManager.SelectedDocuments()[0] : undefined;
+ if (bounds.x === Number.MAX_VALUE || !seldoc) {
return (null);
}
- let xf = this._iconifying.length ? `translate(${this._iconifying[0]}px, ${this._iconifying[1]}px)` : "translate(0,0)";
+ let minvec = [seldoc.props.Document.GetNumber(KeyStore.MinimizedX, 0), seldoc.props.Document.GetNumber(KeyStore.MinimizedY, 0)];
+ minvec = seldoc.props.ScreenToLocalTransform().scale(seldoc.props.ContentScaling()).inverse().transformDirection(minvec[0], minvec[1]);
+ let selpos = minvec[0] !== 0 || minvec[1] !== 0 ?
+ [minvec[0] - 12 + (!this._iconifying ? 8 : 0), minvec[1] - 12 + (!this._iconifying ? 28 : 0)] :
+ [0, this._iconifying ? -18 : 0];
let minimizeIcon = (
- <div className="documentDecorations-minimizeButton" onPointerDown={this.onMinimizeDown} style={{ transform: xf }}>
- <div style={{ position: "absolute", left: "-7px", top: "-4px", width: `${MINIMIZED_ICON_SIZE}`, height: `${MINIMIZED_ICON_SIZE}` }}>
- {SelectionManager.SelectedDocuments().length == 1 ? SelectionManager.SelectedDocuments()[0].minimizedIcon : "..."}
- </div>
+ <div className="documentDecorations-minimizeButton" onPointerDown={this.onMinimizeDown}
+ style={{ transform: `translate(${selpos[0]}px,${selpos[1]}px)`, }}>
+ {SelectionManager.SelectedDocuments().length == 1 ? SelectionManager.SelectedDocuments()[0].minimizedIcon : "..."}
+ </div>);
+ if (this._iconifying) {
+ let xfpt = seldoc.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+ return (<div className="documentDecorations-container" style={{ transform: `translate(${xfpt[0]}px,${xfpt[1]}px` }}>
+ {minimizeIcon}
</div>);
- if (this._iconifying.length) {
- return <div className="documentDecorations-container">{minimizeIcon}</div>;
}
// console.log(this._documents.length)
// let test = this._documents[0].props.Document.Title;
@@ -416,7 +430,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
return (null);
}
-
let linkButton = null;
if (SelectionManager.SelectedDocuments().length > 0) {
let selFirst = SelectionManager.SelectedDocuments()[0];
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:43:53 +0000