data-navigator 1.0.0 → 1.0.2
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/LICENSE +17 -25
- package/README.md +22 -13
- package/dist/index.js +9 -6
- package/dist/index.mjs +6 -6
- package/dist/rendering.js +1 -1
- package/dist/rendering.mjs +1 -1
- package/dist/structure.mjs +1 -1
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,29 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
4
|
-
All rights reserved.
|
|
3
|
+
Copyright (c) 2023 Carnegie Mellon University
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
8
11
|
|
|
9
|
-
|
|
10
|
-
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
11
14
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
21
|
-
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
22
|
-
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
23
|
-
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
|
24
|
-
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
|
25
|
-
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
26
|
-
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
|
27
|
-
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
|
28
|
-
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
29
|
-
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,46 +1,55 @@
|
|
|
1
|
-
# Data
|
|
1
|
+
# Data Navigator
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
|
|
4
4
|
|
|
5
5
|
Data Navigator is a JavaScript library that allows for navigation of data structures. Data Navigator makes png, svg, canvas, and even webgl graphics accessible to a wide array of assistive technologies and input modalities.
|
|
6
6
|
|
|
7
|
+
Check out [our online, interactive demo](http://dig.cmu.edu/data-navigator/) for a video introduction and to try out Data Navigator hands-on.
|
|
8
|
+
|
|
9
|
+
## Data Navigator's approach
|
|
10
|
+
|
|
7
11
|
Data Navigator has abstracted navigation into commands, which enables it to easily receive input from screen readers and keyboards to more interesting modalities like touch and mouse swiping, spoken commands, hand gestures, and even fabricated or totally novel interfaces, like bananas.
|
|
8
12
|
|
|
9
|
-
|
|
13
|
+
|
|
10
14
|
|
|
11
15
|
Data Navigator is expressive for builders and enables entire toolkits or ecosystems to become more accessible. The system provides low-level control over narratives, interaction paths, and journeys a user might want to take through an image or graphic.
|
|
12
16
|
|
|
13
17
|
Developers can build schemas that scale to work with any chart in a charting library or a single, bespoke implemetation for use in story-telling contexts like journalism, reports, presentations, and interactive infographics.
|
|
14
18
|
|
|
15
|
-
|
|
19
|
+
|
|
16
20
|
|
|
17
21
|
Not only are paths through an image customizeable but so are the visual indications that are rendered alongside those journeys. These visual indications use semantically rich, native HTML elements for maximized accessibility.
|
|
18
22
|
|
|
19
|
-
|
|
23
|
+
|
|
20
24
|
|
|
21
25
|
Visit [our landing page](http://dig.cmu.edu/data-navigator/) to try our demo, which shows a png image made into navigable experience. A variety of input modalities are enabled, including touch and mouse swiping, keyboard, screen reader, text input, voice control, and hand gesture recognition.
|
|
22
26
|
|
|
23
27
|
We also have [a vega-lite demo online](https://dig.cmu.edu/data-navigator/vega-lite.html), which (under the hood) shows how someone could write one schema that serves any chart in an ecosystem.
|
|
24
28
|
|
|
25
|
-
##
|
|
26
|
-
|
|
29
|
+
## System design
|
|
30
|
+
|
|
31
|
+
Data Navigator is organized into 3 separately composable modules: the first is a graph-based _structure_ of nodes and edges, the second handles _input_ and navigation logic, and the third _renders_ the structure. These may be leveraged together or independently. Read our paper to learn more!
|
|
27
32
|
|
|
28
33
|
## Getting started
|
|
34
|
+
|
|
29
35
|
You can install or use both esm and cjs modules in a variety of ways, in addition to importing all of data-navigator or just one part.
|
|
36
|
+
|
|
30
37
|
```
|
|
31
38
|
# to install into a project
|
|
32
39
|
npm install data-navigator
|
|
33
40
|
```
|
|
41
|
+
|
|
34
42
|
```js
|
|
35
43
|
// to use it in a .js or .ts file
|
|
36
|
-
import { default as dataNavigator } from 'data-navigator'
|
|
37
|
-
console.log(dataNavigator)
|
|
44
|
+
import { default as dataNavigator } from 'data-navigator';
|
|
45
|
+
console.log(dataNavigator);
|
|
38
46
|
```
|
|
47
|
+
|
|
39
48
|
```html
|
|
40
49
|
<!-- and even as a script tag module loaded from a cdn -->
|
|
41
50
|
<script type="module">
|
|
42
|
-
import dataNavigator from
|
|
43
|
-
console.log(dataNavigator)
|
|
51
|
+
import dataNavigator from 'https://cdn.jsdelivr.net/npm/data-navigator@1.0.0/dist/index.mjs';
|
|
52
|
+
console.log(dataNavigator);
|
|
44
53
|
</script>
|
|
45
54
|
```
|
|
46
55
|
|
|
@@ -48,7 +57,7 @@ console.log(dataNavigator)
|
|
|
48
57
|
|
|
49
58
|
Data-Navigator was developed at CMU's [Data Interaction Group](https://dig.cmu.edu/) (CMU DIG), primarily by [Frank Elavsky](https://frank.computer).
|
|
50
59
|
|
|
51
|
-
## Citing Data
|
|
60
|
+
## Citing Data Navigator
|
|
52
61
|
|
|
53
62
|
```bib
|
|
54
63
|
@article{2023-data-navigator,
|
|
@@ -57,4 +66,4 @@ Data-Navigator was developed at CMU's [Data Interaction Group](https://dig.cmu.e
|
|
|
57
66
|
title = {{Data Navigator:} An Accessibility-Centered Data Navigation Toolkit},
|
|
58
67
|
journal = {{IEEE} {VIS}}
|
|
59
68
|
}
|
|
60
|
-
```
|
|
69
|
+
```
|
package/dist/index.js
CHANGED
|
@@ -540,6 +540,7 @@ var rendering_default = function(options) {
|
|
|
540
540
|
defaults.existingElement = options.defaults.existingElement ? _object_spread({}, defaults.existingElement, options.defaults.existingElement) : defaults.existingElement;
|
|
541
541
|
}
|
|
542
542
|
renderer.initialize = function() {
|
|
543
|
+
var _options_exitElement;
|
|
543
544
|
if (initialized) {
|
|
544
545
|
console.error("The renderer wrapper has already been initialized successfully, RenderingOptions.suffixId is: ".concat(options.suffixId, ". No further action was taken."));
|
|
545
546
|
return;
|
|
@@ -577,7 +578,7 @@ var rendering_default = function(options) {
|
|
|
577
578
|
renderer.wrapper.appendChild(renderer.entryButton);
|
|
578
579
|
}
|
|
579
580
|
renderer.root.appendChild(renderer.wrapper);
|
|
580
|
-
if (options.exitElement
|
|
581
|
+
if ((_options_exitElement = options.exitElement) === null || _options_exitElement === void 0 ? void 0 : _options_exitElement.include) {
|
|
581
582
|
renderer.exitElement = document.createElement("div");
|
|
582
583
|
renderer.exitElement.id = "dn-exit-" + options.suffixId;
|
|
583
584
|
renderer.exitElement.classList.add("dn-exit-position");
|
|
@@ -587,15 +588,17 @@ var rendering_default = function(options) {
|
|
|
587
588
|
renderer.exitElement.setAttribute("tabindex", "-1");
|
|
588
589
|
renderer.exitElement.style.display = "none";
|
|
589
590
|
renderer.exitElement.addEventListener("focus", function(e) {
|
|
591
|
+
var _options_exitElement_callbacks, _options_exitElement;
|
|
590
592
|
renderer.exitElement.style.display = "block";
|
|
591
593
|
renderer.clearStructure();
|
|
592
|
-
if (options.exitElement.callbacks
|
|
594
|
+
if ((_options_exitElement = options.exitElement) === null || _options_exitElement === void 0 ? void 0 : (_options_exitElement_callbacks = _options_exitElement.callbacks) === null || _options_exitElement_callbacks === void 0 ? void 0 : _options_exitElement_callbacks.focus) {
|
|
593
595
|
options.exitElement.callbacks.focus(e);
|
|
594
596
|
}
|
|
595
597
|
});
|
|
596
598
|
renderer.exitElement.addEventListener("blur", function(e) {
|
|
599
|
+
var _options_exitElement_callbacks, _options_exitElement;
|
|
597
600
|
renderer.exitElement.style.display = "none";
|
|
598
|
-
if (options.exitElement.callbacks
|
|
601
|
+
if ((_options_exitElement = options.exitElement) === null || _options_exitElement === void 0 ? void 0 : (_options_exitElement_callbacks = _options_exitElement.callbacks) === null || _options_exitElement_callbacks === void 0 ? void 0 : _options_exitElement_callbacks.blur) {
|
|
599
602
|
options.exitElement.callbacks.blur(e);
|
|
600
603
|
}
|
|
601
604
|
});
|
|
@@ -605,7 +608,7 @@ var rendering_default = function(options) {
|
|
|
605
608
|
return renderer.root;
|
|
606
609
|
};
|
|
607
610
|
renderer.render = function(nodeData) {
|
|
608
|
-
var id = nodeData.renderId;
|
|
611
|
+
var id = nodeData.renderId + "";
|
|
609
612
|
var d = options.elementData[id];
|
|
610
613
|
if (!d) {
|
|
611
614
|
console.warn("Render data not found with renderId: ".concat(id, ". Failed to render."));
|
|
@@ -671,8 +674,8 @@ var rendering_default = function(options) {
|
|
|
671
674
|
svg.setAttribute("width", totalWidth + "");
|
|
672
675
|
svg.setAttribute("height", totalHeight + "");
|
|
673
676
|
svg.setAttribute("viewBox", "0 0 ".concat(totalWidth, " ").concat(totalHeight));
|
|
674
|
-
svg.style.left = -x + "";
|
|
675
|
-
svg.style.top = -y + "";
|
|
677
|
+
svg.style.left = -x + "px";
|
|
678
|
+
svg.style.top = -y + "px";
|
|
676
679
|
svg.classList.add("dn-node-svg");
|
|
677
680
|
svg.setAttribute("role", "presentation");
|
|
678
681
|
svg.setAttribute("focusable", "false");
|
package/dist/index.mjs
CHANGED
|
@@ -451,7 +451,7 @@ var rendering_default = (options) => {
|
|
|
451
451
|
renderer.wrapper.appendChild(renderer.entryButton);
|
|
452
452
|
}
|
|
453
453
|
renderer.root.appendChild(renderer.wrapper);
|
|
454
|
-
if (options.exitElement
|
|
454
|
+
if (options.exitElement?.include) {
|
|
455
455
|
renderer.exitElement = document.createElement("div");
|
|
456
456
|
renderer.exitElement.id = "dn-exit-" + options.suffixId;
|
|
457
457
|
renderer.exitElement.classList.add("dn-exit-position");
|
|
@@ -463,13 +463,13 @@ var rendering_default = (options) => {
|
|
|
463
463
|
renderer.exitElement.addEventListener("focus", (e) => {
|
|
464
464
|
renderer.exitElement.style.display = "block";
|
|
465
465
|
renderer.clearStructure();
|
|
466
|
-
if (options.exitElement
|
|
466
|
+
if (options.exitElement?.callbacks?.focus) {
|
|
467
467
|
options.exitElement.callbacks.focus(e);
|
|
468
468
|
}
|
|
469
469
|
});
|
|
470
470
|
renderer.exitElement.addEventListener("blur", (e) => {
|
|
471
471
|
renderer.exitElement.style.display = "none";
|
|
472
|
-
if (options.exitElement
|
|
472
|
+
if (options.exitElement?.callbacks?.blur) {
|
|
473
473
|
options.exitElement.callbacks.blur(e);
|
|
474
474
|
}
|
|
475
475
|
});
|
|
@@ -479,7 +479,7 @@ var rendering_default = (options) => {
|
|
|
479
479
|
return renderer.root;
|
|
480
480
|
};
|
|
481
481
|
renderer.render = (nodeData) => {
|
|
482
|
-
const id = nodeData.renderId;
|
|
482
|
+
const id = nodeData.renderId + "";
|
|
483
483
|
let d = options.elementData[id];
|
|
484
484
|
if (!d) {
|
|
485
485
|
console.warn(`Render data not found with renderId: ${id}. Failed to render.`);
|
|
@@ -547,8 +547,8 @@ var rendering_default = (options) => {
|
|
|
547
547
|
svg.setAttribute("width", totalWidth + "");
|
|
548
548
|
svg.setAttribute("height", totalHeight + "");
|
|
549
549
|
svg.setAttribute("viewBox", `0 0 ${totalWidth} ${totalHeight}`);
|
|
550
|
-
svg.style.left = -x + "";
|
|
551
|
-
svg.style.top = -y + "";
|
|
550
|
+
svg.style.left = -x + "px";
|
|
551
|
+
svg.style.top = -y + "px";
|
|
552
552
|
svg.classList.add("dn-node-svg");
|
|
553
553
|
svg.setAttribute("role", "presentation");
|
|
554
554
|
svg.setAttribute("focusable", "false");
|
package/dist/rendering.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e,t){if(t==null||t>e.length)t=e.length;for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function t(t){if(Array.isArray(t))return e(t)}function n(e,t,n){if(t in e){Object.defineProperty(e,t,{value:n,enumerable:true,configurable:true,writable:true})}else{e[t]=n}return e}function r(e){if(typeof Symbol!=="undefined"&&e[Symbol.iterator]!=null||e["@@iterator"]!=null)return Array.from(e)}function i(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function
|
|
1
|
+
function e(e,t){if(t==null||t>e.length)t=e.length;for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function t(t){if(Array.isArray(t))return e(t)}function n(e,t,n){if(t in e){Object.defineProperty(e,t,{value:n,enumerable:true,configurable:true,writable:true})}else{e[t]=n}return e}function r(e){if(typeof Symbol!=="undefined"&&e[Symbol.iterator]!=null||e["@@iterator"]!=null)return Array.from(e)}function i(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function o(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};var i=Object.keys(r);if(typeof Object.getOwnPropertySymbols==="function"){i=i.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))}i.forEach(function(t){n(e,t,r[t])})}return e}function s(e){return t(e)||r(e)||a(e)||i()}function a(t,n){if(!t)return;if(typeof t==="string")return e(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor)r=t.constructor.name;if(r==="Map"||r==="Set")return Array.from(r);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return e(t,n)}var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=function(e,t){for(var n in t)l(e,n,{get:t[n],enumerable:!0})},f=function(e,t,n,r){var i=true,o=false,s=undefined;if(t&&typeof t=="object"||typeof t=="function")try{var a=function(){var i=f.value;!d.call(e,i)&&i!==n&&l(e,i,{get:function(){return t[i]},enumerable:!(r=u(t,i))||r.enumerable})};for(var m=c(t)[Symbol.iterator](),f;!(i=(f=m.next()).done);i=true)a()}catch(e){o=true;s=e}finally{try{if(!i&&m.return!=null){m.return()}}finally{if(o){throw s}}}return e};var p=function(e){return f(l({},"__esModule",{value:!0}),e)};var b={};m(b,{default:function(){return v}});module.exports=p(b);var y={cssClass:"",dimensions:{x:0,y:0,width:0,height:0,path:""},semantics:{label:"",elementType:"div",role:"image",attributes:void 0},parentSemantics:{label:"",elementType:"figure",role:"figure",attributes:void 0},existingElement:{useForDimensions:!1,dimensions:void 0}};var v=function(e){var t={},n=!1,r={cssClass:y.cssClass,dimensions:o({},y.dimensions),semantics:o({},y.semantics),parentSemantics:o({},y.parentSemantics),existingElement:o({},y.existingElement)};return e.defaults&&(r.cssClass=e.defaults.cssClass||r.cssClass,r.dimensions=e.defaults.dimensions?o({},r.dimensions,e.defaults.dimensions):r.dimensions,r.semantics=e.defaults.semantics?o({},r.semantics,e.defaults.semantics):r.semantics,r.parentSemantics=e.defaults.parentSemantics?o({},r.parentSemantics,e.defaults.parentSemantics):r.parentSemantics,r.existingElement=e.defaults.existingElement?o({},r.existingElement,e.defaults.existingElement):r.existingElement),t.initialize=function(){var r;if(n){console.error("The renderer wrapper has already been initialized successfully, RenderingOptions.suffixId is: ".concat(e.suffixId,". No further action was taken."));return}if(e.root&&document.getElementById(e.root.id))t.root=document.getElementById(e.root.id);else{console.error("No root element found, cannot build: RenderingOptions.root.id must reference an existing DOM element in order to render children.");return}if(t.root.style.position="relative",t.root.classList.add("dn-root"),!e.suffixId){console.error("No suffix id found: options.suffixId must be specified.");return}return t.wrapper=document.createElement("div"),t.wrapper.id="dn-wrapper-"+e.suffixId,t.wrapper.classList.add("dn-wrapper"),t.wrapper.style.width=e.root&&e.root.width?e.root.width:"100%",e.root&&e.root.height&&(t.wrapper.style.height=e.root.height),e.entryButton&&e.entryButton.include&&(t.entryButton=document.createElement("button"),t.entryButton.id="dn-entry-button-"+e.suffixId,t.entryButton.classList.add("dn-entry-button"),t.entryButton.innerText="Enter navigation area",e.entryButton.callbacks&&e.entryButton.callbacks.click&&t.entryButton.addEventListener("click",e.entryButton.callbacks.click),e.entryButton.callbacks&&e.entryButton.callbacks.focus&&t.entryButton.addEventListener("focus",e.entryButton.callbacks.focus),t.wrapper.appendChild(t.entryButton)),t.root.appendChild(t.wrapper),((r=e.exitElement)===null||r===void 0?void 0:r.include)&&(t.exitElement=document.createElement("div"),t.exitElement.id="dn-exit-"+e.suffixId,t.exitElement.classList.add("dn-exit-position"),t.exitElement.innerText="End of data structure.",t.exitElement.setAttribute("aria-label","End of data structure."),t.exitElement.setAttribute("role","note"),t.exitElement.setAttribute("tabindex","-1"),t.exitElement.style.display="none",t.exitElement.addEventListener("focus",function(n){var r,i;t.exitElement.style.display="block",t.clearStructure(),((i=e.exitElement)===null||i===void 0?void 0:(r=i.callbacks)===null||r===void 0?void 0:r.focus)&&e.exitElement.callbacks.focus(n)}),t.exitElement.addEventListener("blur",function(n){var r,i;t.exitElement.style.display="none",((i=e.exitElement)===null||i===void 0?void 0:(r=i.callbacks)===null||r===void 0?void 0:r.blur)&&e.exitElement.callbacks.blur(n)}),t.root.appendChild(t.exitElement)),n=!0,t.root},t.render=function(i){var o=i.renderId+"",s=e.elementData[o];if(!s){console.warn("Render data not found with renderId: ".concat(o,". Failed to render."));return}if(!n){console.error("render() was called before initialize(), renderer must be initialized first.");return}var a=!1,l={},u=function(e,t,n){var o=s[e]||r[e],u=n&&a?l[t]:o[t],c=r[e][t];return typeof o=="function"?o(s,i.datum):typeof u=="function"?u(s,i.datum):u||c||(t?void 0:o)};a=u("existingElement","useForDimensions"),l=u("existingElement","dimensions");var c=parseFloat(u("dimensions","width",!0)||0),d=parseFloat(u("dimensions","height",!0)||0),m=parseFloat(u("dimensions","x",!0)||0),f=parseFloat(u("dimensions","y",!0)||0),p=document.createElement(u("parentSemantics","elementType")),b=u("parentSemantics","attributes");typeof b=="object"&&Object.keys(b).forEach(function(e){p.setAttribute(e,b[e])}),p.setAttribute("role",u("parentSemantics","role")),p.id=o,p.classList.add("dn-node"),p.classList.add(u("cssClass")),p.style.width=c+"px",p.style.height=d+"px",p.style.left=m+"px",p.style.top=f+"px",p.setAttribute("tabindex","-1");var y=document.createElement(u("semantics","elementType")),v=u("semantics","attributes");typeof v=="object"&&Object.keys(v).forEach(function(e){p.setAttribute(e,v[e])}),y.setAttribute("role",u("semantics","role")),y.classList.add("dn-node-text"),s.showText&&(y.innerText=s.semantics.label);var x=u("semantics","label");x||console.error("Accessibility error: a label must be supplied to every rendered element using semantics.label."),y.setAttribute("aria-label",x),p.appendChild(y);var h=u("dimensions","path");if(h){var E=c+m+10,g=d+f+10,w=document.createElementNS("http://www.w3.org/2000/svg","svg");w.setAttribute("width",E+""),w.setAttribute("height",g+""),w.setAttribute("viewBox","0 0 ".concat(E," ").concat(g)),w.style.left=-m+"px",w.style.top=-f+"px",w.classList.add("dn-node-svg"),w.setAttribute("role","presentation"),w.setAttribute("focusable","false");var A=document.createElementNS("http://www.w3.org/2000/svg","path");A.setAttribute("d",h),A.classList.add("dn-node-path"),w.appendChild(A),p.appendChild(w)}return t.wrapper.appendChild(p),p},t.remove=function(e){var t=document.getElementById(e);t&&t.remove()},t.clearStructure=function(){s(t.wrapper.children).forEach(function(e){t.entryButton&&t.entryButton===e||t.remove(e.id)})},t};
|
package/dist/rendering.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as m}from"./chunk-GP5LYFFJ.mjs";var L=t=>{let e={},x=!1,n={cssClass:m.cssClass,dimensions:{...m.dimensions},semantics:{...m.semantics},parentSemantics:{...m.parentSemantics},existingElement:{...m.existingElement}};return t.defaults&&(n.cssClass=t.defaults.cssClass||n.cssClass,n.dimensions=t.defaults.dimensions?{...n.dimensions,...t.defaults.dimensions}:n.dimensions,n.semantics=t.defaults.semantics?{...n.semantics,...t.defaults.semantics}:n.semantics,n.parentSemantics=t.defaults.parentSemantics?{...n.parentSemantics,...t.defaults.parentSemantics}:n.parentSemantics,n.existingElement=t.defaults.existingElement?{...n.existingElement,...t.defaults.existingElement}:n.existingElement),e.initialize=()=>{if(x){console.error(`The renderer wrapper has already been initialized successfully, RenderingOptions.suffixId is: ${t.suffixId}. No further action was taken.`);return}if(t.root&&document.getElementById(t.root.id))e.root=document.getElementById(t.root.id);else{console.error("No root element found, cannot build: RenderingOptions.root.id must reference an existing DOM element in order to render children.");return}if(e.root.style.position="relative",e.root.classList.add("dn-root"),!t.suffixId){console.error("No suffix id found: options.suffixId must be specified.");return}return e.wrapper=document.createElement("div"),e.wrapper.id="dn-wrapper-"+t.suffixId,e.wrapper.classList.add("dn-wrapper"),e.wrapper.style.width=t.root&&t.root.width?t.root.width:"100%",t.root&&t.root.height&&(e.wrapper.style.height=t.root.height),t.entryButton&&t.entryButton.include&&(e.entryButton=document.createElement("button"),e.entryButton.id="dn-entry-button-"+t.suffixId,e.entryButton.classList.add("dn-entry-button"),e.entryButton.innerText="Enter navigation area",t.entryButton.callbacks&&t.entryButton.callbacks.click&&e.entryButton.addEventListener("click",t.entryButton.callbacks.click),t.entryButton.callbacks&&t.entryButton.callbacks.focus&&e.entryButton.addEventListener("focus",t.entryButton.callbacks.focus),e.wrapper.appendChild(e.entryButton)),e.root.appendChild(e.wrapper),t.exitElement
|
|
1
|
+
import{d as m}from"./chunk-GP5LYFFJ.mjs";var L=t=>{let e={},x=!1,n={cssClass:m.cssClass,dimensions:{...m.dimensions},semantics:{...m.semantics},parentSemantics:{...m.parentSemantics},existingElement:{...m.existingElement}};return t.defaults&&(n.cssClass=t.defaults.cssClass||n.cssClass,n.dimensions=t.defaults.dimensions?{...n.dimensions,...t.defaults.dimensions}:n.dimensions,n.semantics=t.defaults.semantics?{...n.semantics,...t.defaults.semantics}:n.semantics,n.parentSemantics=t.defaults.parentSemantics?{...n.parentSemantics,...t.defaults.parentSemantics}:n.parentSemantics,n.existingElement=t.defaults.existingElement?{...n.existingElement,...t.defaults.existingElement}:n.existingElement),e.initialize=()=>{if(x){console.error(`The renderer wrapper has already been initialized successfully, RenderingOptions.suffixId is: ${t.suffixId}. No further action was taken.`);return}if(t.root&&document.getElementById(t.root.id))e.root=document.getElementById(t.root.id);else{console.error("No root element found, cannot build: RenderingOptions.root.id must reference an existing DOM element in order to render children.");return}if(e.root.style.position="relative",e.root.classList.add("dn-root"),!t.suffixId){console.error("No suffix id found: options.suffixId must be specified.");return}return e.wrapper=document.createElement("div"),e.wrapper.id="dn-wrapper-"+t.suffixId,e.wrapper.classList.add("dn-wrapper"),e.wrapper.style.width=t.root&&t.root.width?t.root.width:"100%",t.root&&t.root.height&&(e.wrapper.style.height=t.root.height),t.entryButton&&t.entryButton.include&&(e.entryButton=document.createElement("button"),e.entryButton.id="dn-entry-button-"+t.suffixId,e.entryButton.classList.add("dn-entry-button"),e.entryButton.innerText="Enter navigation area",t.entryButton.callbacks&&t.entryButton.callbacks.click&&e.entryButton.addEventListener("click",t.entryButton.callbacks.click),t.entryButton.callbacks&&t.entryButton.callbacks.focus&&e.entryButton.addEventListener("focus",t.entryButton.callbacks.focus),e.wrapper.appendChild(e.entryButton)),e.root.appendChild(e.wrapper),t.exitElement?.include&&(e.exitElement=document.createElement("div"),e.exitElement.id="dn-exit-"+t.suffixId,e.exitElement.classList.add("dn-exit-position"),e.exitElement.innerText="End of data structure.",e.exitElement.setAttribute("aria-label","End of data structure."),e.exitElement.setAttribute("role","note"),e.exitElement.setAttribute("tabindex","-1"),e.exitElement.style.display="none",e.exitElement.addEventListener("focus",r=>{e.exitElement.style.display="block",e.clearStructure(),t.exitElement?.callbacks?.focus&&t.exitElement.callbacks.focus(r)}),e.exitElement.addEventListener("blur",r=>{e.exitElement.style.display="none",t.exitElement?.callbacks?.blur&&t.exitElement.callbacks.blur(r)}),e.root.appendChild(e.exitElement)),x=!0,e.root},e.render=r=>{let o=r.renderId+"",u=t.elementData[o];if(!u){console.warn(`Render data not found with renderId: ${o}. Failed to render.`);return}if(!x){console.error("render() was called before initialize(), renderer must be initialized first.");return}let g=!1,w={},s=(a,c,l)=>{let d=u[a]||n[a],p=l&&g?w[c]:d[c],S=n[a][c];return typeof d=="function"?d(u,r.datum):typeof p=="function"?p(u,r.datum):p||S||(c?void 0:d)};g=s("existingElement","useForDimensions"),w=s("existingElement","dimensions");let B=parseFloat(s("dimensions","width",!0)||0),v=parseFloat(s("dimensions","height",!0)||0),b=parseFloat(s("dimensions","x",!0)||0),y=parseFloat(s("dimensions","y",!0)||0),i=document.createElement(s("parentSemantics","elementType")),E=s("parentSemantics","attributes");typeof E=="object"&&Object.keys(E).forEach(a=>{i.setAttribute(a,E[a])}),i.setAttribute("role",s("parentSemantics","role")),i.id=o,i.classList.add("dn-node"),i.classList.add(s("cssClass")),i.style.width=B+"px",i.style.height=v+"px",i.style.left=b+"px",i.style.top=y+"px",i.setAttribute("tabindex","-1");let f=document.createElement(s("semantics","elementType")),h=s("semantics","attributes");typeof h=="object"&&Object.keys(h).forEach(a=>{i.setAttribute(a,h[a])}),f.setAttribute("role",s("semantics","role")),f.classList.add("dn-node-text"),u.showText&&(f.innerText=u.semantics.label);let k=s("semantics","label");k||console.error("Accessibility error: a label must be supplied to every rendered element using semantics.label."),f.setAttribute("aria-label",k),i.appendChild(f);let A=s("dimensions","path");if(A){let a=B+b+10,c=v+y+10,l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.setAttribute("width",a+""),l.setAttribute("height",c+""),l.setAttribute("viewBox",`0 0 ${a} ${c}`),l.style.left=-b+"px",l.style.top=-y+"px",l.classList.add("dn-node-svg"),l.setAttribute("role","presentation"),l.setAttribute("focusable","false");let d=document.createElementNS("http://www.w3.org/2000/svg","path");d.setAttribute("d",A),d.classList.add("dn-node-path"),l.appendChild(d),i.appendChild(l)}return e.wrapper.appendChild(i),i},e.remove=r=>{let o=document.getElementById(r);o&&o.remove()},e.clearStructure=()=>{[...e.wrapper.children].forEach(r=>{e.entryButton&&e.entryButton===r||e.remove(r.id)})},e};export{L as default};
|
package/dist/structure.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as L}from"./chunk-KNRZ7RNY.mjs";import{c as C}from"./chunk-GP5LYFFJ.mjs";var j=t=>{if(t.dataType==="vega-lite"||t.dataType==="vl"||t.dataType==="Vega-Lite")return w(t);console.warn("Apologies, we currently only have structure scaffolding for Vega-Lite, generic scaffolding coming soon!")},w=t=>{let R=C,r={},u={},o={},y=0,$=t.groupInclusionCriteria?t.groupInclusionCriteria:()=>!0,E=t.itemInclusionCriteria?t.itemInclusionCriteria:()=>!0,S=t.datumInclusionCriteria?t.datumInclusionCriteria:()=>!0,b=t.vegaLiteView._renderer._origin,I=t.vegaLiteView._scenegraph.root.items[0].mark.items[0],m=(e,i)=>{if(e["data-navigator-id"])return e["data-navigator-id"];let c=`dn-node-${i}-${y}`;return y++,e["data-navigator-id"]=c,c},k=e=>{let i=r[e],c=i.index,g=i.level,l=i.parent,n=[],d=l.items[c-1];if(d){let s=m(d,g);if(r[s]){let a=`${s}-${i.id}`;n.push(a),u[a]||(u[a]={source:s,target:i.id,navigationRules:["left","right"]})}}let f=l.items[c+1];if(f){let s=m(f,g);if(r[s]){let a=`${i.id}-${s}`;n.push(a),u[a]||(u[a]={source:i.id,target:s,navigationRules:["left","right"]})}}if(g==="group"&&l.items[c].items){let a=(l.items[c].items[0].mark.items[0].items||l.items[c].items)[0],v=m(a,"item");if(r[v]){let x=`${i.id}-${v}`;n.push(x),u[x]||(u[x]={source:i.id,target:v,navigationRules:["parent","child"]})}}else if(g==="item"){let s=m(l,"group");if(r[s]){let a=`${s}-${i.id}`;n.push(a),u[a]||(u[a]={source:s,target:i.id,navigationRules:["parent","child"]})}}return t.exitFunction&&(n.push("any-exit"),u["any-exit"]||(u["any-exit"]={source:t.getCurrent,target:t.exitFunction,navigationRules:["exit"]})),n.push("any-undo"),u["any-undo"]||(u["any-undo"]={source:t.getCurrent,target:t.getPrevious,navigationRules:["undo"]}),n},p=(e,i,c,g,l)=>{let n=m(e,i),d="render-"+n,f=c||[0,0];r[n]={},r[n].d={},r[n].id=n,r[n].renderId=d,r[n].index=g,r[n].level=i,r[n].parent=l,o[d]={},o[d].renderId=d,o[d].dimensions={},o[d].dimensions.x=e.bounds.x1+f[0],o[d].dimensions.y=e.bounds.y1+f[1],o[d].dimensions.width=e.bounds.x2-e.bounds.x1,o[d].dimensions.height=e.bounds.y2-e.bounds.y1,o[d].cssClass="dn-vega-lite-node",e.datum&&Object.keys(e.datum).forEach(s=>{let a=e.datum[s];S(s,a,e.datum,i,t.vegaLiteSpec)&&(r[n].d[t.keyRenamingHash&&t.keyRenamingHash[s]?t.keyRenamingHash[s]:s]=a)}),o[d].semantics={},o[d].semantics.label=t.nodeDescriber?t.nodeDescriber(r[n].d,e,i):L(r[n].d)},h=0;return I.items.forEach(e=>{if($(e,h,t.vegaLiteSpec)){p(e,"group",b,h,I);let i=0,c=e.items[0].mark.items[0].items?e.items[0].mark.items[0]:e;c.items.forEach(g=>{E(g,i,e,t.vegaLiteSpec)&&p(g,"item",b,i,c),i++})}h++}),Object.keys(r).forEach(e=>{r[e].edges=k(e)}),{nodes:r,edges:u,elementData:o,navigationRules:R}},B=t=>({});export{B as buildNodeStructure,w as buildNodeStructureFromVegaLite,j as default};
|