@cocreate/resize 1.1.76 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.2.0](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.1.76...v1.2.0) (2022-06-29)
+
+
+### Bug Fixes
+
+* bug when resizing from corners ([293a478](https://github.com/CoCreate-app/CoCreate-resize/commit/293a47828b662c96cfb4b34bd5f1f7b7e608fa5f))
+
+
+### Features
+
+* if closest element is contentEditable use crdt text functiontions to insert styles resulting from resize ([4e8668e](https://github.com/CoCreate-app/CoCreate-resize/commit/4e8668e23d7fe9502258d676eebc170eb9771995))
+
 ## [1.1.76](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.1.75...v1.1.76) (2022-06-18)
 
 

package/demo/dashboard.html

@@ -188,7 +188,7 @@
 		<main class="padding:10px" content_id="content">
 			<!--<div class="domEditor main-height" name='cards1' collection="test" pass_id="me1234">-->
 
-			<div class="display:grid grid-auto-rows:50px gap:10px grid-template-columns:repeat(auto-fill,minmax(50px,1fr))" dnd-group-name="dashboard" fetch-collection="files" template_id="card" droppable="true">
+			<div class="display:grid grid-auto-rows:50px gap:10px grid-template-columns:repeat(auto-fill,minmax(50px,1fr))" dnd-group-name="dashboard" fetch-collection="files" fetch-count="20" template_id="card" droppable="true">
 
 				<div template_id="card" class="card position:relative template display:flex padding:20px align-items:center grid-column-end:span_6 grid-row-end:span_2" eid="id1" draggable="tru" resizable>
 					<!-- dashboard template-->
@@ -206,8 +206,10 @@
 					<div class="width:120px">
 						<div class="progressbar-circle text-align:center width:100%" progressbar-color="#22CCE2" percent-value="85" percent-note="New Visits"></div>
 					</div>
-					<div resize="right"></div>
-					<div resize="bottom"></div>
+					<div resize="top" dnd-exclude></div>
+					<div resize="bottom" dnd-exclude></div>
+					<div resize="left" dnd-exclude></div>
+					<div resize="right" dnd-exclude></div>
 				</div>
 			</div>
 			
@@ -224,8 +226,8 @@
 		</main>
 		
 
-		<!--<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>-->
-        <script src="../../../CoCreateJS/dist/CoCreate.js"></script>
+		<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
+        <!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
 
 	</body>
 

package/demo/index.html

@@ -25,16 +25,6 @@
             background: #dddddd;
         }
 
-        .resize2 {
-            top: 150px;
-            left: 150px;
-            width: 50px;
-            height: 50px;
-            padding: 0.5em;
-            position: absolute;
-            background: #dddddd;
-        }
-
         .resize3 {
             top: 250px;
             left: 250px;
@@ -44,29 +34,20 @@
             position: absolute;
             background: #dddddd;
         }
-        .resize4 {
-            top: 350px;
-            left: 350px;
-            width: 50px;
-            height: 50px;
-            padding: 0.5em;
-            position: absolute;
-            background: #dddddd;
-        }
     </style>
 </head>
 
 <body>
 
     <!--<div class="">-->
-        <div class="position:fixed height:100vh width:300px right:0px background:whitesmoke" resizable>
+        <!-- <div class="position:fixed height:100vh width:300px right:0px background:whitesmoke" resizable>
             <div resize="left"></div>
             <div resize="right"></div>
             <div resize="top"></div>
             <div resize="bottom"></div>
-        </div>
+        </div> -->
         
-        <div class="resize resize3" resizable>
+        <div class="resize resize1" resizable>
             <div resize="left"></div>
             <div resize="right"></div>
             <div resize="top"></div>
@@ -75,8 +56,8 @@
     <!--</div>-->
 
 
-        <!--<script src="../dist/CoCreate-resize.js"></script>-->
-	    <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
+        <script src="../dist/CoCreate-resize.js"></script>
+	    <!-- <script src="../../../CoCreateJS/dist/CoCreate.js" ></script> -->
 </body>
 
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/resize",
-  "version": "1.1.76",
+  "version": "1.2.0",
   "description": "A light weight resize handler make any element resizable by adding data attributes or usinng init object. Great for Customized text box or text area.",
   "keywords": [
     "resize",

package/src/index.js

@@ -52,8 +52,6 @@ CoCreateResize.prototype = {
             this.isGrid = this.detectGrid();
             this.gridWidth = 0;
             this.gridHeight = 0;
-            // this.missingWidth = 0;
-            // this.missingHeight = 0;
             this.limitSpan = 0;
             this.widthSpan = 0;
             this.heightSpan = 0;
@@ -75,11 +73,9 @@ CoCreateResize.prototype = {
     getGridProperty: function() {
         if(!this.resizeWidget.parentNode) return;
         let compStyles = window.getComputedStyle(this.resizeWidget.parentNode);
-        // let currentCompStyles = window.getComputedStyle(this.resizeWidget);
         let gridColumns = compStyles.gridTemplateColumns;
         let height = compStyles.gridAutoRows;
         
-        // console.log(compStyles)
         if(gridColumns !== 'none') {
             let width = gridColumns.split(' ');
             this.limitSpan = width.length;
@@ -87,12 +83,6 @@ CoCreateResize.prototype = {
             this.gridRowGap = Number.parseInt(compStyles.gridRowGap);
             this.gridWidth = Number.parseFloat(width[0]);
             this.gridHeight = Number.parseInt(height);
-            // this.missingWidth = Number.parseInt(currentCompStyles.paddingRight) + Number.parseInt(currentCompStyles.paddingLeft)
-            //                     + Number.parseInt(currentCompStyles.marginRight) + Number.parseInt(currentCompStyles.marginLeft)
-            //                     + Number.parseInt(currentCompStyles.borderRight) + Number.parseInt(currentCompStyles.borderLeft);
-            // this.missingHeight = Number.parseInt(currentCompStyles.paddingTop) + Number.parseInt(currentCompStyles.paddingBottom)
-            //                     + Number.parseInt(currentCompStyles.marginTop) + Number.parseInt(currentCompStyles.marginBottom)
-            //                     + Number.parseInt(currentCompStyles.borderTop) + Number.parseInt(currentCompStyles.borderBottom);
         }
     },
 
@@ -126,15 +116,29 @@ CoCreateResize.prototype = {
     },
 
     initResize: function() {
-        DIRECTIONS.map(d => { if (this.Drags[d]) this.addListenerMulti(this.Drags[d], EVENTS[0], this.checkCorners[d]); });
+        DIRECTIONS.map(d => { 
+            if (this.Drags[d]) 
+                this.addListenerMulti(this.Drags[d], EVENTS[0], this.checkCorners[d]); 
+            console.log('checkCorner', this.checkCorners[d])
+            console.log('drags', this.Drags[d])
+        });
     },
 
     checkDragImplementation: function(e, from, to, offset, fcur, scur) {
         if (e.touches)
             e = e.touches[0];
-
+        let other;
+        if (to == 'top')
+            other = 'bottom'
+        else if (to == 'bottom')
+            other = 'top'
+        else if (to == 'left')
+            other = 'right'
+        else if (to == 'right')
+            other = 'left'
         this.removeListenerMulti(this.Drags[from], EVENTS[1], this.initDrags[from]);
         this.removeListenerMulti(this.Drags[from], EVENTS[1], this.initDrags[to]);
+        this.removeListenerMulti(this.Drags[from], EVENTS[1], this.initDrags[other]);
         this.addListenerMulti(this.Drags[from], EVENTS[1], this.initDrags[from]);
 
         if (offset < this.cornerSize && this.Drags[to]) {
@@ -147,6 +151,12 @@ CoCreateResize.prototype = {
     },
 
     initDrag: function(e, idx) {
+        e.preventDefault();
+
+        if (!this.resizeWidget.hasAttribute('resizing')){
+            this.resizeWidget.setAttribute('resizing', '')
+        }
+
         let selector = document.defaultView.getComputedStyle(this.resizeWidget);
         this.processIframe();
 
@@ -175,23 +185,28 @@ CoCreateResize.prototype = {
 
     initTopDrag: function(e) {
         this.initDrag(e, 'top');
+        console.log('resize-top')
     },
     initBottomDrag: function(e) {
         this.initDrag(e, 'bottom');
+        console.log('resize-bottom')
     },
     initLeftDrag: function(e) {
         this.initDrag(e, 'left');
+        console.log('resize-left')
+
     },
     initRightDrag: function(e) {
         this.initDrag(e, 'right');
+        console.log('resize-right')
     },
 
     //this is just for grid system
     setRowEnd: function(height) {
         if(this.gridHeight) {
             this.heightSpan = Math.ceil((height - (this.heightSpan - 1) * this.gridRowGap) / this.gridHeight );
-            // this.heightSpan = Math.ceil((height + this.missingHeight) / this.gridHeight);
             this.resizeWidget.style['grid-row-end'] = 'span ' + this.heightSpan;
+            this.collaborate({rowEnd: this.heightSpan})
         }
     },
 
@@ -203,20 +218,19 @@ CoCreateResize.prototype = {
         top = this.startTop + e.clientY - this.startY;
         height = this.startHeight - e.clientY + this.startY;
 
-        if (top < 10 || height < 10)
+        if (height < 10)
             return;
-        // this.resizeWidget.style.top = top + 'px';
-        let compStyles = window.getComputedStyle(this.resizeWidget);
-        this.resizeWidget.style.bottom = compStyles.bottom;
-        this.resizeWidget.style.top = null;
+        if (!this.isGrid) {
+            this.resizeWidget.style.top = top + 'px';
+            this.collaborate({top, height})
+        }
         this.resizeWidget.style.height = height + 'px';
-
         this.setRowEnd(height);
     },
 
 
     doBottomDrag: function(e) {
-        let height = 0;
+        let height;
 
         if (e.touches)
             e = e.touches[0];
@@ -225,10 +239,9 @@ CoCreateResize.prototype = {
 
         if (height < 10)
             return;
-        // this.resizeWidget.style.height = height + 'px';
-        let compStyles = window.getComputedStyle(this.resizeWidget);
-        this.resizeWidget.style.top = compStyles.top;
-        this.resizeWidget.style.bottom = null;
+        if (!this.isGrid)
+            this.collaborate({height})
+    
         this.resizeWidget.style.height = height + 'px';
         this.setRowEnd(height);
     },
@@ -239,6 +252,7 @@ CoCreateResize.prototype = {
             let spans = Math.ceil((width - (this.widthSpan - 1) * this.gridColumnGap) / this.gridWidth);
             this.widthSpan = (spans > this.limitSpan) ? this.limitSpan : spans;
             this.resizeWidget.style['grid-column-end'] = 'span ' + this.widthSpan;
+            this.collaborate({columnEnd: this.widthSpan})
         }
     },
 
@@ -252,30 +266,28 @@ CoCreateResize.prototype = {
 
         if (width < 10)
             return;
-        if (!this.isGrid)
+        if (!this.isGrid) {
             this.resizeWidget.style.left = left + 'px';
-        // let compStyles = window.getComputedStyle(this.resizeWidget);
-        // this.resizeWidget.style.right = compStyles.right;
-        // this.resizeWidget.style.left = null;
-        this.resizeWidget.style.width = width + 'px';
+            this.collaborate({left, width})
+        }
 
+        this.resizeWidget.style.width = width + 'px';
         this.setColumnEnd(width);
     },
 
 
     doRightDrag: function(e) {
-        let width = 0;
+        let width;
         if (e.touches)
             e = e.touches[0];
         width = this.startWidth + e.clientX - this.startX;
         if (width < 10)
             return;
-        
-        let compStyles = window.getComputedStyle(this.resizeWidget);
-        this.resizeWidget.style.left = compStyles.left;
-        this.resizeWidget.style.right = null;
-        this.resizeWidget.style.width = width + 'px';
 
+        if (!this.isGrid)
+            this.collaborate({width})
+    
+        this.resizeWidget.style.width = width + 'px';
         this.setColumnEnd(width);
     },
 
@@ -293,6 +305,9 @@ CoCreateResize.prototype = {
         document.querySelectorAll('iframe').forEach(function(item) {
             item.style.pointerEvents = null;
         });
+        if (this.resizeWidget.hasAttribute('resizing')){
+            this.resizeWidget.removeAttribute('resizing', '')
+        }
 
         //this is just for grid system
         if(this.detectGrid()) {
@@ -308,21 +323,41 @@ CoCreateResize.prototype = {
         DIRECTIONS.map(d => { this.removeListenerMulti(document.documentElement, EVENTS[0], this.doDrags[d]) });
         this.removeListenerMulti(document.documentElement, EVENTS[2], this.stopDrag);
     },
-    checkLeftDragTopCorner: function(e) {
-        const offset = e.clientY - this.getDistance(this.Drags['left'], true) + document.documentElement.scrollTop;
-        this.checkDragImplementation(e, 'left', 'top', offset, 'se-resize', 'e-resize');
+    checkLeftCorners: function(e) {
+        let offset = e.clientY - this.getDistance(this.Drags['left'], true) + document.documentElement.scrollTop;
+        if (offset > 10) {
+            offset = this.getDistance(this.Drags['left'], true) + this.Drags['left'].clientHeight - e.clientY - document.documentElement.scrollTop;
+            this.checkDragImplementation(e, 'left', 'bottom', offset, 'ne-resize', 'e-resize');
+        } else {
+            this.checkDragImplementation(e, 'left', 'top', offset, 'se-resize', 'e-resize');
+        }
     },
-    checkTopDragRightCorner: function(e) {
-        const offset = this.getDistance(this.Drags['right'], false) - e.clientX - document.documentElement.scrollLeft;
-        this.checkDragImplementation(e, 'top', 'right', offset, 'ne-resize', 's-resize');
+    checkTopCorners: function(e) {
+        let offset = e.clientX - this.getDistance(this.Drags['top'], false) + document.documentElement.scrollTop;
+        if (offset > 10) {
+            offset = this.getDistance(this.Drags['top'], false) + this.Drags['top'].clientWidth - e.clientX - document.documentElement.scrollLeft;
+            this.checkDragImplementation(e, 'top', 'right', offset, 'ne-resize', 's-resize');
+        } else {
+            this.checkDragImplementation(e, 'top', 'left', offset, 'se-resize', 's-resize');
+        }
     },
-    checkBottomDragLeftCorner: function(e) {
-        const offset = e.clientX - this.getDistance(this.Drags['bottom'], false) + document.documentElement.scrollLeft;
-        this.checkDragImplementation(e, 'bottom', 'left', offset, 'ne-resize', 's-resize');
+    checkBottomCorners: function(e) {
+        let offset = e.clientX - this.getDistance(this.Drags['bottom'], false) + document.documentElement.scrollTop;
+        if (offset > 10) {
+            offset = this.getDistance(this.Drags['bottom'], false) + this.Drags['bottom'].clientWidth - e.clientX - document.documentElement.scrollLeft;
+            this.checkDragImplementation(e, 'bottom', 'right', offset, 'se-resize', 's-resize');
+        } else {
+            this.checkDragImplementation(e, 'bottom', 'left', offset, 'ne-resize', 's-resize');
+        }
     },
-    checkRightDragBottomCorner: function(e) {
-        const offset = this.getDistance(this.Drags['bottom'], true) - e.clientY - document.documentElement.scrollTop;
-        this.checkDragImplementation(e, 'right', 'bottom', offset, 'se-resize', 'e-resize');
+    checkRightCorners: function(e) {
+        let offset = e.clientY - this.getDistance(this.Drags['right'], true) + document.documentElement.scrollTop;
+        if (offset > 10) {
+            offset = this.getDistance(this.Drags['right'], true) + this.Drags['right'].clientHeight - e.clientY - document.documentElement.scrollTop;
+            this.checkDragImplementation(e, 'right', 'bottom', offset, 'se-resize', 'e-resize');
+        } else {
+            this.checkDragImplementation(e, 'right', 'top', offset, 'ne-resize', 'e-resize');
+        }
     },
 
     bindListeners: function() {
@@ -333,10 +368,10 @@ CoCreateResize.prototype = {
 
         this.stopDrag = this.stopDrag.bind(this);
 
-        this.checkCorners['left'] = this.checkLeftDragTopCorner.bind(this);
-        this.checkCorners['top'] = this.checkTopDragRightCorner.bind(this);
-        this.checkCorners['bottom'] = this.checkBottomDragLeftCorner.bind(this);
-        this.checkCorners['right'] = this.checkRightDragBottomCorner.bind(this);
+        this.checkCorners['left'] = this.checkLeftCorners.bind(this);
+        this.checkCorners['top'] = this.checkTopCorners.bind(this);
+        this.checkCorners['bottom'] = this.checkBottomCorners.bind(this);
+        this.checkCorners['right'] = this.checkRightCorners.bind(this);
 
         this.initDrags['top'] = this.initTopDrag.bind(this);
         this.initDrags['left'] = this.initLeftDrag.bind(this);
@@ -377,6 +412,38 @@ CoCreateResize.prototype = {
         document.querySelectorAll('iframe').forEach(function(item) {
             item.style.pointerEvents = null;
         });
+    },
+
+    collaborate: function({left, top, width, height, rowEnd, columnEnd}) {
+        if (window.CoCreate && window.CoCreate.text) {
+            let domTextEditor = this.resizeWidget.closest('[contenteditable]');
+            if (domTextEditor){
+                if (left)
+                    CoCreate.text.setStyle({ 
+                        domTextEditor, target: this.resizeWidget, property: 'left', value: left + 'px' 
+                    })
+                if (top)
+                    CoCreate.text.setStyle({ 
+                        domTextEditor, target: this.resizeWidget, property: 'top', value: top + 'px' 
+                    })
+                if (width)
+                    CoCreate.text.setStyle({ 
+                        domTextEditor, target: this.resizeWidget, property: 'width', value: width + 'px' 
+                    })
+                if (height)
+                    CoCreate.text.setStyle({ 
+                        domTextEditor, target: this.resizeWidget, property: 'height', value: height + 'px' 
+                    })
+                if (rowEnd)
+                    CoCreate.text.setStyle({ 
+                        domTextEditor, target: this.resizeWidget, property: 'grid-row-end', value: 'span ' + rowEnd 
+                    })
+                if (columnEnd)
+                    CoCreate.text.setStyle({ 
+                        domTextEditor, target: this.resizeWidget, property: 'grid-column-end', value: 'span ' + columnEnd 
+                    })
+            }
+        }
     }
 };