aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/DocComponent.tsx4
-rw-r--r--src/client/views/StyleProvider.tsx3
-rw-r--r--src/client/views/collections/CollectionCarousel3DView.tsx23
-rw-r--r--src/client/views/collections/CollectionCarouselView.tsx46
-rw-r--r--src/client/views/collections/CollectionMenu.scss2
-rw-r--r--src/client/views/collections/CollectionMenu.tsx3
-rw-r--r--src/client/views/collections/TabDocView.tsx3
-rw-r--r--src/client/views/nodes/ImageBox.tsx4
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx6
-rw-r--r--src/fields/Doc.ts4
10 files changed, 35 insertions, 63 deletions
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index c017b7015..3c565fd62 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -124,8 +124,8 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps, T
return ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name, scale: "number" })?.script.run({ self: this.rootDoc, this: this.layoutDoc, scale }).result as string || "";
};
divKeys.map((prop: string) => {
- const p = (this.props as any)[prop] as string;
- p && (style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer));
+ const p = (this.props as any)[prop];
+ typeof p === "string" && (style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer));
});
return style;
}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 9102b9fa4..ebd453295 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -65,6 +65,7 @@ export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentVie
//
export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any {
const docProps = testDocProps(props) ? props : undefined;
+ const fieldKey = (props as any)?.fieldKey ? (props as any).fieldKey + "-" : "";
const selected = property.includes(":selected");
const isCaption = property.includes(":caption");
const isAnchor = property.includes(":anchor");
@@ -99,7 +100,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
case StyleProp.BackgroundColor: {
if (isCaption) return "rgba(0,0,0 ,0.4)";
if (Doc.UserDoc().renderStyle === "comic") return "transparent";
- let docColor: Opt<string> = StrCast(doc?._backgroundColor);
+ let docColor: Opt<string> = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor));
if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey";
switch (doc?.type) {
case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break;
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index b2ae441d6..9a3183d88 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -104,27 +104,6 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
}, 1500);
}
- _downX = 0;
- _downY = 0;
- onPointerDown = (e: React.PointerEvent) => {
- this._downX = e.clientX;
- this._downY = e.clientY;
- document.addEventListener("pointerup", this.onpointerup);
- }
- private _lastTap: number = 0;
- private _doubleTap = false;
- onpointerup = (e: PointerEvent) => {
- this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2);
- this._lastTap = Date.now();
- }
-
- onClick = (e: React.MouseEvent) => {
- if (this._doubleTap) {
- e.stopPropagation();
- this.props.Document.isLightboxOpen = true;
- }
- }
-
@computed get buttons() {
if (!this.props.isContentActive()) return null;
return <div className="arrow-buttons" >
@@ -167,7 +146,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
const index = NumCast(this.layoutDoc._itemIndex);
const translateX = this.panelWidth() * (1 - index);
- return <div className="collectionCarousel3DView-outer" onClick={this.onClick} onPointerDown={this.onPointerDown} ref={this.createDashEventsTarget}>
+ return <div className="collectionCarousel3DView-outer" ref={this.createDashEventsTarget}>
<div className="carousel-wrapper" style={{ transform: `translateX(${translateX}px)` }}>
{this.content}
</div>
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index cc90b9134..0642a1f9b 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -62,53 +62,37 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
</div>
<div className="collectionCarouselView-caption" key="caption"
style={{
- background: StrCast(this.layoutDoc._captionBackgroundColor, this.props.styleProvider?.(this.props.Document, this.props, StyleProp.BackgroundColor)),
- color: StrCast(this.layoutDoc._captionColor, StrCast(this.layoutDoc.color)),
- borderRadius: StrCast(this.layoutDoc._captionBorderRounding),
+ background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor + ":caption"),
+ color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color + ":caption"),
+ borderRadius: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding + ":caption"),
}}>
<FormattedTextBox key={index} {...this.props}
- xMargin={NumCast(this.layoutDoc["_carousel-caption-xMargin"])}
- yMargin={NumCast(this.layoutDoc["_carousel-caption-yMargin"])}
- Document={curDoc.layout} DataDoc={undefined} fieldKey={"caption"} />
+ Document={curDoc.layout} DataDoc={undefined} fieldKey={"caption"}
+ fontSize={NumCast(this.layoutDoc["caption-fontSize"])}
+ xMargin={NumCast(this.layoutDoc["caption-xMargin"])}
+ yMargin={NumCast(this.layoutDoc["caption-yMargin"])} />
</div>
</>;
}
@computed get buttons() {
return <>
- <div key="back" className="carouselView-back" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={this.goback}>
+ <div key="back" className="carouselView-back" style={{ background: `${StrCast(this.layoutDoc.backgroundColor)}` }} onClick={this.goback}>
<FontAwesomeIcon icon={"caret-left"} size={"2x"} />
</div>
- <div key="fwd" className="carouselView-fwd" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={this.advance}>
+ <div key="fwd" className="carouselView-fwd" style={{ background: `${StrCast(this.layoutDoc.backgroundColor)}` }} onClick={this.advance}>
<FontAwesomeIcon icon={"caret-right"} size={"2x"} />
</div>
</>;
}
- _downX = 0;
- _downY = 0;
- onPointerDown = (e: React.PointerEvent) => {
- this._downX = e.clientX;
- this._downY = e.clientY;
- document.addEventListener("pointerup", this.onpointerup);
- }
- private _lastTap: number = 0;
- private _doubleTap = false;
- onpointerup = (e: PointerEvent) => {
- this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2);
- this._lastTap = Date.now();
- }
-
- onClick = (e: React.MouseEvent) => {
- if (this._doubleTap) {
- e.stopPropagation();
- this.props.Document.isLightboxOpen = true;
- }
- }
-
render() {
- return <div className="collectionCarouselView-outer" onClick={this.onClick} onPointerDown={this.onPointerDown} ref={this.createDashEventsTarget}>
+ return <div className="collectionCarouselView-outer" ref={this.createDashEventsTarget}
+ style={{
+ background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
+ color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color),
+ }}>
{this.content}
- {!this.props.Document._chromeHidden ? (null) : this.buttons}
+ {this.props.Document._chromeHidden ? (null) : this.buttons}
</div>;
}
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 9eac75f4b..dc5231a3a 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -300,7 +300,7 @@
.collection3DCarouselViewChrome-scrollSpeed-cont {
justify-self: right;
align-items: center;
- display: grid;
+ display: flex;
grid-auto-columns: auto;
font-size: 75%;
letter-spacing: 2px;
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index a26953ff6..95b0ef790 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -37,6 +37,7 @@ import { LightboxView } from "../LightboxView";
import { Docs } from "../../documents/Documents";
import { DocumentManager } from "../../util/DocumentManager";
import { CollectionDockingView } from "./CollectionDockingView";
+import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox";
@observer
export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -260,6 +261,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
case CollectionViewType.Schema: return (<CollectionSchemaViewChrome key="collchrome" {...this.props} />);
case CollectionViewType.Tree: return (<CollectionTreeViewChrome key="collchrome" {...this.props} />);
case CollectionViewType.Masonry: return (<CollectionStackingViewChrome key="collchrome" {...this.props} />);
+ case CollectionViewType.Carousel:
case CollectionViewType.Carousel3D: return (<Collection3DCarouselViewChrome key="collchrome" {...this.props} />);
case CollectionViewType.Grid: return (<CollectionGridViewChrome key="collchrome" {...this.props} />);
case CollectionViewType.Docking: return (<CollectionDockingChrome key="collchrome" {...this.props} />);
@@ -1021,6 +1023,7 @@ export class Collection3DCarouselViewChrome extends React.Component<CollectionMe
return (
<div className="collection3DCarouselViewChrome-cont">
<div className="collection3DCarouselViewChrome-scrollSpeed-cont">
+ {FormattedTextBox.Focused ? <RichTextMenu /> : (null)}
<div className="collectionStackingViewChrome-scrollSpeed-label">
AUTOSCROLL SPEED:
</div>
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index f6aecbb14..4417038fa 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -92,7 +92,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
};
tab.element[0].style.borderTopRightRadius = "8px";
tab.element[0].children[1].appendChild(toggle);
- tab._disposers.layerDisposer = reaction(() => ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }),
+ tab._disposers.layerDisposer = reaction(() =>
+ ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }),
({ layer, color }) => toggle.style.background = !layer ? color : "dimgrey", { fireImmediately: true });
}
// shifts the focus to this tab when another tab is dragged over it
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 8a6946b78..1ab367395 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -102,8 +102,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
const targetDoc = layoutDoc[DataSym];
if (targetDoc[targetField] instanceof ImageField) {
this.dataDoc[this.fieldKey] = ObjectField.MakeCopy(targetDoc[targetField] as ImageField);
- Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(targetDoc));
- Doc.SetNativeWidth(this.dataDoc, Doc.NativeHeight(targetDoc));
+ Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(targetDoc), this.fieldKey);
+ Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(targetDoc), this.fieldKey);
e.stopPropagation();
}
}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index c2860af76..9203207d7 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1,6 +1,6 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isEqual } from "lodash";
-import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx";
+import { action, computed, IReactionDisposer, reaction, runInAction, observable } from "mobx";
import { observer } from "mobx-react";
import { baseKeymap, selectAll } from "prosemirror-commands";
import { history } from "prosemirror-history";
@@ -1132,6 +1132,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
}
componentWillUnmount() {
+ FormattedTextBox.Focused === this && (FormattedTextBox.Focused = undefined);
Object.values(this._disposers).forEach(disposer => disposer?.());
this.endUndoTypingBatch();
this.unhighlightSearchTerms();
@@ -1236,8 +1237,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
@action
onFocused = (e: React.FocusEvent): void => {
//applyDevTools.applyDevTools(this._editorView);
+ FormattedTextBox.Focused = this;
this._editorView && RichTextMenu.Instance?.updateMenu(this._editorView, undefined, this.props);
}
+ @observable public static Focused: FormattedTextBox | undefined;
onClick = (e: React.MouseEvent): void => {
if (Math.abs(e.clientX - this._downX) > 4 || Math.abs(e.clientY - this._downY) > 4) {
@@ -1340,6 +1343,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
return wasUndoing;
}
onBlur = (e: any) => {
+ FormattedTextBox.Focused === this && (FormattedTextBox.Focused = undefined);
if (RichTextMenu.Instance?.view === this._editorView && !this.props.isSelected(true)) {
RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined);
}
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 9faba9486..bd0ba3ad7 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -910,8 +910,8 @@ export namespace Doc {
}
export function NativeWidth(doc?: Doc, dataDoc?: Doc, useWidth?: boolean) { return !doc ? 0 : NumCast(doc._nativeWidth, NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + "-nativeWidth"], useWidth ? doc[WidthSym]() : 0)); }
export function NativeHeight(doc?: Doc, dataDoc?: Doc, useHeight?: boolean) { return !doc ? 0 : NumCast(doc._nativeHeight, NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + "-nativeHeight"], useHeight ? doc[HeightSym]() : 0)); }
- export function SetNativeWidth(doc: Doc, width: number | undefined) { doc[Doc.LayoutFieldKey(doc) + "-nativeWidth"] = width; }
- export function SetNativeHeight(doc: Doc, height: number | undefined) { doc[Doc.LayoutFieldKey(doc) + "-nativeHeight"] = height; }
+ export function SetNativeWidth(doc: Doc, width: number | undefined, fieldKey?: string) { doc[(fieldKey ?? Doc.LayoutFieldKey(doc)) + "-nativeWidth"] = width; }
+ export function SetNativeHeight(doc: Doc, height: number | undefined, fieldKey?: string) { doc[(fieldKey ?? Doc.LayoutFieldKey(doc)) + "-nativeHeight"] = height; }
const manager = new DocData();
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 08:43:36 +0000