feat: add painter

index.json

@@ -233,6 +233,15 @@
     "react": false,
     "dependencies": []
   },
+  "painter": {
+    "version": "0.1.0",
+    "style": true,
+    "icon": false,
+    "test": true,
+    "install": false,
+    "react": false,
+    "dependencies": []
+  },
   "performance-monitor": {
     "react": true,
     "version": "0.4.1",

src/painter/README.md

@@ -0,0 +1,34 @@
+# Luna Painter
+
+Simple drawing tool.
+
+## Demo
+
+https://luna.liriliri.io/?path=/story/painter
+
+## Install
+
+Add the following script and style to your page.
+
+```html
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-painter/luna-painter.css" />
+<script src="//cdn.jsdelivr.net/npm/luna-painter/luna-painter.js"></script>
+```
+
+You can also get it on npm.
+
+```bash
+npm install luna-painter --save
+```
+
+```javascript
+import 'luna-painter/luna-painter.css'
+import LunaPainter from 'luna-painter'
+```
+
+## Usage
+
+```javascript
+const container = document.getElementById('container')
+const painer = new LunaPainter(container)
+```

src/painter/index.ts

@@ -0,0 +1,21 @@
+import Component, { IComponentOptions } from '../share/Component'
+
+export interface IOptions extends IComponentOptions {
+  width?: number
+  height?: number
+}
+
+/**
+ * Simple drawing tool.
+ *
+ * @example
+ * const container = document.getElementById('container')
+ * const painer = new LunaPainter(container)
+ */
+export default class Painter extends Component<IOptions> {
+  constructor(container: HTMLElement, options: IOptions) {
+    super(container, { compName: 'painer' }, options)
+
+    this.initOptions(options, {})
+  }
+}

src/painter/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "painter",
+  "version": "0.1.0",
+  "description": "Simple drawing tool"
+}

src/painter/story.js

@@ -0,0 +1,21 @@
+import 'luna-painter'
+import Painter from 'luna-painter.js'
+import story from '../share/story'
+import readme from './README.md'
+
+const def = story(
+  'painter',
+  (container) => {
+    const painter = new Painter(container)
+
+    return painter
+  },
+  {
+    readme,
+    source: __STORY__,
+  }
+)
+
+export default def
+
+export const { painter } = def

tsconfig.json

@@ -54,7 +54,8 @@
       "luna-tag-input": ["src/tag-input/index"],
       "luna-qrcode-generator": ["src/qrcode-generator/index"],
       "luna-toolbar": ["src/toolbar/index"],
-      "luna-image-viewer": ["src/image-viewer/index"]
+      "luna-image-viewer": ["src/image-viewer/index"],
+      "luna-painter": ["src/painter/index"]
     }
   }
 }