jointjs-minimap/dist/minimap.min.js

You can quickly build minimap with jointjs-minimap

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).minimap=t()}(this,(function(){"use strict";function e(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function t(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function i(e){var t,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:300;return function(){var n=this,r=arguments;t&&clearTimeout(t),t=setTimeout((function(){e.apply(n,r)}),i)}}function n(e){var t,i,n,r=e.paper,o=e.el,a=e.$,p=a(o).width(),l=a(o).height(),c=r.options.width,s=r.options.height;return c/s>p/l?(i=p,n=s*(t=p/c)):(n=l,i=c*(t=l/s)),{scale:t,width:i,height:n,origin:r.options.origin,paperScale:r.scale()}}function r(e){var t=e.$,i=e.paperViewEl,n=e.paper,r=e.mapNav,o=e.minimapPaper,a=e.scale,p=function(e){var t=e.paper,i=e.paperViewEl,n=e.$,r=t.options,o=r.width,a=r.height,p=n(i)[0],l=p.clientWidth,c=p.clientHeight;return{viewScaleX:l/o>1?1:l/o,viewScaleY:c/a>1?1:c/a}}({$:t,paperViewEl:i,paper:n}),l=p.viewScaleX,c=p.viewScaleY,s=o.options,u=s.width,f=s.height,d={top:t(i).scrollTop()*a,left:t(i).scrollLeft()*a};t(r).width(u*l).height(f*c).css(d)}function o(e){var t=e.paper,i=t.options.width,n=t.options.height,r=t.scale(),o=r.sx,a=r.sy,p=t.translate(),l=p.tx,c=p.ty,s=t.getContentArea(),u=s.x,f=s.y,d=s.height,h=s.width;return u+l<0||f+c<0||(u+h)*o+l>i||(f+d)*a+c>n}return function(a){var p=a.joint,l=a.paper,c=a.graph,s=a.el,u=a.jquery,f=a.paperViewEl,d=a.extra,h=void 0===d?{}:d,m=a.mapViewColor,w=void 0===m?"#1890ff":m,v=u,g=n({paper:l,el:s,$:v}),y=g.scale,O=g.width,b=g.height,j=document.createElement("div"),P=document.createElement("div"),$=document.createElement("div");j.appendChild(P),j.appendChild($),v(s).append(j).css({display:"flex",justifyContent:"center",alignItems:"center"}),v(j).css({position:"relative"}),v($).css({position:"absolute",left:0,right:0,border:"1px solid ".concat(w),cursor:"move",zIndex:10});var E={el:P,model:c,width:O,height:b,interactive:!1},x=new p.dia.Paper(function(i){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?t(r,!0).forEach((function(t){e(i,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(r)):t(r).forEach((function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(r,e))}))}return i}({gridSize:10,drawGrid:!0},h,{},E));x.scale(y),r({$:v,paperViewEl:f,paper:l,mapNav:$,minimapPaper:x,scale:y}),c.on({"change:position":i((function(e){o({paper:l})&&l.fitToContent({padding:40,allowNewOrigin:"any"})}))}),l.on({scale:i((function(e,t,i,r){if(o({paper:l}))l.fitToContent({padding:40,allowNewOrigin:"any"});else{var a=n({paper:l,el:s,$:v}).scale;x.scale(e*a,t*a,i*a,r*a)}})),translate:i((function(e,t){if(o({paper:l}))l.fitToContent({padding:40,allowNewOrigin:"any"});else{var i=n({paper:l,el:s,$:v}),r=i.scale,a=i.origin;x.setOrigin(a.x*r,a.y*r)}})),resize:i((function(e,t){var i=n({paper:l,el:s,$:v}),o=i.scale,a=i.width,p=i.height,c=i.paperScale,u=c.sx,d=c.sy;x.setDimensions(a,p),x.scale(u*o,d*o),r({$:v,paperViewEl:f,paper:l,mapNav:$,minimapPaper:x,scale:o})}))}),v(f).scroll(i((function(e){var t=n({paper:l,el:s,$:v}).scale,i=e.target;v($).css({top:i.scrollTop*t,left:i.scrollLeft*t})}))),v(window).resize(i((function(e){var t=n({paper:l,el:s,$:v}).scale;r({$:v,paperViewEl:f,paper:l,mapNav:$,minimapPaper:x,scale:t})}))),v($).mousedown((function(e){e.preventDefault();var t=e.clientX,i=e.clientY,r=v(this).position().top,o=v(this).position().left;v(document).mousemove((function(e){var a=e.clientY-i+r,p=e.clientX-t+o,c=x.options,u=c.width,d=c.height,h=u-v($).width(),m=d-v($).height();p>h?p=h:p<0&&(p=0),a>m?a=m:a<0&&(a=0),v($).css({top:a,left:p});var w=n({paper:l,el:s,$:v}).scale;v(f).scrollLeft(p/w).scrollTop(a/w)})),v(document).mouseup((function(){v(document).off("mousemove mouseup")}))}))}}));