1 files changed, 29 insertions, 1 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index e9963bce9..e418a6f3c 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -260,7 +260,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @undoBatch
     @action
     setCaption = () => {
-        SelectionManager.Views().forEach(dv => dv.rootDoc._showCaption = dv.rootDoc._showCaption === undefined ? "caption" : undefined);
+        SelectionManager.Views().forEach(dv => {
+            dv.rootDoc._showCaption = dv.rootDoc._showCaption === undefined ? "caption" : undefined;
+            console.log("caption = " + dv.rootDoc._showCaption);
+        });
     }
 
     @computed
@@ -427,6 +430,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     }
 
     @action @undoBatch
+    changeFitWidth = () => {
+        if (this.selectedDoc) {
+            if (SelectionManager.Views().length) SelectionManager.Views().forEach(dv => dv.rootDoc._fitWidth = !dv.rootDoc._fitWidth);
+            else this.selectedDoc._fitWidth = !this.selectedDoc._fitWidth;
+        }
+    }
+
+    @action @undoBatch
     changeClusters = () => {
         if (this.selectedDoc) {
             if (SelectionManager.Views().length) SelectionManager.Views().forEach(dv => dv.rootDoc._useClusters = !dv.rootDoc._useClusters);
@@ -448,6 +459,20 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         </Tooltip>;
     }
 
+    @computed
+    get fitWidthButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{this.selectedDoc?._fitWidth ? "Stop Fitting Width" : "Fit Width"}</div></>} placement="top">
+            <div>
+                <div className={`propertiesButtons-linkButton-empty toggle-${targetDoc._fitWidth ? "on" : "off"}`} onPointerDown={this.changeFitWidth}>
+                    <FontAwesomeIcon className="documentdecorations-icon" icon="arrows-alt-h" size="lg" />
+                </div>
+                <div className="propertiesButtons-title"> {this.selectedDoc?._fitWidth ? "unfit" : "fit"} </div>
+            </div>
+        </Tooltip>;
+    }
+
     @undoBatch
     @action
     private makeMask = () => {
@@ -521,6 +546,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button" style={{ display: !isFreeForm && !isText ? "none" : "" }}>
                 {this.fitContentButton}
             </div>
+            <div className="propertiesButtons-button">
+                {this.fitWidthButton}
+            </div>
             <div className="propertiesButtons-button" style={{ display: !isInk ? "none" : "" }}>
                 {this.maskButton}
             </div>