aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/ImageBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/ImageBox.tsx')
-rw-r--r--src/client/views/nodes/ImageBox.tsx123
1 files changed, 41 insertions, 82 deletions
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 279317f49..017ef7191 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -436,6 +436,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
};
getScrollHeight = () => (this._props.fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined);
+ @computed get usingAlternate() {
+ const usePath = StrCast(this.Document[this.fieldKey + '_usePath']);
+ return 'alternate' === usePath || ('alternate:hover' === usePath && this._isHovering) || (':hover' === usePath && !this._isHovering);
+ }
+
@computed get nativeSize() {
TraceMobx();
if (this.paths.length && this.paths[0].includes('icon-hi')) return { nativeWidth: NumCast(this.layoutDoc._width), nativeHeight: NumCast(this.layoutDoc._height), nativeOrientation: 0 };
@@ -471,10 +476,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
<span style={{ color: usePath === 'alternate' ? 'black' : undefined }}>
<em>alternate, </em>
</span>
- and show
<span style={{ color: usePath === 'alternate:hover' ? 'black' : undefined }}>
<em> alternate on hover</em>
</span>
+ and show
+ <span style={{ color: usePath === ':hover' ? 'black' : undefined }}>
+ <em> primary on hover</em>
+ </span>
</div>
}>
<div
@@ -482,7 +490,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
ref={this._overlayIconRef}
onPointerDown={e =>
setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, () => {
- this.layoutDoc[`_${this.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined;
+ this.layoutDoc[`_${this.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : usePath === 'alternate:hover' ? ':hover' : undefined;
})
}
style={{
@@ -527,7 +535,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
.filter(url => url)
.map(url => this.choosePath(url)) ?? []; // acc ess the primary layout data of the alternate documents
const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths;
- return paths.length ? paths : [defaultUrl.href];
+ return paths.length ? paths.reverse() : [defaultUrl.href];
}
@computed get content() {
@@ -552,7 +560,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
transformOrigin = 'right top';
transform = `translate(-100%, 0%) rotate(${rotation}deg) scale(${aspect})`;
}
- const usePath = this.layoutDoc[`_${this.fieldKey}_usePath`];
return (
<div
@@ -571,7 +578,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
ref={action((r: HTMLImageElement | null) => (this.imageRef = r))}
key="paths"
src={srcpath}
- style={{ transform, transformOrigin, objectFit: 'fill', height: '100%' }}
+ style={{ transform, transformOrigin }}
onError={action(e => {
this._error = e.toString();
})}
@@ -579,7 +586,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
width={nativeWidth}
/>
{fadepath === srcpath ? null : (
- <div className={`imageBox-fadeBlocker${(this._isHovering && usePath === 'alternate:hover') || usePath === 'alternate' ? '-hover' : ''}`} style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms') }}>
+ <div className={`imageBox-fadeBlocker${this.usingAlternate ? '-hover' : ''}`} style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms') }}>
<img alt="" className="imageBox-fadeaway" key="fadeaway" src={fadepath} style={{ transform, transformOrigin }} draggable={false} width={nativeWidth} />
</div>
)}
@@ -619,37 +626,24 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
return (
<div className="imageBox-aiView">
<div className="imageBox-aiView-regenerate">
- <span className="imageBox-aiView-firefly">Firefly:</span>
+ <span className="imageBox-aiView-firefly" style={{ color: SnappingManager.userColor }}>
+ Firefly:
+ </span>
<input
+ style={{ color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}
className="imageBox-aiView-input"
aria-label="Edit instructions input"
type="text"
- value={this._regenInput}
+ value={this._regenInput || StrCast(this.Document.title)}
onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
placeholder={this._regenInput || StrCast(this.Document.title)}
/>
- <div className="imageBox-aiView-strength">
- <span className="imageBox-aiView-similarity">Similarity</span>
- <Slider
- className="imageBox-aiView-slider"
- sx={{
- '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
- '& .MuiSlider-rail': { color: SettingsManager.userBackgroundColor },
- '& .MuiSlider-thumb': { color: SettingsManager.userVariantColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
- }}
- min={0}
- max={100}
- step={1}
- size="small"
- value={this._fireflyRefStrength}
- onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))}
- valueLabelDisplay="auto"
- />
- </div>
<div className="imageBox-aiView-regenerate-createBtn">
<Button
text="Create"
- type={Type.SEC}
+ type={Type.TERT}
+ color={SnappingManager.userColor}
+ background={SnappingManager.userBackgroundColor}
// style={{ alignSelf: 'flex-end' }}
icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
iconPlacement="right"
@@ -680,61 +674,24 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
/>
</div>
</div>
- <div className="imageBox-aiView-options">
- <span className="imageBox-aiView-subtitle"> More: </span>
- <Button
- type={Type.TERT}
- text="Get Text"
- icon={<FontAwesomeIcon icon="font" />}
- color={SettingsManager.userBackgroundColor}
- iconPlacement="right"
- onClick={() => {
- Networking.PostToServer('/queryFireflyImageText', {
- file: (file => {
- const ext = extname(file);
- return file.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
- })(ImageCast(this.Document[Doc.LayoutFieldKey(this.Document)])?.url.href),
- }).then(text => alert(text));
- }}
- />
- <Button
- type={Type.TERT}
- text="Generative Fill"
- icon={<FontAwesomeIcon icon="fill" />}
- color={SettingsManager.userBackgroundColor}
- iconPlacement="right"
- onClick={action(() => {
- ImageEditorData.Open = true;
- ImageEditorData.Source = (field && this.choosePath(field.url)) || '';
- ImageEditorData.AddDoc = this._props.addDocument;
- ImageEditorData.RootDoc = this.Document;
- })}
- />
- <Button
- type={Type.TERT}
- text="Expand"
- icon={<FontAwesomeIcon icon="expand" />}
- color={SettingsManager.userBackgroundColor}
- iconPlacement="right"
- onClick={() => {
- Networking.PostToServer('/expandImage', {
- prompt: 'sunny skies',
- file: (file => {
- const ext = extname(file);
- return file.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
- })(ImageCast(this.Document[Doc.LayoutFieldKey(this.Document)])?.url.href),
- }).then(res => {
- const info = res as Upload.ImageInformation;
- const img = Docs.Create.ImageDocument(info.accessPaths.agnostic.client, { title: 'expand:' + this.Document.title });
- DocUtils.assignImageInfo(info, img);
- const genratedDocs = this.Document.generatedDocs
- ? DocCast(this.Document.generatedDocs)
- : Docs.Create.MasonryDocument([], { _width: 400, _height: 400, x: NumCast(this.Document.x) + NumCast(this.Document.width), y: NumCast(this.Document.y) });
- Doc.AddDocToList(genratedDocs, undefined, img);
- this.Document[DocData].generatedDocs = genratedDocs;
- if (!DocumentView.getFirstDocumentView(genratedDocs)) this._props.addDocTab(genratedDocs, OpenWhere.addRight);
- });
+ <div className="imageBox-aiView-strength">
+ <span className="imageBox-aiView-similarity" style={{ color: SnappingManager.userColor }}>
+ Similarity
+ </span>
+ <Slider
+ className="imageBox-aiView-slider"
+ sx={{
+ '& .MuiSlider-track': { color: SettingsManager.userColor },
+ '& .MuiSlider-rail': { color: SettingsManager.userBackgroundColor },
+ '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
}}
+ min={0}
+ max={100}
+ step={1}
+ size="small"
+ value={this._fireflyRefStrength}
+ onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))}
+ valueLabelDisplay="auto"
/>
</div>
</div>
@@ -782,11 +739,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
return { width, height };
};
savedAnnotations = () => this._savedAnnotations;
-
render() {
TraceMobx();
const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding) as string;
const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / (this._props.NativeDimScaling?.() || 1)}px` : borderRad;
+ const alts = DocListCast(this.dataDoc[this.fieldKey + '_alternates']);
+ const doc = this.usingAlternate ? (alts.lastElement() ?? this.Document) : this.Document;
return (
<div
className="imageBox"
@@ -811,6 +769,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
<CollectionFreeFormView
ref={this._ffref}
{...this._props}
+ Document={doc}
setContentViewBox={emptyFunction}
NativeWidth={returnZero}
NativeHeight={returnZero}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 08:27:14 +0000