Skip to content
This repository was archived by the owner on Nov 24, 2023. It is now read-only.

Commit b0ac7c8

Browse files
danilofuchsdanilofuchs
committed
Add build files
1 parent 4269c10 commit b0ac7c8

40 files changed

+9059
-3
lines changed

‎.gitignore

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/coverage
22
/demo/dist
3-
/es
4-
/lib
3+
# /es
4+
# /lib
55
/node_modules
6-
/umd
6+
# /umd
77
npm-debug.log*

‎es/components/Annotation.js

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
var _class, _temp2;
2+
3+
var _templateObject = _taggedTemplateLiteralLoose(['\n clear: both;\n position: relative;\n width: 100%;\n &:hover ', ' {\n opacity: 1;\n }\n touch-action: ', ';\n'], ['\n clear: both;\n position: relative;\n width: 100%;\n &:hover ', ' {\n opacity: 1;\n }\n touch-action: ', ';\n']),
4+
_templateObject2 = _taggedTemplateLiteralLoose(['\n display: block;\n width: 100%;\n'], ['\n display: block;\n width: 100%;\n']),
5+
_templateObject3 = _taggedTemplateLiteralLoose(['\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n'], ['\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n']);
6+
7+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
8+
9+
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
10+
11+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
12+
13+
function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
14+
15+
import React, { Component } from 'react';
16+
import T from 'prop-types';
17+
import styled from 'styled-components';
18+
import compose from '../utils/compose';
19+
import isMouseHovering from '../utils/isMouseHovering';
20+
import withRelativeMousePos from '../utils/withRelativeMousePos';
21+
22+
import defaultProps from './defaultProps';
23+
import Overlay from './Overlay';
24+
25+
var Container = styled.div(_templateObject, Overlay, function (props) {
26+
return props.allowTouch ? "pinch-zoom" : "auto";
27+
});
28+
29+
var Img = styled.img(_templateObject2);
30+
31+
var Items = styled.div(_templateObject3);
32+
33+
var Target = Items;
34+
35+
export default compose(isMouseHovering(), withRelativeMousePos())((_temp2 = _class = function (_Component) {
36+
_inherits(Annotation, _Component);
37+
38+
function Annotation() {
39+
var _temp, _this, _ret;
40+
41+
_classCallCheck(this, Annotation);
42+
43+
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
44+
args[_key] = arguments[_key];
45+
}
46+
47+
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.setInnerRef = function (el) {
48+
_this.container = el;
49+
_this.props.relativeMousePos.innerRef(el);
50+
_this.props.innerRef(el);
51+
}, _this.getSelectorByType = function (type) {
52+
return _this.props.selectors.find(function (s) {
53+
return s.TYPE === type;
54+
});
55+
}, _this.getTopAnnotationAt = function (x, y) {
56+
var annotations = _this.props.annotations;
57+
var _this2 = _this,
58+
container = _this2.container,
59+
getSelectorByType = _this2.getSelectorByType;
60+
61+
62+
if (!container) return;
63+
64+
var intersections = annotations.map(function (annotation) {
65+
var geometry = annotation.geometry;
66+
67+
var selector = getSelectorByType(geometry.type);
68+
69+
return selector.intersects({ x: x, y: y }, geometry, container) ? annotation : false;
70+
}).filter(function (a) {
71+
return !!a;
72+
}).sort(function (a, b) {
73+
var aSelector = getSelectorByType(a.geometry.type);
74+
var bSelector = getSelectorByType(b.geometry.type);
75+
76+
return aSelector.area(a.geometry, container) - bSelector.area(b.geometry, container);
77+
});
78+
79+
return intersections[0];
80+
}, _this.onTargetMouseMove = function (e) {
81+
_this.props.relativeMousePos.onMouseMove(e);
82+
_this.onMouseMove(e);
83+
}, _this.onTargetTouchMove = function (e) {
84+
_this.props.relativeMousePos.onTouchMove(e);
85+
_this.onTouchMove(e);
86+
}, _this.onTargetMouseLeave = function (e) {
87+
_this.props.relativeMousePos.onMouseLeave(e);
88+
}, _this.onTargetTouchLeave = function (e) {
89+
_this.props.relativeMousePos.onTouchLeave(e);
90+
}, _this.onMouseUp = function (e) {
91+
return _this.callSelectorMethod('onMouseUp', e);
92+
}, _this.onMouseDown = function (e) {
93+
return _this.callSelectorMethod('onMouseDown', e);
94+
}, _this.onMouseMove = function (e) {
95+
return _this.callSelectorMethod('onMouseMove', e);
96+
}, _this.onTouchStart = function (e) {
97+
return _this.callSelectorMethod("onTouchStart", e);
98+
}, _this.onTouchEnd = function (e) {
99+
return _this.callSelectorMethod("onTouchEnd", e);
100+
}, _this.onTouchMove = function (e) {
101+
return _this.callSelectorMethod("onTouchMove", e);
102+
}, _this.onClick = function (e) {
103+
return _this.callSelectorMethod('onClick', e);
104+
}, _this.onSubmit = function () {
105+
_this.props.onSubmit(_this.props.value);
106+
}, _this.callSelectorMethod = function (methodName, e) {
107+
if (_this.props.disableAnnotation) {
108+
return;
109+
}
110+
111+
if (!!_this.props[methodName]) {
112+
_this.props[methodName](e);
113+
} else {
114+
var selector = _this.getSelectorByType(_this.props.type);
115+
if (selector && selector.methods[methodName]) {
116+
var value = selector.methods[methodName](_this.props.value, e);
117+
118+
if (typeof value === 'undefined') {
119+
if (process.env.NODE_ENV !== 'production') {
120+
console.error('\n ' + methodName + ' of selector type ' + _this.props.type + ' returned undefined.\n Make sure to explicitly return the previous state\n ');
121+
}
122+
} else {
123+
_this.props.onChange(value);
124+
}
125+
}
126+
}
127+
}, _this.shouldAnnotationBeActive = function (annotation, top) {
128+
if (_this.props.activeAnnotations) {
129+
var isActive = !!_this.props.activeAnnotations.find(function (active) {
130+
return _this.props.activeAnnotationComparator(annotation, active);
131+
});
132+
133+
return isActive || top === annotation;
134+
} else {
135+
return top === annotation;
136+
}
137+
}, _temp), _possibleConstructorReturn(_this, _ret);
138+
}
139+
140+
Annotation.prototype.render = function render() {
141+
var _this3 = this;
142+
143+
var props = this.props;
144+
var isMouseHovering = props.isMouseHovering,
145+
renderHighlight = props.renderHighlight,
146+
renderContent = props.renderContent,
147+
renderSelector = props.renderSelector,
148+
renderEditor = props.renderEditor,
149+
renderOverlay = props.renderOverlay,
150+
allowTouch = props.allowTouch;
151+
152+
153+
var topAnnotationAtMouse = this.getTopAnnotationAt(this.props.relativeMousePos.x, this.props.relativeMousePos.y);
154+
155+
return React.createElement(
156+
Container,
157+
{
158+
style: props.style,
159+
innerRef: isMouseHovering.innerRef,
160+
onMouseLeave: this.onTargetMouseLeave,
161+
onTouchCancel: this.onTargetTouchLeave,
162+
allowTouch: allowTouch
163+
},
164+
React.createElement(Img, {
165+
className: props.className,
166+
style: props.style,
167+
alt: props.alt,
168+
src: props.src,
169+
draggable: false,
170+
innerRef: this.setInnerRef
171+
}),
172+
React.createElement(
173+
Items,
174+
null,
175+
props.annotations.map(function (annotation) {
176+
return renderHighlight({
177+
key: annotation.data.id,
178+
annotation: annotation,
179+
active: _this3.shouldAnnotationBeActive(annotation, topAnnotationAtMouse)
180+
});
181+
}),
182+
!props.disableSelector && props.value && props.value.geometry && renderSelector({
183+
annotation: props.value
184+
})
185+
),
186+
React.createElement(Target, {
187+
onClick: this.onClick,
188+
onMouseUp: this.onMouseUp,
189+
onMouseDown: this.onMouseDown,
190+
onMouseMove: this.onTargetMouseMove,
191+
onTouchStart: allowTouch ? this.onTouchStart : undefined,
192+
onTouchEnd: allowTouch ? this.onTouchEnd : undefined,
193+
onTouchMove: allowTouch ? this.onTargetTouchMove : undefined
194+
}),
195+
!props.disableOverlay && renderOverlay({
196+
type: props.type,
197+
annotation: props.value
198+
}),
199+
props.annotations.map(function (annotation) {
200+
return _this3.shouldAnnotationBeActive(annotation, topAnnotationAtMouse) && renderContent({
201+
key: annotation.data.id,
202+
annotation: annotation
203+
});
204+
}),
205+
!props.disableEditor && props.value && props.value.selection && props.value.selection.showEditor && renderEditor({
206+
annotation: props.value,
207+
onChange: props.onChange,
208+
onSubmit: this.onSubmit
209+
}),
210+
React.createElement(
211+
'div',
212+
null,
213+
props.children
214+
)
215+
);
216+
};
217+
218+
return Annotation;
219+
}(Component), _class.propTypes = {
220+
innerRef: T.func,
221+
onMouseUp: T.func,
222+
onMouseDown: T.func,
223+
onMouseMove: T.func,
224+
onClick: T.func,
225+
children: T.object,
226+
227+
annotations: T.arrayOf(T.shape({
228+
type: T.string
229+
})).isRequired,
230+
type: T.string,
231+
selectors: T.arrayOf(T.shape({
232+
TYPE: T.string,
233+
intersects: T.func.isRequired,
234+
area: T.func.isRequired,
235+
methods: T.object.isRequired
236+
})).isRequired,
237+
238+
value: T.shape({
239+
selection: T.object,
240+
geometry: T.shape({
241+
type: T.string.isRequired
242+
}),
243+
data: T.object
244+
}),
245+
onChange: T.func,
246+
onSubmit: T.func,
247+
248+
activeAnnotationComparator: T.func,
249+
activeAnnotations: T.arrayOf(T.any),
250+
251+
disableAnnotation: T.bool,
252+
disableSelector: T.bool,
253+
renderSelector: T.func,
254+
disableEditor: T.bool,
255+
renderEditor: T.func,
256+
257+
renderHighlight: T.func.isRequired,
258+
renderContent: T.func.isRequired,
259+
260+
disableOverlay: T.bool,
261+
renderOverlay: T.func.isRequired,
262+
allowTouch: T.bool
263+
}, _class.defaultProps = defaultProps, _temp2));

