webfactorymk / ng2-canvas-whiteboard

Canvas whiteboard
MIT License
99 stars 50 forks source link

Options to remove Fill and shapes #66

Closed jagdishpatil02 closed 4 years ago

jagdishpatil02 commented 4 years ago

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

Peshou commented 4 years ago

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)

jagdishpatil02 commented 4 years ago

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

Peshou commented 4 years ago

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]);
  }
jagdishpatil02 commented 4 years ago

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