Adding transparency settings for image

ONLYOFFICE · Dec 11, 2024 · 77fc6a2 · 77fc6a2
1 parent ae42027
commit 77fc6a2
Show file tree

Hide file tree

Showing 16 changed files with 437 additions and 1 deletion.
diff --git a/apps/documenteditor/main/app/template/ImageSettings.template b/apps/documenteditor/main/app/template/ImageSettings.template
@@ -37,6 +37,24 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="image-panel-transparent-fill" style="width: 100%;">
+                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
+                <div style="display: inline-block; margin-top: 3px;">
+                    <label id="image-lbl-transparency-start">0</label>
+                    <div id="image-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <label id="image-lbl-transparency-end">100</label>
+                </div>
+                <div id="image-spin-transparency" class="float-right"></div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td colspan=2 class="padding-small">
             <label class="header"><%= scope.textRotation %></label>

diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js
@@ -310,6 +310,37 @@ define([
             this.btnResetCrop.on('click', _.bind(this.onResetCrop, this));
             this.lockedControls.push(this.btnResetCrop);
 
+            this.numTransparency = new Common.UI.MetricSpinner({
+                el: $('#image-spin-transparency'),
+                step: 1,
+                width: 62,
+                value: '100 %',
+                defaultUnit : "%",
+                maxValue: 100,
+                minValue: 0,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big',
+                ariaLabel: this.strTransparency
+            });
+            this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
+            this.numTransparency.on('inputleave', function(){ this.fireEvent('editcomplete', this);});
+            this.lockedControls.push(this.numTransparency);
+
+            this.sldrTransparency = new Common.UI.SingleSlider({
+                el: $('#image-slider-transparency'),
+                width: 75,
+                minValue: 0,
+                maxValue: 100,
+                value: 100
+            });
+            this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
+            this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
+            this.lockedControls.push(this.sldrTransparency);
+
+            this.lblTransparencyStart = $(this.el).find('#image-lbl-transparency-start');
+            this.lblTransparencyEnd = $(this.el).find('#image-lbl-transparency-end');
+
             this.btnSelectImage = new Common.UI.Button({
                 parentEl: $('#image-button-replace'),
                 cls: 'btn-text-menu-default',
@@ -448,13 +479,28 @@ define([
                 this.btnRotate90.setDisabled(value || this._locked);
                 this.btnFlipV.setDisabled(value || this._locked);
                 this.btnFlipH.setDisabled(value || this._locked);
+                this.numTransparency.setDisabled(value || this._locked);
+                this.sldrTransparency.setDisabled(value || this._locked);
 
                 if (this._state.isOleObject) {
                     var plugin = DE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
                     this.btnEditObject.setDisabled(!this.api.asc_canEditTableOleObject() && (plugin===null || plugin ===undefined) || this._locked);
                 } else {
                     this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
                 }
+
+                var transparency = props.asc_getTransparent();
+                if (Math.abs(this._state.Transparency - transparency) > 0.001 || 
+                    Math.abs(this.numTransparency.getNumberValue() - transparency) > 0.001 || 
+                    (this._state.Transparency === null || transparency === null) && 
+                    (this._state.Transparency !== transparency || this.numTransparency.getNumberValue() !== transparency)) {
+
+                    if (transparency !== undefined) {
+                        this.sldrTransparency.setValue((transparency === null) ? 100 : transparency / 255 * 100, true);
+                        this.numTransparency.setValue(this.sldrTransparency.getValue(), true);
+                    }
+                    this._state.Transparency = transparency;
+                }
             }
         },
 
@@ -692,6 +738,46 @@ define([
             }
         },
 
+        onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
+            this.sldrTransparency.setValue(field.getNumberValue(), true);
+            if (this.api)  {
+                var num = field.getNumberValue();
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(num * 2.55); 
+                this.api.ImgApply(properties);
+            }
+        },
+
+        onTransparencyChange: function(field, newValue, oldValue){
+            this._sliderChanged = newValue;
+            this.numTransparency.setValue(newValue, true);
+
+            if (this._sendUndoPoint) {
+                this.api.setStartPointHistory();
+                this._sendUndoPoint = false;
+                this.updateslider = setInterval(_.bind(this._transparencyApplyFunc, this), 100);
+            }
+        },
+
+        onTransparencyChangeComplete: function(field, newValue, oldValue){
+            clearInterval(this.updateslider);
+            this._sliderChanged = newValue;
+            if (!this._sendUndoPoint) { 
+                this.api.setEndPointHistory();
+                this._transparencyApplyFunc();
+            }
+            this._sendUndoPoint = true;
+        },
+
+         _transparencyApplyFunc: function() {
+            if (this._sliderChanged!==undefined) {
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(this._sliderChanged * 2.55);
+                this.api.ImgApply(properties);
+                this._sliderChanged = undefined;
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },

diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
@@ -2534,6 +2534,7 @@
   "DE.Views.ImageSettings.txtThrough": "Through",
   "DE.Views.ImageSettings.txtTight": "Tight",
   "DE.Views.ImageSettings.txtTopAndBottom": "Top and bottom",
+  "DE.Views.ImageSettings.strTransparency": "Opacity",
   "DE.Views.ImageSettingsAdvanced.strMargins": "Text padding",
   "DE.Views.ImageSettingsAdvanced.textAbsoluteWH": "Absolute",
   "DE.Views.ImageSettingsAdvanced.textAlignment": "Alignment",

diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -136,6 +136,10 @@
         #image-button-90, #image-button-flipv {
             display: inline-block;
         }
+
+        #image-spin-transparency {
+            display: inline-block;
+        }
     }
 
     &#id-header-settings {

diff --git a/apps/pdfeditor/main/app/template/ImageSettings.template b/apps/pdfeditor/main/app/template/ImageSettings.template
@@ -37,6 +37,24 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="image-panel-transparent-fill" style="width: 100%;">
+                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
+                <div style="display: inline-block; margin-top: 3px;">
+                    <label id="image-lbl-transparency-start">0</label>
+                    <div id="image-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <label id="image-lbl-transparency-end">100</label>
+                </div>
+                <div id="image-spin-transparency" class="float-right"></div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td colspan=2 class="padding-small">
             <label class="header"><%= scope.textRotation %></label>

diff --git a/apps/pdfeditor/main/app/view/ImageSettings.js b/apps/pdfeditor/main/app/view/ImageSettings.js
@@ -231,6 +231,37 @@ define([
             this.btnResetCrop.on('click', _.bind(this.onResetCrop, this));
             this.lockedControls.push(this.btnResetCrop);
 
+            this.numTransparency = new Common.UI.MetricSpinner({
+                el: $('#image-spin-transparency'),
+                step: 1,
+                width: 62,
+                value: '100 %',
+                defaultUnit : "%",
+                maxValue: 100,
+                minValue: 0,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big',
+                ariaLabel: this.strTransparency
+            });
+            this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
+            this.numTransparency.on('inputleave', function(){ this.fireEvent('editcomplete', this);});
+            this.lockedControls.push(this.numTransparency);
+
+            this.sldrTransparency = new Common.UI.SingleSlider({
+                el: $('#image-slider-transparency'),
+                width: 75,
+                minValue: 0,
+                maxValue: 100,
+                value: 100
+            });
+            this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
+            this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
+            this.lockedControls.push(this.sldrTransparency);
+
+            this.lblTransparencyStart = $(this.el).find('#image-lbl-transparency-start');
+            this.lblTransparencyEnd = $(this.el).find('#image-lbl-transparency-end');
+
             this.btnRotate270 = new Common.UI.Button({
                 parentEl: $('#image-button-270', this.$el),
                 cls: 'btn-toolbar',
@@ -371,13 +402,28 @@ define([
                 this.btnRotate90.setDisabled(value || this._locked);
                 this.btnFlipV.setDisabled(value || this._locked);
                 this.btnFlipH.setDisabled(value || this._locked);
+                this.numTransparency.setDisabled(value || this._locked);
+                this.sldrTransparency.setDisabled(value || this._locked);
 
                 if (this._state.isOleObject) {
                     var plugin = PDFE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
                     this.btnEditObject.setDisabled(!this.api.asc_canEditTableOleObject() && (plugin===null || plugin ===undefined) || this._locked);
                 } else {
                     this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
                 }
+
+                var transparency = props.asc_getTransparent();
+                if (Math.abs(this._state.Transparency - transparency) > 0.001 || 
+                    Math.abs(this.numTransparency.getNumberValue() - transparency) > 0.001 || 
+                    (this._state.Transparency === null || transparency === null) && 
+                    (this._state.Transparency !== transparency || this.numTransparency.getNumberValue() !== transparency)) {
+
+                    if (transparency !== undefined) {
+                        this.sldrTransparency.setValue((transparency === null) ? 100 : transparency / 255 * 100, true);
+                        this.numTransparency.setValue(this.sldrTransparency.getValue(), true);
+                    }
+                    this._state.Transparency = transparency;
+                }
             }
         },
 
@@ -538,6 +584,46 @@ define([
             }
         },
 
+        onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
+            this.sldrTransparency.setValue(field.getNumberValue(), true);
+            if (this.api)  {
+                var num = field.getNumberValue();
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(num * 2.55); 
+                this.api.ImgApply(properties)
+            }
+        },
+
+        onTransparencyChange: function(field, newValue, oldValue){
+            this._sliderChanged = newValue;
+            this.numTransparency.setValue(newValue, true);
+
+            if (this._sendUndoPoint) {
+                this.api.setStartPointHistory();
+                this._sendUndoPoint = false;
+                this.updateslider = setInterval(_.bind(this._transparencyApplyFunc, this), 100);
+            }
+        },
+
+        onTransparencyChangeComplete: function(field, newValue, oldValue){
+            clearInterval(this.updateslider);
+            this._sliderChanged = newValue;
+            if (!this._sendUndoPoint) { 
+                this.api.setEndPointHistory();
+                this._transparencyApplyFunc();
+            }
+            this._sendUndoPoint = true;
+        },
+
+         _transparencyApplyFunc: function() {
+            if (this._sliderChanged!==undefined) {
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(this._sliderChanged * 2.55);
+                this.api.ImgApply(properties)
+                this._sliderChanged = undefined;
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },

diff --git a/apps/pdfeditor/main/locale/en.json b/apps/pdfeditor/main/locale/en.json
@@ -1411,6 +1411,7 @@
   "PDFE.Views.ImageSettings.textRotation": "Rotation",
   "PDFE.Views.ImageSettings.textSize": "Size",
   "PDFE.Views.ImageSettings.textWidth": "Width",
+  "PDFE.Views.ImageSettings.strTransparency": "Opacity",
   "PDFE.Views.ImageSettingsAdvanced.textAlt": "Alternative text",
   "PDFE.Views.ImageSettingsAdvanced.textAltDescription": "Description",
   "PDFE.Views.ImageSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, shape, chart, or table.",

diff --git a/apps/pdfeditor/main/resources/less/rightmenu.less b/apps/pdfeditor/main/resources/less/rightmenu.less
@@ -51,6 +51,10 @@
         #image-button-90, #image-button-flipv {
             display: inline-block;
         }
+
+        #image-spin-transparency {
+            display: inline-block;
+        }
     }
 
     &#id-table-settings {

diff --git a/apps/presentationeditor/main/app/template/ImageSettings.template b/apps/presentationeditor/main/app/template/ImageSettings.template
@@ -37,6 +37,24 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="image-panel-transparent-fill" style="width: 100%;">
+                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
+                <div style="display: inline-block; margin-top: 3px;">
+                    <label id="image-lbl-transparency-start">0</label>
+                    <div id="image-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <label id="image-lbl-transparency-end">100</label>
+                </div>
+                <div id="image-spin-transparency" class="float-right"></div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td colspan=2 class="padding-small">
             <label class="header"><%= scope.textRotation %></label>