‎es/components/Content/index.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
2+
3+
var _templateObject = _taggedTemplateLiteralLoose(['\n background: white;\n border-radius: 2px;\n box-shadow:\n 0px 1px 5px 0px rgba(0, 0, 0, 0.2),\n 0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n 0px 3px 1px -2px rgba(0, 0, 0, 0.12);\n padding: 8px 16px;\n margin-top: 8px;\n margin-left: 8px;\n'], ['\n background: white;\n border-radius: 2px;\n box-shadow:\n 0px 1px 5px 0px rgba(0, 0, 0, 0.2),\n 0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n 0px 3px 1px -2px rgba(0, 0, 0, 0.12);\n padding: 8px 16px;\n margin-top: 8px;\n margin-left: 8px;\n']);
4+
5+
function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
6+
7+
import React from 'react';
8+
import styled from 'styled-components';
9+
10+
var Container = styled.div(_templateObject);
11+
12+
function Content(props) {
13+
var geometry = props.annotation.geometry;
14+
15+
if (!geometry) return null;
16+
17+
return React.createElement(
18+
Container,
19+
{
20+
style: _extends({
21+
position: 'absolute',
22+
left: geometry.x + '%',
23+
top: geometry.y + geometry.height + '%'
24+
}, props.style),
25+
className: props.className,
26+
geometry: geometry
27+
},
28+
props.annotation.data && props.annotation.data.text
29+
);
30+
}
31+
32+
Content.defaultProps = {
33+
style: {},
34+
className: ''
35+
};
36+
37+
export default Content;

