open-index/open-npm huggingface dataset:
npm package: @opendraw/editor
Description: <p align="center">   <a href="https://opendraw.cn/editor/" target="_blank">opendraw.cn/editor/</a> </p>
Author: longzhoufeng
Latest version: 1.0.3

# @opendraw/editor

<p align="center">
  <a href="https://opendraw.cn/editor/" target="_blank">opendraw.cn/editor/</a>
</p>

## Sponsors

`@opendraw/editor` is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider [sponsoring opendraw's development](https://opencollective.com/opendraw).

[![Become a Backer](https://opencollective.com/opendraw/tiers/backers.svg?avatarHeight=48)](https://opencollective.com/opendraw)

## @opendraw/editor Preview

You can click [opendraw.cn/editor/](https://opendraw.cn/editor) to experience it.

The preview of `@opendraw/editor`.

<p align="center">

</p>

## Usage

```sh
# Install peer dependcies
npm install antd opendraw

npm install @opendraw/editor
```

```js
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { Editor } from '@opendraw/editor';
import '@opendraw/editor/dist/css/index.css';

const App = () => {
  const [width, setWidth] = useState < number > window.innerWidth;
  const [height, setHeight] = useState < number > window.innerHeight;
  useEffect(() => {
    window.addEventListener('resize', () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    });
  }, []);

  return (
    <Editor
      width={width}
      height={height}
      data={data}
      defaultScaleInfo={{
        scale: 1,
        offsetX: 0,
        offsetY: 0
      }}
    />
  );
};

const root = createRoot(document.querySelector('#app'));
root.render(<App />);
```

## Development

```sh
git clone git@github.com:longzhoufeng/editor.git

cd editor

pnpm install

npm run dev
```
npm package: @opendraw/renderer
Description: ```sh npm i @opendraw/renderer ```
Author: longzhoufeng
Latest version: 1.0.8

# @opendraw/renderer

## Usage

### Quick Start

```sh
npm i @opendraw/renderer
```

```js
import Renderer from '@opendraw/renderer';

const renderer = new Renderer({
  width: 600,
  height: 400,
  contextWidth: 600,
  contextHeight: 400,
  devicePixelRatio: 1
});

const canvas = document.querySelector('canvas');
renderer.render(canvas, {
  elements: [
    {
      name: 'rect-001',
      x: 10,
      y: 10,
      w: 200,
      h: 100,
      type: 'rect',
      detail: {
        bgColor: '#f0f0f0',
        borderRadius: 20,
        borderWidth: 10,
        borderColor: '#bd0b64'
      }
    }
  ]
});
```

### Events

```js
renderer.on('load', (e) => {
  // ...
});
renderer.on('loadComplete', (e) => {
  // ...
});

renderer.on('drawFrame', (e) => {
  // ...
});
renderer.on('drawFrameComplete', (e) => {
  // ...
});
```

## Documents

- [Documents](https://opendraw.cn/docs/en/) | [中文文档](https://opendraw.cn/docs/zh/)
- [Online Playground](https://opendraw.cn/playground/) | [在线 API 示例](https://opendraw.cn/playground/)
npm package: @opendreamnet/eslint-config
Description: ESLint config for OpenDreamnet projects.
Author: Ivan Bravo Bravo
Latest version: 0.3.2

# @opendreamnet/eslint-config

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]

ESLint config for OpenDreamnet projects.

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@opendreamnet/eslint-config?style=flat-square
[npm-version-href]: https://npmjs.com/package/@opendreamnet/eslint-config

[npm-downloads-src]: https://img.shields.io/npm/dm/@opendreamnet/eslint-config?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/@opendreamnet/eslint-config