Merge pull request #68 from leonardortlima/dynamic-fill-stroke-text

Allow to change Stroke and Fill color picker texts.

Author: Peshou

README.md

@@ -83,6 +83,8 @@ In the html file, you can insert the Canvas Whiteboard
                      [redoButtonText]="'Redo'"
                      [redoButtonEnabled]="true"
                      [colorPickerEnabled]="true"
+                     [fillColorPickerText]="'Fill'"
+                     [strokeColorPickerText]="'Stroke'"
                      [saveDataButtonEnabled]="true"
                      [saveDataButtonText]="'Save'"
                      [lineWidth]="5"
@@ -121,6 +123,8 @@ Code:
     redoButtonText: "Redo",
     redoButtonEnabled: true,
     colorPickerEnabled: true,
+    fillColorPickerText: "Fill",
+    strokeColorPickerText: "Stroke",
     saveDataButtonEnabled: true,
     saveDataButtonText: "Save",
     lineWidth: 5,
@@ -238,9 +242,15 @@ and the original colors will be used when redrawing
 ##### `fillColorPickerEnabled: boolean` (default: false)
 This shows/hides the fill color picker. Note: if this field has been to `false`, but the `colorPickerEnabled` field has been to `true`, the color picker will be shown, as per reverse-compat needs.
 
+##### `fillColorPickerText: string` (default: 'Fill')
+Specify the text to add to the fill color picker button. Default is 'Fill' for reverse-compat needs. 
+
 ##### `strokeColorPickerEnabled: boolean` (default: false)
 This shows/hides the stroke color picker. Note: if this field has been to `false`, but the `colorPickerEnabled` field has been set to `true`, the color picker will be shown, as per reverse-compat needs.
 
+##### `strokeColorPickerText: string` (default: 'Stroke')
+Specify the text to add to the stroke color picker button. Default is 'Stroke' for reverse-compat needs.
+
 ##### `lineWidth: number` (default: 2)
 This input controls the drawing pencil size
 

projects/ng2-canvas-whiteboard/src/lib/canvas-whiteboard-options.ts

@@ -22,7 +22,9 @@ export interface CanvasWhiteboardOptions {
   /** @deprecated. Replaced with strokeColorPickerEnabled and fillColorPickerEnabled inputs */
   colorPickerEnabled?: boolean;
   strokeColorPickerEnabled?: boolean;
+  strokeColorPickerText?: string;
   fillColorPickerEnabled?: boolean;
+  fillColorPickerText?: string;
   shouldDownloadDrawing?: boolean;
   startingColor?: string;
   scaleFactor?: number;

projects/ng2-canvas-whiteboard/src/lib/canvas-whiteboard.component.ts

@@ -34,15 +34,15 @@ import { cloneDeep, isEqual } from 'lodash-es';
                                           (onShapeSelected)="selectShape($event)"></canvas-whiteboard-shape-selector>
 
         <canvas-whiteboard-colorpicker *ngIf="colorPickerEnabled || fillColorPickerEnabled"
-                                       [previewText]="'Fill'"
+                                       [previewText]="fillColorPickerText"
                                        [showColorPicker]="showFillColorPicker"
                                        [selectedColor]="fillColor"
                                        (onToggleColorPicker)="toggleFillColorPicker($event)"
                                        (onColorSelected)="changeFillColor($event)">
         </canvas-whiteboard-colorpicker>
 
         <canvas-whiteboard-colorpicker *ngIf="colorPickerEnabled || strokeColorPickerEnabled"
-                                       [previewText]="'Stroke'"
+                                       [previewText]="strokeColorPickerText"
                                        [showColorPicker]="showStrokeColorPicker"
                                        [selectedColor]="strokeColor"
                                        (onToggleColorPicker)="toggleStrokeColorPicker($event)"
@@ -113,6 +113,8 @@ export class CanvasWhiteboardComponent implements OnInit, AfterViewInit, OnChang
   @Input() undoButtonText = '';
   @Input() redoButtonText = '';
   @Input() saveDataButtonText = '';
+  @Input() strokeColorPickerText = 'Stroke';
+  @Input() fillColorPickerText = 'Fill';
   @Input() drawButtonEnabled = true;
   @Input() clearButtonEnabled = true;
   @Input() undoButtonEnabled = false;
@@ -263,6 +265,12 @@ export class CanvasWhiteboardComponent implements OnInit, AfterViewInit, OnChang
       if (!this._isNullOrUndefined(options.saveDataButtonText)) {
         this.saveDataButtonText = options.saveDataButtonText;
       }
+      if (!this._isNullOrUndefined(options.strokeColorPickerText)) {
+        this.strokeColorPickerText = options.strokeColorPickerText;
+      }
+      if (!this._isNullOrUndefined(options.fillColorPickerText)) {
+        this.fillColorPickerText = options.fillColorPickerText;
+      }
       if (!this._isNullOrUndefined(options.drawButtonEnabled)) {
         this.drawButtonEnabled = options.drawButtonEnabled;
       }