‎es/components/Editor/index.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
2+
3+
var _templateObject = _taggedTemplateLiteralLoose(['\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n'], ['\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n']),
4+
_templateObject2 = _taggedTemplateLiteralLoose(['\n background: white;\n border-radius: 2px;\n box-shadow:\n 0px 1px 5px 0px rgba(0, 0, 0, 0.2),\n 0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n 0px 3px 1px -2px rgba(0, 0, 0, 0.12);\n margin-top: 16px;\n transform-origin: top left;\n\n animation: ', ' 0.31s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n overflow: hidden;\n'], ['\n background: white;\n border-radius: 2px;\n box-shadow:\n 0px 1px 5px 0px rgba(0, 0, 0, 0.2),\n 0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n 0px 3px 1px -2px rgba(0, 0, 0, 0.12);\n margin-top: 16px;\n transform-origin: top left;\n\n animation: ', ' 0.31s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n overflow: hidden;\n']);
5+
6+
function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
7+
8+
import React from 'react';
9+
import styled, { keyframes } from 'styled-components';
10+
import TextEditor from '../TextEditor';
11+
12+
var fadeInScale = keyframes(_templateObject);
13+
14+
var Container = styled.div(_templateObject2, fadeInScale);
15+
16+
function Editor(props) {
17+
var geometry = props.annotation.geometry;
18+
19+
if (!geometry) return null;
20+
21+
return React.createElement(
22+
Container,
23+
{
24+
className: props.className,
25+
style: _extends({
26+
position: 'absolute',
27+
left: geometry.x + '%',
28+
top: geometry.y + geometry.height + '%'
29+
}, props.style)
30+
},
31+
React.createElement(TextEditor, {
32+
onChange: function onChange(e) {
33+
return props.onChange(_extends({}, props.annotation, {
34+
data: _extends({}, props.annotation.data, {
35+
text: e.target.value
36+
})
37+
}));
38+
},
39+
onSubmit: props.onSubmit,
40+
value: props.annotation.data && props.annotation.data.text
41+
})
42+
);
43+
}
44+
45+
Editor.defaultProps = {
46+
className: '',
47+
style: {}
48+
};
49+
50+
export default Editor;

0 commit comments

Comments
 (0)