Skip to content
This repository was archived by the owner on Oct 28, 2024. It is now read-only.

Commit bda6227

Browse files
PeshouPeshou
committed
Merge branch 'hotfix/66_remove_fill_unregister_shapes' into ng-non-cli
* hotfix/66_remove_fill_unregister_shapes: #66 Add inputs for separate color picker disabling, export all Shapes
2 parents d8860d7 + 21f5ed2 commit bda6227

16 files changed

+333
-109
lines changed

‎README.md

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33

44
## Canvas version changes
5+
#### v3.1.2, v4.0.1
6+
Exports all existing canvas shapes, so that they can be easily unregistered from the canvas. (see README for unregistering the shapes).
7+
8+
Also, this version introduces two new Inputs, `strokeColorPickerEnabled: boolean` and `fillColorPickerEnabled: boolean`, also deprecates the `colorPickerEnabled` Input.
9+
10+
For the sake of reverse-compat, the `colorPickerEnabled` input is still there and it will be used in combination with the two new variables. (ex: `colorPickerEnabled || fillColorPickerEnabled`).
11+
512
#### v3.1.1 Audits the npm packages and upgrades the lodash version from 4.17.11 to 4.17.13
613

714
#### v3.1.0 Merges the pull request from https://github.com/webfactorymk/ng2-canvas-whiteboard/pull/55 to allow the component to be used in Angular 8 and 9 applications. Also fixes the imports for rxjs items from 'rxjs/index' to 'rxjs'
@@ -191,9 +198,21 @@ Changes to this object will be detected by the canvas in the OnChange listener a
191198
</canvas-whiteboard>
192199
```
193200
201+
NOTE: In order for the changeDetection to pick up the options changes, you must change the options reference whenever you want to change a value.
202+
Example:
203+
```typescript
204+
public changeOptions(): void {
205+
this.canvasOptions = {
206+
...this.canvasOptions,
207+
fillColorPickerEnabled: true,
208+
colorPickerEnabled: false
209+
};
210+
}
211+
```
212+
194213
### To add text to the buttons via css
195214
Each button has its on class (example: Draw button -> .canvas_whiteboard_button-draw)<br/>
196-
This button can be customized by overriding it's css
215+
This button can be customized by overriding its css
197216
```css
198217
.canvas_whiteboard_button-draw:before {
199218
content: "Draw";
@@ -211,9 +230,17 @@ If using component-only styles, for this to work the viewEncapsulation must be s
211230
})
212231
```
213232
214-
##### `colorPickerEnabled: boolean` (default: false)
233+
You can also use the `::ng-deep` selector if you do not want to change the ViewEncapsulation property on the component.
234+
235+
##### Deprecated: `colorPickerEnabled: boolean` (default: false)
215236
This allows the adding of a colorPickers that the user can choose to draw with (stroke and fill color),
216-
and the original colors are kept when redrawing
237+
and the original colors will be used when redrawing
238+
239+
##### `fillColorPickerEnabled: boolean` (default: false)
240+
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.
241+
242+
##### `strokeColorPickerEnabled: boolean` (default: false)
243+
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.
217244
218245
##### `lineWidth: number` (default: 2)
219246
This input controls the drawing pencil size
@@ -355,6 +382,25 @@ export class RandomShape extends CanvasWhiteboardShape {
355382
}
356383
}
357384
```
385+
386+
## Unregistering Shapes
387+
388+
The default shapes can also be unregistered. Example:
389+
```typescript
390+
@Component({
391+
selector: 'app-root',
392+
templateUrl: './app.component.html',
393+
styleUrls: ['./app.component.css']
394+
})
395+
export class AppComponent {
396+
constructor(private canvasWhiteboardShapeService: CanvasWhiteboardShapeService) {
397+
this.canvasWhiteboardShapeService.unregisterShapes([CircleShape, SmileyShape, StarShape]);
398+
}
399+
}
400+
```
401+
402+
NOTE: There must be at least one shape registered for the canvas to work, but for the sake of convenience, all of the default shapes have been exported (maybe someone would want to unregister all of them and register his own shapes), but it is recommended not to unregister the FreeHandShape.
403+
358404
# Canvas Whiteboard Shape Selector
359405
The `CanvasWhiteboardComponent` is now equipped with a shape selector (since the free hand drawing is now a shape because of consistency),
360406
The shape selector can be managed or hidden with inputs, and it basically calls the `CanvasWhiteboardShapeService` and draws all the

‎dist/README.md

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,18 @@
22

33

