webfactorymk/ng2-canvas-whiteboard

Options to remove Fill and shapes

Closed this issue · 4 comments

I want to remove only the fill option and certain shapes of this control. I have checked the documentation but there are no such options. I have tried using CSS and it is working fine on localhost but when I deployed this on the server certain class is not displaying. Please find the images for reference.

I am using angular version 8

image_2020_09_07T06_22_31_528Z
image_2020_09_07T06_21_53_843Z

Hi, I've added a new version of the library: 3.1.3, so you can use that one to help your use-case.

Quick changes description:
I have exported all of the current shapes so you can unregister whichever you want by using the CanvasWhiteboardShapeService. Example:

  constructor(private canvasWhiteboardShapeService: CanvasWhiteboardShapeService) {
    this.canvasWhiteboardShapeService.unregisterShapes([CircleShape, SmileyShape, StarShape, LineShape, RectangleShape]);
  }

I've also added 2 new inputs, strokeColorPickerEnabled: boolean and fillColorPickerEnabled: boolean, also deprecated the colorPickerEnabled Input().

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).

So for your useCase, you can use colorPickerEnabled="false" and strokeColorPickerEnabled="true".

Also, if you want to update some of the CSS on the components, you can use the ::ng-deep selector to pierce the component styles, or turn off the ViewEncapsulation on your own components (i do not really recommend that, since once you turn it off, the styles will forever be altered even though you may exit the screen for that component)

Hi Peshou,

Thank you for your reply. I have updated the package and now I am able to hide the fill option successfully but still, I am unable to unregister the shapes. I am receiving the following error.

unregistershape

Have you imported the CircleShape class from the ng2-canvas-whiteboard package?

import {
  CanvasWhiteboardShapeService,
  CircleShape,
} from 'ng2-canvas-whiteboard';
  constructor(private canvasWhiteboardShapeService: CanvasWhiteboardShapeService) {
    this.canvasWhiteboardShapeService.unregisterShapes([CircleShape]);
  }

Oh sorry looks like Visual studio code can't able to auto-suggest this class. Thanks for the reply.