@cu-mkp/editioncrafter 1.0.2 → 1.0.4-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/dist/editioncrafter.js +65802 -0
- package/dist/editioncrafter.umd.cjs +553 -0
- package/dist/es/src/action/DiplomaticActions.js +9 -11
- package/dist/es/src/action/DocumentActions.js +164 -154
- package/dist/es/src/action/GlossaryActions.js +9 -11
- package/dist/es/src/action/initialState/diplomaticInitialState.js +2 -2
- package/dist/es/src/action/initialState/documentInitialState.js +9 -12
- package/dist/es/src/action/initialState/glossaryInitialState.js +3 -3
- package/dist/es/src/action/rootReducer.js +31 -29
- package/dist/es/src/component/AlphabetLinks.js +44 -66
- package/dist/es/src/component/CustomizedTooltops.js +101 -110
- package/dist/es/src/component/DiploMatic.js +64 -91
- package/dist/es/src/component/DocumentView.js +442 -366
- package/dist/es/src/component/EditorComment.js +51 -75
- package/dist/es/src/component/ErrorBoundary.js +37 -61
- package/dist/es/src/component/FigureImage.js +56 -67
- package/dist/es/src/component/GlossaryView.js +157 -149
- package/dist/es/src/component/HelpPopper.js +96 -78
- package/dist/es/src/component/ImageGridView.js +184 -249
- package/dist/es/src/component/ImageView.js +155 -165
- package/dist/es/src/component/ImageZoomControl.js +19 -38
- package/dist/es/src/component/JumpToFolio.js +56 -60
- package/dist/es/src/component/Navigation.js +374 -328
- package/dist/es/src/component/Pagination.js +73 -70
- package/dist/es/src/component/Parser.js +11 -32
- package/dist/es/src/component/RingSpinner.js +31 -32
- package/dist/es/src/component/RouteListener.js +30 -21
- package/dist/es/src/component/SeaDragonComponent.js +33 -56
- package/dist/es/src/component/SinglePaneView.js +15 -33
- package/dist/es/src/component/SplitPaneView.js +151 -170
- package/dist/es/src/component/TranscriptionView.js +190 -179
- package/dist/es/src/component/Watermark.js +21 -30
- package/dist/es/src/component/XMLView.js +60 -82
- package/dist/es/src/hooks/useIsWidthUp.js +9 -7
- package/dist/es/src/icons/ByIcon.js +16 -16
- package/dist/es/src/icons/CcIcon.js +16 -16
- package/dist/es/src/icons/NcIcon.js +16 -16
- package/dist/es/src/icons/SaIcon.js +16 -16
- package/dist/es/src/icons/SideMenuIconLeft.js +30 -38
- package/dist/es/src/icons/SideMenuIconRight.js +32 -38
- package/dist/es/src/index.js +21 -20
- package/dist/es/src/lib/copyObject.js +3 -2
- package/dist/es/src/lib/registerServiceWorker.js +77 -54
- package/dist/es/src/model/DocumentHelper.js +7 -6
- package/dist/es/src/model/Folio.js +64 -86
- package/dist/es/src/model/ReduxStore.js +32 -78
- package/dist/es/src/model/folioLayout.js +275 -280
- package/dist/es/src/saga/RouteListenerSaga.js +89 -193
- package/dist/es/src/saga/rootSaga.js +9 -16
- package/dist/es/src/scss/_imageView.scss +1 -1
- package/dist/es/src/scss/_navigation.scss +1 -1
- package/dist/es/src/scss/editioncrafter.scss +1 -1
- package/dist/style.css +1 -0
- package/package.json +36 -51
- package/dist/editioncrafter.min.js +0 -2
- package/dist/editioncrafter.min.js.LICENSE.txt +0 -144
|
@@ -1,75 +1,78 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
13
|
-
import React from 'react';
|
|
14
|
-
import { connect } from 'react-redux';
|
|
15
|
-
import { FaArrowCircleLeft, FaArrowCircleRight } from 'react-icons/fa';
|
|
16
|
-
var Pagination = /*#__PURE__*/function (_React$Component) {
|
|
17
|
-
_inherits(Pagination, _React$Component);
|
|
18
|
-
var _super = _createSuper(Pagination);
|
|
19
|
-
function Pagination(props, context) {
|
|
20
|
-
var _this;
|
|
21
|
-
_classCallCheck(this, Pagination);
|
|
22
|
-
_this = _super.call(this, props, context);
|
|
23
|
-
_this.changeCurrentFolio = function (event) {
|
|
24
|
-
var _this$props = _this.props,
|
|
25
|
-
side = _this$props.side,
|
|
26
|
-
documentView = _this$props.documentView,
|
|
27
|
-
documentViewActions = _this$props.documentViewActions;
|
|
28
|
-
var dataset = event.currentTarget.dataset;
|
|
29
|
-
if (typeof dataset.id === 'undefined' || dataset.id.length === 0) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
var folioID = dataset.id;
|
|
33
|
-
documentViewActions.changeCurrentFolio(folioID, side, documentView[side].transcriptionType);
|
|
34
|
-
};
|
|
35
|
-
_this.changeCurrentFolio = _this.changeCurrentFolio.bind(_assertThisInitialized(_this));
|
|
36
|
-
return _this;
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import {
|
|
3
|
+
FaArrowCircleLeft,
|
|
4
|
+
FaArrowCircleRight,
|
|
5
|
+
} from 'react-icons/fa'
|
|
6
|
+
import { connect } from 'react-redux'
|
|
7
|
+
|
|
8
|
+
class Pagination extends React.Component {
|
|
9
|
+
constructor(props, context) {
|
|
10
|
+
super(props, context)
|
|
11
|
+
this.changeCurrentFolio = this.changeCurrentFolio.bind(this)
|
|
37
12
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
50
|
-
className: bottom ? "paginationComponent bottom" : "paginationComponent"
|
|
51
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
52
|
-
className: "paginationControl"
|
|
53
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
54
|
-
title: "Go back",
|
|
55
|
-
onClick: this.changeCurrentFolio,
|
|
56
|
-
"data-id": documentView[side].previousFolioShortID,
|
|
57
|
-
className: documentView[side].hasPrevious ? 'arrow' : 'arrow disabled'
|
|
58
|
-
}, /*#__PURE__*/React.createElement(FaArrowCircleLeft, null)), /*#__PURE__*/React.createElement("span", {
|
|
59
|
-
className: "folioName"
|
|
60
|
-
}, folioName), /*#__PURE__*/React.createElement("span", {
|
|
61
|
-
title: "Go forward",
|
|
62
|
-
onClick: this.changeCurrentFolio,
|
|
63
|
-
"data-id": documentView[side].nextFolioShortID,
|
|
64
|
-
className: documentView[side].hasNext ? 'arrow' : 'arrow disabled'
|
|
65
|
-
}, ' ', /*#__PURE__*/React.createElement(FaArrowCircleRight, null))));
|
|
13
|
+
|
|
14
|
+
changeCurrentFolio = (event) => {
|
|
15
|
+
const {
|
|
16
|
+
side,
|
|
17
|
+
documentView,
|
|
18
|
+
documentViewActions,
|
|
19
|
+
} = this.props
|
|
20
|
+
const { dataset } = event.currentTarget
|
|
21
|
+
|
|
22
|
+
if (typeof dataset.id === 'undefined' || dataset.id.length === 0) {
|
|
23
|
+
return
|
|
66
24
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
25
|
+
|
|
26
|
+
const folioID = dataset.id
|
|
27
|
+
|
|
28
|
+
documentViewActions.changeCurrentFolio(
|
|
29
|
+
folioID,
|
|
30
|
+
side,
|
|
31
|
+
documentView[side].transcriptionType,
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
render() {
|
|
36
|
+
const { side, document, documentView, bottom = false } = this.props
|
|
37
|
+
if (documentView[side].iiifShortID === '-1')
|
|
38
|
+
return null
|
|
39
|
+
const folioName = document.folioIndex[documentView[side].iiifShortID].name
|
|
40
|
+
return (
|
|
41
|
+
<div className={bottom ? 'paginationComponent bottom' : 'paginationComponent'}>
|
|
42
|
+
<div className="paginationControl">
|
|
43
|
+
|
|
44
|
+
<span
|
|
45
|
+
title="Go back"
|
|
46
|
+
onClick={this.changeCurrentFolio}
|
|
47
|
+
data-id={documentView[side].previousFolioShortID}
|
|
48
|
+
className={(documentView[side].hasPrevious) ? 'arrow' : 'arrow disabled'}
|
|
49
|
+
>
|
|
50
|
+
<FaArrowCircleLeft />
|
|
51
|
+
</span>
|
|
52
|
+
|
|
53
|
+
<span className="folioName">
|
|
54
|
+
{folioName}
|
|
55
|
+
</span>
|
|
56
|
+
|
|
57
|
+
<span
|
|
58
|
+
title="Go forward"
|
|
59
|
+
onClick={this.changeCurrentFolio}
|
|
60
|
+
data-id={documentView[side].nextFolioShortID}
|
|
61
|
+
className={(documentView[side].hasNext) ? 'arrow' : 'arrow disabled'}
|
|
62
|
+
>
|
|
63
|
+
{' '}
|
|
64
|
+
<FaArrowCircleRight />
|
|
65
|
+
</span>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
70
72
|
function mapStateToProps(state) {
|
|
71
73
|
return {
|
|
72
|
-
document: state.document
|
|
73
|
-
}
|
|
74
|
+
document: state.document,
|
|
75
|
+
}
|
|
74
76
|
}
|
|
75
|
-
|
|
77
|
+
|
|
78
|
+
export default connect(mapStateToProps)(Pagination)
|
|
@@ -1,17 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
4
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
5
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
6
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
7
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
8
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
9
|
-
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
10
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
11
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
12
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
13
|
-
import React from 'react';
|
|
14
|
-
import HtmlReactParser from 'html-react-parser';
|
|
1
|
+
import HtmlReactParser from 'html-react-parser'
|
|
2
|
+
import React from 'react'
|
|
15
3
|
|
|
16
4
|
// This component addresses a conflict between React and
|
|
17
5
|
// documents whose elements contain `ref` attributes.
|
|
@@ -21,22 +9,13 @@ import HtmlReactParser from 'html-react-parser';
|
|
|
21
9
|
|
|
22
10
|
// The short-term fix is to wrap this simple class component
|
|
23
11
|
// around the parser.
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return
|
|
12
|
+
|
|
13
|
+
class Parser extends React.Component {
|
|
14
|
+
render() {
|
|
15
|
+
const { html, htmlToReactParserOptionsSide } = this.props
|
|
16
|
+
|
|
17
|
+
return HtmlReactParser(html, htmlToReactParserOptionsSide)
|
|
30
18
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
var _this$props = this.props,
|
|
35
|
-
html = _this$props.html,
|
|
36
|
-
htmlToReactParserOptionsSide = _this$props.htmlToReactParserOptionsSide;
|
|
37
|
-
return HtmlReactParser(html, htmlToReactParserOptionsSide);
|
|
38
|
-
}
|
|
39
|
-
}]);
|
|
40
|
-
return Parser;
|
|
41
|
-
}(React.Component);
|
|
42
|
-
export default Parser;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export default Parser
|
|
@@ -1,40 +1,39 @@
|
|
|
1
|
-
|
|
2
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
-
import React, { useEffect, useState } from 'react';
|
|
1
|
+
import React, { useEffect, useState } from 'react'
|
|
8
2
|
|
|
9
3
|
// create an inline spinner (uses Pure CSS Loaders: https://loading.io/css/)
|
|
10
4
|
export function InlineRingSpinner(foregroundColor) {
|
|
11
5
|
// color can be 'light' or 'dark'
|
|
12
|
-
return
|
|
13
|
-
className
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
6
|
+
return (
|
|
7
|
+
<div className="inline-ring-spinner">
|
|
8
|
+
<div className={foregroundColor} />
|
|
9
|
+
<div />
|
|
10
|
+
<div />
|
|
11
|
+
<div />
|
|
12
|
+
</div>
|
|
13
|
+
)
|
|
17
14
|
}
|
|
15
|
+
|
|
18
16
|
export function BigRingSpinner(props) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var _useState = useState(delay === 0),
|
|
24
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
25
|
-
show = _useState2[0],
|
|
26
|
-
setShow = _useState2[1];
|
|
27
|
-
useEffect(function () {
|
|
17
|
+
const { delay = 0, color = 'dark' } = props
|
|
18
|
+
const [show, setShow] = useState(delay === 0)
|
|
19
|
+
|
|
20
|
+
useEffect(() => {
|
|
28
21
|
if (delay > 0) {
|
|
29
|
-
|
|
30
|
-
setShow(true)
|
|
31
|
-
}, delay)
|
|
32
|
-
return
|
|
33
|
-
return clearTimeout(timer);
|
|
34
|
-
};
|
|
22
|
+
const timer = setTimeout(() => {
|
|
23
|
+
setShow(true)
|
|
24
|
+
}, delay)
|
|
25
|
+
return () => clearTimeout(timer)
|
|
35
26
|
}
|
|
36
|
-
}, [])
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
27
|
+
}, [])
|
|
28
|
+
|
|
29
|
+
return show
|
|
30
|
+
? (
|
|
31
|
+
<div className={`big-ring-spinner ${color}`}>
|
|
32
|
+
<div />
|
|
33
|
+
<div />
|
|
34
|
+
<div />
|
|
35
|
+
<div />
|
|
36
|
+
</div>
|
|
37
|
+
)
|
|
38
|
+
: <div />
|
|
39
|
+
}
|
|
@@ -1,26 +1,35 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
-
import { useEffect, useRef } from 'react'
|
|
3
|
-
import { connect } from 'react-redux'
|
|
4
|
-
import { useLocation } from 'react-router'
|
|
5
|
-
import { dispatchAction } from '../model/ReduxStore'
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
import { useEffect, useRef } from 'react'
|
|
3
|
+
import { connect } from 'react-redux'
|
|
4
|
+
import { useLocation } from 'react-router'
|
|
5
|
+
import { dispatchAction } from '../model/ReduxStore'
|
|
6
|
+
|
|
7
|
+
function RouteListener(props) {
|
|
8
|
+
const listening = useRef(false)
|
|
9
|
+
|
|
10
|
+
const location = useLocation()
|
|
11
|
+
|
|
12
|
+
const userNavigated = () => {
|
|
13
|
+
dispatchAction(props, 'RouteListenerSaga.userNavigatation', location)
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
useEffect(() => {
|
|
13
17
|
if (!listening.current) {
|
|
14
|
-
userNavigated()
|
|
15
|
-
listening.current = true
|
|
18
|
+
userNavigated()
|
|
19
|
+
listening.current = true
|
|
16
20
|
}
|
|
17
|
-
}, [])
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
}, [])
|
|
22
|
+
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
userNavigated()
|
|
25
|
+
}, [location])
|
|
26
|
+
|
|
27
|
+
return null
|
|
28
|
+
}
|
|
29
|
+
|
|
23
30
|
function mapStateToProps(state) {
|
|
24
|
-
return {
|
|
31
|
+
return {
|
|
32
|
+
}
|
|
25
33
|
}
|
|
26
|
-
|
|
34
|
+
|
|
35
|
+
export default connect(mapStateToProps)(RouteListener)
|
|
@@ -1,56 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
function
|
|
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
|
-
return setLoading(false);
|
|
35
|
-
});
|
|
36
|
-
case 3:
|
|
37
|
-
case "end":
|
|
38
|
-
return _context.stop();
|
|
39
|
-
}
|
|
40
|
-
}, _callee);
|
|
41
|
-
}))).apply(this, arguments);
|
|
42
|
-
};
|
|
43
|
-
loader();
|
|
44
|
-
}, []);
|
|
45
|
-
var viewer = useMemo(function () {
|
|
46
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
47
|
-
id: "image-view-seadragon-".concat(side),
|
|
48
|
-
ref: viewerRef
|
|
49
|
-
}, loading && /*#__PURE__*/React.createElement(BigRingSpinner, {
|
|
50
|
-
color: "light",
|
|
51
|
-
delay: 1000
|
|
52
|
-
}));
|
|
53
|
-
}, [loading]);
|
|
54
|
-
return viewer;
|
|
55
|
-
};
|
|
56
|
-
export default SeaDragonComponent;
|
|
1
|
+
import React, {
|
|
2
|
+
useEffect,
|
|
3
|
+
useMemo,
|
|
4
|
+
useRef,
|
|
5
|
+
useState,
|
|
6
|
+
} from 'react'
|
|
7
|
+
import { BigRingSpinner } from './RingSpinner'
|
|
8
|
+
|
|
9
|
+
function SeaDragonComponent(props) {
|
|
10
|
+
const { side, initViewer, tileSource } = props
|
|
11
|
+
const [loading, setLoading] = useState(true)
|
|
12
|
+
const viewerRef = useRef(null)
|
|
13
|
+
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
const loader = async () => {
|
|
16
|
+
if (viewerRef.current) {
|
|
17
|
+
await initViewer(viewerRef.current, tileSource).then(() => setLoading(false))
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
loader()
|
|
22
|
+
}, [])
|
|
23
|
+
|
|
24
|
+
const viewer = useMemo(() => (
|
|
25
|
+
<div id={`image-view-seadragon-${side}`} ref={viewerRef}>
|
|
26
|
+
{ loading && <BigRingSpinner color="light" delay={1000} />}
|
|
27
|
+
</div>
|
|
28
|
+
), [loading])
|
|
29
|
+
|
|
30
|
+
return viewer
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default SeaDragonComponent
|
|
@@ -1,37 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
12
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
13
|
-
import React, { Component } from 'react';
|
|
14
|
-
import { connect } from 'react-redux';
|
|
15
|
-
var SinglePaneView = /*#__PURE__*/function (_Component) {
|
|
16
|
-
_inherits(SinglePaneView, _Component);
|
|
17
|
-
var _super = _createSuper(SinglePaneView);
|
|
18
|
-
function SinglePaneView() {
|
|
19
|
-
_classCallCheck(this, SinglePaneView);
|
|
20
|
-
return _super.apply(this, arguments);
|
|
1
|
+
import React, { Component } from 'react'
|
|
2
|
+
import { connect } from 'react-redux'
|
|
3
|
+
|
|
4
|
+
class SinglePaneView extends Component {
|
|
5
|
+
render() {
|
|
6
|
+
return (
|
|
7
|
+
<div className="single-pane-view">
|
|
8
|
+
{this.props.singlePane}
|
|
9
|
+
</div>
|
|
10
|
+
)
|
|
21
11
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
value: function render() {
|
|
25
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
26
|
-
className: "single-pane-view"
|
|
27
|
-
}, this.props.singlePane);
|
|
28
|
-
}
|
|
29
|
-
}]);
|
|
30
|
-
return SinglePaneView;
|
|
31
|
-
}(Component);
|
|
12
|
+
}
|
|
13
|
+
|
|
32
14
|
function mapStateToProps(state) {
|
|
33
15
|
return {
|
|
34
|
-
document: state.document
|
|
35
|
-
}
|
|
16
|
+
document: state.document,
|
|
17
|
+
}
|
|
36
18
|
}
|
|
37
|
-
export default connect(mapStateToProps)(SinglePaneView)
|
|
19
|
+
export default connect(mapStateToProps)(SinglePaneView)
|