aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/trails/PresBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/trails/PresBox.tsx')
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx136
1 files changed, 61 insertions, 75 deletions
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 6bbf3208c..6493117b0 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
-import { Doc, DocListCast, FieldResult, Opt, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, FieldResult, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
import { Animation } from '../../../../fields/DocSymbols';
import { Copy, Id } from '../../../../fields/FieldSymbols';
import { InkField } from '../../../../fields/InkField';
@@ -1307,71 +1307,55 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
getAllIndexes = (arr: Doc[], val: Doc) => arr.map((doc, i) => (doc === val ? i : -1)).filter(i => i !== -1);
// Adds the index in the pres path graphically
- @computed get order() {
+ orderedPathLabels = (collection: Doc) => {
const order: JSX.Element[] = [];
- const docs: Doc[] = [];
- const presCollection = DocumentManager.GetContextPath(this.activeItem).reverse().lastElement();
+ const docs = new Set<Doc>();
+ const presCollection = collection;
const dv = DocumentManager.Instance.getDocumentView(presCollection);
- this.childDocs
- .filter(doc => Cast(doc.presentation_targetDoc, Doc, null))
- .forEach((doc, index) => {
- const tagDoc = Cast(doc.presentation_targetDoc, Doc, null);
- const srcContext = Cast(tagDoc.embedContainer, Doc, null);
+ this.childDocs.forEach((doc, index) => {
+ const tagDoc = PresBox.targetRenderedDoc(doc);
+ const srcContext = Cast(tagDoc.embedContainer, Doc, null);
+ const labelCreator = (top: number, left: number, edge: number, fontSize: number) => (
+ <div className="pathOrder" key={tagDoc.id + 'pres' + index} style={{ top, left, width: edge, height: edge, fontSize }} onClick={() => this.selectElement(doc)}>
+ <div className="pathOrder-frame">{index + 1}</div>
+ </div>
+ );
+ if (presCollection === srcContext) {
+ const gap = 2;
const width = NumCast(tagDoc._width) / 10;
const height = Math.max(NumCast(tagDoc._height) / 10, 15);
const edge = Math.max(width, height);
const fontSize = edge * 0.8;
- const gap = 2;
- if (presCollection === srcContext) {
- // Case A: Document is contained within the collection
- if (docs.includes(tagDoc)) {
- const prevOccurances: number = this.getAllIndexes(docs, tagDoc).length;
- docs.push(tagDoc);
- order.push(
- <div
- className="pathOrder"
- key={tagDoc.id + 'pres' + index}
- style={{ top: NumCast(tagDoc.y) + (prevOccurances * (edge + gap) - edge / 2), left: NumCast(tagDoc.x) - edge / 2, width: edge, height: edge, fontSize: fontSize }}
- onClick={() => this.selectElement(doc)}>
- <div className="pathOrder-frame">{index + 1}</div>
- </div>
- );
- } else {
- docs.push(tagDoc);
- order.push(
- <div
- className="pathOrder"
- key={tagDoc.id + 'pres' + index}
- style={{ top: NumCast(tagDoc.y) - edge / 2, left: NumCast(tagDoc.x) - edge / 2, width: edge, height: edge, fontSize: fontSize }}
- onClick={() => this.selectElement(doc)}>
- <div className="pathOrder-frame">{index + 1}</div>
- </div>
- );
- }
- } else if (doc.config_pinView && presCollection === tagDoc && dv) {
- // Case B: Document is presPinView and is presCollection
- const scale: number = 1 / NumCast(doc.config_viewScale);
- const height: number = dv.props.PanelHeight() * scale;
- const width: number = dv.props.PanelWidth() * scale;
- const indWidth = width / 10;
- const indHeight = Math.max(height / 10, 15);
- const indEdge = Math.max(indWidth, indHeight);
- const indFontSize = indEdge * 0.8;
- const xLoc: number = NumCast(doc.config_panX) - width / 2;
- const yLoc: number = NumCast(doc.config_panY) - height / 2;
- docs.push(tagDoc);
- order.push(
- <>
- <div className="pathOrder" key={tagDoc.id + 'pres' + index} style={{ top: yLoc - indEdge / 2, left: xLoc - indEdge / 2, width: indEdge, height: indEdge, fontSize: indFontSize }} onClick={() => this.selectElement(doc)}>
- <div className="pathOrder-frame">{index + 1}</div>
- </div>
- <div className="pathOrder-presPinView" style={{ top: yLoc, left: xLoc, width: width, height: height, borderWidth: indEdge / 10 }}></div>
- </>
- );
+ // Case A: Document is contained within the collection
+ if (docs.has(tagDoc)) {
+ const prevOccurences = this.getAllIndexes(Array.from(docs), tagDoc).length;
+ order.push(labelCreator(NumCast(tagDoc.y) + (prevOccurences * (edge + gap) - edge / 2), NumCast(tagDoc.x) - edge / 2, edge, fontSize));
+ } else {
+ order.push(labelCreator(NumCast(tagDoc.y) - edge / 2, NumCast(tagDoc.x) - edge / 2, edge, fontSize));
}
- });
+ } else if (doc.config_pinView && presCollection === tagDoc && dv) {
+ // Case B: Document is presPinView and is presCollection
+ const scale = 1 / NumCast(doc.config_viewScale);
+ const viewBounds = NumListCast(doc.config_viewBounds, [0, 0, dv.props.PanelWidth(), dv.props.PanelHeight()]);
+ const height = (viewBounds[3] - viewBounds[1]) * scale;
+ const width = (viewBounds[2] - viewBounds[0]) * scale;
+ const indWidth = width / 10;
+ const indHeight = Math.max(height / 10, 15);
+ const indEdge = Math.max(indWidth, indHeight);
+ const indFontSize = indEdge * 0.8;
+ const left = NumCast(doc.config_panX) - width / 2;
+ const top = NumCast(doc.config_panY) - height / 2;
+ order.push(
+ <>
+ {labelCreator(top - indEdge / 2, left - indEdge / 2, indEdge, indFontSize)}
+ <div className="pathOrder-presPinView" style={{ top, left, width, height, borderWidth: indEdge / 10 }}></div>
+ </>
+ );
+ }
+ docs.add(tagDoc);
+ });
return order;
- }
+ };
/**
* Method called for viewing paths which adds a single line with
@@ -1381,22 +1365,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
* (Design needed for when documents in presentation trail are in another
* collection)
*/
- @computed get paths() {
+ pathLines = (collection: Doc) => {
let pathPoints = '';
- this.childDocs.forEach((doc, index) => {
- const tagDoc = PresBox.targetRenderedDoc(doc);
- if (tagDoc) {
- const n1x = NumCast(tagDoc.x) + NumCast(tagDoc._width) / 2;
- const n1y = NumCast(tagDoc.y) + NumCast(tagDoc._height) / 2;
- if ((index = 0)) pathPoints = n1x + ',' + n1y;
- else pathPoints = pathPoints + ' ' + n1x + ',' + n1y;
- } else if (doc.config_pinView) {
- const n1x = NumCast(doc.config_panX);
- const n1y = NumCast(doc.config_panY);
- if ((index = 0)) pathPoints = n1x + ',' + n1y;
- else pathPoints = pathPoints + ' ' + n1x + ',' + n1y;
- }
- });
+ this.childDocs
+ .filter(doc => PresBox.targetRenderedDoc(doc)?.embedContainer === collection)
+ .forEach((doc, index) => {
+ const tagDoc = PresBox.targetRenderedDoc(doc);
+ if (tagDoc) {
+ const n1x = NumCast(tagDoc.x) + NumCast(tagDoc._width) / 2;
+ const n1y = NumCast(tagDoc.y) + NumCast(tagDoc._height) / 2;
+ if ((index = 0)) pathPoints = n1x + ',' + n1y;
+ else pathPoints = pathPoints + ' ' + n1x + ',' + n1y;
+ } else if (doc.config_pinView) {
+ const n1x = NumCast(doc.config_panX);
+ const n1y = NumCast(doc.config_panY);
+ if ((index = 0)) pathPoints = n1x + ',' + n1y;
+ else pathPoints = pathPoints + ' ' + n1x + ',' + n1y;
+ }
+ });
return (
<polyline
points={pathPoints}
@@ -1413,8 +1399,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
markerEnd="url(#markerSquareFilled)"
/>
);
- }
- getPaths = (collection: Doc) => this.paths; // needs to be smarter and figure out the paths to draw for this specific collection. or better yet, draw everything in an overlay layer instad of within a collection
+ };
+ getPaths = (collection: Doc) => this.pathLines(collection); // needs to be smarter and figure out the paths to draw for this specific collection. or better yet, draw everything in an overlay layer instad of within a collection
// Converts seconds to ms and updates presentation_transition
public static SetTransitionTime = (number: String, setter: (timeInMS: number) => void, change?: number) => {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 12:57:20 +0000