-
-
+
+
+
+
+
diff --git a/src/index.vue b/src/index.vue
deleted file mode 100644
index c3fda34..0000000
--- a/src/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-
-
-
-
-
-
-
-
-
-
diff --git a/src/props.js b/src/props.js
index c1812d9..3fdcdfd 100644
--- a/src/props.js
+++ b/src/props.js
@@ -19,6 +19,7 @@ export default {
, onPan: { }
, onUpdatedCTM: { }
, customEventsHandler: { }
- , eventsListenerElement: { }
+ , eventsListenerElement: { },
+ onThumbnailShown: { },
};
diff --git a/src/stories.js b/src/stories.js
index 10a317d..02d5947 100644
--- a/src/stories.js
+++ b/src/stories.js
@@ -14,5 +14,5 @@ const stories = storiesOf('SvgPanZoom', module)
.add('single inline SVG', () => SingleStory)
.add('event', () => Event )
.add( 'layers', () => LayerStory )
-.add( 'thumbnail -- needs to be first story loaded to work', () => ThumbnailStory )
+.add( 'thumbnail', () => ThumbnailStory )
;
diff --git a/src/thumbnail.stories.vue b/src/thumbnail.stories.vue
index 614f3af..fb15d15 100644
--- a/src/thumbnail.stories.vue
+++ b/src/thumbnail.stories.vue
@@ -1,12 +1,10 @@
-
-
+
+
@@ -18,6 +16,9 @@ import RawTiger from './RawTiger.vue';
export default {
components: { SvgPanZoom, RawTiger, SvgPanZoomThumbnail },
+ methods: {
+ honk(){ console.log( "thumbnail was mounted!" ) }
+ },
};
diff --git a/src/thumbnailViewer.js b/src/thumbnailViewer.js
deleted file mode 100644
index 44f0ae2..0000000
--- a/src/thumbnailViewer.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import svgPanZoom from 'svg-pan-zoom';
-
-export default function(options){
-
- var getSVGDocument = function(objectElem){
- var svgDoc = objectElem.contentDocument;
- if(! svgDoc){
- try {
- svgDoc = objectElem.getSVGDocument();
- }
- catch(e) {
- svgDoc = objectElem;
- }
- }
- return svgDoc;
- }
-
- var bindThumbnail = function(main, thumb){
-
- if(! window.main && main){
- window.main = main;
- }
- if(! window.thumb && thumb){
- window.thumb = thumb;
- }
- if(! window.main || ! window.thumb){
- return;
- }
-
- var resizeTimer;
- var interval = 300; //msec
- window.addEventListener('resize', function(event){
- if (resizeTimer !== false) {
- clearTimeout(resizeTimer);
- }
- resizeTimer = setTimeout(function () {
- window.main.resize();
- window.thumb.resize();
- }, interval);
- });
-
- window.main.setOnZoom(function(level){
- window.thumb.updateThumbScope();
- if(options.onZoom){
- options.onZoom(window.main, window.thumb, level);
- }
- });
-
- window.main.setOnPan(function(point){
- window.thumb.updateThumbScope();
- if(options.onPan){
- options.onPan(window.main, window.thumb, point);
- }
- });
-
- var _updateThumbScope = function (main, thumb, scope, line1, line2){
- var mainPanX = main.getPan().x
- , mainPanY = main.getPan().y
- , mainWidth = main.getSizes().width
- , mainHeight = main.getSizes().height
- , mainZoom = main.getSizes().realZoom
- , thumbPanX = thumb.getPan().x
- , thumbPanY = thumb.getPan().y
- , thumbZoom = thumb.getSizes().realZoom;
-
- var thumByMainZoomRatio = thumbZoom / mainZoom;
-
- var scopeX = thumbPanX - mainPanX * thumByMainZoomRatio;
- var scopeY = thumbPanY - mainPanY * thumByMainZoomRatio;
- var scopeWidth = mainWidth * thumByMainZoomRatio;
- var scopeHeight = mainHeight * thumByMainZoomRatio;
-
- scope.setAttribute("x", scopeX + 1);
- scope.setAttribute("y", scopeY + 1);
- scope.setAttribute("width", scopeWidth - 2);
- scope.setAttribute("height", scopeHeight - 2);
- /*
- line1.setAttribute("x1", scopeX + 1);
- line1.setAttribute("y1", scopeY + 1);
- line1.setAttribute("x2", scopeX + 1 + scopeWidth - 2);
- line1.setAttribute("y2", scopeY + 1 + scopeHeight - 2);
- line2.setAttribute("x1", scopeX + 1);
- line2.setAttribute("y1", scopeY + 1 + scopeHeight - 2);
- line2.setAttribute("x2", scopeX + 1 + scopeWidth - 2);
- line2.setAttribute("y2", scopeY + 1);
- */
- };
-
- window.thumb.updateThumbScope = function(){
- var scope = document.getElementById('scope');
- var line1 = document.getElementById('line1');
- var line2 = document.getElementById('line2');
- _updateThumbScope(window.main, window.thumb, scope, line1, line2);
- }
- window.thumb.updateThumbScope();
-
- var _updateMainViewPan = function(clientX, clientY, scopeContainer, main, thumb){
- var dim = scopeContainer.getBoundingClientRect()
- , mainWidth = main.getSizes().width
- , mainHeight = main.getSizes().height
- , mainZoom = main.getSizes().realZoom
- , thumbWidth = thumb.getSizes().width
- , thumbHeight = thumb.getSizes().height
- , thumbZoom = thumb.getSizes().realZoom;
-
- var thumbPanX = clientX - dim.left - thumbWidth / 2;
- var thumbPanY = clientY - dim.top - thumbHeight / 2;
- var mainPanX = - thumbPanX * mainZoom / thumbZoom;
- var mainPanY = - thumbPanY * mainZoom / thumbZoom;
- main.pan({x:mainPanX, y:mainPanY});
- };
-
- var updateMainViewPan = function(evt){
- if(evt.which == 0 && evt.button == 0){
- return false;
- }
- var scopeContainer = document.getElementById('scopeContainer');
- _updateMainViewPan(evt.clientX, evt.clientY, scopeContainer, window.main, window.thumb);
- }
-
- var scopeContainer = document.getElementById('scopeContainer');
- scopeContainer.addEventListener('click', function(evt){
- updateMainViewPan(evt);
- });
-
- scopeContainer.addEventListener('mousemove', function(evt){
- updateMainViewPan(evt);
- });
- };
-
- var mainViewObjectElem = document.getElementById(options.mainViewId);
- console.log(mainViewObjectElem);
- mainViewObjectElem.addEventListener("load", function(){
-
- var mainViewSVGDoc = getSVGDocument(mainViewObjectElem);
- if(options.onMainViewSVGLoaded){
- options.onMainViewSVGLoaded(mainViewSVGDoc);
- }
-
- var beforePan = function(oldPan, newPan){
- var stopHorizontal = false
- , stopVertical = false
- , gutterWidth = 100
- , gutterHeight = 100
- // Computed variables
- , sizes = this.getSizes()
- , leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth
- , rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom)
- , topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight
- , bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom);
- let customPan = {};
- customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x));
- customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y));
- return customPan;
- };
-
- var main = svgPanZoom('#'+options.mainViewId, {
- zoomEnabled: true,
- controlIconsEnabled: true,
- fit: false,
- center: true,
- beforePan: beforePan
- });
-
- bindThumbnail(main, undefined);
- if(options.onMainViewShown){
- options.onMainViewShown(mainViewSVGDoc, main);
- }
-
- }, false);
-
- var thumbViewObjectElem = document.getElementById(options.thumbViewId);
- thumbViewObjectElem.addEventListener("load", function(){
-
- var thumbViewSVGDoc = getSVGDocument(thumbViewObjectElem);
- if(options.onThumbnailSVGLoaded){
- options.onThumbnailSVGLoaded(thumbViewSVGDoc);
- }
-
- var thumb = svgPanZoom('#'+options.thumbViewId, {
- zoomEnabled: false,
- panEnabled: false,
- controlIconsEnabled: false,
- dblClickZoomEnabled: false,
- preventMouseEventsDefault: true,
- });
-
- bindThumbnail(undefined, thumb);
- if(options.onThumbnailShown){
- options.onThumbnailShown(thumbViewSVGDoc, thumb);
- }
-
- }, false);
-
- return main;
-};
-