From 20f2d7eda153fdbd36b8a89e3f30659dd422c729 Mon Sep 17 00:00:00 2001
From: Marton Szuts <marton.szuts@epitech.eu>
Date: Wed, 30 Sep 2020 18:34:34 +0200
Subject: [PATCH 1/2] fixed animation issue by not recreating the entire
 stylesheet on every move.

---
 demo/locked.html |  2 +-
 src/gridstack.ts | 11 +++++------
 src/utils.ts     | 37 +++++++++++++++++++++++++++++++++----
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/demo/locked.html b/demo/locked.html
index 92cb4d033..641d27ef6 100644
--- a/demo/locked.html
+++ b/demo/locked.html
@@ -22,7 +22,7 @@ <h1>Locked demo</h1>
   </div>
 
   <script type="text/javascript">
-    let grid = GridStack.init({float: true});
+    let grid = GridStack.init({float: true, animate :true,});
 
     grid.on('added removed change', function(e, items) {
       let str = '';
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 51e171d51..5ab8b0bad 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -1072,13 +1072,12 @@ export class GridStack {
 
   /** @internal */
   private _initStyles(): GridStack {
-    if (this._stylesId) {
-      Utils.removeStylesheet(this._stylesId);
+    if (!this._stylesId) {
+      this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed();
+      // insert style to parent (instead of 'head' by default) to support WebComponent
+      let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
+      this._styles = Utils.createStylesheet(this._stylesId, styleLocation);
     }
-    this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed();
-    // insert style to parent (instead of 'head' by default) to support WebComponent
-    let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
-    this._styles = Utils.createStylesheet(this._stylesId, styleLocation);
     if (this._styles !== null) {
       this._styles._max = 0;
     }
diff --git a/src/utils.ts b/src/utils.ts
index 6910cf402..37f555222 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -106,13 +106,42 @@ export class Utils {
     if (!el || !el.parentNode) return;
     el.parentNode.removeChild(el);
   }
+  static getAllSelectors(sheet: CSSStyleSheet) { 
+    var ret = [];
+    var rules = sheet.cssRules;
+    // console.log(JSON.stringify(rules));
+    for(var i = 0; i < rules.length; i++) {
+      var rule = rules[i];
+      // console.log(JSON.stringify(rules));
+        var index = rule.cssText.indexOf(" {");
+        if(index >0){
+          var sel = rule.cssText.substr(0,index);
+          ret.push(sel);
+        }
+    }
+    return ret;
+}
 
+static hasCSSRule(sheet: CSSStyleSheet, selector: string) { 
+  // console.log("selector :|"+selector+"|");
+    var selectors = Utils.getAllSelectors(sheet);
+    // console.log(JSON.stringify(selectors));
+    for(var i = 0; i < selectors.length; i++) {
+      if(selectors[i] == selector){
+        //console.log("found |"+selectors[i] +"| et |"+ selector+"|");
+        return true;
+      }
+    }
+    return false;
+}
   /** inserts a CSS rule */
   static addCSSRule(sheet: CSSStyleSheet, selector: string, rules: string) {
-    if (typeof sheet.addRule === 'function') {
-      sheet.addRule(selector, rules);
-    } else if (typeof sheet.insertRule === 'function') {
-      sheet.insertRule(`${selector}{${rules}}`);
+    if(!Utils.hasCSSRule(sheet, selector)){
+      if (typeof sheet.addRule === 'function') {
+        sheet.addRule(selector, rules);
+      } else if (typeof sheet.insertRule === 'function') {
+        sheet.insertRule(`${selector}{${rules}}`);
+      }
     }
   }
 

From a82e57a69da635828acd43a859b4a662f0a2fb3b Mon Sep 17 00:00:00 2001
From: Marton Szuts <47113036+marttop@users.noreply.github.com>
Date: Thu, 1 Oct 2020 09:16:55 +0200
Subject: [PATCH 2/2] Update utils.ts

Deleted forgotten commented console logs.
---
 src/utils.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/utils.ts b/src/utils.ts
index 37f555222..8c9e18ef1 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -109,10 +109,8 @@ export class Utils {
   static getAllSelectors(sheet: CSSStyleSheet) { 
     var ret = [];
     var rules = sheet.cssRules;
-    // console.log(JSON.stringify(rules));
     for(var i = 0; i < rules.length; i++) {
       var rule = rules[i];
-      // console.log(JSON.stringify(rules));
         var index = rule.cssText.indexOf(" {");
         if(index >0){
           var sel = rule.cssText.substr(0,index);
@@ -123,12 +121,9 @@ export class Utils {
 }
 
 static hasCSSRule(sheet: CSSStyleSheet, selector: string) { 
-  // console.log("selector :|"+selector+"|");
     var selectors = Utils.getAllSelectors(sheet);
-    // console.log(JSON.stringify(selectors));
     for(var i = 0; i < selectors.length; i++) {
       if(selectors[i] == selector){
-        //console.log("found |"+selectors[i] +"| et |"+ selector+"|");
         return true;
       }
     }