1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
import { library } from '@fortawesome/fontawesome-svg-core';
import { faEye } from '@fortawesome/free-regular-svg-icons';
import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, runInAction, Lambda } from 'mobx';
import { observer } from "mobx-react";
import { Doc } from '../../../fields/Doc';
import { documentSchema } from '../../../fields/documentSchemas';
import { createSchema, makeInterface } from '../../../fields/Schema';
import { NumCast, Cast } from '../../../fields/Types';
import { DragManager } from '../../util/DragManager';
import { ViewBoxAnnotatableComponent } from '../DocComponent';
import { FieldView, FieldViewProps } from './FieldView';
import "./ComparisonBox.scss";
import React = require("react");
import { ContentFittingDocumentView } from './ContentFittingDocumentView';
import { undoBatch } from '../../util/UndoManager';
import { setupMoveUpEvents, emptyFunction } from '../../../Utils';
library.add(faImage, faEye as any, faPaintBrush, faBrain);
library.add(faFileAudio, faAsterisk);
export const comparisonSchema = createSchema({});
type ComparisonDocument = makeInterface<[typeof comparisonSchema, typeof documentSchema]>;
const ComparisonDocument = makeInterface(comparisonSchema, documentSchema);
@observer
export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, ComparisonDocument>(ComparisonDocument) {
protected multiTouchDisposer?: import("../../util/InteractionUtils").InteractionUtils.MultiTouchEventDisposer | undefined;
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ComparisonBox, fieldKey); }
private _beforeDropDisposer?: DragManager.DragDropDisposer;
private _afterDropDisposer?: DragManager.DragDropDisposer;
private resizeUpdater: Lambda | undefined;
protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string) => {
if (ele) {
return DragManager.MakeDropTarget(ele, (event, dropEvent) => this.dropHandler(event, dropEvent, fieldKey), this.layoutDoc);
}
}
@undoBatch
private dropHandler = (event: Event, dropEvent: DragManager.DropEvent, fieldKey: string) => {
event.stopPropagation();
const droppedDocs = dropEvent.complete.docDragData?.droppedDocuments;
if (droppedDocs?.length) {
this.dataDoc[fieldKey] = droppedDocs[0];
droppedDocs[0]._fitWidth = true;
droppedDocs[0].isBackgound = true;
}
}
componentWillMount() {
this.dataDoc.clipWidth = this.props.PanelWidth() / 2;
//preserve before/after ratio during resizing
this.resizeUpdater = computed(() => this.props.PanelWidth()).observe(({ oldValue, newValue }) =>
this.dataDoc.clipWidth = NumCast(this.dataDoc.clipWidth) / (oldValue || 0) * newValue
);
}
componentWillUnmount() {
this.resizeUpdater?.();
}
private registerSliding = (e: React.PointerEvent<HTMLDivElement>) => {
setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, emptyFunction);
}
@action
private onPointerMove = ({ movementX }: PointerEvent) => {
const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.dataDoc.clipWidth);
if (width && width > 5 && width < this.props.PanelWidth()) {
this.dataDoc.clipWidth = width;
}
return false;
}
@undoBatch
clearDoc = (e: React.MouseEvent, fieldKey: string) => {
e.stopPropagation;
e.preventDefault;
delete this.dataDoc[fieldKey];
}
render() {
const beforeDoc = Cast(this.dataDoc.beforeDoc, Doc, null);
const afterDoc = Cast(this.dataDoc.afterDoc, Doc, null);
const clipWidth = NumCast(this.dataDoc.clipWidth);
return (
<div className={`comparisonBox${this.active() ? "-interactive" : ""}`}>
<div
className="afterBox-cont"
key={"after"}
ref={(ele) => {
this._afterDropDisposer?.();
this._afterDropDisposer = this.createDropTarget(ele, "afterDoc");
}}>
{
afterDoc ?
<>
<ContentFittingDocumentView {...this.props}
Document={afterDoc}
parentActive={this.props.active}
/>
<div className="clear-button after" onClick={e => this.clearDoc(e, "afterDoc")}>
<FontAwesomeIcon className="clear-button after" icon={faTimes} size="sm" />
</div>
</>
:
<div className="placeholder">
<FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
</div>
}
</div>
<div className="clip-div" style={{ width: clipWidth + "px" }}>
{/* wraps around before image and slider bar */}
<div
className="beforeBox-cont"
key={"before"}
ref={(ele) => {
this._beforeDropDisposer?.();
this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc");
}}
style={{ width: this.props.PanelWidth() }}>
{
beforeDoc ?
<>
<ContentFittingDocumentView {...this.props}
Document={beforeDoc}
parentActive={this.props.active} />
<div className="clear-button before" onClick={e => this.clearDoc(e, "beforeDoc")}>
<FontAwesomeIcon className="clear-button before" icon={faTimes} size="sm" />
</div>
</>
:
<div className="placeholder">
<FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
</div>
}
</div>
</div>
<div className="slide-bar" style={{ left: `calc(${NumCast(this.dataDoc.clipWidth) * 100 / this.props.PanelWidth()}% - 5px)` }} onPointerDown={this.registerSliding}>
<div className="slide-handle" >
<div className="left-handle" onClick={() => this.dataDoc.clipWidth = 5}>
<FontAwesomeIcon icon="caret-left" size="lg" />
</div>
<div className="right-handle" onClick={() => this.dataDoc.clipWidth = this.props.PanelWidth() - 5}>
<FontAwesomeIcon icon="caret-right" size="lg" />
</div>
</div>
</div>
</div >);
}
}
|
