release(painter): 0.1.0

index.json

@@ -236,11 +236,11 @@
   "painter": {
     "dependencies": ["toolbar"],
     "icon": true,
+    "react": true,
     "version": "0.1.0",
     "style": true,
     "test": true,
-    "install": false,
-    "react": false
+    "install": false
   },
   "performance-monitor": {
     "react": true,

src/painter/README.md

@@ -11,17 +11,20 @@ https://luna.liriliri.io/?path=/story/painter
 Add the following script and style to your page.
 
 ```html
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-toolbar/luna-toolbar.css" />
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-painter/luna-painter.css" />
+<script src="//cdn.jsdelivr.net/npm/luna-toolbar/luna-toolbar.js"></script>
 <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
+npm install luna-painter luna-toolbar --save
 ```
 
 ```javascript
+import 'luna-toolbar/luna-toolbar.css'
 import 'luna-painter/luna-painter.css'
 import LunaPainter from 'luna-painter'
 ```
@@ -32,3 +35,31 @@ import LunaPainter from 'luna-painter'
 const container = document.getElementById('container')
 const painer = new LunaPainter(container)
 ```
+
+## Configuration
+
+* height(number): Canvas height.
+* tool(string): Initial used tool.
+* width(number): Canvas width.
+
+## Api
+
+### addLayer(): number
+
+Add layer.
+
+### getActiveLayer(): Layer
+
+Get active layer.
+
+### getCurrentToolName(): string
+
+Get current tool name.
+
+### getTool(name: string): void | LunaComponent
+
+Get tool.
+
+### useTool(name: string): void
+
+Use tool.

src/painter/index.ts

@@ -140,7 +140,7 @@ export default class Painter extends Component<IOptions> {
     return this.currentToolName
   }
   /** Get tool. */
-  getTool(name: string) {
+  getTool(name: string): Tool | void {
     switch (name) {
       case 'brush':
         return this.brush

src/painter/package.json

@@ -6,6 +6,7 @@
     "dependencies": [
       "toolbar"
     ],
-    "icon": true
+    "icon": true,
+    "react": true
   }
 }

src/painter/react.tsx

@@ -0,0 +1,29 @@
+import { CSSProperties, FC, useEffect, useRef } from 'react'
+import Painter, { IOptions } from './index'
+
+interface IPainterProps extends IOptions {
+  style?: CSSProperties
+  onCreate?: (painter: Painter) => void
+}
+
+const LunaPainter: FC<IPainterProps> = (props) => {
+  const painterRef = useRef<HTMLDivElement>(null)
+  const painter = useRef<Painter>()
+
+  useEffect(() => {
+    const { width, height, tool } = props
+    console.log(width)
+    painter.current = new Painter(painterRef.current!, {
+      width,
+      height,
+      tool,
+    })
+    props.onCreate && props.onCreate(painter.current)
+
+    return () => painter.current?.destroy()
+  }, [])
+
+  return <div ref={painterRef} style={props.style}></div>
+}
+
+export default LunaPainter

src/painter/story.js

@@ -4,6 +4,7 @@ import story from '../share/story'
 import readme from './README.md'
 import { number } from '@storybook/addon-knobs'
 import $ from 'licia/$'
+import LunaPainter from './react'
 
 const def = story(
   'painter',
@@ -15,41 +16,74 @@ const def = story(
       margin: '0 auto',
     })
 
-    const width = number('Width', 512, {
-      range: true,
-      min: 128,
-      max: 2048,
-      step: 2,
-    })
-
-    const height = number('Height', 512, {
-      range: true,
-      min: 128,
-      max: 2048,
-      step: 2,
-    })
+    const { width, height } = createKnobs()
 
     const painter = new Painter(container, {
       width,
       height,
       tool: 'pencil',
     })
 
-    const ctx = painter.getActiveLayer().getContext()
-    ctx.fillStyle = '#ffffff'
-    ctx.fillRect(0, 0, width, height)
-    const idx = painter.addLayer()
-    painter.activateLayer(idx)
-    painter.renderCanvas()
+    onCreate(painter)
 
     return painter
   },
   {
     readme,
     source: __STORY__,
+    ReactComponent({ theme }) {
+      const { width, height } = createKnobs()
+
+      return (
+        <LunaPainter
+          theme={theme}
+          width={width}
+          height={height}
+          style={{
+            width: '100%',
+            maxWidth: 1200,
+            height: 600,
+            margin: '0 auto',
+          }}
+          tool="pencil"
+          onCreate={onCreate}
+        />
+      )
+    },
   }
 )
 
+function onCreate(painter) {
+  const ctx = painter.getActiveLayer().getContext()
+  const canvas = painter.getCanvas()
+  ctx.fillStyle = '#ffffff'
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  const idx = painter.addLayer()
+  painter.activateLayer(idx)
+  painter.renderCanvas()
+}
+
+function createKnobs() {
+  const width = number('Width', 512, {
+    range: true,
+    min: 128,
+    max: 2048,
+    step: 2,
+  })
+
+  const height = number('Height', 512, {
+    range: true,
+    min: 128,
+    max: 2048,
+    step: 2,
+  })
+
+  return {
+    width,
+    height,
+  }
+}
+
 export default def
 
-export const { painter } = def
+export const { painter: html, react } = def

src/painter/style.scss

@@ -5,6 +5,8 @@
   position: relative;
   padding-left: 40px;
   padding-top: 30px;
+  width: 100%;
+  height: 600px;
   border: 1px solid $color-border;
 }
 

src/painter/tools/Zoom.ts

@@ -161,8 +161,8 @@ export default class Zoom extends Tool {
   }
   fitScreen() {
     const { canvas, viewport } = this
-    const sx = viewport.clientWidth / canvas.width
-    const sy = viewport.clientHeight / canvas.height
+    const sx = viewport.clientWidth / (canvas.width + 20)
+    const sy = viewport.clientHeight / (canvas.height + 20)
     this.zoomTo(Math.min(sx, sy), false)
   }
   fillScreen() {