44
## Canvas version changes
5-
#### v3.0.4 Fixes a bug with production build and recognition of shape names by adding an abstract method in the base Shape class.
5+
#### v3.1.2, v4.0.1
6+
Exports all existing canvas shapes, so that they can be easily unregistered from the canvas. (see README for unregistering the shapes).
7+
8+
Also, this version introduces two new Inputs, `strokeColorPickerEnabled: boolean` and `fillColorPickerEnabled: boolean`, also deprecates the `colorPickerEnabled` Input.
9+
10+
For the sake of reverse-compat, the `colorPickerEnabled` input is still there and it will be used in combination with the two new variables. (ex: `colorPickerEnabled || fillColorPickerEnabled`).
11+
12+
#### v3.1.1 Audits the npm packages and upgrades the lodash version from 4.17.11 to 4.17.13
613

14+
#### v3.1.0 Merges the pull request from https://github.com/webfactorymk/ng2-canvas-whiteboard/pull/55 to allow the component to be used in Angular 8 and 9 applications. Also fixes the imports for rxjs items from 'rxjs/index' to 'rxjs'
15+
16+
#### v3.0.4 Fixes a bug with production build and recognition of shape names by adding an abstract method in the base Shape class.
717

818
#### v3.0.0 Removes the `rxjs-compat` library and adds `rxjs^6`. This means that older versions will not be supported if they upgrade to `ng2-canvas-whiteboard^3.0.0`.
919
#### *This version also changes the way of how this library is built and made ready for publish.*
@@ -188,9 +198,21 @@ Changes to this object will be detected by the canvas in the OnChange listener a
188198
</canvas-whiteboard>
189199
```
190200
201+
NOTE: In order for the changeDetection to pick up the options changes, you must change the options reference whenever you want to change a value.
202+
Example:
203+
```typescript
204+
public changeOptions(): void {
205+
this.canvasOptions = {
206+
...this.canvasOptions,
207+
fillColorPickerEnabled: true,
208+
colorPickerEnabled: false
209+
};
210+
}
211+
```
212+
191213
### To add text to the buttons via css
192214
Each button has its on class (example: Draw button -> .canvas_whiteboard_button-draw)<br/>
193-
This button can be customized by overriding it's css
215+
This button can be customized by overriding its css
194216
```css
195217
.canvas_whiteboard_button-draw:before {
196218
content: "Draw";
@@ -208,9 +230,17 @@ If using component-only styles, for this to work the viewEncapsulation must be s
208230
})
209231
```
210232
211-
##### `colorPickerEnabled: boolean` (default: false)
233+
You can also use the `::ng-deep` selector if you do not want to change the ViewEncapsulation property on the component.
234+
235+
##### Deprecated: `colorPickerEnabled: boolean` (default: false)
212236
This allows the adding of a colorPickers that the user can choose to draw with (stroke and fill color),
213-
and the original colors are kept when redrawing
237+
and the original colors will be used when redrawing
238+
239+
##### `fillColorPickerEnabled: boolean` (default: false)
240+
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.
241+
242+
##### `strokeColorPickerEnabled: boolean` (default: false)
243+
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.
214244
215245
##### `lineWidth: number` (default: 2)
216246
This input controls the drawing pencil size
@@ -352,6 +382,25 @@ export class RandomShape extends CanvasWhiteboardShape {
352382
}
353383
}
354384
```
385+
386+
## Unregistering Shapes
387+
388+
The default shapes can also be unregistered. Example:
389+
```typescript
390+
@Component({
391+
selector: 'app-root',
392+
templateUrl: './app.component.html',
393+
styleUrls: ['./app.component.css']
394+
})
395+
export class AppComponent {
396+
constructor(private canvasWhiteboardShapeService: CanvasWhiteboardShapeService) {
397+
this.canvasWhiteboardShapeService.unregisterShapes([CircleShape, SmileyShape, StarShape]);
398+
}
399+
}
400+
```
401+
402+
NOTE: There must be at least one shape registered for the canvas to work, but for the sake of convenience, all of the default shapes have been exported (maybe someone would want to unregister all of them and register his own shapes), but it is recommended not to unregister the FreeHandShape.
403+
355404
# Canvas Whiteboard Shape Selector
356405
The `CanvasWhiteboardComponent` is now equipped with a shape selector (since the free hand drawing is now a shape because of consistency),
357406
The shape selector can be managed or hidden with inputs, and it basically calls the `CanvasWhiteboardShapeService` and draws all the
@@ -470,4 +519,4 @@ If this is the case you may want to call a resize event for the window for the s
470519
window.dispatchEvent(new Event('resize'));
471520
}, 1);
472521
}
473-
```
522+
```

0 commit comments

Comments
 (0)