diff --git a/packages/board/dev/data.ts b/packages/board/dev/data.ts new file mode 100644 index 0000000..df4f0ea --- /dev/null +++ b/packages/board/dev/data.ts @@ -0,0 +1,195 @@ +import type { Data } from '@idraw/types'; +import { createUUID, parseSVGPath } from '@idraw/util'; + +const data: Data = { + elements: [ + // { + // uuid: createUUID(), + // type: 'image', + // x: 100, + // y: 100, + // w: 100, + // h: 100, + // angle: 30, + // detail: { + // // src: '/public/images/lena.png?t=002' + // src: '@assets/0ee02fb0-ec43-6b9a-9ab4-55be5816ca4a' + // }, + // operations: { + // limitRatio: true + // } + // }, + { + uuid: createUUID(), + x: 2, + y: 2, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#f44336' + } + }, + { + uuid: createUUID(), + type: 'rect', + x: 50, + y: 50, + w: 100, + h: 100, + detail: { + background: '#8bc34a' + } + }, + // { + // uuid: createUUID(), + // type: 'image', + // x: 250, + // y: 250, + // w: 100, + // h: 100, + // detail: { + // // src: '/public/images/github.png?t=003' + // src: '@assets/25a0e630-a958-a522-29a4-5dccf04985da' + // } + // }, + // { + // uuid: createUUID(), + // type: 'group', + // x: 250, + // y: 250, + // w: 100, + // h: 100, + // detail: { + // children: [ + // { + // uuid: createUUID(), + // type: 'image', + // x: 0, + // y: 0, + // w: 100, + // h: 100, + // detail: { + // // src: '/public/images/github.png?t=003' + // src: '@assets/489c64d2-f642-3855-7bd6-cb40624b62c3' + // } + // } + // ], + // // assets: { + // // '@assets/489c64d2-f642-3855-7bd6-cb40624b62c3': { + // // type: 'image', + // // value: '/public/images/github.png?t=003' + // // } + // // } + // } + // }, + { + uuid: createUUID(), + x: 0, + y: 300, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#009688' + } + }, + { + uuid: createUUID(), + x: 300, + y: 300, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#673ab7' + } + }, + { + uuid: createUUID(), + x: 300, + y: 0, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#ffc107' + } + }, + { + uuid: createUUID(), + x: 150, + y: 150, + w: 100, + h: 100, + // angle: 30, + type: 'rect', + detail: { + background: '#4caf50', + clipPath: { + commands: parseSVGPath(` + M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z`), + // fill: '#ff0000', + originX: 10, + originY: 10, + originH: 80, + originW: 80 + // background: '#0000002A' + } + } + }, + { + uuid: createUUID(), + x: 100, + y: 10, + w: 80, + h: 80, + // angle: 30, + type: 'path', + detail: { + commands: parseSVGPath(` + M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z`), + fill: 'red', + originX: 10, + originY: 10, + originH: 80, + originW: 80, + background: '#0000002A' + + // clipPath: { + // commands: parseSVGPath(` + // M 10,30 + // A 20,20 0,0,1 50,30 + // A 20,20 0,0,1 90,30 + // Q 90,60 50,90 + // Q 10,60 10,30 z`), + // fill: '#ff0000', + // originX: 10, + // originY: 10, + // originH: 80, + // originW: 80 + // } + } + } + ] + // assets: { + // '@assets/0ee02fb0-ec43-6b9a-9ab4-55be5816ca4a': { + // type: 'image', + // value: '/public/images/lena.png?t=003' + // }, + // '@assets/25a0e630-a958-a522-29a4-5dccf04985da': { + // type: 'image', + // value: '/public/images/github.png?t=002' + // } + // } +}; + +export default data; diff --git a/packages/board/dev/index.html b/packages/board/dev/index.html index 0fff3a3..4df3be5 100644 --- a/packages/board/dev/index.html +++ b/packages/board/dev/index.html @@ -8,8 +8,8 @@ background: #f0f0f088; } #mount { - margin-top: 50px; - margin-left: 60px; + /* margin-top: 50px; + margin-left: 60px; */ } #mount canvas { border-right: 1px solid #aaaaaa40; @@ -26,10 +26,12 @@ -
+
+ +
- + \ No newline at end of file diff --git a/packages/board/dev/main.js b/packages/board/dev/main.js deleted file mode 100644 index dc0a8d8..0000000 --- a/packages/board/dev/main.js +++ /dev/null @@ -1,45 +0,0 @@ -import Board from './../src/esm'; - -function drawBoard(board) { - const ctx = board.getContext(); - // ctx.setFillStyle('#ffffff'); - // ctx.fillRect(0, 0, 300, 200); - - ctx.setFillStyle('#f0f0f0'); - ctx.fillRect(5, 5, 100, 60); - - ctx.setFillStyle('#cccccc'); - ctx.fillRect(40, 40, 100, 60); - - ctx.setFillStyle('#c0c0c0'); - ctx.fillRect(80, 80, 100, 60); - - ctx.setFillStyle('#e0e0e0'); - ctx.fillRect(200 - 5, 150 - 5, 100, 50); - - ctx.setFillStyle('#000'); - ctx.fillRect(150 - 5, 100 - 5, 10, 10); -} - -const mount = document.querySelector('#mount'); -const opts = { - width: 300, - height: 200, - contextWidth: 300, - contextHeight: 200, - devicePixelRatio: 4, - canScroll: true -}; -const board = new Board(mount, opts); -drawBoard(board); -board.draw(); - -board.resetSize({ - width: 270, - height: 180, - contextWidth: 400, - contextHeight: 320, - devicePixelRatio: 4 -}); -drawBoard(board); -board.draw(); diff --git a/packages/board/dev/main.ts b/packages/board/dev/main.ts new file mode 100644 index 0000000..63d3ac0 --- /dev/null +++ b/packages/board/dev/main.ts @@ -0,0 +1,38 @@ +import { createBoardContent, deepClone } from '../../util/src'; +import { Board } from '../src'; +import { MiddlewareSelector, MiddlewareScroller, MiddlewareScaler } from '../../core/src'; +import data from './data'; + +const devicePixelRatio = window.devicePixelRatio; +// const width = window.innerWidth; +// const height = window.innerHeight; + +const width = 800; +const height = 600; + +const canvas = document.querySelector('#canvas') as HTMLCanvasElement; +canvas.width = width * devicePixelRatio; +canvas.height = height * devicePixelRatio; +canvas.style.width = `${width}px`; +canvas.style.height = `${height}px`; +// const ctx1 = canvas.getContext('2d') as CanvasRenderingContext2D; +const boardContent1 = createBoardContent(canvas, { width, height, devicePixelRatio }); +const board = new Board({ boardContent: boardContent1 }); + +const sharer1 = board.getSharer(); +sharer1.setActiveViewSizeInfo({ + devicePixelRatio, + width, + height, + contextWidth: width, + contextHeight: height +}); +const data1 = deepClone(data); +board.resize(sharer1.getActiveViewSizeInfo()); +board.setData(data1); +board.use(MiddlewareSelector); +board.use(MiddlewareScroller); +board.use(MiddlewareScaler); +// board.scale(2); +// board.scrollX(-50); +// board.scrollY(-50); diff --git a/packages/core/dev/data.js b/packages/core/dev/data.js deleted file mode 100644 index 1def751..0000000 --- a/packages/core/dev/data.js +++ /dev/null @@ -1,67 +0,0 @@ -const data = { - bgColor: '#ffffff', - elements: [ - { - name: 'rect-001', - x: 5, - y: 5, - w: 100, - h: 50, - type: 'rect', - desc: { - bgColor: '#ffeb3b', - borderRadius: 10, - borderWidth: 5, - borderColor: '#ffc107' - } - }, - { - name: 'text-002', - x: 40, - y: 40, - w: 100, - h: 60, - // angle: 30, - type: 'text', - desc: { - fontSize: 16, - text: 'Hello Text', - fontWeight: 'bold', - color: '#666666', - borderRadius: 30, - borderWidth: 4, - borderColor: '#ff5722' - }, - operation: { - disableScale: true, - disableRotate: true - } - }, - { - name: 'image-003', - x: 80, - y: 80, - w: 160, - h: 80, - type: 'image', - desc: { - src: './images/computer.png' - } - }, - { - name: 'svg-004', - x: 200 - 5, - y: 150 - 50, - w: 100, - h: 100, - type: 'svg', - desc: { - svg: '' - } - } - ] -}; - -export function getData() { - return data; -} diff --git a/packages/core/dev/data.ts b/packages/core/dev/data.ts new file mode 100644 index 0000000..2797567 --- /dev/null +++ b/packages/core/dev/data.ts @@ -0,0 +1,153 @@ +import type { Data } from '@idraw/types'; +import { createUUID, parseSVGPath } from '@idraw/util'; + +const data: Data = { + elements: [ + { + uuid: createUUID(), + type: 'image', + x: 100, + y: 100, + w: 100, + h: 100, + angle: 30, + detail: { + src: '/images/lena.png?t=002' + }, + operations: { + limitRatio: true + } + }, + { + uuid: createUUID(), + x: 2, + y: 2, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#f44336' + } + }, + { + uuid: createUUID(), + type: 'rect', + x: 50, + y: 50, + w: 100, + h: 100, + detail: { + background: '#8bc34a' + } + }, + { + uuid: createUUID(), + type: 'image', + x: 250, + y: 250, + w: 100, + h: 100, + detail: { + src: '/images/github.png?t=003' + } + }, + { + uuid: createUUID(), + x: 0, + y: 300, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#009688' + } + }, + { + uuid: createUUID(), + x: 300, + y: 300, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#673ab7' + } + }, + { + uuid: createUUID(), + x: 300, + y: 0, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#ffc107' + } + }, + { + uuid: createUUID(), + x: 150, + y: 150, + w: 100, + h: 100, + angle: 30, + type: 'rect', + detail: { + background: '#4caf50', + clipPath: { + commands: parseSVGPath(` + M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z`), + // fill: '#ff0000', + originX: 10, + originY: 10, + originH: 80, + originW: 80 + // background: '#0000002A' + } + } + }, + { + uuid: createUUID(), + x: 100, + y: 10, + w: 80, + h: 80, + // angle: 30, + type: 'path', + detail: { + commands: parseSVGPath(` + M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z`), + fill: 'red', + originX: 10, + originY: 10, + originH: 80, + originW: 80, + background: '#0000002A' + + // clipPath: { + // commands: parseSVGPath(` + // M 10,30 + // A 20,20 0,0,1 50,30 + // A 20,20 0,0,1 90,30 + // Q 90,60 50,90 + // Q 10,60 10,30 z`), + // fill: '#ff0000', + // originX: 10, + // originY: 10, + // originH: 80, + // originW: 80 + // } + } + } + ] +}; + +export default data; diff --git a/packages/core/dev/index.html b/packages/core/dev/index.html index 470b2af..ea02cd6 100644 --- a/packages/core/dev/index.html +++ b/packages/core/dev/index.html @@ -12,7 +12,7 @@ margin-left: 60px; } #mount canvas { - border-right: 1px solid #aaaaaa40; + /* border-right: 1px solid #aaaaaa40; border-bottom: 1px solid #aaaaaa40; background-image: linear-gradient(#aaaaaa40 1px, transparent 0), @@ -20,7 +20,7 @@ linear-gradient(#aaa 1px, transparent 0), linear-gradient(90deg, #aaa 1px, transparent 0); background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px; - background-color: #ffffff; + background-color: #ffffff; */ } @@ -28,6 +28,6 @@
- + \ No newline at end of file diff --git a/packages/core/dev/main.js b/packages/core/dev/main.js deleted file mode 100644 index 4597895..0000000 --- a/packages/core/dev/main.js +++ /dev/null @@ -1,33 +0,0 @@ -import Core from './../src/index'; -import { getData } from './data.js'; - -console.log('Core =', Core); - -var opts = { - width: 300, - height: 200, - contextWidth: 300, - contextHeight: 200, - devicePixelRatio: 4 -}; -// var config = { -// elementWrapper: { -// controllerSize: 4, -// } -// } - -const mount = document.querySelector('#mount'); -const data = getData(); -const core = new Core( - mount, - Object.assign({}, opts, { - contextWidth: 500, - contextHeight: 400 - }), - { - scrollWrapper: { - use: true - } - } -); -core.setData(data); diff --git a/packages/core/dev/main.ts b/packages/core/dev/main.ts new file mode 100644 index 0000000..f785f21 --- /dev/null +++ b/packages/core/dev/main.ts @@ -0,0 +1,22 @@ +import { Core, MiddlewareSelector, MiddlewareScroller, MiddlewareScaler, MiddlewareInfo, MiddlewareRuler } from '../src'; + +import data from './data'; + +const devicePixelRatio = window.devicePixelRatio; +// const width = window.innerWidth; +// const height = window.innerHeight; +const width = 600; +const height = 400; +const container = document.querySelector('#mount') as HTMLDivElement; + +const core = new Core(container, { + width, + height, + devicePixelRatio +}); +core.use(MiddlewareSelector); +core.use(MiddlewareScroller); +core.use(MiddlewareScaler); +core.use(MiddlewareInfo); +core.use(MiddlewareRuler); +core.setData(data); diff --git a/packages/renderer/dev/data.js b/packages/renderer/dev/data.js deleted file mode 100644 index c64d339..0000000 --- a/packages/renderer/dev/data.js +++ /dev/null @@ -1,122 +0,0 @@ -const data = { - bgColor: "#ffffff", - elements: [ - // { - // name: "rect-001", - // x: 5, - // y: 5, - // w: 100, - // h: 50, - // type: "rect", - // desc: { - // bgColor: "#ffeb3b", - // borderRadius: 2, - // borderWidth: 0, - // borderColor: "#ffc107", - // }, - // }, - // { - // name: "text-002", - // x: 40, - // y: 40, - // w: 100, - // h: 60, - // // angle: 30, - // type: "text", - // desc: { - // fontSize: 16, - // text: [0, 1, 2, 3, 4].map(i => `Hello Text ${i}`).join('\r\n'), - // // text: [0, 1, 2, 3, 4].map(i => `Hello Text ${i}`).join(''), - // fontWeight: 'bold', - // color: "#666666", - // borderRadius: 30, - // borderWidth: 2, - // borderColor: "#ff5722", - // }, - // }, - // { - // name: "image-003", - // x: 80, - // y: 80, - // w: 160, - // h: 80, - // type: "image", - // desc: { - // src: './images/computer.png', - // }, - // }, - // { - // name: "svg-004", - // x: 200 - 5, - // y: 150 - 50, - // w: 100, - // h: 100, - // type: "svg", - // desc: { - // svg: '', - // }, - // }, - - { - name: "html-001", - x: 20, - y: 40, - w: 150, - h: 100, - type: "html", - angle: 0, - desc: { - html: ` - -
-
- -
-
- -
-
- `, - }, - }, - ], -}; - -export function getData() { - return data; -} diff --git a/packages/renderer/dev/data.ts b/packages/renderer/dev/data.ts new file mode 100644 index 0000000..7eaaa73 --- /dev/null +++ b/packages/renderer/dev/data.ts @@ -0,0 +1,153 @@ +import type { Data } from '@idraw/types'; +import { createUUID, parseSVGPath } from '@idraw/util'; + +const data: Data = { + elements: [ + { + uuid: createUUID(), + type: 'image', + x: 100, + y: 100, + w: 100, + h: 100, + angle: 30, + detail: { + src: '/dev/images/phone.png?t=002' + }, + operations: { + limitRatio: true + } + }, + { + uuid: createUUID(), + x: 2, + y: 2, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#f44336' + } + }, + { + uuid: createUUID(), + type: 'rect', + x: 50, + y: 50, + w: 100, + h: 100, + detail: { + background: '#8bc34a' + } + }, + { + uuid: createUUID(), + type: 'image', + x: 250, + y: 250, + w: 100, + h: 100, + detail: { + src: '/dev/images/computer.png?t=003' + } + }, + { + uuid: createUUID(), + x: 0, + y: 300, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#009688' + } + }, + { + uuid: createUUID(), + x: 300, + y: 300, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#673ab7' + } + }, + { + uuid: createUUID(), + x: 300, + y: 0, + w: 100, + h: 100, + type: 'circle', + detail: { + background: '#ffc107' + } + }, + { + uuid: createUUID(), + x: 150, + y: 150, + w: 100, + h: 100, + angle: 30, + type: 'rect', + detail: { + background: '#4caf50', + clipPath: { + commands: parseSVGPath(` + M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z`), + // fill: '#ff0000', + originX: 10, + originY: 10, + originH: 80, + originW: 80 + // background: '#0000002A' + } + } + }, + { + uuid: createUUID(), + x: 100, + y: 10, + w: 80, + h: 80, + // angle: 30, + type: 'path', + detail: { + commands: parseSVGPath(` + M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z`), + fill: 'red', + originX: 10, + originY: 10, + originH: 80, + originW: 80, + background: '#0000002A' + + // clipPath: { + // commands: parseSVGPath(` + // M 10,30 + // A 20,20 0,0,1 50,30 + // A 20,20 0,0,1 90,30 + // Q 90,60 50,90 + // Q 10,60 10,30 z`), + // fill: '#ff0000', + // originX: 10, + // originY: 10, + // originH: 80, + // originW: 80 + // } + } + } + ] +}; + +export default data; diff --git a/packages/renderer/dev/index.html b/packages/renderer/dev/index.html index fd34c98..4507621 100644 --- a/packages/renderer/dev/index.html +++ b/packages/renderer/dev/index.html @@ -8,8 +8,8 @@ background: #f0f0f088; } #mount { - margin-top: 50px; - margin-left: 60px; + /* margin-top: 50px; + margin-left: 60px; */ } #mount canvas { border-right: 1px solid #aaaaaa40; @@ -27,9 +27,9 @@
- +
- + \ No newline at end of file diff --git a/packages/renderer/dev/main.js b/packages/renderer/dev/main.js deleted file mode 100644 index 0e9a731..0000000 --- a/packages/renderer/dev/main.js +++ /dev/null @@ -1,47 +0,0 @@ -// import util from '@idraw/util'; -import { Renderer } from './../src/index'; -import { getData } from './data.js'; - -const data = getData(); - -// const Context = util.Context; -const canvas = document.querySelector('#canvas'); -const opts = { - width: 600, - height: 400, - contextWidth: 1200, - contextHeight: 800, - devicePixelRatio: 2, -} - -const renderer = new Renderer(opts); - -renderer.on('load', (e) => { - console.log('load =', e) -}) -// renderer.on('loadComplete', (e) => { -// console.log('loadComplete =', e) -// }) - -// renderer.on('drawFrame', (e) => { -// console.log('drawFrame =', e) -// }) -// renderer.on('drawFrameComplete', (e) => { -// console.log('drawFrameComplete =', e) -// }) - -// renderer.render(canvas, data) -// renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false }) -// console.log(renderer.getContext()) - -canvas.style.width = opts.width; -canvas.style.height = opts.height; -// canvas.width = opts.width * opts.devicePixelRatio; -// canvas.height = opts.height * opts.devicePixelRatio; -// const ctx = new Context(canvas.getContext('2d'), opts) -renderer.render(canvas, data); -// renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false }) - - - - diff --git a/packages/renderer/dev/main.ts b/packages/renderer/dev/main.ts new file mode 100644 index 0000000..5f633b3 --- /dev/null +++ b/packages/renderer/dev/main.ts @@ -0,0 +1,77 @@ +import { calcElementListSize, createOffscreenContext2D } from '../../util/src'; +import type { ViewContext2D, ElementSize } from '../../types/src'; +import { Renderer } from '../../renderer/src'; +import { Calculator, Sharer } from '../../board/src'; + +import data from './data'; + +const devicePixelRatio = window.devicePixelRatio; + +// const devicePixelRatio = 1.5; +const previewWidth = 600; +const previewHeight = 400; +const container = document.querySelector('#mount') as HTMLDivElement; + +const canvas = document.createElement('canvas') as HTMLCanvasElement; +const ctx = canvas.getContext('2d'); +canvas.width = previewWidth; +canvas.height = previewHeight; + +const renderPreview = (opts: { viewContext: ViewContext2D; outputSize: ElementSize }) => { + if (!ctx || !canvas) { + return; + } + const { viewContext, outputSize } = opts; + let width = previewWidth; + let height = (previewWidth * outputSize.h) / outputSize.w; + if (height > width) { + height = previewWidth; + width = (previewWidth * outputSize.w) / outputSize.h; + } + canvas.width = width; + canvas.height = height; + + const offScreenCanvas = viewContext.$getOffscreenCanvas() as OffscreenCanvas; + + // console.log('offScreenCanvas.width ====== ', offScreenCanvas); + ctx.drawImage(offScreenCanvas, 0, 0, width, height); +}; + +container.innerHTML = ''; +container.appendChild(canvas); + +const outputSize = calcElementListSize(data.elements); +const sharer = new Sharer(); +const viewContext = createOffscreenContext2D({ + width: outputSize.w, + height: outputSize.h, + devicePixelRatio +}); +const calculator = new Calculator({ + viewContext +}); +const renderer = new Renderer({ + viewContext, + sharer, + calculator +}); + +const draw = () => { + renderer.drawData(data, { + viewScaleInfo: { scale: 1, offsetLeft: -outputSize.x, offsetTop: -outputSize.y, offsetBottom: 0, offsetRight: 0 }, + viewSizeInfo: { + width: outputSize.w, + height: outputSize.h, + devicePixelRatio, + contextWidth: outputSize.w, + contextHeight: outputSize.h + } + }); + renderPreview({ viewContext, outputSize }); +}; + +renderer.on('load', () => { + draw(); +}); + +draw(); diff --git a/scripts/dev-mod.ts b/scripts/dev-mod.ts index 7501ef3..c50e816 100644 --- a/scripts/dev-mod.ts +++ b/scripts/dev-mod.ts @@ -24,7 +24,7 @@ async function dev() { function getViteConfig(pkgName: string): UserConfig { const viteConfig: UserConfig = { root: joinPackagePath(pkgName), - publicDir: joinPackagePath(pkgName, 'demo', 'public'), + publicDir: joinPackagePath(pkgName, 'dev'), server: { port: 8080, host: '127.0.0.1' diff --git a/scripts/dev.ts b/scripts/dev.ts index 050f550..e109eb8 100644 --- a/scripts/dev.ts +++ b/scripts/dev.ts @@ -29,7 +29,7 @@ async function dev() { function getViteConfig(): UserConfig { const viteConfig: UserConfig = { root: joinPackagePath(pkgName), - publicDir: joinPackagePath(pkgName, 'demo', 'public'), + publicDir: joinPackagePath(pkgName, 'dev'), server: { port: 8080, host: '127.0.0.1',