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
|
import { library } from '@fortawesome/fontawesome-svg-core';
import { faEye } from '@fortawesome/free-regular-svg-icons';
import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, runInAction } from 'mobx';
import { observer } from "mobx-react";
import { Doc } from '../../../new_fields/Doc';
import { documentSchema } from '../../../new_fields/documentSchemas';
import { Id } from '../../../new_fields/FieldSymbols';
import { List } from '../../../new_fields/List';
import { ObjectField } from '../../../new_fields/ObjectField';
import { createSchema, listSpec, makeInterface } from '../../../new_fields/Schema';
import { ComputedField } from '../../../new_fields/ScriptField';
import { Cast, NumCast, StrCast } from '../../../new_fields/Types';
import { emptyFunction, returnOne, Utils, returnZero } from '../../../Utils';
import { Docs } from '../../documents/Documents';
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';
library.add(faImage, faEye as any, faPaintBrush, faBrain);
library.add(faFileAudio, faAsterisk);
export const pageSchema = createSchema({
beforeDoc: "string",
afterDoc: "string"
});
type ComparisonDocument = makeInterface<[typeof pageSchema, typeof documentSchema]>;
const ComparisonDocument = makeInterface(pageSchema, 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;
protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string) => {
if (ele) {
return DragManager.MakeDropTarget(ele, (event, dropEvent) => this.dropHandler(event, dropEvent, fieldKey));
}
}
private dropHandler = (event: Event, dropEvent: DragManager.DropEvent, fieldKey: string) => {
const droppedDocs = dropEvent.complete.docDragData?.droppedDocuments;
if (droppedDocs?.length) {
this.props.Document[fieldKey] = Doc.MakeAlias(droppedDocs[0]);
}
}
clearBeforeDoc = (e: PointerEvent) => {
e.stopPropagation;
e.preventDefault;
delete this.props.Document.beforeDoc;
}
clearAfterDoc = (e: PointerEvent) => {
e.stopPropagation;
e.preventDefault;
delete this.props.Document.afterDoc;
}
get fieldKey() {
return this.props.fieldKey.startsWith("@") ? StrCast(this.props.Document[this.props.fieldKey]) : this.props.fieldKey;
}
render() {
const beforeDoc = this.props.Document.beforeDoc as Doc;
const afterDoc = this.props.Document.afterDoc as Doc;
return (
<div className={`comparisonBox`} style={{ backgroundColor: "blue" }}>
<div className="clip-div">
<div
className="beforeBox-cont"
key={this.props.Document[Id]}
ref={(ele) => {
this._beforeDropDisposer && this._beforeDropDisposer();
this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc");
}}
style={{ backgroundColor: "red" }}>
{
beforeDoc ?
<ContentFittingDocumentView {...this.props}
Document={beforeDoc}
getTransform={this.props.ScreenToLocalTransform} />
:
<div className="placeholder">upload before image!</div>
}
</div>
<div className="slide-bar" />
</div>
<div
className="afterBox-cont"
key={this.props.Document[Id]}
ref={(ele) => {
this._afterDropDisposer && this._afterDropDisposer();
this._afterDropDisposer = this.createDropTarget(ele, "afterDoc");
}}
style={{ backgroundColor: "orange" }}>
{
afterDoc ?
<ContentFittingDocumentView {...this.props}
Document={afterDoc}
getTransform={this.props.ScreenToLocalTransform} />
:
<div className="placeholder" style={{ float: "right" }}>
upload after image!
</div>
}
</div>
</div>);
}
}
|
