aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentDecorations.scss9
-rw-r--r--src/client/views/DocumentDecorations.tsx3
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss140
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx15
-rw-r--r--src/client/views/nodes/LinkBox.tsx1
-rw-r--r--src/fields/KeyStore.ts1
6 files changed, 102 insertions, 67 deletions
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index ecc738076..3871be35b 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -69,6 +69,7 @@
}
}
+
.documentDecorations-closeButton {
background: $alt-accent;
opacity: 0.8;
@@ -125,6 +126,10 @@
// }
// }
+.linkFlyout {
+ grid-column: 2/4;
+}
+
.linkButton-empty:hover {
background: $main-accent;
transform: scale(1.05);
@@ -162,10 +167,6 @@
transform: scale(1.05);
}
-.linkButton-tray {
- grid-column: 1/4;
-}
-
.linkButton-empty {
height: 20px;
width: 20px;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index bb4437a6a..4a329dd36 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -442,9 +442,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
<div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
<div className="link-button-container">
<div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton} </div>
- <div className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>
+ <div title="Drag Link" className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>
<FontAwesomeIcon className="fa-icon-link" icon="link" size="sm" />
</div>
+
</div>
</div >
</div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 81f2146e4..f9d786c9b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -1,92 +1,110 @@
@import "../../global_variables";
+
.collectionfreeformview-measure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
- }
-.collectionfreeformview {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- transform-origin: left top;
}
-.collectionfreeformview-container {
- .collectionfreeformview > .jsx-parser {
+
+.collectionfreeformview-ease {
position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
height: 100%;
+ transform-origin: left top;
+ transition: transform 2s;
+}
+
+.collectionfreeformview-none {
+ position: absolute;
+ top: 0;
+ left: 0;
width: 100%;
- }
+ height: 100%;
+ transform-origin: left top;
+}
+
+.collectionfreeformview-container {
+ .collectionfreeformview>.jsx-parser {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ }
- //nested freeform views
- // .collectionfreeformview-container {
+ //nested freeform views
+ // .collectionfreeformview-container {
// background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px),
// linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px);
// background-size: 30px 30px;
- // }
+ // }
- box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
- border: 0px solid $light-color-secondary;
- border-radius: $border-radius;
- box-sizing: border-box;
- position: absolute;
- overflow: hidden;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-.collectionfreeformview-overlay {
- .collectionfreeformview > .jsx-parser {
+ box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
+ border: 0px solid $light-color-secondary;
+ border-radius: $border-radius;
+ box-sizing: border-box;
position: absolute;
+ overflow: hidden;
+ top: 0;
+ left: 0;
+ width: 100%;
height: 100%;
- }
- .formattedTextBox-cont {
- background: $light-color-secondary;
- }
-
- opacity: 0.99;
- border: 0px solid transparent;
- border-radius: $border-radius;
- box-sizing: border-box;
- position:absolute;
- overflow: hidden;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- .collectionfreeformview {
+}
+
+.collectionfreeformview-overlay {
+ .collectionfreeformview>.jsx-parser {
+ position: absolute;
+ height: 100%;
+ }
+
.formattedTextBox-cont {
- background:yellow;
+ background: $light-color-secondary;
+ }
+
+ opacity: 0.99;
+ border: 0px solid transparent;
+ border-radius: $border-radius;
+ box-sizing: border-box;
+ position:absolute;
+ overflow: hidden;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ .collectionfreeformview {
+ .formattedTextBox-cont {
+ background: yellow;
+ }
}
- }
}
// selection border...?
.border {
- border-style: solid;
- box-sizing: border-box;
- width: 98%;
- height: 98%;
- border-radius: $border-radius;
+ border-style: solid;
+ box-sizing: border-box;
+ width: 98%;
+ height: 98%;
+ border-radius: $border-radius;
}
//this is an animation for the blinking cursor!
@keyframes blink {
- 0% {
- opacity: 0;
- }
- 49% {
- opacity: 0;
- }
- 50% {
- opacity: 1;
- }
+ 0% {
+ opacity: 0;
+ }
+
+ 49% {
+ opacity: 0;
+ }
+
+ 50% {
+ opacity: 1;
+ }
}
#prevCursor {
- animation: blink 1s infinite;
-}
+ animation: blink 1s infinite;
+} \ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 1feb30db1..4562fd8a7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -206,6 +206,7 @@ export class CollectionFreeFormView extends CollectionSubView {
const newPanY = Math.min((1 - 1 / x1) * this.nativeHeight, Math.max(0, panY));
this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
+
}
@action
@@ -249,10 +250,16 @@ export class CollectionFreeFormView extends CollectionSubView {
}
focusDocument = (doc: Document) => {
+ this.props.Document.SetText(KeyStore.PanTransformType, "Ease");
let x = doc.GetNumber(KeyStore.X, 0) + doc.GetNumber(KeyStore.Width, 0) / 2;
let y = doc.GetNumber(KeyStore.Y, 0) + doc.GetNumber(KeyStore.Height, 0) / 2;
this.SetPan(x, y);
this.props.focus(this.props.Document);
+ // if(this.props.Document.GetText(KeyStore.PanTransformType, "") === "Ease") {
+ // setTimeout(function(){
+ // this.props.Document.SetText(KeyStore.PanTransformType, "None");
+ // }.bind(this),5000); // wait 5 seconds, then reset to false
+ // }
}
getDocumentViewProps(document: Document): DocumentViewProps {
@@ -311,6 +318,12 @@ export class CollectionFreeFormView extends CollectionSubView {
const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
+ if (this.props.Document.GetText(KeyStore.PanTransformType, "") === "Ease") {
+ var freeformclass = "collectionfreeformview-ease";
+ } else {
+ var freeformclass = "collectionfreeformview-none";
+ }
+
return (
<Measure onResize={(r: any) => runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height })}>
{({ measureRef }) => (
@@ -324,7 +337,7 @@ export class CollectionFreeFormView extends CollectionSubView {
getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}>
<PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox}
getContainerTransform={this.getContainerTransform} getTransform={this.getTransform} >
- <div className="collectionfreeformview" ref={this._canvasRef}
+ <div className={freeformclass} ref={this._canvasRef}
style={{ transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}>
{this.backgroundView}
<CollectionFreeFormLinksView {...this.props}>
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index ca1b97eba..396f5f577 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -54,6 +54,7 @@ export class LinkBox extends React.Component<Props> {
}
let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
if (contextView) {
+ contextDoc.SetText(KeyStore.PanTransformType, "Ease");
contextView.props.focus(contextDoc);
} else {
CollectionDockingView.Instance.AddRightSplit(contextDoc);
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 425408273..3a57d0f0a 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -47,6 +47,7 @@ export namespace KeyStore {
export const Workspaces = new Key("Workspaces");
export const Minimized = new Key("Minimized");
export const CopyDraggedItems = new Key("CopyDraggedItems");
+ export const PanTransformType = new Key("PanTransformType");
export const KeyList: Key[] = [Prototype, X, Y, Page, Title, Author, PanX, PanY, Scale, NativeWidth, NativeHeight,
Width, Height, ZIndex, Data, Annotations, ViewType, Layout, BackgroundColor, BackgroundLayout, OverlayLayout, LayoutKeys,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 22:33:05 +0000