chrisirhc/customshapes.js

## customshapes.js
/* globals d3, angular */
angular.module('myCustomShapes', ['myMod'])

.directive('myTriangle', function () {
  var line = d3.svg.line()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; });

  return {
      restrict: 'E',
      require: '?shapeText',
      compile: compileFn
  };

  function compileFn(tElement, tAttrs, transclude) {

    // Replace this template with the actual shape
    setupShape(tElement, tAttrs);

    return linkFn;
  }

  function linkFn(scope, iElement, iAttrs, shapeTextCtrl) {

    if (!shapeTextCtrl) return;

    // Get position of element
    var x = +iAttrs.x, y = +iAttrs.y;

    shapeTextCtrl.$render = function (d3text, bbox) {
      d3text
        .attr('x', x)
        .attr('y', y+bbox.height)
        .attr('transform', 'rotate(45,' + x + ',' + y + ')');
      iElement
        .attr('d', line(points(x, y, bbox.width / 2)));
    };
  }

  function setupShape(tElement, tAttrs) {
    var parent = d3.select(tElement[0].parentNode);
    var path = parent.append('path')
        .attr('d', line(points(+tAttrs.x, +tAttrs.y, 10)))
        .attr('transform', 'rotate(45,' + tAttrs.x + ',' + tAttrs.y + ')');

    // Replace old template element
    tElement.replaceWith(path[0]);

    // Copy attributes into new element
    angular.forEach(tAttrs.$attr, function (attr, normAttr) {
      path.attr(attr, tAttrs[normAttr]);
    });
  }

  function points(x, y, width) {
      return [
        {x: x, y: y},
        {x: x + width*2, y: y},
        {x: x + width*1, y: y + width*2},
      ];
  }
});

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>ShapeText Widget Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" charset="utf-8"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

    <script src="shapetext.js"></script>
    <script src="customshapes.js"></script>
</head>
<body>

<div ng-app="myApp">
    <input ng-model="model.myText"
           type="text" placeholder="Type here!" />
    <div>
        <svg width="500" height="200">
          <rect shape-text="{{ model.myText }}"
                x="0" y="20"
                fill="lightblue" />
          <circle shape-text="{{ model.myText }}"
                  cx="150" cy="50" r="10" fill="lightgreen" />
          <my-triangle shape-text="{{ model.myText }}"
                       x="50" y="70" fill="beige" />
        </svg>
    </div>
</div>

<script type="text/javascript">
  angular.module('myApp', ['myMod', 'myCustomShapes'])
</script>

</body>
</html>

## shapetext.js
/* globals d3, angular */
angular.module('myMod', [])

.directive('shapeText', function () {

  return {
    controller: shapeTextController,
    link: linkFn
  };

  function shapeTextController() {
    this.$render = angular.noop;
  }

  function linkFn(scope, iElement, iAttrs, ctrl) {
    var d3element = d3.select(iElement[0]);

    // Set up text field
    var d3text = setupTextField(iElement);

    var changeFn = function (val) {
      // Update text
      d3text.text(val);

      // Get bounding box
      var bbox = d3text.node().getBBox();

      // Update sizes
      ctrl.$render(d3text, bbox);
    };

    iAttrs.$observe('shapeText', changeFn);
  }

  function setupTextField(iElement) {

    var d3parent = d3.select(iElement[0].parentNode),
        bbox = iElement[0].getBBox(),

        d3text = d3parent.append('text')
        .attr('font-size', 16)
        .attr('font-family', 'Arial')
        .attr('x', bbox.x)
        .attr('y', bbox.y);

    return d3text;
  }

})

.directive('rect', function () {

  return {
    restrict: 'E',
    require: '?shapeText',
    link: linkFn
  };

  function linkFn(scope, iElement, iAttrs, shapeTextCtrl) {
    if (!shapeTextCtrl) return;

    // Get position of element
    var x = +iAttrs.x, y = +iAttrs.y;

    shapeTextCtrl.$render = function (d3text, bbox) {
      d3text
        .attr('x', x)
        .attr('y', y + bbox.height);
      iElement
        .attr('width', bbox.width)
        .attr('height', bbox.height + 5);
    };
  }

})

