mostafazke / ng-whiteboard

angular whiteboard component

✨ Hello, folks! ✨

My name is Mustafa Zaki an Egyptian Front-End developer, working at

🔧 My Tech Stack

🚀 The Tools I Use

📈 GitHub Stats

Daily.dev Stats

ng-whiteboard's Issues

What does the camera icon do in the demo?

I clicked on the camera icon, it allowed me to choose an image. After that nothing appears.

Image not loading when using an ipad

Hello Guys,
good day!
I was wondering if you encounter an issue , when selecting an image in ipad
the image is not loaded.

I suspect it's a permission, because when i try on android it's working fine.
but if you have time can you please do check it out please.

I appreciate if you would give me some feedback.

Sincerely yours,

Jhon

Ideas: Resizing, Layers, Text Input

I take that the drawings are done in SVG and converted to bitmap when it's saved or downloaded. If that's the case, it would be beneficial in the demo to select each pen "stroke" or group of pen "strokes" to resize, change the fill or outline color. Then you can play with "layers" and move one in front or to the back of another. An ability to add text input would be helpful too.

Save grid

This is excellent component it works out of the box! Thank you!
As an idea it would be nice if there will be an option for saving grid within image.

Ruler, Protector, Scientific Calculator, WalForm needed

You have these options in this package?

Ruler, Protector, Scientific Calculator, WalForm

Thanks

'ng-whiteboard' is not a known element

Hello,

First of all congratulate the developer for his component. I really like the demo.

I have done the 3 steps indicated for installation in my project, after installing the package and importing the module into my app.module.ts everything is correct.

The problem comes when I incorporate the tag in my html of the component where I intend to use it.

I get an error "'ng-whiteboard' is not a known element", as if the module was not installed.

Best regards.
editar-parte.zip

app.module.zip

Update Peer Dependencies for Angular V16

peerDependencies need to be updated to angular 16.

"peerDependencies": {
"@angular/common": "^14.0.0",
"@angular/core": "^14.0.0",
"d3": "^5.16.0",
"@types/d3": "^5.16.0"
}

Suggestion:
Please align the release versions with the angular major version. This will help to determine which version is compatible with angular version easily.

how to get photo drawn base64?

this.whiteboardService.save() can only save photo as a file, i want to get photo base64 to save into mongodb, how to get it ?

Color pickers do not work with Safari

Both color pickers don't work with Safari (v14 tested). Nothing is displayed

Load saved whiteboard

Hi,
Is there a way I can re-load already saved whiteboard content ? I know we might need save the data in svg or any other custom format that you can use to repaint the board.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

how to save drawing image to server

i want to save file to server instead of download, how to do this?

Button not showing...

Everything worked fine but the buttons did not show up and I don't see this in options. Any hints?

how send the data of the whiteboard as stream?

I'm planning this to be communicated to other viewers,
but I see no way of getting the stream data of this ng whiteboard?

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Can's save image in firefox

Firefox does not support drawing SVG images to canvas unless the SVG file has width/height attributes on the root <svg> element and those width/height attributes are not percentages. This is a longstanding bug.

You can fix this error by setting width and height on the canvas right before trying to save the image.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Can't draw to Whiteboard in Ionic app

Hello,

I'm using this package in an Ionic app, my problem is that the whiteboard doesn't recognise the draw events, only after I navigate to an other route and navigate back.

Sometimes it recognises the draw, but doesn't show the lines, but when I trigger the "undo" method the lines appear.

I'm using the "basic" example code

X & Y Position & Whiteboard Dimensions Bug

problem with X and Y once you draw shape the value X and Y not correct also problem once you change the whiteboard dimension, on you change it X and Y of element are not correct and move the element not moving correctly.
also angular 15 not working ...
could you please fix it !

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Touch support doesn't appear to be working

If you access the demo site via a mobile device or through mobile emulation on Chrome dev tools, free form drawing with touch isn't working properly. It will begin drawing but then revert to scroll mode.

I need to erase on move not only on click

How can I achieve to erase on move not only on click. I added erase handler on drag move but its no picking up the required element object.

Not able to install on Angular 16

Issue:
Unable to resolve dependency tree
Could not resolve dependency:
peer @angular/common@"^14.0.0" from [email protected]

I tried with --force and --legacy-peer-deps.
It trigger another error regarding D3
Tried install D3 on my own, threw another error on angular/core and so on...

ng-whiteboard v2.0.19 compatibility with Angular 14.2.10.

Hello everyone! My project is running on Angular 14.2.10, can you tell me if ng-whiteboard v2.0.19 will be compatible with my project?

THIS IS PERFECT!!!

I have one request for "improvement". I know you're busy and I'm not counting this request to ever be "heard", but is it possible to enable/insert a picture like a pen, pencil, or even an arrow (mouse like) and the brush strokes begin at the tip of this picture?