From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 20 Mar 2023 15:43:12 +0000 (+0100)
Subject: wip #5814 @5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=44112b1dd193e0363626a84c9edde97652009626;p=fluidbook-toolbox.git

wip #5814 @5
---

diff --git a/resources/linkeditor/js/linkeditor.form.js b/resources/linkeditor/js/linkeditor.form.js
index c3be0b692..ef7bb97e5 100644
--- a/resources/linkeditor/js/linkeditor.form.js
+++ b/resources/linkeditor/js/linkeditor.form.js
@@ -73,7 +73,7 @@ LinkeditorForm.prototype = {
     },
 
     saveFormDataInLink: function () {
-
+        var $this = this;
         var form = $("#linkeditor-panel-form form");
         if ($(form).length === 0) {
             return;
@@ -81,27 +81,70 @@ LinkeditorForm.prototype = {
 
         this.maskChangeEvent();
         var link = $(form).data('link');
-        var data = $(form).serializeArray()
+        var data = this.serializeForm($(form));
         var ignore = ['_method', '_referrer', '_token', 'http_referrer'];
         var map = {y: 'top', x: 'left', w: 'width', h: 'height'};
+
         var savedData = {};
+        var changed = false;
         $.each(data, function (k, v) {
-            if (ignore.indexOf(v.name) >= 0) {
+            if (ignore.indexOf(k) >= 0) {
                 return;
             }
-            let key = v.name;
-            if (map[v.name] !== undefined && map[v.name] !== null) {
-                key = map[v.name];
+            let key = k;
+            if (map[k] !== undefined && map[k] !== null) {
+                key = map[k];
+            }
+            let currentValue = $this.normalizeFormValue(key, $(link).attr('fb-' + key));
+            v = $this.normalizeFormValue(key, v);
+
+            if (v !== currentValue) {
+                savedData[key] = v;
+                $(link).attr('fb-' + key, v);
+                changed = true;
             }
-            savedData[key] = v.value;
-            $(link).attr('fb-' + key, v.value);
         });
-        $(link).attr('fb-update', 1);
-        this.linkeditor.links.updateLinkData($(link).attr('fb-origuid'), savedData);
-        this.linkeditor.hasChanged();
+        if (changed) {
+            $(link).attr('fb-update', 1);
+            this.linkeditor.links.updateLinkData($(link).attr('fb-origuid'), savedData);
+            this.linkeditor.hasChanged();
+        }
         this.unmaskChangeEvent();
     },
 
+
+    serializeForm: function (form) {
+        let data = $(form).serializeArray();
+        let res = {};
+        $.each(data, function (k, v) {
+            res[v.name] = v.value;
+        });
+        return res;
+    },
+
+    normalizeFormValue: function (k, value) {
+        if (value === undefined || value === null) {
+            value = '';
+        }
+        var number = ['top', 'left', 'width', 'height', 'rot', 'x', 'y', 'h', 'w'];
+        var bool = ['display_area'];
+        if (number.indexOf(k) >= 0) {
+            value = parseFloat(value);
+            if (isNaN(value)) {
+                value = 0;
+            }
+            value = this.linkeditor.utils.roundDimension(value);
+        } else if (bool.indexOf(k) >= 0) {
+            value = (value === true || value === 'true' || value === "1" || value === 1) ? '1' : '0';
+        }
+
+        value = value.toString()
+        value = value.replace(new RegExp("\r\n", 'g'), "\n");
+        value = value.replace(new RegExp("\r", 'g'), "\n");
+        value = value.replace(new RegExp("\n+", 'g'), "\n");
+        return value;
+    },
+
     focusAndSelectDestinationField: function () {
         var f = $('#linkeditor-panel-form [name="to"]').get(0);
         f.focus();
@@ -159,8 +202,6 @@ LinkeditorForm.prototype = {
             return;
         }
 
-
-        var types = {x: 'dimension', y: 'dimension', w: 'dimension', h: 'dimension', rot: 'dimension'}
         var map = {top: 'y', left: 'x', width: 'w', height: 'h'};
 
         this.maskChangeEvent();
@@ -168,19 +209,9 @@ LinkeditorForm.prototype = {
             if (map[k] !== undefined) {
                 k = map[k];
             }
-            var type = 'string';
-            if (types[k] !== undefined) {
-                type = types[k];
-            }
-            if (type === 'dimension') {
-                v = parseFloat(v);
-                if (isNaN(v)) {
-                    v = 0;
-                }
-                v = Math.round(v * 100000) / 100000;
-            }
+            v = $this.normalizeFormValue(k, v);
             if ($(form).find('[type="checkbox"][name=' + k + ']').length > 0) {
-                $(form).find('[type="checkbox"][name=' + k + ']').prop('checked', v == 1);
+                $(form).find('[type="checkbox"][name=' + k + ']').prop('checked', v === '1');
             } else {
                 $(form).find('[name=' + k + ']').val(v);
             }
diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index 60dea6e08..1577fc4fa 100644
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -424,6 +424,7 @@ LinkEditor.prototype = {
         if (this.mobileFirst || isSpecial || wasSpecialPage) {
             this.zoom.reset();
         }
+        this.undo.updateIconsStates();
         this.loader.preloadPages();
     },
 
diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index fa17ad9c1..b5f0adc2c 100644
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -448,8 +448,9 @@ LinkeditorLinks.prototype = {
     createLinkDrag: function () {
         var link = this.duplicateLinkDrag({width: 0, height: 0});
         $(link).addClass('pendingCreate');
+        this.deselectAllLinks();
+        this.selectLink($(link));
         this.startResizeLink('se');
-        this.linkeditor.form.updateLinkForm();
         this.updateLayers();
     },
 
@@ -695,6 +696,10 @@ LinkeditorLinks.prototype = {
         this.lastSelectedLinkData = this.getLinkData(this.lastSelectedLink);
     },
 
+    roundPos: function (v) {
+
+    },
+
     getLinkData: function (l) {
         var res = {};
         var attributes = $(l).attr();
@@ -796,9 +801,11 @@ LinkeditorLinks.prototype = {
 
         link.origuid = link.uid;
 
+        let $this = this;
+
         let attrs = {};
         $.each(link, function (k, v) {
-            attrs['fb-' + k] = v;
+            attrs['fb-' + k] = $this.linkeditor.form.normalizeFormValue(k, v);
         });
         attrs['fb-ref'] = "editor";
         attrs['fb-update'] = "1";
@@ -865,13 +872,7 @@ LinkeditorLinks.prototype = {
         if (overwriteData !== undefined) {
             $.extend(data, overwriteData);
         }
-        let link = this.addLink(data, false);
-
-        this.deselectAllLinks();
-        this.selectLink($(link));
-        this.linkeditor.form.updateFormData();
-
-        return $(link);
+        return $(this.addLink(data, false));
     },
 
     updateLayers: function () {
@@ -1048,9 +1049,14 @@ LinkeditorLinks.prototype = {
     },
 
     getCurrentState: function () {
-        var data = [];
+        let data = [];
+        let $this = this;
         $(".link:not(.pendingCreate):not([fb-width=0]):not([fb-height=0])").each(function () {
-            data.push(LINKS[$(this).attr('fb-uid')]);
+            let l = {};
+            $.each(LINKS[$(this).attr('fb-uid')], function (k, v) {
+                l[k] = $this.linkeditor.form.normalizeFormValue(k, v);
+            });
+            data.push(l);
         });
         data.sort(function (a, b) {
             return a.toString().localeCompare(b.toString());
diff --git a/resources/linkeditor/js/linkeditor.undo.js b/resources/linkeditor/js/linkeditor.undo.js
index 0e1a4d7e6..ca118f08a 100644
--- a/resources/linkeditor/js/linkeditor.undo.js
+++ b/resources/linkeditor/js/linkeditor.undo.js
@@ -17,6 +17,46 @@ LinkeditorUndo.prototype = {
         }
     },
 
+    _states: function () {
+        let redo = false;
+        let undo = false;
+        let nb = this.states[this.linkeditor.getCurrentPage()].length;
+        let idx = this.indexes[this.linkeditor.getCurrentPage()];
+        if (nb > 1) {
+            if (idx < nb) {
+                redo = true;
+            }
+            if (idx > 1) {
+                undo = true;
+            }
+        }
+        return {redo: redo, undo: undo, index: idx, nb: nb};
+    },
+
+    updateIconsStates: function () {
+        let s = this._states();
+        if (s.redo) {
+            $('[data-icon=redo]').removeClass('disabled');
+        } else {
+            $('[data-icon=redo]').addClass('disabled');
+        }
+
+        if (s.undo) {
+            $('[data-icon=undo]').removeClass('disabled');
+        } else {
+            $('[data-icon=undo]').addClass('disabled');
+        }
+    },
+
+    canRedo: function () {
+        return this._states().redo;
+    },
+
+    canUndo: function () {
+        return this._states().undo;
+    },
+
+
     pushState: function () {
         if (this.ignoreStatesChanges) {
             return;
@@ -32,20 +72,23 @@ LinkeditorUndo.prototype = {
         if (ps == cs) {
             return;
         }
+
         if (index > 0 && index < this.states[this.linkeditor.getCurrentPage()].length) {
             this.states[this.linkeditor.getCurrentPage()] = this.states[this.linkeditor.getCurrentPage()].slice(0, index);
         }
         this.states[this.linkeditor.getCurrentPage()].push(cs);
         this.indexes[this.linkeditor.getCurrentPage()]++;
 
-        console.log('push current index', index, 'states length', this.states[this.linkeditor.getCurrentPage()].length);
+        //console.log('push current index', index, 'states length', this.states[this.linkeditor.getCurrentPage()].length);
+
+        this.updateIconsStates();
     },
 
     undo: function () {
-        let index = this.indexes[this.linkeditor.getCurrentPage()];
-        if (index <= 1) {
+        if (!this.canUndo()) {
             return;
         }
+        let index = this.indexes[this.linkeditor.getCurrentPage()];
         index--;
         let state = this.states[this.linkeditor.getCurrentPage()][index - 1];
         this.ignoreStatesChanges = true;
@@ -56,14 +99,16 @@ LinkeditorUndo.prototype = {
         }, 500);
         this.indexes[this.linkeditor.getCurrentPage()] = index;
 
-        console.log('undo : current index', index, 'states length', this.states[this.linkeditor.getCurrentPage()].length);
+        //console.log('undo : current index', index, 'states length', this.states[this.linkeditor.getCurrentPage()].length);
+
+        this.updateIconsStates();
     },
 
     redo: function () {
-        let index = this.indexes[this.linkeditor.getCurrentPage()];
-        if (index >= this.states[this.linkeditor.getCurrentPage()].length) {
+        if (!this.canRedo()) {
             return;
         }
+        let index = this.indexes[this.linkeditor.getCurrentPage()];
         let state = this.states[this.linkeditor.getCurrentPage()][index];
         this.ignoreStatesChanges = true;
         this.linkeditor.links.setCurrentState(state);
@@ -73,7 +118,9 @@ LinkeditorUndo.prototype = {
         }, 500);
         index++;
         this.indexes[this.linkeditor.getCurrentPage()] = index;
-        console.log('redo : current index', index, 'states length', this.states[this.linkeditor.getCurrentPage()].length);
+        //console.log('redo : current index', index, 'states length', this.states[this.linkeditor.getCurrentPage()].length);
+
+        this.updateIconsStates();
     }
 }
 
diff --git a/resources/linkeditor/js/linkeditor.utils.js b/resources/linkeditor/js/linkeditor.utils.js
index d4324f298..087568218 100644
--- a/resources/linkeditor/js/linkeditor.utils.js
+++ b/resources/linkeditor/js/linkeditor.utils.js
@@ -132,6 +132,10 @@ LinkeditorUtils.prototype = {
             return magnetValue;
         }
     },
+
+    roundDimension: function (v) {
+        return (Math.round(v * 100000) / 100000);
+    }
 };
 
 module.exports = LinkeditorUtils;
diff --git a/resources/linkeditor/style/inc/_toolbar.sass b/resources/linkeditor/style/inc/_toolbar.sass
index 6358431a5..3c7d4f686 100644
--- a/resources/linkeditor/style/inc/_toolbar.sass
+++ b/resources/linkeditor/style/inc/_toolbar.sass
@@ -99,6 +99,16 @@
         @include dark-theme
             color: $toolbar-color-dark
 
+        &.disabled
+            &:hover, &.hover, &.active
+                background-color: transparent
+                @include dark-theme
+                    background-color: transparent
+
+            color: $toolbar-color-disabled
+            @include dark-theme
+                color: $toolbar-color-disabled-dark
+
         &:hover, &.hover, &.active
             background-color: #fff
             @include dark-theme
diff --git a/resources/linkeditor/style/inc/_variables.sass b/resources/linkeditor/style/inc/_variables.sass
index 588d475af..2246963c8 100644
--- a/resources/linkeditor/style/inc/_variables.sass
+++ b/resources/linkeditor/style/inc/_variables.sass
@@ -9,6 +9,9 @@ $toolbar-height: 40px
 $toolbar-color: #5d5d5d
 $toolbar-color-dark: #bbb
 
+$toolbar-color-disabled: #bbb
+$toolbar-color-disabled-dark: #666
+
 $panel-background: #dcdcdc
 
 $color: #5d5d5d