.directive('circle', function () {

  return {
    restrict: 'E',
    require: '?shapeText',
    link: linkFn
  };

  function linkFn(scope, iElement, iAttrs, shapeTextCtrl) {

    if (!shapeTextCtrl) return;

    // Get position of element
    var x = +iAttrs.cx, y = +iAttrs.cy;

    shapeTextCtrl.$render = function (d3text, bbox) {
      d3text
        .attr('x', x - bbox.width / 2)
        .attr('y', y + 5);
      iElement
        .attr('r', bbox.width / 2 + 5);
    };
  }

});
	/* globals d3, angular */
	angular.module('myCustomShapes', ['myMod'])

	.directive('myTriangle', function () {
	var line = d3.svg.line()
	.x(function(d) { return d.x; })
	.y(function(d) { return d.y; });

	return {
	restrict: 'E',
	require: '?shapeText',
	compile: compileFn
	};

	function compileFn(tElement, tAttrs, transclude) {

	// Replace this template with the actual shape
	setupShape(tElement, tAttrs);

	return linkFn;
	}

	function linkFn(scope, iElement, iAttrs, shapeTextCtrl) {

	if (!shapeTextCtrl) return;

	// Get position of element
	var x = +iAttrs.x, y = +iAttrs.y;

	shapeTextCtrl.$render = function (d3text, bbox) {
	d3text
	.attr('x', x)
	.attr('y', y+bbox.height)
	.attr('transform', 'rotate(45,' + x + ',' + y + ')');
	iElement
	.attr('d', line(points(x, y, bbox.width / 2)));
	};
	}

	function setupShape(tElement, tAttrs) {
	var parent = d3.select(tElement[0].parentNode);
	var path = parent.append('path')
	.attr('d', line(points(+tAttrs.x, +tAttrs.y, 10)))
	.attr('transform', 'rotate(45,' + tAttrs.x + ',' + tAttrs.y + ')');

	// Replace old template element
	tElement.replaceWith(path[0]);

	// Copy attributes into new element
	angular.forEach(tAttrs.$attr, function (attr, normAttr) {
	path.attr(attr, tAttrs[normAttr]);
	});
	}

	function points(x, y, width) {
	return [
	{x: x, y: y},
	{x: x + width*2, y: y},
	{x: x + width1, y: y + width2},
	];
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>ShapeText Widget Example</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" charset="utf-8"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

	<script src="shapetext.js"></script>
	<script src="customshapes.js"></script>
	</head>
	<body>

	<div ng-app="myApp">
	<input ng-model="model.myText"
	type="text" placeholder="Type here!" />
	<div>
	<svg width="500" height="200">
	<rect shape-text="{{ model.myText }}"
	x="0" y="20"
	fill="lightblue" />
	<circle shape-text="{{ model.myText }}"
	cx="150" cy="50" r="10" fill="lightgreen" />
	<my-triangle shape-text="{{ model.myText }}"
	x="50" y="70" fill="beige" />
	</svg>
	</div>
	</div>

	<script type="text/javascript">
	angular.module('myApp', ['myMod', 'myCustomShapes'])
	</script>

	</body>
	</html>
	/* globals d3, angular */
	angular.module('myMod', [])

	.directive('shapeText', function () {

	return {
	controller: shapeTextController,
	link: linkFn
	};

	function shapeTextController() {
	this.$render = angular.noop;
	}

	function linkFn(scope, iElement, iAttrs, ctrl) {
	var d3element = d3.select(iElement[0]);

	// Set up text field
	var d3text = setupTextField(iElement);

	var changeFn = function (val) {
	// Update text
	d3text.text(val);

	// Get bounding box
	var bbox = d3text.node().getBBox();

	// Update sizes
	ctrl.$render(d3text, bbox);
	};

	iAttrs.$observe('shapeText', changeFn);
	}

	function setupTextField(iElement) {

	var d3parent = d3.select(iElement[0].parentNode),
	bbox = iElement[0].getBBox(),

	d3text = d3parent.append('text')
	.attr('font-size', 16)
	.attr('font-family', 'Arial')
	.attr('x', bbox.x)
	.attr('y', bbox.y);

	return d3text;
	}

	})

	.directive('rect', function () {

	return {
	restrict: 'E',
	require: '?shapeText',
	link: linkFn
	};

	function linkFn(scope, iElement, iAttrs, shapeTextCtrl) {
	if (!shapeTextCtrl) return;

	// Get position of element
	var x = +iAttrs.x, y = +iAttrs.y;

	shapeTextCtrl.$render = function (d3text, bbox) {
	d3text
	.attr('x', x)
	.attr('y', y + bbox.height);
	iElement
	.attr('width', bbox.width)
	.attr('height', bbox.height + 5);
	};
	}

	})

	.directive('circle', function () {

	return {
	restrict: 'E',
	require: '?shapeText',
	link: linkFn
	};

	function linkFn(scope, iElement, iAttrs, shapeTextCtrl) {

	if (!shapeTextCtrl) return;

	// Get position of element
	var x = +iAttrs.cx, y = +iAttrs.cy;

	shapeTextCtrl.$render = function (d3text, bbox) {
	d3text
	.attr('x', x - bbox.width / 2)
	.attr('y', y + 5);
	iElement
	.attr('r', bbox.width / 2 + 5);
	};
	}

	});