Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@cobaltinc/atelier
Advanced tools
Readme
Expandable drawing component for React built by Cobalt, Inc.
npm install @cobaltinc/atelier # or yarn add @cobaltinc/atelier
import React from 'react'
import { Atelier } from '@cobaltinc/atelier'
<Atelier />
Demo page: https://cobaltinc.github.io/atelier
Prop | Description | Default |
---|---|---|
command | Set the name of registered plugin | pen |
color | Set the color of the line | #000000 |
lineWidth | Set the width of the line | 2 |
width | Set the width of the DOM | 800 |
height | Set the height of the DOM | 600 |
canvasWidth | Set the width of the canvas | |
canvasHeight | Set the height of the canvas | |
enableDraw | Set to true or false to enable or disable draw the canvas | true |
enablePressure | Set to true or false to enable or disable pressure the canvas | false |
plugins | Register the plugins to use | [PenPlugin] |
style | Add inline styles to the root element | |
className | Add className to the root element | |
onChange(e: AtelierChangeEvent) | Fired when an alteration to canvas is commited |
Use ref
to call instance methods. See the demo page for an example of this.
Prop | Description |
---|---|
draw(e: DrawingInterface) | Draw programmatically on the canvas |
clear() | Erase everything on the canvas |
PenPlugin | BrushPlugin (Support pressure) | ErasePlugin |
---|---|---|
HighlighterPlugin | LaserPlugin | |
import React from 'react'
import {
Atelier,
PenPlugin,
BrushPlugin,
ErasePlugin,
HighlighterPlugin,
LaserPlugin
} from '@cobaltinc/atelier'
<Atelier plugins={[PenPlugin, BrushPlugin, ErasePlugin, HighlighterPlugin, LaserPlugin]} />
If you want new plugin, you can make easily.
class DashPlugin extends Plugin {
name: string = 'dash';
prevX: number;
prevY: number;
draw(data: DrawingInterface) {
super.draw(data);
const { x, y, state } = data;
const context = this.canvas?.getContext('2d');
context.setLineDash([5, 30]);
const prevX = this.prevX || x;
const prevY = this.prevY || y;
if (state === 'draw-started' || state === 'drawing') {
context.beginPath();
context.moveTo(prevX, prevY);
context.lineTo(x, y);
context.stroke();
context.closePath();
Object.assign(this, {
lastX: x,
lastY: y,
});
}
}
}
<Atelier command="dash" plugins={[DashPlugin]} />
And the result:
Atelier is made available under the MIT License.
FAQs
Drawing on canvas
The npm package @cobaltinc/atelier receives a total of 1 weekly downloads. As such, @cobaltinc/atelier popularity was classified as not popular.
We found that @cobaltinc/atelier demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.