diff --git a/index.json b/index.json
index 8a0738f..04977a7 100644
--- a/index.json
+++ b/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,
diff --git a/src/painter/README.md b/src/painter/README.md
index 5cd4bae..eb7868f 100644
--- a/src/painter/README.md
+++ b/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
+
+
```
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.
diff --git a/src/painter/index.ts b/src/painter/index.ts
index 8ab4383..280f956 100644
--- a/src/painter/index.ts
+++ b/src/painter/index.ts
@@ -140,7 +140,7 @@ export default class Painter extends Component {
return this.currentToolName
}
/** Get tool. */
- getTool(name: string) {
+ getTool(name: string): Tool | void {
switch (name) {
case 'brush':
return this.brush
diff --git a/src/painter/package.json b/src/painter/package.json
index d0375aa..8490f0f 100644
--- a/src/painter/package.json
+++ b/src/painter/package.json
@@ -6,6 +6,7 @@
"dependencies": [
"toolbar"
],
- "icon": true
+ "icon": true,
+ "react": true
}
}
diff --git a/src/painter/react.tsx b/src/painter/react.tsx
new file mode 100644
index 0000000..d6462cb
--- /dev/null
+++ b/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 = (props) => {
+ const painterRef = useRef(null)
+ const painter = useRef()
+
+ 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
+}
+
+export default LunaPainter
diff --git a/src/painter/story.js b/src/painter/story.js
index a50556d..116f65d 100644
--- a/src/painter/story.js
+++ b/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,19 +16,7 @@ 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,
@@ -35,21 +24,66 @@ const def = story(
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 (
+
+ )
+ },
}
)
+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
diff --git a/src/painter/style.scss b/src/painter/style.scss
index 2749440..5298272 100644
--- a/src/painter/style.scss
+++ b/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;
}
diff --git a/src/painter/tools/Zoom.ts b/src/painter/tools/Zoom.ts
index 6a727a2..661279c 100644
--- a/src/painter/tools/Zoom.ts
+++ b/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() {