126 lines
8.8 KiB
JavaScript
126 lines
8.8 KiB
JavaScript
var SvgUtils = require('./svg-utilities');
|
|
|
|
module.exports = {
|
|
enable: function(instance) {
|
|
// Select (and create if necessary) defs
|
|
var defs = instance.svg.querySelector('defs')
|
|
if (!defs) {
|
|
defs = document.createElementNS(SvgUtils.svgNS, 'defs')
|
|
instance.svg.appendChild(defs)
|
|
}
|
|
|
|
// Check for style element, and create it if it doesn't exist
|
|
var styleEl = defs.querySelector('style#svg-pan-zoom-controls-styles');
|
|
if (!styleEl) {
|
|
var style = document.createElementNS(SvgUtils.svgNS, 'style')
|
|
style.setAttribute('id', 'svg-pan-zoom-controls-styles')
|
|
style.setAttribute('type', 'text/css')
|
|
style.textContent = '.svg-pan-zoom-control { cursor: pointer; fill: black; fill-opacity: 0.333; } .svg-pan-zoom-control:hover { fill-opacity: 0.8; } .svg-pan-zoom-control-background { fill: white; fill-opacity: 0.5; } .svg-pan-zoom-control-background { fill-opacity: 0.8; }'
|
|
defs.appendChild(style)
|
|
}
|
|
|
|
// Zoom Group
|
|
var zoomGroup = document.createElementNS(SvgUtils.svgNS, 'g');
|
|
zoomGroup.setAttribute('id', 'svg-pan-zoom-controls');
|
|
zoomGroup.setAttribute('transform', 'translate(' + ( instance.width - 70 ) + ' ' + ( instance.height - 76 ) + ') scale(0.75)');
|
|
zoomGroup.setAttribute('class', 'svg-pan-zoom-control');
|
|
|
|
// Control elements
|
|
zoomGroup.appendChild(this._createZoomIn(instance))
|
|
zoomGroup.appendChild(this._createZoomReset(instance))
|
|
zoomGroup.appendChild(this._createZoomOut(instance))
|
|
|
|
// Finally append created element
|
|
instance.svg.appendChild(zoomGroup)
|
|
|
|
// Cache control instance
|
|
instance.controlIcons = zoomGroup
|
|
}
|
|
|
|
, _createZoomIn: function(instance) {
|
|
var zoomIn = document.createElementNS(SvgUtils.svgNS, 'g');
|
|
zoomIn.setAttribute('id', 'svg-pan-zoom-zoom-in');
|
|
zoomIn.setAttribute('transform', 'translate(30.5 5) scale(0.015)');
|
|
zoomIn.setAttribute('class', 'svg-pan-zoom-control');
|
|
zoomIn.addEventListener('click', function() {instance.getPublicInstance().zoomIn()}, false)
|
|
zoomIn.addEventListener('touchstart', function() {instance.getPublicInstance().zoomIn()}, false)
|
|
|
|
var zoomInBackground = document.createElementNS(SvgUtils.svgNS, 'rect'); // TODO change these background space fillers to rounded rectangles so they look prettier
|
|
zoomInBackground.setAttribute('x', '0');
|
|
zoomInBackground.setAttribute('y', '0');
|
|
zoomInBackground.setAttribute('width', '1500'); // larger than expected because the whole group is transformed to scale down
|
|
zoomInBackground.setAttribute('height', '1400');
|
|
zoomInBackground.setAttribute('class', 'svg-pan-zoom-control-background');
|
|
zoomIn.appendChild(zoomInBackground);
|
|
|
|
var zoomInShape = document.createElementNS(SvgUtils.svgNS, 'path');
|
|
zoomInShape.setAttribute('d', 'M1280 576v128q0 26 -19 45t-45 19h-320v320q0 26 -19 45t-45 19h-128q-26 0 -45 -19t-19 -45v-320h-320q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45 -19h320v-320q0 -26 19 -45t45 -19h128q26 0 45 19t19 45v320h320q26 0 45 19t19 45zM1536 1120v-960 q0 -119 -84.5 -203.5t-203.5 -84.5h-960q-119 0 -203.5 84.5t-84.5 203.5v960q0 119 84.5 203.5t203.5 84.5h960q119 0 203.5 -84.5t84.5 -203.5z');
|
|
zoomInShape.setAttribute('class', 'svg-pan-zoom-control-element');
|
|
zoomIn.appendChild(zoomInShape);
|
|
|
|
return zoomIn
|
|
}
|
|
|
|
, _createZoomReset: function(instance){
|
|
// reset
|
|
var resetPanZoomControl = document.createElementNS(SvgUtils.svgNS, 'g');
|
|
resetPanZoomControl.setAttribute('id', 'svg-pan-zoom-reset-pan-zoom');
|
|
resetPanZoomControl.setAttribute('transform', 'translate(5 35) scale(0.4)');
|
|
resetPanZoomControl.setAttribute('class', 'svg-pan-zoom-control');
|
|
resetPanZoomControl.addEventListener('click', function() {instance.getPublicInstance().reset()}, false);
|
|
resetPanZoomControl.addEventListener('touchstart', function() {instance.getPublicInstance().reset()}, false);
|
|
|
|
var resetPanZoomControlBackground = document.createElementNS(SvgUtils.svgNS, 'rect'); // TODO change these background space fillers to rounded rectangles so they look prettier
|
|
resetPanZoomControlBackground.setAttribute('x', '2');
|
|
resetPanZoomControlBackground.setAttribute('y', '2');
|
|
resetPanZoomControlBackground.setAttribute('width', '182'); // larger than expected because the whole group is transformed to scale down
|
|
resetPanZoomControlBackground.setAttribute('height', '58');
|
|
resetPanZoomControlBackground.setAttribute('class', 'svg-pan-zoom-control-background');
|
|
resetPanZoomControl.appendChild(resetPanZoomControlBackground);
|
|
|
|
var resetPanZoomControlShape1 = document.createElementNS(SvgUtils.svgNS, 'path');
|
|
resetPanZoomControlShape1.setAttribute('d', 'M33.051,20.632c-0.742-0.406-1.854-0.609-3.338-0.609h-7.969v9.281h7.769c1.543,0,2.701-0.188,3.473-0.562c1.365-0.656,2.048-1.953,2.048-3.891C35.032,22.757,34.372,21.351,33.051,20.632z');
|
|
resetPanZoomControlShape1.setAttribute('class', 'svg-pan-zoom-control-element');
|
|
resetPanZoomControl.appendChild(resetPanZoomControlShape1);
|
|
|
|
var resetPanZoomControlShape2 = document.createElementNS(SvgUtils.svgNS, 'path');
|
|
resetPanZoomControlShape2.setAttribute('d', 'M170.231,0.5H15.847C7.102,0.5,0.5,5.708,0.5,11.84v38.861C0.5,56.833,7.102,61.5,15.847,61.5h154.384c8.745,0,15.269-4.667,15.269-10.798V11.84C185.5,5.708,178.976,0.5,170.231,0.5z M42.837,48.569h-7.969c-0.219-0.766-0.375-1.383-0.469-1.852c-0.188-0.969-0.289-1.961-0.305-2.977l-0.047-3.211c-0.03-2.203-0.41-3.672-1.142-4.406c-0.732-0.734-2.103-1.102-4.113-1.102h-7.05v13.547h-7.055V14.022h16.524c2.361,0.047,4.178,0.344,5.45,0.891c1.272,0.547,2.351,1.352,3.234,2.414c0.731,0.875,1.31,1.844,1.737,2.906s0.64,2.273,0.64,3.633c0,1.641-0.414,3.254-1.242,4.84s-2.195,2.707-4.102,3.363c1.594,0.641,2.723,1.551,3.387,2.73s0.996,2.98,0.996,5.402v2.32c0,1.578,0.063,2.648,0.19,3.211c0.19,0.891,0.635,1.547,1.333,1.969V48.569z M75.579,48.569h-26.18V14.022h25.336v6.117H56.454v7.336h16.781v6H56.454v8.883h19.125V48.569z M104.497,46.331c-2.44,2.086-5.887,3.129-10.34,3.129c-4.548,0-8.125-1.027-10.731-3.082s-3.909-4.879-3.909-8.473h6.891c0.224,1.578,0.662,2.758,1.316,3.539c1.196,1.422,3.246,2.133,6.15,2.133c1.739,0,3.151-0.188,4.236-0.562c2.058-0.719,3.087-2.055,3.087-4.008c0-1.141-0.504-2.023-1.512-2.648c-1.008-0.609-2.607-1.148-4.796-1.617l-3.74-0.82c-3.676-0.812-6.201-1.695-7.576-2.648c-2.328-1.594-3.492-4.086-3.492-7.477c0-3.094,1.139-5.664,3.417-7.711s5.623-3.07,10.036-3.07c3.685,0,6.829,0.965,9.431,2.895c2.602,1.93,3.966,4.73,4.093,8.402h-6.938c-0.128-2.078-1.057-3.555-2.787-4.43c-1.154-0.578-2.587-0.867-4.301-0.867c-1.907,0-3.428,0.375-4.565,1.125c-1.138,0.75-1.706,1.797-1.706,3.141c0,1.234,0.561,2.156,1.682,2.766c0.721,0.406,2.25,0.883,4.589,1.43l6.063,1.43c2.657,0.625,4.648,1.461,5.975,2.508c2.059,1.625,3.089,3.977,3.089,7.055C108.157,41.624,106.937,44.245,104.497,46.331z M139.61,48.569h-26.18V14.022h25.336v6.117h-18.281v7.336h16.781v6h-16.781v8.883h19.125V48.569z M170.337,20.14h-10.336v28.43h-7.266V20.14h-10.383v-6.117h27.984V20.14z');
|
|
resetPanZoomControlShape2.setAttribute('class', 'svg-pan-zoom-control-element');
|
|
resetPanZoomControl.appendChild(resetPanZoomControlShape2);
|
|
|
|
return resetPanZoomControl
|
|
}
|
|
|
|
, _createZoomOut: function(instance){
|
|
// zoom out
|
|
var zoomOut = document.createElementNS(SvgUtils.svgNS, 'g');
|
|
zoomOut.setAttribute('id', 'svg-pan-zoom-zoom-out');
|
|
zoomOut.setAttribute('transform', 'translate(30.5 70) scale(0.015)');
|
|
zoomOut.setAttribute('class', 'svg-pan-zoom-control');
|
|
zoomOut.addEventListener('click', function() {instance.getPublicInstance().zoomOut()}, false);
|
|
zoomOut.addEventListener('touchstart', function() {instance.getPublicInstance().zoomOut()}, false);
|
|
|
|
var zoomOutBackground = document.createElementNS(SvgUtils.svgNS, 'rect'); // TODO change these background space fillers to rounded rectangles so they look prettier
|
|
zoomOutBackground.setAttribute('x', '0');
|
|
zoomOutBackground.setAttribute('y', '0');
|
|
zoomOutBackground.setAttribute('width', '1500'); // larger than expected because the whole group is transformed to scale down
|
|
zoomOutBackground.setAttribute('height', '1400');
|
|
zoomOutBackground.setAttribute('class', 'svg-pan-zoom-control-background');
|
|
zoomOut.appendChild(zoomOutBackground);
|
|
|
|
var zoomOutShape = document.createElementNS(SvgUtils.svgNS, 'path');
|
|
zoomOutShape.setAttribute('d', 'M1280 576v128q0 26 -19 45t-45 19h-896q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45 -19h896q26 0 45 19t19 45zM1536 1120v-960q0 -119 -84.5 -203.5t-203.5 -84.5h-960q-119 0 -203.5 84.5t-84.5 203.5v960q0 119 84.5 203.5t203.5 84.5h960q119 0 203.5 -84.5 t84.5 -203.5z');
|
|
zoomOutShape.setAttribute('class', 'svg-pan-zoom-control-element');
|
|
zoomOut.appendChild(zoomOutShape);
|
|
|
|
return zoomOut
|
|
}
|
|
|
|
, disable: function(instance) {
|
|
if (instance.controlIcons) {
|
|
instance.controlIcons.parentNode.removeChild(instance.controlIcons)
|
|
instance.controlIcons = null
|
|
}
|
|
}
|
|
}
|