aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/DragManager.ts7
-rw-r--r--src/client/views/collections/CollectionStackingView.scss3
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx45
-rw-r--r--src/client/views/collections/CollectionStackingViewFieldColumn.tsx16
-rw-r--r--src/client/views/nodes/ImageBox.tsx14
-rw-r--r--src/new_fields/util.ts2
6 files changed, 40 insertions, 47 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 1f2312032..53c0a2963 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -17,6 +17,7 @@ import { convertDropDataToButtons } from "./DropConverter";
import { AudioBox } from "../views/nodes/AudioBox";
import { DateField } from "../../new_fields/DateField";
import { DocumentView } from "../views/nodes/DocumentView";
+import { UndoManager } from "./UndoManager";
export type dropActionType = "place" | "alias" | "copy" | undefined;
export function SetupDrag(
@@ -199,6 +200,7 @@ export namespace DragManager {
dropDoc instanceof Doc && AudioBox.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: dropDoc }, { doc: d }, "audio link", "audio timeline"));
return dropDoc;
};
+ const batch = UndoManager.StartBatch("dragging");
const finishDrag = (e: DragCompleteEvent) => {
e.docDragData && (e.docDragData.droppedDocuments =
dragData.draggedDocuments.map(d => !dragData.isSelectionMove && !dragData.userDropAction && ScriptCast(d.onDragStart) ? addAudioTag(ScriptCast(d.onDragStart).script.run({ this: d }).result) :
@@ -208,6 +210,7 @@ export namespace DragManager {
e.docDragData?.droppedDocuments.forEach((drop: Doc, i: number) =>
(dragData?.removeDropProperties || []).concat(Cast(dragData.draggedDocuments[i].removeDropProperties, listSpec("string"), [])).map(prop => drop[prop] = undefined)
);
+ batch.end();
};
dragData.draggedDocuments.map(d => d.dragFactory); // does this help? trying to make sure the dragFactory Doc is loaded
StartDrag(eles, dragData, downX, downY, options, finishDrag);
@@ -401,15 +404,17 @@ export namespace DragManager {
function dispatchDrag(dragEles: HTMLElement[], e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions, finishDrag?: (e: DragCompleteEvent) => void) {
const removed = dragData.dontHideOnDrop ? [] : dragEles.map(dragEle => {
- const ret = { ele: dragEle, w: dragEle.style.width, h: dragEle.style.height };
+ const ret = { ele: dragEle, w: dragEle.style.width, h: dragEle.style.height, o: dragEle.style.overflow };
dragEle.style.width = "0";
dragEle.style.height = "0";
+ dragEle.style.overflow = "hidden";
return ret;
});
const target = document.elementFromPoint(e.x, e.y);
removed.map(r => {
r.ele.style.width = r.w;
r.ele.style.height = r.h;
+ r.ele.style.overflow = r.o;
});
if (target) {
const complete = new DragCompleteEvent(false, dragData);
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index bfa5ea278..47faa9239 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -26,6 +26,9 @@
position: relative;
display: block;
}
+ .collectionStackingViewFieldColumn {
+ height:max-content;
+ }
.collectionSchemaView-previewDoc {
height: 100%;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index d9183cdb6..84e6ecced 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -24,13 +24,13 @@ import "./CollectionStackingView.scss";
import { CollectionStackingViewFieldColumn } from "./CollectionStackingViewFieldColumn";
import { CollectionSubView } from "./CollectionSubView";
import { CollectionViewType } from "./CollectionView";
+import { SelectionManager } from "../../util/SelectionManager";
const _global = (window /* browser */ || global /* node */) as any;
@observer
export class CollectionStackingView extends CollectionSubView(doc => doc) {
_masonryGridRef: HTMLDivElement | null = null;
_draggerRef = React.createRef<HTMLDivElement>();
- _heightDisposer?: IReactionDisposer;
_pivotFieldDisposer?: IReactionDisposer;
_docXfs: any[] = [];
_columnStart: number = 0;
@@ -129,34 +129,6 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
}
componentDidMount() {
super.componentDidMount();
- // this._heightDisposer = reaction(() => {
- // TraceMobx();
- // if (this.props.Document._autoHeight && !this.layoutDoc._nativeHeight) {
- // const sectionsList = Array.from(this.Sections.size ? this.Sections.values() : [this.filteredChildren]);
- // if (this.isStackingView) {
- // const res = Math.max(...sectionsList.map((s, i) => {
- // const secSize = (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => {
- // const val = this.getSimpleDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap);
- // console.log(d.title + " " + val + " => " + (val + height));
- // return height + val;
- // }, this.yMargin);
- // console.log("Sec" + i + " = " + secSize);
- // return secSize;
- // }));
- // return res * this.props.ContentScaling();
- // } else {
- // const sum = Array.from(this._heightMap.values()).reduce((acc: number, curr: number) => acc += curr, 0);
- // return this.props.ContentScaling() * (sum + (this.Sections.size ? (this.props.Document.miniHeaders ? 20 : 85) : -15));
- // }
- // }
- // return -1;
- // },
- // (hgt: number) => {
- // const doc = hgt === -1 ? undefined : this.props.DataDoc && this.props.DataDoc.layout === this.layoutDoc ? this.props.DataDoc : this.layoutDoc;
- // doc && hgt > 0 && (Doc.Layout(doc)._height = hgt);
- // },
- // { fireImmediately: true }
- // );
// reset section headers when a new filter is inputted
this._pivotFieldDisposer = reaction(
@@ -166,7 +138,6 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
}
componentWillUnmount() {
super.componentWillUnmount();
- this._heightDisposer?.();
this._pivotFieldDisposer?.();
}
@@ -307,7 +278,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
});
}
headings = () => Array.from(this.Sections);
- refList = new Map<any, number>();
+ refList: any[] = [];
sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => {
const key = this.pivotField;
let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined;
@@ -318,16 +289,14 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
const cols = () => this.isStackingView ? 1 : Math.max(1, Math.min(this.filteredChildren.length,
Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap))));
return <CollectionStackingViewFieldColumn
+ unobserveHeight={(ref) => this.refList.splice(this.refList.indexOf(ref), 1)}
observeHeight={(ref) => {
if (ref) {
- this.refList.set(ref, 0);
+ this.refList.push(ref);
+ const doc = this.props.DataDoc && this.props.DataDoc.layout === this.layoutDoc ? this.props.DataDoc : this.layoutDoc;
this.observer = new _global.ResizeObserver(action((entries: any) => {
- if (this.props.Document.autoHeight && ref) {
- const doc = this.props.DataDoc && this.props.DataDoc.layout === this.layoutDoc ? this.props.DataDoc : this.layoutDoc;
- for (const entry of entries) {
- this.refList.set(ref, entry.contentRect.height);
- }
- Doc.Layout(doc)._height = Math.max(...Array.from(this.refList.entries()).map(entry => Number(getComputedStyle(entry[0]).height.replace("px", ""))));
+ if (this.props.Document._autoHeight && ref && !SelectionManager.GetIsDragging()) {
+ Doc.Layout(doc)._height = Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", ""))));
}
}));
this.observer.observe(ref);
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index dcaffe7af..5d926b7c7 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -40,6 +40,7 @@ interface CSVFieldColumnProps {
createDropTarget: (ele: HTMLDivElement) => void;
screenToLocalTransform: () => Transform;
observeHeight: (myref: any) => void;
+ unobserveHeight: (myref: any) => void;
}
@observer
@@ -51,13 +52,19 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
@observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading;
@observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
+ _ele: HTMLElement | null = null;
createColumnDropRef = (ele: HTMLDivElement | null) => {
this.dropDisposer?.();
if (ele) {
+ this._ele = ele;
+ this.props.observeHeight(ele);
this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this));
}
}
+ componentWillUnmount() {
+ this.props.unobserveHeight(this._ele);
+ }
@undoBatch
columnDrop = action((e: Event, de: DragManager.DropEvent) => {
@@ -354,12 +361,17 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
for (let i = 0; i < cols; i++) templatecols += `${style.columnWidth / style.numGroupColumns}px `;
const chromeStatus = this.props.parent.props.Document._chromeStatus;
return (
- <div className="collectionStackingViewFieldColumn" key={heading} style={{ width: `${100 / ((uniqueHeadings.length + ((chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ? 1 : 0)) || 1)}%`, background: this._background }}
+ <div className="collectionStackingViewFieldColumn" key={heading}
+ style={{
+ width: `${100 / ((uniqueHeadings.length + ((chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ? 1 : 0)) || 1)}%`,
+ height: SelectionManager.GetIsDragging() ? "100%" : undefined,
+ background: this._background
+ }}
ref={this.createColumnDropRef} onPointerEnter={this.pointerEntered} onPointerLeave={this.pointerLeave}>
{this.props.parent.Document.hideHeadings ? (null) : headingView}
{
this.collapsed ? (null) :
- <div ref={ref => ref && this.props.observeHeight(ref)}>
+ <div>
<div key={`${heading}-stack`} className={`collectionStackingView-masonry${singleColumn ? "Single" : "Grid"}`}
style={{
padding: singleColumn ? `${columnYMargin}px ${0}px ${style.yMargin}px ${0}px` : `${columnYMargin}px ${0}px`,
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index e0b3a6809..4a1b71a9e 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -392,8 +392,12 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
const fadepath = this.paths[Math.min(1, this.paths.length - 1)];
const { nativeWidth, nativeHeight } = this.nativeSize;
const rotation = NumCast(this.dataDoc[this.fieldKey + "-rotation"]);
- const aspect = (rotation % 180) ? this.Document[HeightSym]() / this.Document[WidthSym]() : 1;
- const shift = (rotation % 180) ? (nativeHeight - nativeWidth / aspect) / 2 : 0;
+ const aspect = (rotation % 180) ? nativeHeight / nativeWidth : 1;
+ //const shift = (rotation % 180) ? -(nativeHeight - nativeHeight * aspect) : 0;
+ const pwidth = this.props.PanelWidth();
+ const pheight = this.props.PanelHeight();
+ const shift = (rotation % 180) ? (pheight - pwidth) / aspect / 2 + (pheight - pwidth) / 2 : 0;
+ //(300 - 168) / 1.7778 / 2 + (300 - 168)/2
this.resize(srcpath);
@@ -433,14 +437,14 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
contentFunc = () => [this.content];
render() {
TraceMobx();
- const rotation = NumCast(this.dataDoc[this.fieldKey + "-rotation"]);
- const aspect = (rotation % 180) ? this.Document[HeightSym]() / this.Document[WidthSym]() : 1;
+ const { nativeWidth, nativeHeight } = this.nativeSize;
+ const aspect = nativeWidth / nativeHeight;
const dragging = !SelectionManager.GetIsDragging() ? "" : "-dragging";
return (<div className={`imageBox${dragging}`} onContextMenu={this.specificContextMenu}
style={{
transform: this.props.PanelWidth() ? undefined : `scale(${this.props.ContentScaling()})`,
width: this.props.PanelWidth() ? `${this.props.PanelWidth()}px` : `${100 / this.props.ContentScaling()}%`,
- height: this.props.PanelWidth() ? `${this.props.PanelWidth() * aspect}px` : `${100 / this.props.ContentScaling()}%`,
+ height: this.props.PanelWidth() ? `${this.props.PanelWidth() / aspect}px` : `${100 / this.props.ContentScaling()}%`,
pointerEvents: this.props.Document.isBackground ? "none" : undefined,
borderRadius: `${Number(StrCast(this.layoutDoc.borderRounding).replace("px", "")) / this.props.ContentScaling()}px`
}} >
diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts
index 480a55da0..8c719ccd8 100644
--- a/src/new_fields/util.ts
+++ b/src/new_fields/util.ts
@@ -12,7 +12,7 @@ function _readOnlySetter(): never {
throw new Error("Documents can't be modified in read-only mode");
}
-const tracing = true;
+const tracing = false;
export function TraceMobx() {
tracing && trace();
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 16:18:34 +0000