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() {