aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/collectionFreeForm
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections/collectionFreeForm')
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx87
1 files changed, 31 insertions, 56 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index a36c36261..21a069bd8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -22,7 +22,7 @@ import { ImageField } from '../../../../fields/URLField';
import { TraceMobx } from '../../../../fields/util';
import { Gestures, PointData } from '../../../../pen-gestures/GestureTypes';
import { GestureUtils } from '../../../../pen-gestures/GestureUtils';
-import { aggregateBounds, emptyFunction, intersectRect, Utils } from '../../../../Utils';
+import { aggregateBounds, clamp, emptyFunction, intersectRect, Utils } from '../../../../Utils';
import { Docs } from '../../../documents/Documents';
import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
import { DocUtils } from '../../../documents/DocUtils';
@@ -377,7 +377,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
if (didMove) {
const focusTime = options?.instant ? 0 : options.zoomTime ?? 500;
(options.zoomScale ?? options.willZoomCentered) && scale && (this.Document[this.scaleFieldKey] = scale);
- this.setPan(panX, panY, focusTime, true); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow
+ this.setPan(panX, panY, focusTime); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow
return focusTime;
}
return undefined;
@@ -399,8 +399,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
const refDoc = docDragData.droppedDocuments[0];
const fromScreenXf = NumCast(refDoc.z) ? this.ScreenToLocalBoxXf() : this.screenToFreeformContentsXf;
const [xpo, ypo] = fromScreenXf.transformPoint(de.x, de.y);
- const x = xpo - docDragData.offset[0];
- const y = ypo - docDragData.offset[1];
+ const [x, y] = [xpo - docDragData.offset[0], ypo - docDragData.offset[1]];
const zsorted = this.childLayoutPairs
.map(pair => pair.layout)
.slice()
@@ -411,8 +410,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
const dvals = CollectionFreeFormDocumentView.getValues(refDoc, NumCast(refDoc.activeFrame, 1000));
const dropPos = this.Document._currentFrame !== undefined ? [NumCast(dvals.x), NumCast(dvals.y)] : [NumCast(refDoc.x), NumCast(refDoc.y)];
- for (let i = 0; i < docDragData.droppedDocuments.length; i++) {
- const d = docDragData.droppedDocuments[i];
+ docDragData.droppedDocuments.forEach((d, i) => {
const layoutDoc = Doc.Layout(d);
const delta = Utils.rotPt(x - dropPos[0], y - dropPos[1], fromScreenXf.Rotate);
if (this.Document._currentFrame !== undefined) {
@@ -431,7 +429,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
layoutDoc._width = NumCast(layoutDoc._width, 300);
layoutDoc._height = NumCast(layoutDoc._height, nd[0] && nd[1] ? (nd[1] / nd[0]) * NumCast(layoutDoc._width) : 300);
!d._keepZWhenDragged && (d.zIndex = zsorted.length + 1 + i); // bringToFront
- }
+ });
(docDragData.droppedDocuments.length === 1 || de.shiftKey) && this._clusters.addDocuments(docDragData.droppedDocuments);
return true;
@@ -457,11 +455,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
internalLinkDrop(e: Event, de: DragManager.DropEvent, linkDragData: DragManager.LinkDragData) {
if (this.DocumentView?.() && linkDragData.linkDragView.containerViewPath?.().includes(this.DocumentView())) {
const [x, y] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y);
- let added = false;
// do nothing if link is dropped into any freeform view parent of dragged document
const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, x, y, title: 'dropped annotation' });
- added = !!this._props.addDocument?.(source);
- de.complete.linkDocument = DocUtils.MakeLink(linkDragData.linkSourceGetAnchor(), source, { link_relationship: 'annotated by:annotation of' }); // TODODO this is where in text links get passed
+ const added = !!this._props.addDocument?.(source);
+ de.complete.linkDocument = DocUtils.MakeLink(linkDragData.linkSourceGetAnchor(), source, { link_relationship: 'annotated by:annotation of' });
if (de.complete.linkDocument) {
de.complete.linkDocument.layout_isSvg = true;
this.addDocument(de.complete.linkDocument);
@@ -572,18 +569,17 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
scrollPan = (e: WheelEvent | { deltaX: number; deltaY: number }): void => {
SnappingManager.TriggerUserPanned();
- this.setPan(NumCast(this.Document[this.panXFieldKey]) - e.deltaX, NumCast(this.Document[this.panYFieldKey]) - e.deltaY, 0, true);
+ this.setPan(NumCast(this.Document[this.panXFieldKey]) - e.deltaX, NumCast(this.Document[this.panYFieldKey]) - e.deltaY, 0);
};
@action
pan = (e: PointerEvent): void => {
- const ctrlKey = e.ctrlKey && !e.shiftKey;
- const shiftKey = e.shiftKey && !e.ctrlKey;
+ const [ctrlKey, shiftKey] = [e.ctrlKey && !e.shiftKey, e.shiftKey && !e.ctrlKey];
SnappingManager.TriggerUserPanned();
this.DocumentView?.().clearViewTransition();
const [dxi, dyi] = this.screenToFreeformContentsXf.transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
const { x: dx, y: dy } = Utils.rotPt(dxi, dyi, this.ScreenToLocalBoxXf().Rotate);
- this.setPan(NumCast(this.Document[this.panXFieldKey]) - (ctrlKey ? 0 : dx), NumCast(this.Document[this.panYFieldKey]) - (shiftKey ? 0 : dy), 0, true);
+ this.setPan(NumCast(this.Document[this.panXFieldKey]) - (ctrlKey ? 0 : dx), NumCast(this.Document[this.panYFieldKey]) - (shiftKey ? 0 : dy), 0);
this._lastX = e.clientX;
this._lastY = e.clientY;
};
@@ -795,18 +791,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
this.setPan(0, 0);
return;
}
- if (deltaScale * invTransform.Scale > NumCast(this.Document[this.scaleFieldKey + '_max'], Number.MAX_VALUE)) {
- deltaScale = NumCast(this.Document[this.scaleFieldKey + '_max'], 1) / invTransform.Scale;
- }
- if (deltaScale * invTransform.Scale < NumCast(this.Document[this.scaleFieldKey + '_min'], this.isAnnotationOverlay ? 1 : 0)) {
- deltaScale = NumCast(this.Document[this.scaleFieldKey + '_min'], 1) / invTransform.Scale;
- }
-
+ const minScale = NumCast(this.Document[this.scaleFieldKey + '_min'], this.isAnnotationOverlay ? 1 : 0);
+ const maxScale = NumCast(this.Document[this.scaleFieldKey + '_max'], Number.MAX_VALUE);
+ deltaScale = clamp(deltaScale, minScale / invTransform.Scale, maxScale / invTransform.Scale);
const localTransform = invTransform.scaleAbout(deltaScale, x, y);
if (localTransform.Scale >= 0.05 || localTransform.Scale > this.zoomScaling()) {
const safeScale = Math.min(Math.max(0.05, localTransform.Scale), 20);
+ const allowScroll = this.Document[this.scaleFieldKey] !== minScale && Math.abs(safeScale) === minScale;
this.Document[this.scaleFieldKey] = Math.abs(safeScale);
- this.setPan(-localTransform.TranslateX / safeScale, (this._props.originTopLeft ? undefined : NumCast(this.Document.layout_scrollTop) * safeScale) || -localTransform.TranslateY / safeScale);
+ this.setPan(-localTransform.TranslateX / safeScale, (this._props.originTopLeft ? undefined : NumCast(this.Document.layout_scrollTop) * safeScale) || -localTransform.TranslateY / safeScale, undefined, allowScroll);
}
};
@@ -843,35 +836,18 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
};
@action
- setPan(panXIn: number, panYIn: number, panTime: number = 0, clamp: boolean = false) {
- let panX = panXIn;
- let panY = panYIn;
+ setPan(panXIn: number, panYIn: number, panTime: number = 0, allowScroll = false) {
+ let [panX, panY] = [panXIn, panYIn];
// this is the easiest way to do this -> will talk with Bob about using mobx to do this to remove this line of code.
if (Doc.UserDoc()?.presentationMode === 'watching') ReplayMovements.Instance.pauseFromInteraction();
- if (!this.isAnnotationOverlay && clamp) {
+ if (!this.isAnnotationOverlay && this.childDocs.length) {
// this section wraps the pan position, horizontally and/or vertically whenever the content is panned out of the viewing bounds
- const docs = this.childLayoutPairs.map(pair => pair.layout).filter(doc => doc instanceof Doc && doc.type !== DocumentType.LINK);
- const measuredDocs = docs.map(doc => ({ x: NumCast(doc.x), y: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) }));
- if (measuredDocs.length) {
- const { originTopLeft } = this._props;
- // const xrangeMin = Math.min(...measuredDocs.map(doc => doc.x), originTopLeft ? 0 : Number.MAX_VALUE);
- // const yrangeMin = Math.min(...measuredDocs.map(doc => doc.y), originTopLeft ? 0 : Number.MAX_VALUE);
- // const xrangeMax = Math.max(...measuredDocs.map(doc => doc.x + doc.width));
- // const yrangeMax = Math.max(...measuredDocs.map(doc => doc.y + doc.height));
- const { bounds: { x: xrangeMin, y: yrangeMin, r: xrangeMax, b: yrangeMax } } = this.contentBounds(); // prettier-ignore
- const nativeScaling = this._props.NativeDimScaling?.() || 1;
- const scaling = this.zoomScaling() * nativeScaling;
- const [widScaling, hgtScaling] = [this._props.PanelWidth() / scaling, this._props.PanelHeight() / scaling];
- const panelWidMax = widScaling * (originTopLeft ? 2 / nativeScaling : 1);
- const panelHgtMax = hgtScaling * (originTopLeft ? 2 / nativeScaling : 1);
- const panelWidMin = widScaling * (originTopLeft ? 0 : 1);
- const panelHgtMin = hgtScaling * (originTopLeft ? 0 : 1);
- if (xrangeMin >= panX + panelWidMax / 2) panX = xrangeMax + (originTopLeft ? 0 : panelWidMax / 2);
- else if (xrangeMax <= panX - panelWidMin / 2) panX = xrangeMin - (originTopLeft ? panelWidMax / 2 : panelWidMin / 2); // prettier-ignore
- if (yrangeMin >= panY + panelHgtMax / 2) panY = yrangeMax + (originTopLeft ? 0 : panelHgtMax / 2);
- else if (yrangeMax <= panY - panelHgtMin / 2) panY = yrangeMin - (originTopLeft ? panelHgtMax / 2 : panelHgtMin / 2); // prettier-ignore
- }
+ const { bounds: { x: xrangeMin, y: yrangeMin, r: xrangeMax, b: yrangeMax } } = this.contentBounds(); // prettier-ignore
+ const scaling = this.zoomScaling() * (this._props.NativeDimScaling?.() || 1);
+ const [widScaling, hgtScaling] = [this._props.PanelWidth() / scaling, this._props.PanelHeight() / scaling];
+ panX = clamp(panX, xrangeMin - widScaling / 2, xrangeMax + widScaling / 2);
+ panY = clamp(panY, yrangeMin - hgtScaling / 2, yrangeMax + hgtScaling / 2);
}
if (!this.layoutDoc._lockedTransform || LightboxView.LightboxDoc) {
this.setPanZoomTransition(panTime);
@@ -880,22 +856,22 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
const minPanX = NumCast(this.dataDoc._freeform_panX_min, 0);
const minPanY = NumCast(this.dataDoc._freeform_panY_min, 0);
const maxPanX = NumCast(this.dataDoc._freeform_panX_max, this.nativeWidth);
- const newPanX = Math.min(minPanX + scale * maxPanX, Math.max(minPanX, panX));
+ const newPanX = clamp(panX, minPanX, minPanX + scale * maxPanX);
const fitYscroll = (((this.nativeHeight / this.nativeWidth) * this._props.PanelWidth() - this._props.PanelHeight()) * this.ScreenToLocalBoxXf().Scale) / minScale;
const nativeHeight = (this._props.PanelHeight() / this._props.PanelWidth() / (this.nativeHeight / this.nativeWidth)) * this.nativeHeight;
const maxScrollTop = this.nativeHeight / this.ScreenToLocalBoxXf().Scale - this._props.PanelHeight();
const maxPanY =
minPanY + // minPanY + scrolling introduced by view scaling + scrolling introduced by layout_fitWidth
- scale * NumCast(this.dataDoc._panY_max, nativeHeight) +
+ scale * NumCast(this.dataDoc._freeform_panY_max, nativeHeight) +
(!this._props.getScrollHeight?.() ? fitYscroll : 0); // when not zoomed, scrolling is handled via a scrollbar, not panning
- let newPanY = Math.max(minPanY, Math.min(maxPanY, panY));
- if (fitYscroll > 2 && this.layoutDoc.layout_scrollTop === undefined && NumCast(this.layoutDoc._freeform_scale, minScale) === minScale) {
- const maxPanScrollY = minPanY + fitYscroll;
- const relTop = (panY - minPanY) / (maxPanScrollY - minPanY);
+ const newPanY = clamp(panY, minPanY, maxPanY);
+ // this mess fixes a problem when zooming to the default on an image that is fit width and can scroll.
+ // Without this, the scroll always goes to the top, instead of matching the pan position.
+ if (fitYscroll > 2 && allowScroll && NumCast(this.layoutDoc._freeform_scale, minScale) === minScale) {
setTimeout(() => {
+ const relTop = (clamp(panY, minPanY, fitYscroll) - minPanY) / fitYscroll;
this.layoutDoc.layout_scrollTop = relTop * maxScrollTop;
}, 10);
- newPanY = minPanY;
}
!this.Document._verticalScroll && (this.Document[this.panXFieldKey] = this.isAnnotationOverlay ? newPanX : panX);
!this.Document._horizontalScroll && (this.Document[this.panYFieldKey] = this.isAnnotationOverlay ? newPanY : panY);
@@ -909,8 +885,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
this.setPan(
NumCast(this.layoutDoc[this.panXFieldKey]) + ((this._props.PanelWidth() / 2) * x) / this.zoomScaling(), // nudge x,y as a function of panel dimension and scale
NumCast(this.layoutDoc[this.panYFieldKey]) + ((this._props.PanelHeight() / 2) * -y) / this.zoomScaling(),
- nudgeTime,
- true
+ nudgeTime
);
return true;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-23 20:30:58 +0000