JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="text">
    <div style="border:1px solid; height:300px; width:500px; position:relative;  left:100px" id="canvas">
                        <tbox ng-repeat="tb in textBoxes" ng-model="tb">
                        </tbox>
                    </div>
</div>

JavaScript

var appModule = angular.module('text', []);

appModule.controller('textController', function($scope, Canvas) {
	var box = {
		x: '0',
		y: '0',
		height: '100px',
		width: '200px',
		text: 'this is the default text'
	};
	var counterId = 0;

    $scope.isMultiple = function(){
        return Canvas.getFold() == "3";
    }

    $scope.bubbleColors = ["yellow", "green", "light blue"];

	$scope.textBoxes = [];
    $scope.bubbles = [];

	$scope.addNewTextBox = function() {
		console.log("creating new textbox!!!");
		$scope.textBoxes.push({
			x: box.x,
			y: box.y,
			height: box.height,
			width: box.width,
			text: box.text
		});
	};
    $scope.addNewTextBox();
});


appModule.directive('resizable', function($document) {
	return {
		restrict: "A",
		template: '<div ng-style="{top:bb.x, left:bb.y, height:bb.height, width:bb.width}"><span class="scale">s</span></div>',
        require: 'ngModel',

		link: function postLink(scope, element, attrs, ctrl) { //the scope here is the object's scope
            var tbW = 200, tbH = 100;
            
            scope.tb.width = tbW + 'px',
            scope.tb.height = tbH + 'px';

			element.css({
				border: '1px dotted black'
			});


			var width, height;
			element.find('span').bind('mousedown', function(event) {
				console.log('resizing...');
				event.preventDefault();
				var domElement = element[0];
                xxx = domElement;

                var rect = domElement.getBoundingClientRect();
                startX = event.screenX;
                startY = event.screenY;
                console.log(startX + " " + startY);

				$document.bind('mousemove', resize);
				$document.bind('mouseup', mouseup2);
				event.stopPropagation();
			});

			var startX = 0,
			startY = 0,
			x = 0,
			y = 0;

			function resize(event) {
				tbH += event.screenY - startY;
                startY = event.screenY;
				tbW += event.screenX - startX;
                startX = event.screenX;
				scope.$apply(function()...