aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts8
-rw-r--r--src/client/views/DocumentDecorations.scss149
-rw-r--r--src/client/views/DocumentDecorations.tsx24
-rw-r--r--src/client/views/Main.scss37
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx28
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss148
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx16
-rw-r--r--src/client/views/nodes/LinkBox.scss23
-rw-r--r--src/client/views/nodes/LinkBox.tsx28
-rw-r--r--src/client/views/nodes/LinkEditor.scss3
-rw-r--r--src/client/views/nodes/VideoBox.tsx4
-rw-r--r--src/fields/Document.ts2
-rw-r--r--src/fields/KeyStore.ts1
13 files changed, 291 insertions, 180 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index a7514f1d6..847f604d0 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -60,6 +60,7 @@ export interface DocumentOptions {
copyDraggedItems?: boolean;
documentText?: string;
borderRounding?: number;
+ columnsKey?: Array<Key>;
}
export namespace Documents {
@@ -116,6 +117,7 @@ export namespace Documents {
if (options.layoutKeys !== undefined) { doc.Set(KeyStore.LayoutKeys, new ListField(options.layoutKeys)); }
if (options.copyDraggedItems !== undefined) { doc.SetBoolean(KeyStore.CopyDraggedItems, options.copyDraggedItems); }
if (options.borderRounding !== undefined) { doc.SetNumber(KeyStore.BorderRounding, options.borderRounding); }
+ if (options.columnsKey !== undefined) { doc.SetData(KeyStore.ColumnsKey, options.columnsKey, ListField); }
return doc;
}
@@ -271,13 +273,13 @@ export namespace Documents {
if (!makePrototype) {
return SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id);
}
- return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id).MakeDelegate(), options);
+ return assignToDelegate(SetInstanceOptions(collProto, { columnsKey: [KeyStore.Title], ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id).MakeDelegate(), options);
}
export function SchemaDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
- return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Schema }, [documents, ListField], id), options);
+ return assignToDelegate(SetInstanceOptions(collProto, { columnsKey: [KeyStore.Title], ...options, viewType: CollectionViewType.Schema }, [documents, ListField], id), options);
}
export function TreeDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
- return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Tree }, [documents, ListField], id), options);
+ return assignToDelegate(SetInstanceOptions(collProto, { columnsKey: [KeyStore.Title], ...options, viewType: CollectionViewType.Tree }, [documents, ListField], id), options);
}
export function DockDocument(config: string, options: DocumentOptions, id?: string) {
return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Docking }, [config, TextField], id), options);
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 27b94e6d2..ecddb8b06 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,5 +1,6 @@
@import "globalCssVariables";
+$linkGap : 3px;
.documentDecorations {
position: absolute;
}
@@ -72,6 +73,7 @@
}
}
+
.documentDecorations-closeButton {
background: $alt-accent;
opacity: 0.8;
@@ -103,39 +105,80 @@
opacity: 0.1;
}
+// position: absolute;
+// display: grid;
+// z-index: 1000;
+// grid-template-rows: 20px 1fr 20px 0px;
+// grid-template-columns: 20px 1fr 20px;
+// pointer-events: none;
+// #documentDecorations-centerCont {
+// background: none;
+// }
+// .documentDecorations-resizer {
+// pointer-events: auto;
+// background: lightblue;
+// opacity: 0.4;
+// }
+// #documentDecorations-topLeftResizer,
+// #documentDecorations-bottomRightResizer {
+// cursor: nwse-resize;
+// }
+// #documentDecorations-topRightResizer,
+// #documentDecorations-bottomLeftResizer {
+// cursor: nesw-resize;
+// }
+// #documentDecorations-topResizer,
+// #documentDecorations-bottomResizer {
+// cursor: ns-resize;
+// }
+// #documentDecorations-leftResizer,
+// #documentDecorations-rightResizer {
+// cursor: ew-resize;
+// }
+// }
.linkFlyout {
+ grid-column: 2/4;
+ margin-top: $linkGap;
+}
+
+.linkButton-empty:hover {
+ background: $main-accent;
+ transform: scale(1.05);
+ cursor: pointer;
+}
+
+.linkButton-nonempty:hover {
+ background: $main-accent;
+ transform: scale(1.05);
+ cursor: pointer;
+}
+
+.link-button-container {
grid-column: 1/4;
- margin-left: 25px;
+ width: auto;
+ height: auto;
+ display: flex;
+ flex-direction: row;
}
.linkButton-linker {
- position: absolute;
- bottom: 0px;
- left: 0px;
+ margin-left: 5px;
+ margin-top: $linkGap;
height: 20px;
width: 20px;
- margin-top: 10px;
- margin-right: 5px;
+ text-align: center;
border-radius: 50%;
- opacity: 0.9;
pointer-events: auto;
color: $dark-color;
border: $dark-color 1px solid;
- text-transform: uppercase;
- letter-spacing: 2px;
- font-size: 75%;
- transition: transform 0.2s;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
}
-.linkButton-tray {
- grid-column: 1/4;
+.linkButton-linker:hover {
+ cursor: pointer;
+ transform: scale(1.05);
}
-.linkButton-empty {
+.linkButton-empty, .linkButton-nonempty {
height: 20px;
width: 20px;
border-radius: 50%;
@@ -164,38 +207,50 @@
bottom: 0;
left: 50px;
pointer-events: auto;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 75%;
+ transition: transform 0.2s;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
- .templating-button {
- width: 20px;
- height: 20px;
- border-radius: 50%;
- opacity: 0.9;
- background-color: $dark-color;
- color: $light-color;
- text-align: center;
- cursor: pointer;
+.fa-icon-link {
+ margin-top: 3px;
+}
+.templating-button {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ opacity: 0.9;
+ font-size:14;
+ background-color: $dark-color;
+ color: $light-color;
+ text-align: center;
+ cursor: pointer;
- &:hover {
- background: $main-accent;
- transform: scale(1.05);
- }
+ &:hover {
+ background: $main-accent;
+ transform: scale(1.05);
}
+}
+
+#template-list {
+ position: absolute;
+ top: 0;
+ left: 30px;
+ width: 150px;
+ line-height: 25px;
+ max-height: 175px;
+ font-family: $sans-serif;
+ font-size: 12px;
+ background-color: $light-color-secondary;
+ padding: 2px 12px;
+ list-style: none;
- #template-list {
- position: absolute;
- top: 0;
- left: 30px;
- width: 150px;
- line-height: 25px;
- max-height: 175px;
- font-family: $sans-serif;
- font-size: 12px;
- background-color: $light-color-secondary;
- padding: 2px 12px;
- list-style: none;
-
- input {
- margin-right: 10px;
- }
+ input {
+ margin-right: 10px;
}
} \ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 18449ed32..cc5b754f0 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -24,6 +24,11 @@ import { Documents } from "../documents/Documents";
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+library.add(faLink);
@observer
export class DocumentDecorations extends React.Component<{}, { value: string }> {
@@ -32,7 +37,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
private _resizing = "";
private keyinput: React.RefObject<HTMLInputElement>;
private _resizeBorderWidth = 16;
- private _linkBoxHeight = 20;
+ private _linkBoxHeight = 20 + 3; // link button height + margin
private _titleHeight = 20;
private _linkButton = React.createRef<HTMLDivElement>();
private _linkerButton = React.createRef<HTMLDivElement>();
@@ -496,7 +501,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
anchorPoint={anchorPoints.RIGHT_TOP}
content={<LinkMenu docView={selFirst}
changeFlyout={this.changeFlyoutContent} />}>
- <div className={"linkButton-" + (selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} >{linkCount}</div>
+ <div className={"linkButton-" + (linkCount ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} >{linkCount}</div>
</Flyout>);
}
@@ -545,10 +550,17 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
<div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
<div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
<div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-
- <div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton} </div>
- <div className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>∞</div>
- <TemplateMenu doc={doc} templates={templates} />
+ <div className="link-button-container">
+ <div className="linkButtonWrapper">
+ <div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton} </div>
+ </div>
+ <div className="linkButtonWrapper">
+ <div title="Drag Link" className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>
+ <FontAwesomeIcon className="fa-icon-link" icon="link" size="sm" />
+ </div>
+ </div>
+ <TemplateMenu doc={doc} templates={templates} />
+ </div>
</div >
</div>
);
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 89fdf595a..cbf920793 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -1,5 +1,6 @@
@import "globalCssVariables";
@import "nodeModuleOverrides";
+
html,
body {
width: 100%;
@@ -7,9 +8,9 @@ body {
overflow: auto;
font-family: $sans-serif;
margin: 0;
- position:absolute;
+ position: absolute;
top: 0;
- left:0;
+ left: 0;
}
div {
@@ -120,6 +121,7 @@ button:hover {
position: absolute;
bottom: 62px;
left: 24px;
+
.toolbar-button {
display: block;
margin-bottom: 10px;
@@ -129,8 +131,9 @@ button:hover {
// add nodes menu. Note that the + button is actually an input label, not an actual button.
#add-nodes-menu {
position: absolute;
- bottom: 24px;
+ bottom: 22px;
left: 24px;
+
label {
background: $dark-color;
color: $light-color;
@@ -143,44 +146,51 @@ button:hover {
cursor: pointer;
transition: transform 0.2s;
}
+
label p {
padding-left: 10.5px;
- padding-top: 3px;
}
+
label:hover {
background: $main-accent;
transform: scale(1.15);
}
+
input {
display: none;
}
+
input:not(:checked)~#add-options-content {
display: none;
}
+
input:checked~label {
transform: rotate(45deg);
transition: transform 0.5s;
cursor: pointer;
}
}
+
#root {
overflow: visible;
}
+
#main-div {
- width:100%;
- height:100%;
- position:absolute;
+ width: 100%;
+ height: 100%;
+ position: absolute;
top: 0;
- left:0;
+ left: 0;
overflow: scroll;
}
#mainContent-div {
- width:100%;
- height:100%;
- position:absolute;
+ width: 100%;
+ height: 100%;
+ position: absolute;
top: 0;
- left:0;
+ left: 0;
}
+
#add-options-content {
display: table;
opacity: 1;
@@ -194,7 +204,8 @@ button:hover {
ul#add-options-list {
list-style: none;
- padding: 0;
+ padding: 5 0 0 0;
+
li {
display: inline-block;
padding: 0;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b6d5f1bfa..b3cc3fbd5 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -2,13 +2,13 @@ import React = require("react");
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, untracked } from "mobx";
+import { action, computed, observable, untracked, runInAction } from "mobx";
import { observer } from "mobx-react";
import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
import { MAX_ROW_HEIGHT } from '../../views/globalCssVariables.scss'
import "react-table/react-table.css";
import { Document } from "../../../fields/Document";
-import { Field, Opt } from "../../../fields/Field";
+import { Field, Opt, FieldWaiting } from "../../../fields/Field";
import { Key } from "../../../fields/Key";
import { KeyStore } from "../../../fields/KeyStore";
import { ListField } from "../../../fields/ListField";
@@ -165,18 +165,22 @@ export class CollectionSchemaView extends CollectionSubView {
super.CreateDropTarget(ele);
}
- @action
toggleKey = (key: Key) => {
- this.props.Document.GetOrCreateAsync<ListField<Key>>(KeyStore.ColumnsKey, ListField,
- (field) => {
- const index = field.Data.indexOf(key);
- if (index === -1) {
- this.columns.push(key);
- } else {
- this.columns.splice(index, 1);
+ this.props.Document.GetTAsync<ListField<Key>>(KeyStore.ColumnsKey, ListField).then(field =>
+ runInAction(() => {
+ if (field !== FieldWaiting) {
+ if (field) {
+ const index = field.Data.indexOf(key);
+ if (index === -1) {
+ this.columns.push(key);
+ } else {
+ this.columns.splice(index, 1);
+ }
+ } else {
+ this.props.Document.SetData(KeyStore.ColumnsKey, [key], ListField);
+ }
}
-
- });
+ }));
}
//toggles preview side-panel of schema
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 67a0e532c..cb849b325 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -1,91 +1,103 @@
@import "../../globalCssVariables";
-.collectionfreeformview {
- position: inherit;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- transform-origin: left top;
- pointer-events: none;
+
+.collectionfreeformview-ease {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transform-origin: left top;
+ transition: transform 1s;
}
-.collectionfreeformview-container {
- .collectionfreeformview > .jsx-parser {
+
+.collectionfreeformview-none {
position: inherit;
- height: 100%;
+ top: 0;
+ left: 0;
width: 100%;
- }
+ height: 100%;
+ transform-origin: left top;
+}
- //nested freeform views
- // .collectionfreeformview-container {
+.collectionfreeformview-container {
+ .collectionfreeformview>.jsx-parser {
+ position: inherit;
+ height: 100%;
+ width: 100%;
+ }
+
+ //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;
- // }
-
- border-width: $COLLECTION_BORDER_WIDTH;
- box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
- border-color: $light-color-secondary;
- border-style: solid;
- border-radius: $border-radius;
- box-sizing: border-box;
- position: absolute;
- overflow: hidden;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
+ // }
+ 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 {
- position: inherit;
- height: 100%;
- }
- .formattedTextBox-cont {
- background: $light-color-secondary;
- overflow: visible;
- }
-
- opacity: 0.99;
- border-width: 0;
- border-color: transparent;
- border-style: solid;
- border-radius: $border-radius;
- box-sizing: border-box;
- position: absolute;
- overflow: hidden;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- .collectionfreeformview {
+ .collectionfreeformview>.jsx-parser {
+ position: inherit;
+ height: 100%;
+ }
+
.formattedTextBox-cont {
- background:yellow;
+ background: $light-color-secondary;
+ overflow: visible;
+ }
+
+ 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 1a953006a..2fa59d589 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -211,6 +211,7 @@ export class CollectionFreeFormView extends CollectionSubView {
const newPanY = Math.min((1 - 1 / scale) * 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
@@ -234,10 +235,15 @@ export class CollectionFreeFormView extends CollectionSubView {
}
focusDocument = (doc: Document) => {
+ SelectionManager.DeselectAll();
+ this.props.Document.SetText(KeyStore.PanTransformType, "Ease");
this.setPan(
doc.GetNumber(KeyStore.X, 0) + doc.Width() / 2,
doc.GetNumber(KeyStore.Y, 0) + doc.Height() / 2);
this.props.focus(this.props.Document);
+ if (this.props.Document.GetText(KeyStore.PanTransformType, "") === "Ease") {
+ setTimeout(() => this.props.Document.SetText(KeyStore.PanTransformType, "None"), 5000); // wait 5 seconds, then reset to false
+ }
}
getDocumentViewProps(document: Document): DocumentViewProps {
@@ -286,6 +292,7 @@ export class CollectionFreeFormView extends CollectionSubView {
private childViews = () => [...this.views, <CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />];
render() {
const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`;
+ const easing = () => this.props.Document.GetText(KeyStore.PanTransformType, "") === "Ease";
return (
<div className={containerName} ref={this.createDropTarget} onWheel={this.onPointerWheel}
style={{ borderRadius: "inherit" }}
@@ -299,13 +306,14 @@ export class CollectionFreeFormView extends CollectionSubView {
addDocument={this.addDocument} removeDocument={this.props.removeDocument} addLiveTextDocument={this.addLiveTextBox}
getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}>
<CollectionFreeFormViewPannableContents centeringShiftX={this.centeringShiftX} centeringShiftY={this.centeringShiftY}
- zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
+ easing={easing} zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
+
<CollectionFreeFormLinksView {...this.props} key="freeformLinks">
<InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} >
{this.childViews}
</InkingCanvas>
</CollectionFreeFormLinksView>
- <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />
+ <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />]
</CollectionFreeFormViewPannableContents>
<CollectionFreeFormOverlayView {...this.getDocumentViewProps(this.props.Document)} {...this.props} />
</MarqueeView>
@@ -346,17 +354,19 @@ interface CollectionFreeFormViewPannableContentsProps {
panX: () => number;
panY: () => number;
zoomScaling: () => number;
+ easing: () => boolean;
}
@observer
class CollectionFreeFormViewPannableContents extends React.Component<CollectionFreeFormViewPannableContentsProps>{
render() {
+ let freeformclass = "collectionfreeformview" + (this.props.easing() ? "-ease" : "-none");
const cenx = this.props.centeringShiftX();
const ceny = this.props.centeringShiftY();
const panx = -this.props.panX();
const pany = -this.props.panY();
const zoom = this.props.zoomScaling();// needs to be a variable outside of the <Measure> otherwise, reactions won't fire
- return <div className="collectionfreeformview" style={{ borderRadius: "inherit", transform: `translate(${cenx}px, ${ceny}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}>
+ return <div className={freeformclass} style={{ borderRadius: "inherit", transform: `translate(${cenx}px, ${ceny}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}>
{this.props.children}
</div>;
}
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
index 8bc70b48f..639f83b38 100644
--- a/src/client/views/nodes/LinkBox.scss
+++ b/src/client/views/nodes/LinkBox.scss
@@ -1,14 +1,14 @@
@import "../globalCssVariables";
.link-container {
width: 100%;
- height: 35px;
+ height: 50px;
display: flex;
flex-direction: row;
border-top: 0.5px solid #bababa;
}
.info-container {
- width: 55%;
+ width: 65%;
padding-top: 5px;
padding-left: 5px;
display: flex;
@@ -24,7 +24,8 @@
}
.button-container {
- width: 45%;
+ width: 35%;
+ padding-top: 8px;
display: flex;
flex-direction: row;
}
@@ -49,17 +50,17 @@
cursor: pointer;
}
-.fa-icon-view {
- margin-left: 3px;
- margin-top: 5px;
-}
+// .fa-icon-view {
+// margin-left: 3px;
+// margin-top: 5px;
+// }
.fa-icon-edit {
- margin-left: 5px;
- margin-top: 5px;
+ margin-left: 6px;
+ margin-top: 6px;
}
.fa-icon-delete {
- margin-left: 6px;
- margin-top: 5px;
+ margin-left: 7px;
+ margin-top: 6px;
} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 1c0e316e8..8f979fdd7 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -11,6 +11,7 @@ import { undoBatch } from "../../util/UndoManager";
import { CollectionDockingView } from "../collections/CollectionDockingView";
import './LinkBox.scss';
import React = require("react");
+import { runInAction } from 'mobx';
library.add(faEye);
@@ -46,6 +47,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);
@@ -69,20 +71,22 @@ export class LinkBox extends React.Component<Props> {
e.stopPropagation();
this.props.linkDoc.GetTAsync(KeyStore.LinkedFromDocs, Document, field => {
if (field) {
- field.GetTAsync<ListField<Document>>(KeyStore.LinkedToDocs, ListField, field => {
- if (field) {
- field.Data.splice(field.Data.indexOf(this.props.linkDoc));
- }
- });
+ field.GetTAsync<ListField<Document>>(KeyStore.LinkedToDocs, ListField, field =>
+ runInAction(() => {
+ if (field) {
+ field.Data.splice(field.Data.indexOf(this.props.linkDoc));
+ }
+ }));
}
});
this.props.linkDoc.GetTAsync(KeyStore.LinkedToDocs, Document, field => {
if (field) {
- field.GetTAsync<ListField<Document>>(KeyStore.LinkedFromDocs, ListField, field => {
- if (field) {
- field.Data.splice(field.Data.indexOf(this.props.linkDoc));
- }
- });
+ field.GetTAsync<ListField<Document>>(KeyStore.LinkedFromDocs, ListField, field =>
+ runInAction(() => {
+ if (field) {
+ field.Data.splice(field.Data.indexOf(this.props.linkDoc));
+ }
+ }));
}
});
}
@@ -102,8 +106,8 @@ export class LinkBox extends React.Component<Props> {
</div>
<div className="button-container">
- <div title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}>
- <FontAwesomeIcon className="fa-icon-view" icon="eye" size="sm" /></div>
+ {/* <div title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}>
+ <FontAwesomeIcon className="fa-icon-view" icon="eye" size="sm" /></div> */}
<div title="Edit Link" className="button" onPointerDown={this.onEditButtonPressed}>
<FontAwesomeIcon className="fa-icon-edit" icon="edit" size="sm" /></div>
<div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}>
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
index ea2e7289c..9629585d7 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -22,7 +22,7 @@
.save-button {
width: 50px;
- height: 20px;
+ height: 22px;
pointer-events: auto;
background-color: $dark-color;
color: $light-color;
@@ -38,6 +38,5 @@
.save-button:hover {
background: $main-accent;
- transform: scale(1.05);
cursor: pointer;
} \ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index b34f1dc08..3bb930ba7 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -65,11 +65,11 @@ export class VideoBox extends React.Component<FieldViewProps> {
return <div>Loading</div>;
}
return (this.props.Document.GetNumber(KeyStore.NativeHeight, 0)) ?
- this.videoContent(field.data.href) :
+ this.videoContent(field.Data.href) :
<Measure onResize={this.setScaling}>
{({ measureRef }) =>
<div style={{ width: "100%", height: "auto" }} ref={measureRef}>
- {this.videoContent(field.data.href)}
+ {this.videoContent(field!.Data.href)}
</div>
}
</Measure>;
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 2797efc09..55ac731dd 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -204,7 +204,7 @@ export class Document extends Field {
callback: (field: T) => void
): void {
//This currently doesn't deal with prototypes
- if (this._proxies.has(key.Id)) {
+ if (this._proxies.has(key.Id) || this.fields.has(key.Id)) {
Server.GetDocumentField(this, key, field => {
if (field && field instanceof ctor) {
callback(field);
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 069611991..5462f5604 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -53,6 +53,7 @@ export namespace KeyStore {
export const MinimizedDoc = new Key("MinimizedDoc");
export const MaximizedDoc = new Key("MaximizedDoc");
export const CopyDraggedItems = new Key("CopyDraggedItems");
+ export const PanTransformType = new Key("PanTransformType");
export const BorderRounding = new Key("BorderRounding");
export const KeyList: Key[] = [Prototype, X, Y, Page, Title, Author, PanX, PanY, Scale, NativeWidth, NativeHeight,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 04:24:32 +0000