larsvers/.block

## .block
license: mit
height: 500
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Zoombase

Seperate zoom base from zoom target elements to allow elements to consume all events.
Open console to see mouse events
Made with blockup

  
## dist.css
*{box-sizing:border-box}svg{border:1px solid grey}

## dist.js
!function(n){function t(u){if(o[u])return o[u].exports;var c=o[u]={i:u,l:!1,exports:{}};return n[u].call(c.exports,c,c.exports,t),c.l=!0,c.exports}var o={};t.m=n,t.c=o,t.i=function(n){return n},t.d=function(n,o,u){t.o(n,o)||Object.defineProperty(n,o,{configurable:!1,enumerable:!0,get:u})},t.n=function(n){var o=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(o,"a",o),o},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=0)}([function(module,exports,__webpack_require__){"use strict";eval("\n\nvar width = 800,\n    height = 500;\n\nvar svg = d3.select('body').append('svg').attr('width', width).attr('height', height);\n\nvar zoombase = svg.append('rect').attr('width', '100%').attr('height', '100%').attr('fill', 'aliceblue');\n\nvar g = svg.append('g').attr('transform', 'translate(0,0)');\n\nvar roundThing = g.append('circle').attr('cx', width / 2).attr('cy', height / 2).attr('r', 100).style('fill', 'lightsteelblue');\n\nvar zoom = d3.zoom().on('zoom', zoomed);\n\nzoombase.call(zoom);\n\nfunction zoomed() {\n  var transform = d3.event.transform;\n\n  g.attr('transform', transform.toString());\n}\n\nroundThing.on('mousedown', function () {\n  return console.log('mousedown');\n}).on('mouseup', function () {\n  return console.log('mouseup');\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9zY3JpcHQuanM/OWE5NSJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCB3aWR0aCA9IDgwMCwgaGVpZ2h0ID0gNTAwO1xuXG5jb25zdCBzdmcgPSBkM1xuICAuc2VsZWN0KCdib2R5JylcbiAgLmFwcGVuZCgnc3ZnJylcbiAgLmF0dHIoJ3dpZHRoJywgd2lkdGgpXG4gIC5hdHRyKCdoZWlnaHQnLCBoZWlnaHQpO1xuXG5jb25zdCB6b29tYmFzZSA9IHN2Z1xuICAuYXBwZW5kKCdyZWN0JylcbiAgLmF0dHIoJ3dpZHRoJywgJzEwMCUnKVxuICAuYXR0cignaGVpZ2h0JywgJzEwMCUnKVxuICAuYXR0cignZmlsbCcsICdhbGljZWJsdWUnKTtcblxuY29uc3QgZyA9IHN2Zy5hcHBlbmQoJ2cnKS5hdHRyKCd0cmFuc2Zvcm0nLCBgdHJhbnNsYXRlKDAsMClgKTtcblxuY29uc3Qgcm91bmRUaGluZyA9IGdcbiAgLmFwcGVuZCgnY2lyY2xlJylcbiAgLmF0dHIoJ2N4Jywgd2lkdGggLyAyKVxuICAuYXR0cignY3knLCBoZWlnaHQgLyAyKVxuICAuYXR0cigncicsIDEwMClcbiAgLnN0eWxlKCdmaWxsJywgJ2xpZ2h0c3RlZWxibHVlJyk7XG5cbmNvbnN0IHpvb20gPSBkMy56b29tKCkub24oJ3pvb20nLCB6b29tZWQpO1xuXG56b29tYmFzZS5jYWxsKHpvb20pO1xuXG5mdW5jdGlvbiB6b29tZWQoKSB7XG4gIGNvbnN0IHRyYW5zZm9ybSA9IGQzLmV2ZW50LnRyYW5zZm9ybTtcblxuICBnLmF0dHIoJ3RyYW5zZm9ybScsIHRyYW5zZm9ybS50b1N0cmluZygpKTtcbn1cblxucm91bmRUaGluZ1xuICAub24oJ21vdXNlZG93bicsICgpID0+IGNvbnNvbGUubG9nKCdtb3VzZWRvd24nKSlcbiAgLm9uKCdtb3VzZXVwJywgKCkgPT4gY29uc29sZS5sb2coJ21vdXNldXAnKSk7XG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gc2NyaXB0LmpzIl0sIm1hcHBpbmdzIjoiOztBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFLQTtBQUNBO0FBS0E7QUFDQTtBQUNBO0FBQ0E7QUFNQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUEiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///0\n")}]);

## index.html
<!DOCTYPE html>
<title>blockup</title>
<link href='dist.css' rel='stylesheet' />
<body>
	<script src='https://d3js.org/d3.v5.min.js'></script>
	<script src='dist.js'></script>
</body>

## preview.jpg

      
    Raw
  

              preview.jpg
            
          
## script.js
const width = 800, height = 500;

const svg = d3
  .select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

const zoombase = svg
  .append('rect')
  .attr('width', '100%')
  .attr('height', '100%')
  .attr('fill', 'aliceblue');

const g = svg.append('g').attr('transform', `translate(0,0)`);

const roundThing = g
  .append('circle')
  .attr('cx', width / 2)
  .attr('cy', height / 2)
  .attr('r', 100)
  .style('fill', 'lightsteelblue');

const zoom = d3.zoom().on('zoom', zoomed);

zoombase.call(zoom);

function zoomed() {
  const transform = d3.event.transform;

  g.attr('transform', transform.toString());
}

roundThing
  .on('mousedown', () => console.log('mousedown'))
  .on('mouseup', () => console.log('mouseup'));

## style.styl
*
	box-sizing border-box

svg{
  border: 1px solid grey}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<title>blockup</title>
	<link href='dist.css' rel='stylesheet' />
	<body>
	<script src='https://d3js.org/d3.v5.min.js'></script>
	<script src='dist.js'></script>
	</body>
	const width = 800, height = 500;

	const svg = d3
	.select('body')
	.append('svg')
	.attr('width', width)
	.attr('height', height);

	const zoombase = svg
	.append('rect')
	.attr('width', '100%')
	.attr('height', '100%')
	.attr('fill', 'aliceblue');

	const g = svg.append('g').attr('transform', `translate(0,0)`);

	const roundThing = g
	.append('circle')
	.attr('cx', width / 2)
	.attr('cy', height / 2)
	.attr('r', 100)
	.style('fill', 'lightsteelblue');

	const zoom = d3.zoom().on('zoom', zoomed);

	zoombase.call(zoom);

	function zoomed() {
	const transform = d3.event.transform;

	g.attr('transform', transform.toString());
	}

	roundThing
	.on('mousedown', () => console.log('mousedown'))
	.on('mouseup', () => console.log('mouseup'));