├── .gitignore ├── decon-icon.png ├── js ├── MarkGroupModel.js ├── DataLoadingController.js ├── filters.js ├── app.js ├── layout_fixer.js ├── MappingsListController.js ├── background.js ├── content.js ├── injected.js ├── services.js ├── DataTableController.js └── directives.js ├── content.css ├── Gruntfile.js ├── manifest.json ├── display.html ├── package.json ├── LICENSE ├── partials ├── mappingsList.html └── dataTable.html ├── README.md ├── display.css └── lib └── pathSeg.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .gitignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /decon-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ucbvislab/d3-deconstructor/HEAD/decon-icon.png -------------------------------------------------------------------------------- /js/MarkGroupModel.js: -------------------------------------------------------------------------------- 1 | var _ = require('underscore'); 2 | var deconApp = angular.module('deconApp'); 3 | var MarkGroup = require('d3-decon-lib').MarkGroup; 4 | 5 | deconApp.factory('MarkGroup', function () { 6 | return MarkGroup; 7 | }); -------------------------------------------------------------------------------- /js/DataLoadingController.js: -------------------------------------------------------------------------------- 1 | var deconApp = angular.module('deconApp'); 2 | 3 | deconApp.controller('DataLoadingController', ['$scope', 'VisDataService', 4 | function($scope, visDataService) { 5 | $scope.visDataService = visDataService; 6 | } 7 | ]); -------------------------------------------------------------------------------- /js/filters.js: -------------------------------------------------------------------------------- 1 | var deconApp = angular.module('deconApp'); 2 | 3 | deconApp.filter('range', function() { 4 | return function(input, total) { 5 | total = parseInt(total); 6 | for (var i=0; i 2 | 3 | 4 | 5 | D3 Deconstructor 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
21 |
Loading...
22 |
23 |
24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "d3-deconstructor", 3 | "description": "", 4 | "version": "1.0.4", 5 | "main": "./js/app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/harperj/decon-plugin.git" 12 | }, 13 | "author": "Jonathan Harper", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/harperj/decon-plugin/issues" 17 | }, 18 | "homepage": "https://github.com/harperj/decon-plugin", 19 | "browserify-shim": { 20 | "lib/angular.js": { 21 | "exports": "angular" 22 | } 23 | }, 24 | "browserify": { 25 | "transform": [ 26 | "browserify-shim" 27 | ] 28 | }, 29 | "devDependencies": { 30 | "browserify": "^5.11.2", 31 | "browserify-shim": "^3.7.0", 32 | "circular-json": "^0.1.6", 33 | "filesaver.js": "^0.1.0", 34 | "grunt": "^0.4.5", 35 | "grunt-browserify": "^3.0.1", 36 | "grunt-cli": "^0.1.13", 37 | "grunt-contrib-watch": "^0.6.1" 38 | }, 39 | "dependencies": { 40 | "jquery": "^2.1.1", 41 | "angular": "^1.3.1", 42 | "bootstrap": "^3.2.0", 43 | "d3": "^3.4.11", 44 | "d3-decon-lib": "git://github.com/harperj/d3-decon-lib", 45 | "underscore": "^1.7.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014, UC Berkeley VisLab 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 5 | 6 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 7 | 8 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 9 | 10 | 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 11 | 12 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /js/content.js: -------------------------------------------------------------------------------- 1 | doInject(); 2 | 3 | if (window === top) { 4 | chrome.runtime.onMessage.addListener(function(req, sender, sendResponse) { 5 | console.log(req); 6 | if (req.type == "pageActionClicked") { 7 | var evt = new CustomEvent("pageDeconEvent", {type: "pageDeconEvent"}); 8 | // evt.initCustomEvent("pageDeconEvent", true, true); 9 | document.dispatchEvent(evt); 10 | } 11 | else if (req.type == "deconstructVis") { 12 | var evt = document.createEvent("CustomEvent"); 13 | var evt = new CustomEvent("nodeDeconEvent", {type: "nodeDeconEvent"}); 14 | console.log("sending node decon event"); 15 | document.dispatchEvent(evt); 16 | } 17 | }); 18 | } 19 | 20 | function initRestylingInterface(visData) { 21 | chrome.runtime.sendMessage({type: "initView"}, function() { 22 | chrome.runtime.sendMessage({ 23 | type:"loadingInit", 24 | data: {} 25 | }); 26 | 27 | setTimeout(function() { 28 | chrome.runtime.sendMessage({type: "restylingData", data: visData}); 29 | jQuery(".loadingOverlay, .loadingOverlayFullPage").remove(); 30 | }, 500); 31 | }); 32 | } 33 | 34 | function doInject() { 35 | var script; 36 | script = document.createElement('script'); 37 | script.type = 'text/javascript'; 38 | script.src = chrome.extension.getURL('dist/injected.js'); 39 | document.addEventListener('deconDataEvent', function(event) { 40 | initRestylingInterface(event.detail); 41 | }); 42 | return document.body.appendChild(script); 43 | } -------------------------------------------------------------------------------- /partials/mappingsList.html: -------------------------------------------------------------------------------- 1 |
2 | Mappings: 3 |
4 |
5 | 10 | 15 | 16 |
17 | 18 | 19 | 22 | 25 | 26 | 27 | 30 | 33 | 34 |
20 | {{mapping.data}} 21 | 23 | {{mapping.attr}} 24 |
28 | {{from}} 29 | 31 | {{to}} 32 |
35 |
36 |
37 | 38 | 39 | 40 | 43 | 44 | 45 | 49 | 52 | 53 |
41 | {{mapping.attr}} = 42 |
46 | + 47 | {{mapping.data[$index]}} * 48 | 50 | {{coeff}} 51 |
54 |
55 |
56 |
57 |
-------------------------------------------------------------------------------- /partials/dataTable.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Export data as one or more files.
5 | 9 |
10 | 11 | 12 |
13 |
14 |
15 | Visualization {{selectedVis.val+1}} selected out of {{visDataService.pageData.length}} 16 | found on page.
17 | Select a visualization: 18 | 25 |
26 |
27 | 28 |
29 | 30 | Data Table {{$index+1}} 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 42 | 43 | 45 | 46 | 47 | 48 | 49 | 52 | 53 |
deconID 39 | {{dataField}} 40 |
{{group.data['deconID'][$index]}} 50 | {{dataValues[$parent.$parent.$index]}} 51 |
54 |
55 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | D3 Deconstructor 2 | ======= 3 | 4 | First release - October 2014 5 | 6 | The D3 Deconstructor is a Google Chrome extension for extracting data from [D3.js](http://d3js.org) visualizations. D3 _binds data_ to DOM elements when building a visualization. Deconstructor extracts this data and the visual mark attributes (such as position, width, height, and color) for each element in a D3 visualization. Then, elements are grouped by the type of data they are bound to. 7 | 8 | The D3 Deconstructor was developed in the [VisLab](http://vis.berkeley.edu) at UC Berkeley. We also used the results of deconstruction to enable restyling of D3 visualizations. You can find the paper here: http://vis.berkeley.edu/papers/d3decon 9 | 10 | ### Usage 11 | 12 | To extract data from a D3 visualization the user right clicks on the visualization and selects "Deconstruct Visualization" in the context menu. Deconstructor then creates a window showing the data tables for each group of elements. Then, you can save visualization data as JSON or CSV. 13 | 14 | In addition to data and mark attributes, Deconstructor extracts the mappings between the data and marks in the visualizations. These mappings are saved when saving as JSON only. JSON output is an array of "schema" objects which have several properties: 15 | 16 | * **data** - The data table for the visualization, represented as an object whose keys are the data column names and the value for each key is the array of data values in the column. 17 | * **attrs** - The mark attribute table, represented using an object similar to *data*. 18 | * **mappings** - A list of mappings found for the group of marks. Each mapping is an object with several properties: 19 | * *type* - The type of mapping; we extract mappings which are linear and one-to-one correspondences between data and attributes. 20 | * *data* - Either a single data field name or an array of data field names for the mapping. 21 | * *attr* - The mapped attribute. 22 | * *params* - A set of parameters that describe the mapping. 23 | * **ids** - A list containing a unique ID for each node, representing its order in a traversal of its SVG tree. 24 | 25 | ###Install 26 | 27 | #####Chrome Store 28 | 29 | The easiest way to install Deconstructor is [via the Chrome Web Store](https://chrome.google.com/webstore/detail/d3-deconstructor/papagkpjldglcaifeipgcfkhddlefnkk). 30 | 31 | 32 | #####Build 33 | 34 | **Note:** You must have [Node](http://nodejs.org/) installed to build Deconstructor. 35 | 36 | To build Deconstructor, first clone this repository and navigate to the cloned folder. Then, install dependencies via NPM and run [Browserify](http://browserify.org/). 37 | 38 | git clone git://github.com/ucbvislab/d3-deconstructor 39 | cd d3-deconstructor 40 | npm install 41 | node_modules/grunt-cli/bin/grunt browserify 42 | 43 | Finally, navigate to [chrome://extensions](chrome://extensions), click "Load unpacked extension..." and select the cloned folder. 44 | -------------------------------------------------------------------------------- /js/injected.js: -------------------------------------------------------------------------------- 1 | var pathSeg = require('../lib/pathSeg.js'); 2 | var VisDeconstruct = require('d3-decon-lib').Deconstruct; 3 | var $ = require('jquery'); 4 | var _ = require('underscore'); 5 | var CircularJSON = require('circular-json'); 6 | 7 | var contextElem; 8 | document.addEventListener("contextmenu", function(event) { 9 | contextElem = event.target; 10 | }); 11 | 12 | document.addEventListener("pageDeconEvent", function () { 13 | console.log("about to deconstruct"); 14 | buildOverlay($("html")[0], true); 15 | setTimeout(pageDeconstruct, 10); 16 | }); 17 | 18 | document.addEventListener("nodeDeconEvent", function () { 19 | if (contextElem instanceof SVGElement) { 20 | if (contextElem.tagName !== "svg") { 21 | contextElem = contextElem.ownerSVGElement; 22 | } 23 | 24 | buildOverlay(contextElem, false); 25 | setTimeout(function() { 26 | visDeconstruct(contextElem); 27 | }, 10); 28 | } 29 | else { 30 | 31 | } 32 | }); 33 | 34 | function buildOverlay(domElem, fullPage) { 35 | var overlay; 36 | if (fullPage) { 37 | overlay = $('
'); 38 | $(overlay).append(text); 39 | } 40 | else { 41 | var elemOffset = $(domElem).offset(); 42 | overlay = $('
'); 43 | $(overlay).css("top", elemOffset.top); 44 | $(overlay).css("left", elemOffset.left); 45 | 46 | var rect = domElem.getBoundingClientRect(); 47 | $(overlay).css("width", rect.width); 48 | $(overlay).css("height", rect.height); 49 | } 50 | 51 | var text = $('
Deconstructing...
'); 52 | $(overlay).append(text); 53 | $("html").append(overlay); 54 | } 55 | 56 | /** 57 | * Accepts a top level SVG node and deconstructs it by extracting data, marks, and the 58 | * mappings between them. 59 | * @param svgNode - Top level SVG node of a D3 visualization. 60 | */ 61 | function visDeconstruct(svgNode) { 62 | var deconstructed = VisDeconstruct.deconstruct(svgNode); 63 | 64 | var deconData = [{ 65 | schematized: deconstructed.groups, 66 | ids: _.map(deconstructed.marks, function(mark) { return mark.deconID; }) 67 | }]; 68 | 69 | var evt = document.createEvent("CustomEvent"); 70 | evt.initCustomEvent("deconDataEvent", true, true, deconData); 71 | document.dispatchEvent(evt); 72 | 73 | window.deconstruction = { 74 | deconstruction: [deconstructed], 75 | updaterRecovered: false 76 | }; 77 | } 78 | 79 | 80 | function pageDeconstruct() { 81 | var deconstructed = VisDeconstruct.pageDeconstruct(); 82 | var deconData = []; 83 | 84 | $.each(deconstructed, function(i, decon) { 85 | //nodes = nodes.concat(decon.dataNodes.nodes); 86 | //ids = ids.concat(decon.dataNodes.ids); 87 | //updaters.push(new VisUpdater(svgNode, decon.dataNodes.nodes, decon.dataNodes.ids, 88 | // decon.schematizedData)); 89 | var deconDataItem = { 90 | schematized: decon.groups, 91 | ids: _.map(decon.marks, function(mark) { return mark.deconID; }) 92 | }; 93 | deconData.push(deconDataItem); 94 | }); 95 | 96 | deconData = JSON.parse(CircularJSON.stringify(deconData)); 97 | 98 | var evt = document.createEvent("CustomEvent"); 99 | evt.initCustomEvent("deconDataEvent", true, true, deconData); 100 | document.dispatchEvent(evt); 101 | 102 | window.deconstruction = { 103 | deconstruction: deconstructed, 104 | updaterRecovered: false 105 | }; 106 | } 107 | -------------------------------------------------------------------------------- /js/services.js: -------------------------------------------------------------------------------- 1 | var _ = require('underscore'); 2 | var deconApp = angular.module('deconApp'); 3 | 4 | deconApp.service('VisDataService', ['MarkGroup', '$rootScope', '$timeout', function(MarkGroup, $rootScope, timer) { 5 | var port; 6 | var pageData = []; 7 | var visData = []; 8 | var ids = []; 9 | var selectedVis = {val: 0}; 10 | var selectedMarkGroup = {val: 0}; 11 | var dataLoading = {val: false}; 12 | 13 | var updateNodes = function(attr, val, ids) { 14 | var message = { 15 | type: "update", 16 | attr: attr, 17 | val: val, 18 | ids: ids, 19 | vis: selectedVis 20 | }; 21 | sendMessage(message); 22 | visData[selectedMarkGroup.val].updateWithMessage(message); 23 | }; 24 | 25 | var selectMarkGroup = function(markGroup) { 26 | selectedMarkGroup.val = visData.indexOf(markGroup); 27 | }; 28 | 29 | var getSelected = function() { 30 | return visData[selectedMarkGroup.val]; 31 | }; 32 | 33 | function updateDataWithLinearMapping(mapping, groupInd) { 34 | // update the attribute values according to the new mapping 35 | var attrArray = visData[groupInd].attrs[mapping.attr]; 36 | var group = visData[groupInd]; 37 | _.each(attrArray, function(attrVal, ind) { 38 | var newAttrVal = 0; 39 | _.each(mapping.params.coeffs, function(coeff, coeffInd) { 40 | if (coeffInd < mapping.data.length) { 41 | newAttrVal += coeff * group.data[mapping.data[coeffInd]][ind]; 42 | console.log(coeff * group.data[mapping.data[coeffInd]][ind] + "+"); 43 | } 44 | else { 45 | console.log(coeff); 46 | newAttrVal += coeff; 47 | } 48 | }); 49 | 50 | updateNodes(mapping.attr, newAttrVal, [visData[groupInd].ids[ind]]); 51 | }); 52 | } 53 | 54 | chrome.runtime.onMessage.addListener(function(message, sender) { 55 | if (message.type === "restylingData") { 56 | $rootScope.$apply(function() { 57 | var data = message.data; 58 | data = $.extend([], data); 59 | 60 | _.each(data, function(datum) { 61 | pageData.push(datum); 62 | }); 63 | 64 | selectVis(selectedVis.val); 65 | 66 | port = chrome.tabs.connect(sender.tab.id, {name: 'd3decon'}); 67 | }); 68 | $rootScope.$apply(function() { 69 | var notLoading = function() { 70 | dataLoading.val = false; 71 | }; 72 | timer(notLoading, 0); 73 | }); 74 | } 75 | if (message.type === "loadingInit") { 76 | console.log("received loading init message"); 77 | $rootScope.$apply(function() { 78 | dataLoading.val = true; 79 | }); 80 | } 81 | }); 82 | 83 | function getPageData() { 84 | return pageData; 85 | } 86 | 87 | function getVisData() { 88 | return pageData[selectedMarkGroup.val]; 89 | } 90 | 91 | function selectVis(visID) { 92 | selectedVis = visID; 93 | ids = pageData[visID].ids; 94 | 95 | while (visData.length > 0) { 96 | visData.pop(); 97 | } 98 | 99 | _.each(pageData[visID].schematized, function(group) { 100 | visData.push(MarkGroup.fromJSON(group)); 101 | }); 102 | } 103 | 104 | function sendMessage(message) { 105 | port.postMessage(message); 106 | } 107 | 108 | return { 109 | ids: ids, 110 | sendMessage: sendMessage, 111 | updateDataWithLinearMapping: updateDataWithLinearMapping, 112 | updateNodes: updateNodes, 113 | selectMarkGroup: selectMarkGroup, 114 | getSelected: getSelected, 115 | selectedMarkGroup: selectedMarkGroup, 116 | pageData: pageData, 117 | selectedVis: selectedVis, 118 | visData: visData, 119 | selectVis: selectVis, 120 | dataLoading: dataLoading 121 | } 122 | }]); -------------------------------------------------------------------------------- /display.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Helvetica Neue", sans-serif; 3 | font-size: 8pt; 4 | } 5 | 6 | #wrapper { 7 | width: 100%; 8 | float:left; 9 | margin-right: -180px; 10 | min-height: 100%; 11 | } 12 | 13 | #sidebar { 14 | background-color: #F5F5F5; 15 | position: relative; 16 | float: right; 17 | width: 180px; 18 | right: 180px; 19 | margin-right: -180px; 20 | overflow-y: auto; 21 | padding: 5px; 22 | border-left: 1px solid grey; 23 | min-height: 100%; 24 | } 25 | 26 | #loading-screen { 27 | width:100%; 28 | height:100%; 29 | background-color: white; 30 | position:absolute; 31 | z-index: 5000; 32 | display: table; 33 | top:0; 34 | left:0; 35 | overflow:hidden; 36 | } 37 | 38 | #page-content-wrapper { 39 | float: left; 40 | margin-left: 5px; 41 | margin-top: 5px; 42 | width: 100%; 43 | } 44 | 45 | #page-content { 46 | margin-right: 180px; 47 | overflow-y: auto; 48 | } 49 | 50 | 51 | .mapCol { 52 | float: left; 53 | width: 50%; 54 | } 55 | 56 | div.panel div.linear { 57 | background-color: #beaed4; 58 | } 59 | 60 | div.panel div.nominal { 61 | background-color: #7fc97f; 62 | } 63 | 64 | span.sectionHeader { 65 | padding-top: 5px; 66 | font-size: 10pt; 67 | margin-top: 5px; 68 | margin-bottom: 3px; 69 | font-weight: bold; 70 | } 71 | 72 | div.saveDataForm { 73 | background-color: #F5F5F5; 74 | border: 1px solid black; 75 | padding: 5px; 76 | width: 50%; 77 | margin-bottom: 20px; 78 | } 79 | 80 | label { 81 | font-size: 10pt; 82 | } 83 | 84 | th { 85 | font-size: 9pt; 86 | } 87 | 88 | div.bottomSticky { 89 | z-index: 100; 90 | height: 35%; 91 | margin-right: -180px; 92 | right: 180px; 93 | width: 180px; 94 | position: fixed; 95 | overflow-y: auto; 96 | display: table-row; 97 | padding: 3px; 98 | bottom: 0px; 99 | background-color: #d9edf7; 100 | border-left: 1px solid grey; 101 | } 102 | 103 | table.changeMapping { 104 | margin-bottom: 3px; 105 | } 106 | 107 | div.dataContainer { 108 | padding-left: 5px; 109 | padding-bottom: 20px; 110 | } 111 | 112 | td input.form-control { 113 | height: 20px; 114 | font-size: 8pt; 115 | } 116 | 117 | div.panel-group { 118 | margin-bottom: 3px; 119 | } 120 | 121 | div.panel div.panel-heading { 122 | padding: 0 10px; 123 | } 124 | 125 | table.dataTable { 126 | margin-bottom: 5px; 127 | max-width: 100%; 128 | } 129 | 130 | .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { 131 | padding: 3px !important; 132 | } 133 | 134 | .dataTable>thead>tr>th, .dataTable>tbody>tr>th, .dataTable>tfoot>tr>th, .dataTable>thead>tr>td, .dataTable>tbody>tr>td, .dataTable>tfoot>tr>td { 135 | padding: 3px !important; 136 | vertical-align: middle; 137 | } 138 | 139 | tr.selectedRow { 140 | background-color: darkgrey; 141 | } 142 | 143 | table tr th span.rowHead { 144 | color: #000; 145 | display: block; 146 | -webkit-transform: rotate(-90deg); 147 | writing-mode: tb-rl; 148 | filter: flipv fliph; 149 | border:0px black solid; 150 | 151 | } 152 | 153 | .delete-mapping-btn { 154 | float: right; 155 | padding: 1px 2px; 156 | border: 0px; 157 | box-shadow: none; 158 | background-image: none; 159 | } 160 | 161 | .controlPanel { 162 | border: 1px solid black; 163 | background-color: #E2E4FF; 164 | padding: 10px; 165 | margin: 10px; 166 | } 167 | 168 | #panelButtons { 169 | border: 1px solid blue; 170 | } 171 | 172 | .selected { 173 | background-color: #AAA !important; 174 | } 175 | 176 | .form-group { 177 | padding: 5px; 178 | } 179 | 180 | .table { 181 | font-size:8pt; 182 | } 183 | 184 | td { 185 | padding: 0; 186 | margin: 0; 187 | } 188 | 189 | button { 190 | padding: 3px; 191 | font-size: 8pt; 192 | } 193 | 194 | button.deconButton { 195 | line-height: 1; 196 | font-size: 8pt; 197 | padding: 3px; 198 | width: 70px; 199 | height: 16px; 200 | } 201 | 202 | button.deconButton span.caret { 203 | float:right; 204 | } 205 | 206 | li.deconDropDownItem { 207 | line-height: 0.5; 208 | font-size: 8pt; 209 | padding: 3px 0px; 210 | min-width: 70px; 211 | } 212 | 213 | ul.dropdown-menu { 214 | min-width: 70px; 215 | padding: 0px; 216 | } 217 | 218 | .dropdown-menu li.deconDropDownItem a { 219 | padding: 0px 3px; 220 | line-height: 1; 221 | } 222 | 223 | .dropdown-menu li a.mappedAttrLink { 224 | color: red; 225 | } 226 | 227 | 228 | div.mapping-group { 229 | overflow-y: auto; 230 | height: 65%; 231 | display: table-row; 232 | position: absolute; 233 | top: 0; left: 0; bottom: 0; right: 0; 234 | padding: 3px; 235 | background-color: #F5F5F5; 236 | } 237 | 238 | .sidebar-nav { 239 | position: absolute; 240 | top: 0; 241 | width: 180px; 242 | list-style: none; 243 | margin: 0; 244 | padding: 0; 245 | } -------------------------------------------------------------------------------- /js/DataTableController.js: -------------------------------------------------------------------------------- 1 | var _ = require('underscore'); 2 | var Deconstruct = require('d3-decon-lib').Deconstruct; 3 | var saveAs = require('FileSaver.js'); 4 | 5 | var deconApp = angular.module('deconApp'); 6 | 7 | deconApp.controller('DataTableController', ['$scope', 'orderByFilter', 'VisDataService', 8 | function($scope, orderByFilter, visDataService) { 9 | 10 | $scope.selectedVis = visDataService.selectedVis; 11 | $scope.selectMarkGroup = visDataService.selectMarkGroup; 12 | 13 | $scope.visSelectorVal = 0; 14 | $scope.visDataService = visDataService; 15 | $scope.data = visDataService.visData; 16 | 17 | 18 | $scope.ids = visDataService.ids; 19 | $scope.selectedRows = []; 20 | 21 | $scope.changeVis = function() { 22 | visDataService.selectVis($scope.visSelectorVal); 23 | }; 24 | 25 | $scope.getNumber = function(number) { 26 | return new Array(number); 27 | }; 28 | 29 | $scope.saveFilename = ""; 30 | 31 | $scope.getGroupSize = function(group) { 32 | var dataField = _.keys(group.data)[0]; 33 | return group.data[dataField].length; 34 | }; 35 | 36 | $scope.hasMarks = function(group) { 37 | return group.attrs !== null; 38 | }; 39 | 40 | $scope.saveData = function() { 41 | saveAs(new Blob([JSON.stringify(visDataService.visData)]), $scope.saveFilename); 42 | }; 43 | 44 | $scope.saveGroupDataCSV = function(group, ind) { 45 | var blob = new Blob([group.getDataCSVBlob()], { type: "text/csv;charset=utf-8" }); 46 | saveAs(blob, "group-"+ind.toString()+".csv"); 47 | }; 48 | 49 | $scope.saveVisDataCSV = function() { 50 | var orderedVisData = orderByFilter(visDataService.visData, 'numFields', true); 51 | for (var i = 0; i < orderedVisData.length; ++i) { 52 | $scope.saveGroupDataCSV(orderedVisData[i], i+1); 53 | } 54 | }; 55 | 56 | $scope.findGroupById = function(id) { 57 | var groupInd; 58 | _.each($scope.data, function(group, ind) { 59 | if (group.ids.indexOf(id) > -1) { 60 | groupInd = ind; 61 | } 62 | }); 63 | return groupInd; 64 | }; 65 | 66 | $scope.selectRow = function(group, ind) { 67 | var rowGroupInd = visDataService.visData.indexOf(group); 68 | if (rowGroupInd !== visDataService.getSelected()) { 69 | visDataService.selectMarkGroup($scope.data[rowGroupInd]); 70 | } 71 | 72 | if ($scope.selectedRows.indexOf(ind) !== -1) { 73 | $scope.selectedRows.splice($scope.selectedRows.indexOf(ind), 1); 74 | } 75 | else { 76 | $scope.selectedRows.push(ind); 77 | } 78 | }; 79 | 80 | $scope.rowIsSelected = function(group, ind) { 81 | if (group === visDataService.getSelected()) { 82 | return $scope.selectedRows.indexOf(ind) !== -1; 83 | } 84 | else { 85 | return false; 86 | } 87 | }; 88 | 89 | $scope.splitGroup = function() { 90 | if ($scope.selectedRows.length > 0) { 91 | var group = visDataService.getSelected(); 92 | $scope.selectedRows = $scope.selectedRows.sort(function(a, b){return b-a}); 93 | 94 | var newGroup = { 95 | ids: [], 96 | data: {}, 97 | attrs: {}, 98 | nodeAttrs: [], 99 | mappings: [] 100 | }; 101 | 102 | _.each($scope.selectedRows, function(ind, count) { 103 | newGroup.ids.push(group.ids[ind]); 104 | group.ids.splice(ind, 1); 105 | newGroup.nodeAttrs.push(group.nodeAttrs[ind]); 106 | group.nodeAttrs.splice(ind, 1); 107 | 108 | _.each(group.data, function(val, key) { 109 | if (newGroup.data[key]) { 110 | newGroup.data[key].push(val[ind]); 111 | } 112 | else { 113 | newGroup.data[key] = [val[ind]] 114 | } 115 | group.data[key].splice(ind, 1); 116 | }); 117 | _.each(group.attrs, function(val, key) { 118 | if (newGroup.attrs[key]) { 119 | newGroup.attrs[key].push(val[ind]); 120 | } 121 | else { 122 | newGroup.attrs[key] = [val[ind]] 123 | } 124 | group.attrs[key].splice(ind, 1); 125 | }); 126 | }); 127 | newGroup.group = _.keys(newGroup.data); 128 | newGroup.numNodes = newGroup.ids.length; 129 | group.numNodes = group.ids.length; 130 | 131 | group.mappings = Deconstruct.extractMappings(group); 132 | newGroup.mappings = Deconstruct.extractMappings(newGroup); 133 | $scope.data.push(newGroup); 134 | $scope.selectedRows = []; 135 | } 136 | }; 137 | } 138 | ]); 139 | -------------------------------------------------------------------------------- /js/directives.js: -------------------------------------------------------------------------------- 1 | var deconApp = angular.module('deconApp'); 2 | var d3 = require('d3'); 3 | var _ = require('underscore'); 4 | 5 | deconApp.directive('ngRightClick', function($parse) { 6 | return function(scope, element, attrs) { 7 | var fn = $parse(attrs.ngRightClick); 8 | element.bind('contextmenu', function(event) { 9 | scope.$apply(function() { 10 | event.preventDefault(); 11 | fn(scope, {$event:event}); 12 | }); 13 | }); 14 | }; 15 | }); 16 | 17 | deconApp.directive('svgInject', function($compile) { 18 | return { 19 | scope: { 20 | group: "=group", 21 | ind: "=ind" 22 | }, 23 | restrict: 'E', 24 | link: function(scope, element, attrs, controller) { 25 | scope.$watchGroup(["group.numNodes", "attrs"], function(newValue, oldValue) { 26 | // console.log(scope.group); 27 | // console.log(scope.ind); 28 | var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 29 | var canvasWidth = 20; 30 | svg.setAttribute("width", canvasWidth.toString()); 31 | svg.setAttribute("height", canvasWidth.toString()); 32 | _.each(element[0].children, function(node) { 33 | $(node).remove(); 34 | }, true); 35 | _.each(element[0].children, function(node) { 36 | $(node).remove(); 37 | }, true); 38 | 39 | var maxWidth = _.max(scope.group.attrs["width"]); 40 | var maxHeight= _.max(scope.group.attrs["height"]); 41 | var scaleDimVal = maxHeight; 42 | if (maxWidth > maxHeight) { 43 | scaleDimVal = maxWidth; 44 | } 45 | scaleDimVal = canvasWidth / scaleDimVal; 46 | 47 | var markNode = document.createElementNS("http://www.w3.org/2000/svg", scope.group.attrs["shape"][scope.ind]); 48 | 49 | var nodeAttrs = scope.group.nodeAttrs[scope.ind]; 50 | for (var nodeAttr in nodeAttrs) { 51 | if (nodeAttrs.hasOwnProperty(nodeAttr) && nodeAttrs[nodeAttr] !== null) { 52 | if (nodeAttr === "text") { 53 | $(markNode).text(nodeAttrs[nodeAttr]); 54 | } 55 | else { 56 | d3.select(markNode).attr(nodeAttr, nodeAttrs[nodeAttr]); 57 | } 58 | } 59 | } 60 | 61 | // Setup non-geometric attributes 62 | var geomAttrs = ["width", "height", "area", "shape", "xPosition", "yPosition"]; 63 | for (var attr in scope.group.attrs) { 64 | var isGeom = false; 65 | _.each(geomAttrs, function(geomAttr) { 66 | if (attr === geomAttr) { 67 | isGeom = true; 68 | return -1; 69 | } 70 | }); 71 | if (!isGeom && scope.group.attrs[attr][scope.ind] !== 'none') { 72 | d3.select(markNode).style(attr, scope.group.attrs[attr][scope.ind]); 73 | } 74 | } 75 | 76 | markNode.setAttribute("vector-effect", "non-scaling-stroke"); 77 | if (markNode.tagName == "circle") { 78 | markNode.setAttribute("r", "1"); 79 | } 80 | 81 | svg.appendChild(markNode); 82 | element[0].appendChild(svg); 83 | 84 | var newNodeBoundingBox = transformedBoundingBox(markNode); 85 | var newScale = svg.createSVGTransform(); 86 | var widthScale = attrs['width'] / newNodeBoundingBox.width; 87 | var heightScale = attrs['height'] / newNodeBoundingBox.height; 88 | if (isNaN(widthScale)) { 89 | widthScale = 1; 90 | } 91 | if (isNaN(heightScale)) { 92 | heightScale = 1; 93 | } 94 | newScale.setScale(widthScale * scaleDimVal, heightScale * scaleDimVal); 95 | markNode.transform.baseVal.appendItem(newScale); 96 | newNodeBoundingBox = transformedBoundingBox(markNode); 97 | var newTranslate = svg.createSVGTransform(); 98 | var globalTransform = markNode.getTransformToElement(svg); 99 | var globalToLocal = globalTransform.inverse(); 100 | var newNodeCurrentGlobalPt = svg.createSVGPoint(); 101 | newNodeCurrentGlobalPt.x = newNodeBoundingBox.x + (newNodeBoundingBox.width / 2); 102 | newNodeCurrentGlobalPt.y = newNodeBoundingBox.y + (newNodeBoundingBox.height / 2); 103 | 104 | var newNodeDestinationGlobalPt = svg.createSVGPoint(); 105 | newNodeDestinationGlobalPt.x = canvasWidth / 2; 106 | newNodeDestinationGlobalPt.y = canvasWidth / 2; 107 | 108 | var localCurrentPt = newNodeCurrentGlobalPt.matrixTransform(globalToLocal); 109 | var localDestinationPt = newNodeDestinationGlobalPt.matrixTransform(globalToLocal); 110 | 111 | var xTranslate = localDestinationPt.x - localCurrentPt.x; 112 | var yTranslate = localDestinationPt.y - localCurrentPt.y; 113 | newTranslate.setTranslate(xTranslate, yTranslate); 114 | 115 | markNode.transform.baseVal.appendItem(newTranslate); 116 | }); 117 | } 118 | } 119 | }); 120 | 121 | 122 | 123 | var transformedBoundingBox = function (el, to) { 124 | //console.log(el); 125 | var bb = el.getBBox(); 126 | var svg = el.ownerSVGElement; 127 | if (!to) { 128 | to = svg; 129 | } 130 | var m = el.getTransformToElement(to); 131 | var pts = [svg.createSVGPoint(), svg.createSVGPoint(), svg.createSVGPoint(), svg.createSVGPoint()]; 132 | pts[0].x = bb.x; 133 | pts[0].y = bb.y; 134 | pts[1].x = bb.x + bb.width; 135 | pts[1].y = bb.y; 136 | pts[2].x = bb.x + bb.width; 137 | pts[2].y = bb.y + bb.height; 138 | pts[3].x = bb.x; 139 | pts[3].y = bb.y + bb.height; 140 | 141 | var xMin = Infinity; 142 | var xMax = -Infinity; 143 | var yMin = Infinity; 144 | var yMax = -Infinity; 145 | 146 | for (var i = 0; i < pts.length; i++) { 147 | var pt = pts[i]; 148 | pt = pt.matrixTransform(m); 149 | xMin = Math.min(xMin, pt.x); 150 | xMax = Math.max(xMax, pt.x); 151 | yMin = Math.min(yMin, pt.y); 152 | yMax = Math.max(yMax, pt.y); 153 | } 154 | bb.x = xMin; 155 | bb.width = xMax - xMin; 156 | bb.y = yMin; 157 | bb.height = yMax - yMin; 158 | return bb; 159 | }; -------------------------------------------------------------------------------- /lib/pathSeg.js: -------------------------------------------------------------------------------- 1 | // SVGPathSeg API polyfill 2 | // https://github.com/progers/pathseg 3 | // 4 | // This is a drop-in replacement for the SVGPathSeg and SVGPathSegList APIs that were removed from 5 | // SVG2 (https://lists.w3.org/Archives/Public/www-svg/2015Jun/0044.html), including the latest spec 6 | // changes which were implemented in Firefox 43 and Chrome 46. 7 | 8 | (function() { "use strict"; 9 | if (!("SVGPathSeg" in window)) { 10 | // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg 11 | window.SVGPathSeg = function(type, typeAsLetter, owningPathSegList) { 12 | this.pathSegType = type; 13 | this.pathSegTypeAsLetter = typeAsLetter; 14 | this._owningPathSegList = owningPathSegList; 15 | } 16 | 17 | SVGPathSeg.prototype.classname = "SVGPathSeg"; 18 | 19 | SVGPathSeg.PATHSEG_UNKNOWN = 0; 20 | SVGPathSeg.PATHSEG_CLOSEPATH = 1; 21 | SVGPathSeg.PATHSEG_MOVETO_ABS = 2; 22 | SVGPathSeg.PATHSEG_MOVETO_REL = 3; 23 | SVGPathSeg.PATHSEG_LINETO_ABS = 4; 24 | SVGPathSeg.PATHSEG_LINETO_REL = 5; 25 | SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS = 6; 26 | SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL = 7; 27 | SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS = 8; 28 | SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL = 9; 29 | SVGPathSeg.PATHSEG_ARC_ABS = 10; 30 | SVGPathSeg.PATHSEG_ARC_REL = 11; 31 | SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS = 12; 32 | SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL = 13; 33 | SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS = 14; 34 | SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL = 15; 35 | SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16; 36 | SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17; 37 | SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18; 38 | SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19; 39 | 40 | // Notify owning PathSegList on any changes so they can be synchronized back to the path element. 41 | SVGPathSeg.prototype._segmentChanged = function() { 42 | if (this._owningPathSegList) 43 | this._owningPathSegList.segmentChanged(this); 44 | } 45 | 46 | window.SVGPathSegClosePath = function(owningPathSegList) { 47 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_CLOSEPATH, "z", owningPathSegList); 48 | } 49 | SVGPathSegClosePath.prototype = Object.create(SVGPathSeg.prototype); 50 | SVGPathSegClosePath.prototype.toString = function() { return "[object SVGPathSegClosePath]"; } 51 | SVGPathSegClosePath.prototype._asPathString = function() { return this.pathSegTypeAsLetter; } 52 | SVGPathSegClosePath.prototype.clone = function() { return new SVGPathSegClosePath(undefined); } 53 | 54 | window.SVGPathSegMovetoAbs = function(owningPathSegList, x, y) { 55 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_MOVETO_ABS, "M", owningPathSegList); 56 | this._x = x; 57 | this._y = y; 58 | } 59 | SVGPathSegMovetoAbs.prototype = Object.create(SVGPathSeg.prototype); 60 | SVGPathSegMovetoAbs.prototype.toString = function() { return "[object SVGPathSegMovetoAbs]"; } 61 | SVGPathSegMovetoAbs.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x + " " + this._y; } 62 | SVGPathSegMovetoAbs.prototype.clone = function() { return new SVGPathSegMovetoAbs(undefined, this._x, this._y); } 63 | Object.defineProperty(SVGPathSegMovetoAbs.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 64 | Object.defineProperty(SVGPathSegMovetoAbs.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 65 | 66 | window.SVGPathSegMovetoRel = function(owningPathSegList, x, y) { 67 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_MOVETO_REL, "m", owningPathSegList); 68 | this._x = x; 69 | this._y = y; 70 | } 71 | SVGPathSegMovetoRel.prototype = Object.create(SVGPathSeg.prototype); 72 | SVGPathSegMovetoRel.prototype.toString = function() { return "[object SVGPathSegMovetoRel]"; } 73 | SVGPathSegMovetoRel.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x + " " + this._y; } 74 | SVGPathSegMovetoRel.prototype.clone = function() { return new SVGPathSegMovetoRel(undefined, this._x, this._y); } 75 | Object.defineProperty(SVGPathSegMovetoRel.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 76 | Object.defineProperty(SVGPathSegMovetoRel.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 77 | 78 | window.SVGPathSegLinetoAbs = function(owningPathSegList, x, y) { 79 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_LINETO_ABS, "L", owningPathSegList); 80 | this._x = x; 81 | this._y = y; 82 | } 83 | SVGPathSegLinetoAbs.prototype = Object.create(SVGPathSeg.prototype); 84 | SVGPathSegLinetoAbs.prototype.toString = function() { return "[object SVGPathSegLinetoAbs]"; } 85 | SVGPathSegLinetoAbs.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x + " " + this._y; } 86 | SVGPathSegLinetoAbs.prototype.clone = function() { return new SVGPathSegLinetoAbs(undefined, this._x, this._y); } 87 | Object.defineProperty(SVGPathSegLinetoAbs.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 88 | Object.defineProperty(SVGPathSegLinetoAbs.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 89 | 90 | window.SVGPathSegLinetoRel = function(owningPathSegList, x, y) { 91 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_LINETO_REL, "l", owningPathSegList); 92 | this._x = x; 93 | this._y = y; 94 | } 95 | SVGPathSegLinetoRel.prototype = Object.create(SVGPathSeg.prototype); 96 | SVGPathSegLinetoRel.prototype.toString = function() { return "[object SVGPathSegLinetoRel]"; } 97 | SVGPathSegLinetoRel.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x + " " + this._y; } 98 | SVGPathSegLinetoRel.prototype.clone = function() { return new SVGPathSegLinetoRel(undefined, this._x, this._y); } 99 | Object.defineProperty(SVGPathSegLinetoRel.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 100 | Object.defineProperty(SVGPathSegLinetoRel.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 101 | 102 | window.SVGPathSegCurvetoCubicAbs = function(owningPathSegList, x, y, x1, y1, x2, y2) { 103 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS, "C", owningPathSegList); 104 | this._x = x; 105 | this._y = y; 106 | this._x1 = x1; 107 | this._y1 = y1; 108 | this._x2 = x2; 109 | this._y2 = y2; 110 | } 111 | SVGPathSegCurvetoCubicAbs.prototype = Object.create(SVGPathSeg.prototype); 112 | SVGPathSegCurvetoCubicAbs.prototype.toString = function() { return "[object SVGPathSegCurvetoCubicAbs]"; } 113 | SVGPathSegCurvetoCubicAbs.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x1 + " " + this._y1 + " " + this._x2 + " " + this._y2 + " " + this._x + " " + this._y; } 114 | SVGPathSegCurvetoCubicAbs.prototype.clone = function() { return new SVGPathSegCurvetoCubicAbs(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); } 115 | Object.defineProperty(SVGPathSegCurvetoCubicAbs.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 116 | Object.defineProperty(SVGPathSegCurvetoCubicAbs.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 117 | Object.defineProperty(SVGPathSegCurvetoCubicAbs.prototype, "x1", { get: function() { return this._x1; }, set: function(x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true }); 118 | Object.defineProperty(SVGPathSegCurvetoCubicAbs.prototype, "y1", { get: function() { return this._y1; }, set: function(y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true }); 119 | Object.defineProperty(SVGPathSegCurvetoCubicAbs.prototype, "x2", { get: function() { return this._x2; }, set: function(x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true }); 120 | Object.defineProperty(SVGPathSegCurvetoCubicAbs.prototype, "y2", { get: function() { return this._y2; }, set: function(y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true }); 121 | 122 | window.SVGPathSegCurvetoCubicRel = function(owningPathSegList, x, y, x1, y1, x2, y2) { 123 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, "c", owningPathSegList); 124 | this._x = x; 125 | this._y = y; 126 | this._x1 = x1; 127 | this._y1 = y1; 128 | this._x2 = x2; 129 | this._y2 = y2; 130 | } 131 | SVGPathSegCurvetoCubicRel.prototype = Object.create(SVGPathSeg.prototype); 132 | SVGPathSegCurvetoCubicRel.prototype.toString = function() { return "[object SVGPathSegCurvetoCubicRel]"; } 133 | SVGPathSegCurvetoCubicRel.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x1 + " " + this._y1 + " " + this._x2 + " " + this._y2 + " " + this._x + " " + this._y; } 134 | SVGPathSegCurvetoCubicRel.prototype.clone = function() { return new SVGPathSegCurvetoCubicRel(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); } 135 | Object.defineProperty(SVGPathSegCurvetoCubicRel.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 136 | Object.defineProperty(SVGPathSegCurvetoCubicRel.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 137 | Object.defineProperty(SVGPathSegCurvetoCubicRel.prototype, "x1", { get: function() { return this._x1; }, set: function(x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true }); 138 | Object.defineProperty(SVGPathSegCurvetoCubicRel.prototype, "y1", { get: function() { return this._y1; }, set: function(y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true }); 139 | Object.defineProperty(SVGPathSegCurvetoCubicRel.prototype, "x2", { get: function() { return this._x2; }, set: function(x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true }); 140 | Object.defineProperty(SVGPathSegCurvetoCubicRel.prototype, "y2", { get: function() { return this._y2; }, set: function(y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true }); 141 | 142 | window.SVGPathSegCurvetoQuadraticAbs = function(owningPathSegList, x, y, x1, y1) { 143 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS, "Q", owningPathSegList); 144 | this._x = x; 145 | this._y = y; 146 | this._x1 = x1; 147 | this._y1 = y1; 148 | } 149 | SVGPathSegCurvetoQuadraticAbs.prototype = Object.create(SVGPathSeg.prototype); 150 | SVGPathSegCurvetoQuadraticAbs.prototype.toString = function() { return "[object SVGPathSegCurvetoQuadraticAbs]"; } 151 | SVGPathSegCurvetoQuadraticAbs.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x1 + " " + this._y1 + " " + this._x + " " + this._y; } 152 | SVGPathSegCurvetoQuadraticAbs.prototype.clone = function() { return new SVGPathSegCurvetoQuadraticAbs(undefined, this._x, this._y, this._x1, this._y1); } 153 | Object.defineProperty(SVGPathSegCurvetoQuadraticAbs.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 154 | Object.defineProperty(SVGPathSegCurvetoQuadraticAbs.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 155 | Object.defineProperty(SVGPathSegCurvetoQuadraticAbs.prototype, "x1", { get: function() { return this._x1; }, set: function(x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true }); 156 | Object.defineProperty(SVGPathSegCurvetoQuadraticAbs.prototype, "y1", { get: function() { return this._y1; }, set: function(y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true }); 157 | 158 | window.SVGPathSegCurvetoQuadraticRel = function(owningPathSegList, x, y, x1, y1) { 159 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL, "q", owningPathSegList); 160 | this._x = x; 161 | this._y = y; 162 | this._x1 = x1; 163 | this._y1 = y1; 164 | } 165 | SVGPathSegCurvetoQuadraticRel.prototype = Object.create(SVGPathSeg.prototype); 166 | SVGPathSegCurvetoQuadraticRel.prototype.toString = function() { return "[object SVGPathSegCurvetoQuadraticRel]"; } 167 | SVGPathSegCurvetoQuadraticRel.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x1 + " " + this._y1 + " " + this._x + " " + this._y; } 168 | SVGPathSegCurvetoQuadraticRel.prototype.clone = function() { return new SVGPathSegCurvetoQuadraticRel(undefined, this._x, this._y, this._x1, this._y1); } 169 | Object.defineProperty(SVGPathSegCurvetoQuadraticRel.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 170 | Object.defineProperty(SVGPathSegCurvetoQuadraticRel.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 171 | Object.defineProperty(SVGPathSegCurvetoQuadraticRel.prototype, "x1", { get: function() { return this._x1; }, set: function(x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true }); 172 | Object.defineProperty(SVGPathSegCurvetoQuadraticRel.prototype, "y1", { get: function() { return this._y1; }, set: function(y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true }); 173 | 174 | window.SVGPathSegArcAbs = function(owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) { 175 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_ARC_ABS, "A", owningPathSegList); 176 | this._x = x; 177 | this._y = y; 178 | this._r1 = r1; 179 | this._r2 = r2; 180 | this._angle = angle; 181 | this._largeArcFlag = largeArcFlag; 182 | this._sweepFlag = sweepFlag; 183 | } 184 | SVGPathSegArcAbs.prototype = Object.create(SVGPathSeg.prototype); 185 | SVGPathSegArcAbs.prototype.toString = function() { return "[object SVGPathSegArcAbs]"; } 186 | SVGPathSegArcAbs.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._r1 + " " + this._r2 + " " + this._angle + " " + (this._largeArcFlag ? "1" : "0") + " " + (this._sweepFlag ? "1" : "0") + " " + this._x + " " + this._y; } 187 | SVGPathSegArcAbs.prototype.clone = function() { return new SVGPathSegArcAbs(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); } 188 | Object.defineProperty(SVGPathSegArcAbs.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 189 | Object.defineProperty(SVGPathSegArcAbs.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 190 | Object.defineProperty(SVGPathSegArcAbs.prototype, "r1", { get: function() { return this._r1; }, set: function(r1) { this._r1 = r1; this._segmentChanged(); }, enumerable: true }); 191 | Object.defineProperty(SVGPathSegArcAbs.prototype, "r2", { get: function() { return this._r2; }, set: function(r2) { this._r2 = r2; this._segmentChanged(); }, enumerable: true }); 192 | Object.defineProperty(SVGPathSegArcAbs.prototype, "angle", { get: function() { return this._angle; }, set: function(angle) { this._angle = angle; this._segmentChanged(); }, enumerable: true }); 193 | Object.defineProperty(SVGPathSegArcAbs.prototype, "largeArcFlag", { get: function() { return this._largeArcFlag; }, set: function(largeArcFlag) { this._largeArcFlag = largeArcFlag; this._segmentChanged(); }, enumerable: true }); 194 | Object.defineProperty(SVGPathSegArcAbs.prototype, "sweepFlag", { get: function() { return this._sweepFlag; }, set: function(sweepFlag) { this._sweepFlag = sweepFlag; this._segmentChanged(); }, enumerable: true }); 195 | 196 | window.SVGPathSegArcRel = function(owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) { 197 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_ARC_REL, "a", owningPathSegList); 198 | this._x = x; 199 | this._y = y; 200 | this._r1 = r1; 201 | this._r2 = r2; 202 | this._angle = angle; 203 | this._largeArcFlag = largeArcFlag; 204 | this._sweepFlag = sweepFlag; 205 | } 206 | SVGPathSegArcRel.prototype = Object.create(SVGPathSeg.prototype); 207 | SVGPathSegArcRel.prototype.toString = function() { return "[object SVGPathSegArcRel]"; } 208 | SVGPathSegArcRel.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._r1 + " " + this._r2 + " " + this._angle + " " + (this._largeArcFlag ? "1" : "0") + " " + (this._sweepFlag ? "1" : "0") + " " + this._x + " " + this._y; } 209 | SVGPathSegArcRel.prototype.clone = function() { return new SVGPathSegArcRel(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); } 210 | Object.defineProperty(SVGPathSegArcRel.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 211 | Object.defineProperty(SVGPathSegArcRel.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 212 | Object.defineProperty(SVGPathSegArcRel.prototype, "r1", { get: function() { return this._r1; }, set: function(r1) { this._r1 = r1; this._segmentChanged(); }, enumerable: true }); 213 | Object.defineProperty(SVGPathSegArcRel.prototype, "r2", { get: function() { return this._r2; }, set: function(r2) { this._r2 = r2; this._segmentChanged(); }, enumerable: true }); 214 | Object.defineProperty(SVGPathSegArcRel.prototype, "angle", { get: function() { return this._angle; }, set: function(angle) { this._angle = angle; this._segmentChanged(); }, enumerable: true }); 215 | Object.defineProperty(SVGPathSegArcRel.prototype, "largeArcFlag", { get: function() { return this._largeArcFlag; }, set: function(largeArcFlag) { this._largeArcFlag = largeArcFlag; this._segmentChanged(); }, enumerable: true }); 216 | Object.defineProperty(SVGPathSegArcRel.prototype, "sweepFlag", { get: function() { return this._sweepFlag; }, set: function(sweepFlag) { this._sweepFlag = sweepFlag; this._segmentChanged(); }, enumerable: true }); 217 | 218 | window.SVGPathSegLinetoHorizontalAbs = function(owningPathSegList, x) { 219 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS, "H", owningPathSegList); 220 | this._x = x; 221 | } 222 | SVGPathSegLinetoHorizontalAbs.prototype = Object.create(SVGPathSeg.prototype); 223 | SVGPathSegLinetoHorizontalAbs.prototype.toString = function() { return "[object SVGPathSegLinetoHorizontalAbs]"; } 224 | SVGPathSegLinetoHorizontalAbs.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x; } 225 | SVGPathSegLinetoHorizontalAbs.prototype.clone = function() { return new SVGPathSegLinetoHorizontalAbs(undefined, this._x); } 226 | Object.defineProperty(SVGPathSegLinetoHorizontalAbs.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 227 | 228 | window.SVGPathSegLinetoHorizontalRel = function(owningPathSegList, x) { 229 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL, "h", owningPathSegList); 230 | this._x = x; 231 | } 232 | SVGPathSegLinetoHorizontalRel.prototype = Object.create(SVGPathSeg.prototype); 233 | SVGPathSegLinetoHorizontalRel.prototype.toString = function() { return "[object SVGPathSegLinetoHorizontalRel]"; } 234 | SVGPathSegLinetoHorizontalRel.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x; } 235 | SVGPathSegLinetoHorizontalRel.prototype.clone = function() { return new SVGPathSegLinetoHorizontalRel(undefined, this._x); } 236 | Object.defineProperty(SVGPathSegLinetoHorizontalRel.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 237 | 238 | window.SVGPathSegLinetoVerticalAbs = function(owningPathSegList, y) { 239 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS, "V", owningPathSegList); 240 | this._y = y; 241 | } 242 | SVGPathSegLinetoVerticalAbs.prototype = Object.create(SVGPathSeg.prototype); 243 | SVGPathSegLinetoVerticalAbs.prototype.toString = function() { return "[object SVGPathSegLinetoVerticalAbs]"; } 244 | SVGPathSegLinetoVerticalAbs.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._y; } 245 | SVGPathSegLinetoVerticalAbs.prototype.clone = function() { return new SVGPathSegLinetoVerticalAbs(undefined, this._y); } 246 | Object.defineProperty(SVGPathSegLinetoVerticalAbs.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 247 | 248 | window.SVGPathSegLinetoVerticalRel = function(owningPathSegList, y) { 249 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL, "v", owningPathSegList); 250 | this._y = y; 251 | } 252 | SVGPathSegLinetoVerticalRel.prototype = Object.create(SVGPathSeg.prototype); 253 | SVGPathSegLinetoVerticalRel.prototype.toString = function() { return "[object SVGPathSegLinetoVerticalRel]"; } 254 | SVGPathSegLinetoVerticalRel.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._y; } 255 | SVGPathSegLinetoVerticalRel.prototype.clone = function() { return new SVGPathSegLinetoVerticalRel(undefined, this._y); } 256 | Object.defineProperty(SVGPathSegLinetoVerticalRel.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 257 | 258 | window.SVGPathSegCurvetoCubicSmoothAbs = function(owningPathSegList, x, y, x2, y2) { 259 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS, "S", owningPathSegList); 260 | this._x = x; 261 | this._y = y; 262 | this._x2 = x2; 263 | this._y2 = y2; 264 | } 265 | SVGPathSegCurvetoCubicSmoothAbs.prototype = Object.create(SVGPathSeg.prototype); 266 | SVGPathSegCurvetoCubicSmoothAbs.prototype.toString = function() { return "[object SVGPathSegCurvetoCubicSmoothAbs]"; } 267 | SVGPathSegCurvetoCubicSmoothAbs.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x2 + " " + this._y2 + " " + this._x + " " + this._y; } 268 | SVGPathSegCurvetoCubicSmoothAbs.prototype.clone = function() { return new SVGPathSegCurvetoCubicSmoothAbs(undefined, this._x, this._y, this._x2, this._y2); } 269 | Object.defineProperty(SVGPathSegCurvetoCubicSmoothAbs.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 270 | Object.defineProperty(SVGPathSegCurvetoCubicSmoothAbs.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 271 | Object.defineProperty(SVGPathSegCurvetoCubicSmoothAbs.prototype, "x2", { get: function() { return this._x2; }, set: function(x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true }); 272 | Object.defineProperty(SVGPathSegCurvetoCubicSmoothAbs.prototype, "y2", { get: function() { return this._y2; }, set: function(y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true }); 273 | 274 | window.SVGPathSegCurvetoCubicSmoothRel = function(owningPathSegList, x, y, x2, y2) { 275 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL, "s", owningPathSegList); 276 | this._x = x; 277 | this._y = y; 278 | this._x2 = x2; 279 | this._y2 = y2; 280 | } 281 | SVGPathSegCurvetoCubicSmoothRel.prototype = Object.create(SVGPathSeg.prototype); 282 | SVGPathSegCurvetoCubicSmoothRel.prototype.toString = function() { return "[object SVGPathSegCurvetoCubicSmoothRel]"; } 283 | SVGPathSegCurvetoCubicSmoothRel.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x2 + " " + this._y2 + " " + this._x + " " + this._y; } 284 | SVGPathSegCurvetoCubicSmoothRel.prototype.clone = function() { return new SVGPathSegCurvetoCubicSmoothRel(undefined, this._x, this._y, this._x2, this._y2); } 285 | Object.defineProperty(SVGPathSegCurvetoCubicSmoothRel.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 286 | Object.defineProperty(SVGPathSegCurvetoCubicSmoothRel.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 287 | Object.defineProperty(SVGPathSegCurvetoCubicSmoothRel.prototype, "x2", { get: function() { return this._x2; }, set: function(x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true }); 288 | Object.defineProperty(SVGPathSegCurvetoCubicSmoothRel.prototype, "y2", { get: function() { return this._y2; }, set: function(y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true }); 289 | 290 | window.SVGPathSegCurvetoQuadraticSmoothAbs = function(owningPathSegList, x, y) { 291 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS, "T", owningPathSegList); 292 | this._x = x; 293 | this._y = y; 294 | } 295 | SVGPathSegCurvetoQuadraticSmoothAbs.prototype = Object.create(SVGPathSeg.prototype); 296 | SVGPathSegCurvetoQuadraticSmoothAbs.prototype.toString = function() { return "[object SVGPathSegCurvetoQuadraticSmoothAbs]"; } 297 | SVGPathSegCurvetoQuadraticSmoothAbs.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x + " " + this._y; } 298 | SVGPathSegCurvetoQuadraticSmoothAbs.prototype.clone = function() { return new SVGPathSegCurvetoQuadraticSmoothAbs(undefined, this._x, this._y); } 299 | Object.defineProperty(SVGPathSegCurvetoQuadraticSmoothAbs.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 300 | Object.defineProperty(SVGPathSegCurvetoQuadraticSmoothAbs.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 301 | 302 | window.SVGPathSegCurvetoQuadraticSmoothRel = function(owningPathSegList, x, y) { 303 | SVGPathSeg.call(this, SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL, "t", owningPathSegList); 304 | this._x = x; 305 | this._y = y; 306 | } 307 | SVGPathSegCurvetoQuadraticSmoothRel.prototype = Object.create(SVGPathSeg.prototype); 308 | SVGPathSegCurvetoQuadraticSmoothRel.prototype.toString = function() { return "[object SVGPathSegCurvetoQuadraticSmoothRel]"; } 309 | SVGPathSegCurvetoQuadraticSmoothRel.prototype._asPathString = function() { return this.pathSegTypeAsLetter + " " + this._x + " " + this._y; } 310 | SVGPathSegCurvetoQuadraticSmoothRel.prototype.clone = function() { return new SVGPathSegCurvetoQuadraticSmoothRel(undefined, this._x, this._y); } 311 | Object.defineProperty(SVGPathSegCurvetoQuadraticSmoothRel.prototype, "x", { get: function() { return this._x; }, set: function(x) { this._x = x; this._segmentChanged(); }, enumerable: true }); 312 | Object.defineProperty(SVGPathSegCurvetoQuadraticSmoothRel.prototype, "y", { get: function() { return this._y; }, set: function(y) { this._y = y; this._segmentChanged(); }, enumerable: true }); 313 | 314 | // Add createSVGPathSeg* functions to SVGPathElement. 315 | // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathElement. 316 | SVGPathElement.prototype.createSVGPathSegClosePath = function() { return new SVGPathSegClosePath(undefined); } 317 | SVGPathElement.prototype.createSVGPathSegMovetoAbs = function(x, y) { return new SVGPathSegMovetoAbs(undefined, x, y); } 318 | SVGPathElement.prototype.createSVGPathSegMovetoRel = function(x, y) { return new SVGPathSegMovetoRel(undefined, x, y); } 319 | SVGPathElement.prototype.createSVGPathSegLinetoAbs = function(x, y) { return new SVGPathSegLinetoAbs(undefined, x, y); } 320 | SVGPathElement.prototype.createSVGPathSegLinetoRel = function(x, y) { return new SVGPathSegLinetoRel(undefined, x, y); } 321 | SVGPathElement.prototype.createSVGPathSegCurvetoCubicAbs = function(x, y, x1, y1, x2, y2) { return new SVGPathSegCurvetoCubicAbs(undefined, x, y, x1, y1, x2, y2); } 322 | SVGPathElement.prototype.createSVGPathSegCurvetoCubicRel = function(x, y, x1, y1, x2, y2) { return new SVGPathSegCurvetoCubicRel(undefined, x, y, x1, y1, x2, y2); } 323 | SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticAbs = function(x, y, x1, y1) { return new SVGPathSegCurvetoQuadraticAbs(undefined, x, y, x1, y1); } 324 | SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticRel = function(x, y, x1, y1) { return new SVGPathSegCurvetoQuadraticRel(undefined, x, y, x1, y1); } 325 | SVGPathElement.prototype.createSVGPathSegArcAbs = function(x, y, r1, r2, angle, largeArcFlag, sweepFlag) { return new SVGPathSegArcAbs(undefined, x, y, r1, r2, angle, largeArcFlag, sweepFlag); } 326 | SVGPathElement.prototype.createSVGPathSegArcRel = function(x, y, r1, r2, angle, largeArcFlag, sweepFlag) { return new SVGPathSegArcRel(undefined, x, y, r1, r2, angle, largeArcFlag, sweepFlag); } 327 | SVGPathElement.prototype.createSVGPathSegLinetoHorizontalAbs = function(x) { return new SVGPathSegLinetoHorizontalAbs(undefined, x); } 328 | SVGPathElement.prototype.createSVGPathSegLinetoHorizontalRel = function(x) { return new SVGPathSegLinetoHorizontalRel(undefined, x); } 329 | SVGPathElement.prototype.createSVGPathSegLinetoVerticalAbs = function(y) { return new SVGPathSegLinetoVerticalAbs(undefined, y); } 330 | SVGPathElement.prototype.createSVGPathSegLinetoVerticalRel = function(y) { return new SVGPathSegLinetoVerticalRel(undefined, y); } 331 | SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothAbs = function(x, y, x2, y2) { return new SVGPathSegCurvetoCubicSmoothAbs(undefined, x, y, x2, y2); } 332 | SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothRel = function(x, y, x2, y2) { return new SVGPathSegCurvetoCubicSmoothRel(undefined, x, y, x2, y2); } 333 | SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothAbs = function(x, y) { return new SVGPathSegCurvetoQuadraticSmoothAbs(undefined, x, y); } 334 | SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothRel = function(x, y) { return new SVGPathSegCurvetoQuadraticSmoothRel(undefined, x, y); } 335 | } 336 | 337 | if (!("SVGPathSegList" in window)) { 338 | // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList 339 | window.SVGPathSegList = function(pathElement) { 340 | this._pathElement = pathElement; 341 | this._list = this._parsePath(this._pathElement.getAttribute("d")); 342 | 343 | // Use a MutationObserver to catch changes to the path's "d" attribute. 344 | this._mutationObserverConfig = { "attributes": true, "attributeFilter": ["d"] }; 345 | this._pathElementMutationObserver = new MutationObserver(this._updateListFromPathMutations.bind(this)); 346 | this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig); 347 | } 348 | 349 | SVGPathSegList.prototype.classname = "SVGPathSegList"; 350 | 351 | Object.defineProperty(SVGPathSegList.prototype, "numberOfItems", { 352 | get: function() { 353 | this._checkPathSynchronizedToList(); 354 | return this._list.length; 355 | }, 356 | enumerable: true 357 | }); 358 | 359 | // Add the pathSegList accessors to SVGPathElement. 360 | // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGAnimatedPathData 361 | Object.defineProperty(SVGPathElement.prototype, "pathSegList", { 362 | get: function() { 363 | if (!this._pathSegList) 364 | this._pathSegList = new SVGPathSegList(this); 365 | return this._pathSegList; 366 | }, 367 | enumerable: true 368 | }); 369 | // FIXME: The following are not implemented and simply return SVGPathElement.pathSegList. 370 | Object.defineProperty(SVGPathElement.prototype, "normalizedPathSegList", { get: function() { return this.pathSegList; }, enumerable: true }); 371 | Object.defineProperty(SVGPathElement.prototype, "animatedPathSegList", { get: function() { return this.pathSegList; }, enumerable: true }); 372 | Object.defineProperty(SVGPathElement.prototype, "animatedNormalizedPathSegList", { get: function() { return this.pathSegList; }, enumerable: true }); 373 | 374 | // Process any pending mutations to the path element and update the list as needed. 375 | // This should be the first call of all public functions and is needed because 376 | // MutationObservers are not synchronous so we can have pending asynchronous mutations. 377 | SVGPathSegList.prototype._checkPathSynchronizedToList = function() { 378 | this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords()); 379 | } 380 | 381 | SVGPathSegList.prototype._updateListFromPathMutations = function(mutationRecords) { 382 | if (!this._pathElement) 383 | return; 384 | var hasPathMutations = false; 385 | mutationRecords.forEach(function(record) { 386 | if (record.attributeName == "d") 387 | hasPathMutations = true; 388 | }); 389 | if (hasPathMutations) 390 | this._list = this._parsePath(this._pathElement.getAttribute("d")); 391 | } 392 | 393 | // Serialize the list and update the path's 'd' attribute. 394 | SVGPathSegList.prototype._writeListToPath = function() { 395 | this._pathElementMutationObserver.disconnect(); 396 | this._pathElement.setAttribute("d", SVGPathSegList._pathSegArrayAsString(this._list)); 397 | this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig); 398 | } 399 | 400 | // When a path segment changes the list needs to be synchronized back to the path element. 401 | SVGPathSegList.prototype.segmentChanged = function(pathSeg) { 402 | this._writeListToPath(); 403 | } 404 | 405 | SVGPathSegList.prototype.clear = function() { 406 | this._checkPathSynchronizedToList(); 407 | 408 | this._list.forEach(function(pathSeg) { 409 | pathSeg._owningPathSegList = null; 410 | }); 411 | this._list = []; 412 | this._writeListToPath(); 413 | } 414 | 415 | SVGPathSegList.prototype.initialize = function(newItem) { 416 | this._checkPathSynchronizedToList(); 417 | 418 | this._list = [newItem]; 419 | newItem._owningPathSegList = this; 420 | this._writeListToPath(); 421 | return newItem; 422 | } 423 | 424 | SVGPathSegList.prototype._checkValidIndex = function(index) { 425 | if (isNaN(index) || index < 0 || index >= this.numberOfItems) 426 | throw "INDEX_SIZE_ERR"; 427 | } 428 | 429 | SVGPathSegList.prototype.getItem = function(index) { 430 | this._checkPathSynchronizedToList(); 431 | 432 | this._checkValidIndex(index); 433 | return this._list[index]; 434 | } 435 | 436 | SVGPathSegList.prototype.insertItemBefore = function(newItem, index) { 437 | this._checkPathSynchronizedToList(); 438 | 439 | // Spec: If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list. 440 | if (index > this.numberOfItems) 441 | index = this.numberOfItems; 442 | if (newItem._owningPathSegList) { 443 | // SVG2 spec says to make a copy. 444 | newItem = newItem.clone(); 445 | } 446 | this._list.splice(index, 0, newItem); 447 | newItem._owningPathSegList = this; 448 | this._writeListToPath(); 449 | return newItem; 450 | } 451 | 452 | SVGPathSegList.prototype.replaceItem = function(newItem, index) { 453 | this._checkPathSynchronizedToList(); 454 | 455 | if (newItem._owningPathSegList) { 456 | // SVG2 spec says to make a copy. 457 | newItem = newItem.clone(); 458 | } 459 | this._checkValidIndex(index); 460 | this._list[index] = newItem; 461 | newItem._owningPathSegList = this; 462 | this._writeListToPath(); 463 | return newItem; 464 | } 465 | 466 | SVGPathSegList.prototype.removeItem = function(index) { 467 | this._checkPathSynchronizedToList(); 468 | 469 | this._checkValidIndex(index); 470 | var item = this._list[index]; 471 | this._list.splice(index, 1); 472 | this._writeListToPath(); 473 | return item; 474 | } 475 | 476 | SVGPathSegList.prototype.appendItem = function(newItem) { 477 | this._checkPathSynchronizedToList(); 478 | 479 | if (newItem._owningPathSegList) { 480 | // SVG2 spec says to make a copy. 481 | newItem = newItem.clone(); 482 | } 483 | this._list.push(newItem); 484 | newItem._owningPathSegList = this; 485 | // TODO: Optimize this to just append to the existing attribute. 486 | this._writeListToPath(); 487 | return newItem; 488 | } 489 | 490 | SVGPathSegList._pathSegArrayAsString = function(pathSegArray) { 491 | var string = ""; 492 | var first = true; 493 | pathSegArray.forEach(function(pathSeg) { 494 | if (first) { 495 | first = false; 496 | string += pathSeg._asPathString(); 497 | } else { 498 | string += " " + pathSeg._asPathString(); 499 | } 500 | }); 501 | return string; 502 | } 503 | 504 | // This closely follows SVGPathParser::parsePath from Source/core/svg/SVGPathParser.cpp. 505 | SVGPathSegList.prototype._parsePath = function(string) { 506 | if (!string || string.length == 0) 507 | return []; 508 | 509 | var owningPathSegList = this; 510 | 511 | var Builder = function() { 512 | this.pathSegList = []; 513 | } 514 | 515 | Builder.prototype.appendSegment = function(pathSeg) { 516 | this.pathSegList.push(pathSeg); 517 | } 518 | 519 | var Source = function(string) { 520 | this._string = string; 521 | this._currentIndex = 0; 522 | this._endIndex = this._string.length; 523 | this._previousCommand = SVGPathSeg.PATHSEG_UNKNOWN; 524 | 525 | this._skipOptionalSpaces(); 526 | } 527 | 528 | Source.prototype._isCurrentSpace = function() { 529 | var character = this._string[this._currentIndex]; 530 | return character <= " " && (character == " " || character == "\n" || character == "\t" || character == "\r" || character == "\f"); 531 | } 532 | 533 | Source.prototype._skipOptionalSpaces = function() { 534 | while (this._currentIndex < this._endIndex && this._isCurrentSpace()) 535 | this._currentIndex++; 536 | return this._currentIndex < this._endIndex; 537 | } 538 | 539 | Source.prototype._skipOptionalSpacesOrDelimiter = function() { 540 | if (this._currentIndex < this._endIndex && !this._isCurrentSpace() && this._string.charAt(this._currentIndex) != ",") 541 | return false; 542 | if (this._skipOptionalSpaces()) { 543 | if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == ",") { 544 | this._currentIndex++; 545 | this._skipOptionalSpaces(); 546 | } 547 | } 548 | return this._currentIndex < this._endIndex; 549 | } 550 | 551 | Source.prototype.hasMoreData = function() { 552 | return this._currentIndex < this._endIndex; 553 | } 554 | 555 | Source.prototype.peekSegmentType = function() { 556 | var lookahead = this._string[this._currentIndex]; 557 | return this._pathSegTypeFromChar(lookahead); 558 | } 559 | 560 | Source.prototype._pathSegTypeFromChar = function(lookahead) { 561 | switch (lookahead) { 562 | case "Z": 563 | case "z": 564 | return SVGPathSeg.PATHSEG_CLOSEPATH; 565 | case "M": 566 | return SVGPathSeg.PATHSEG_MOVETO_ABS; 567 | case "m": 568 | return SVGPathSeg.PATHSEG_MOVETO_REL; 569 | case "L": 570 | return SVGPathSeg.PATHSEG_LINETO_ABS; 571 | case "l": 572 | return SVGPathSeg.PATHSEG_LINETO_REL; 573 | case "C": 574 | return SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS; 575 | case "c": 576 | return SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL; 577 | case "Q": 578 | return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS; 579 | case "q": 580 | return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL; 581 | case "A": 582 | return SVGPathSeg.PATHSEG_ARC_ABS; 583 | case "a": 584 | return SVGPathSeg.PATHSEG_ARC_REL; 585 | case "H": 586 | return SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS; 587 | case "h": 588 | return SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL; 589 | case "V": 590 | return SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS; 591 | case "v": 592 | return SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL; 593 | case "S": 594 | return SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS; 595 | case "s": 596 | return SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL; 597 | case "T": 598 | return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS; 599 | case "t": 600 | return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL; 601 | default: 602 | return SVGPathSeg.PATHSEG_UNKNOWN; 603 | } 604 | } 605 | 606 | Source.prototype._nextCommandHelper = function(lookahead, previousCommand) { 607 | // Check for remaining coordinates in the current command. 608 | if ((lookahead == "+" || lookahead == "-" || lookahead == "." || (lookahead >= "0" && lookahead <= "9")) && previousCommand != SVGPathSeg.PATHSEG_CLOSEPATH) { 609 | if (previousCommand == SVGPathSeg.PATHSEG_MOVETO_ABS) 610 | return SVGPathSeg.PATHSEG_LINETO_ABS; 611 | if (previousCommand == SVGPathSeg.PATHSEG_MOVETO_REL) 612 | return SVGPathSeg.PATHSEG_LINETO_REL; 613 | return previousCommand; 614 | } 615 | return SVGPathSeg.PATHSEG_UNKNOWN; 616 | } 617 | 618 | Source.prototype.initialCommandIsMoveTo = function() { 619 | // If the path is empty it is still valid, so return true. 620 | if (!this.hasMoreData()) 621 | return true; 622 | var command = this.peekSegmentType(); 623 | // Path must start with moveTo. 624 | return command == SVGPathSeg.PATHSEG_MOVETO_ABS || command == SVGPathSeg.PATHSEG_MOVETO_REL; 625 | } 626 | 627 | // Parse a number from an SVG path. This very closely follows genericParseNumber(...) from Source/core/svg/SVGParserUtilities.cpp. 628 | // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-PathDataBNF 629 | Source.prototype._parseNumber = function() { 630 | var exponent = 0; 631 | var integer = 0; 632 | var frac = 1; 633 | var decimal = 0; 634 | var sign = 1; 635 | var expsign = 1; 636 | 637 | var startIndex = this._currentIndex; 638 | 639 | this._skipOptionalSpaces(); 640 | 641 | // Read the sign. 642 | if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == "+") 643 | this._currentIndex++; 644 | else if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == "-") { 645 | this._currentIndex++; 646 | sign = -1; 647 | } 648 | 649 | if (this._currentIndex == this._endIndex || ((this._string.charAt(this._currentIndex) < "0" || this._string.charAt(this._currentIndex) > "9") && this._string.charAt(this._currentIndex) != ".")) 650 | // The first character of a number must be one of [0-9+-.]. 651 | return undefined; 652 | 653 | // Read the integer part, build right-to-left. 654 | var startIntPartIndex = this._currentIndex; 655 | while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= "0" && this._string.charAt(this._currentIndex) <= "9") 656 | this._currentIndex++; // Advance to first non-digit. 657 | 658 | if (this._currentIndex != startIntPartIndex) { 659 | var scanIntPartIndex = this._currentIndex - 1; 660 | var multiplier = 1; 661 | while (scanIntPartIndex >= startIntPartIndex) { 662 | integer += multiplier * (this._string.charAt(scanIntPartIndex--) - "0"); 663 | multiplier *= 10; 664 | } 665 | } 666 | 667 | // Read the decimals. 668 | if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == ".") { 669 | this._currentIndex++; 670 | 671 | // There must be a least one digit following the . 672 | if (this._currentIndex >= this._endIndex || this._string.charAt(this._currentIndex) < "0" || this._string.charAt(this._currentIndex) > "9") 673 | return undefined; 674 | while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= "0" && this._string.charAt(this._currentIndex) <= "9") 675 | decimal += (this._string.charAt(this._currentIndex++) - "0") * (frac *= 0.1); 676 | } 677 | 678 | // Read the exponent part. 679 | if (this._currentIndex != startIndex && this._currentIndex + 1 < this._endIndex && (this._string.charAt(this._currentIndex) == "e" || this._string.charAt(this._currentIndex) == "E") && (this._string.charAt(this._currentIndex + 1) != "x" && this._string.charAt(this._currentIndex + 1) != "m")) { 680 | this._currentIndex++; 681 | 682 | // Read the sign of the exponent. 683 | if (this._string.charAt(this._currentIndex) == "+") { 684 | this._currentIndex++; 685 | } else if (this._string.charAt(this._currentIndex) == "-") { 686 | this._currentIndex++; 687 | expsign = -1; 688 | } 689 | 690 | // There must be an exponent. 691 | if (this._currentIndex >= this._endIndex || this._string.charAt(this._currentIndex) < "0" || this._string.charAt(this._currentIndex) > "9") 692 | return undefined; 693 | 694 | while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= "0" && this._string.charAt(this._currentIndex) <= "9") { 695 | exponent *= 10; 696 | exponent += (this._string.charAt(this._currentIndex) - "0"); 697 | this._currentIndex++; 698 | } 699 | } 700 | 701 | var number = integer + decimal; 702 | number *= sign; 703 | 704 | if (exponent) 705 | number *= Math.pow(10, expsign * exponent); 706 | 707 | if (startIndex == this._currentIndex) 708 | return undefined; 709 | 710 | this._skipOptionalSpacesOrDelimiter(); 711 | 712 | return number; 713 | } 714 | 715 | Source.prototype._parseArcFlag = function() { 716 | if (this._currentIndex >= this._endIndex) 717 | return undefined; 718 | var flag = false; 719 | var flagChar = this._string.charAt(this._currentIndex++); 720 | if (flagChar == "0") 721 | flag = false; 722 | else if (flagChar == "1") 723 | flag = true; 724 | else 725 | return undefined; 726 | 727 | this._skipOptionalSpacesOrDelimiter(); 728 | return flag; 729 | } 730 | 731 | Source.prototype.parseSegment = function() { 732 | var lookahead = this._string[this._currentIndex]; 733 | var command = this._pathSegTypeFromChar(lookahead); 734 | if (command == SVGPathSeg.PATHSEG_UNKNOWN) { 735 | // Possibly an implicit command. Not allowed if this is the first command. 736 | if (this._previousCommand == SVGPathSeg.PATHSEG_UNKNOWN) 737 | return null; 738 | command = this._nextCommandHelper(lookahead, this._previousCommand); 739 | if (command == SVGPathSeg.PATHSEG_UNKNOWN) 740 | return null; 741 | } else { 742 | this._currentIndex++; 743 | } 744 | 745 | this._previousCommand = command; 746 | 747 | switch (command) { 748 | case SVGPathSeg.PATHSEG_MOVETO_REL: 749 | return new SVGPathSegMovetoRel(owningPathSegList, this._parseNumber(), this._parseNumber()); 750 | case SVGPathSeg.PATHSEG_MOVETO_ABS: 751 | return new SVGPathSegMovetoAbs(owningPathSegList, this._parseNumber(), this._parseNumber()); 752 | case SVGPathSeg.PATHSEG_LINETO_REL: 753 | return new SVGPathSegLinetoRel(owningPathSegList, this._parseNumber(), this._parseNumber()); 754 | case SVGPathSeg.PATHSEG_LINETO_ABS: 755 | return new SVGPathSegLinetoAbs(owningPathSegList, this._parseNumber(), this._parseNumber()); 756 | case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL: 757 | return new SVGPathSegLinetoHorizontalRel(owningPathSegList, this._parseNumber()); 758 | case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS: 759 | return new SVGPathSegLinetoHorizontalAbs(owningPathSegList, this._parseNumber()); 760 | case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL: 761 | return new SVGPathSegLinetoVerticalRel(owningPathSegList, this._parseNumber()); 762 | case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS: 763 | return new SVGPathSegLinetoVerticalAbs(owningPathSegList, this._parseNumber()); 764 | case SVGPathSeg.PATHSEG_CLOSEPATH: 765 | this._skipOptionalSpaces(); 766 | return new SVGPathSegClosePath(owningPathSegList); 767 | case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL: 768 | var points = {x1: this._parseNumber(), y1: this._parseNumber(), x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()}; 769 | return new SVGPathSegCurvetoCubicRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2); 770 | case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS: 771 | var points = {x1: this._parseNumber(), y1: this._parseNumber(), x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()}; 772 | return new SVGPathSegCurvetoCubicAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2); 773 | case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL: 774 | var points = {x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()}; 775 | return new SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, points.x, points.y, points.x2, points.y2); 776 | case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS: 777 | var points = {x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()}; 778 | return new SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, points.x, points.y, points.x2, points.y2); 779 | case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL: 780 | var points = {x1: this._parseNumber(), y1: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()}; 781 | return new SVGPathSegCurvetoQuadraticRel(owningPathSegList, points.x, points.y, points.x1, points.y1); 782 | case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS: 783 | var points = {x1: this._parseNumber(), y1: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()}; 784 | return new SVGPathSegCurvetoQuadraticAbs(owningPathSegList, points.x, points.y, points.x1, points.y1); 785 | case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL: 786 | return new SVGPathSegCurvetoQuadraticSmoothRel(owningPathSegList, this._parseNumber(), this._parseNumber()); 787 | case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS: 788 | return new SVGPathSegCurvetoQuadraticSmoothAbs(owningPathSegList, this._parseNumber(), this._parseNumber()); 789 | case SVGPathSeg.PATHSEG_ARC_REL: 790 | var points = {x1: this._parseNumber(), y1: this._parseNumber(), arcAngle: this._parseNumber(), arcLarge: this._parseArcFlag(), arcSweep: this._parseArcFlag(), x: this._parseNumber(), y: this._parseNumber()}; 791 | return new SVGPathSegArcRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep); 792 | case SVGPathSeg.PATHSEG_ARC_ABS: 793 | var points = {x1: this._parseNumber(), y1: this._parseNumber(), arcAngle: this._parseNumber(), arcLarge: this._parseArcFlag(), arcSweep: this._parseArcFlag(), x: this._parseNumber(), y: this._parseNumber()}; 794 | return new SVGPathSegArcAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep); 795 | default: 796 | throw "Unknown path seg type." 797 | } 798 | } 799 | 800 | var builder = new Builder(); 801 | var source = new Source(string); 802 | 803 | if (!source.initialCommandIsMoveTo()) 804 | return []; 805 | while (source.hasMoreData()) { 806 | var pathSeg = source.parseSegment(); 807 | if (!pathSeg) 808 | return []; 809 | builder.appendSegment(pathSeg); 810 | } 811 | 812 | return builder.pathSegList; 813 | } 814 | } 815 | }()); --------------------------------------------------------------------------------