From fbfc107457827ee7ae596cfe51acafee468a7311 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 10 Mar 2024 20:40:08 +0800 Subject: [PATCH] docs: add setMode doc --- .vitepress/config.mts | 2 ++ src/en-US/api/center-content.md | 4 +-- src/en-US/api/resize.md | 6 ++--- src/en-US/api/set-mode.md | 45 +++++++++++++++++++++++++++++++++ src/zh-CN/api/center-content.md | 4 +-- src/zh-CN/api/resize.md | 6 ++--- src/zh-CN/api/set-mode.md | 45 +++++++++++++++++++++++++++++++++ 7 files changed, 98 insertions(+), 14 deletions(-) create mode 100644 src/en-US/api/set-mode.md create mode 100644 src/zh-CN/api/set-mode.md diff --git a/.vitepress/config.mts b/.vitepress/config.mts index fecf534..c8c5d5f 100644 --- a/.vitepress/config.mts +++ b/.vitepress/config.mts @@ -47,6 +47,7 @@ export default defineConfig({ items: [ { text: 'setData', link: '/en-US/api/set-data' }, { text: 'getData', link: '/en-US/api/get-data' }, + { text: 'setMode', link: '/en-US/api/set-mode' }, { text: 'selectElement', link: '/en-US/api/select-element' }, { text: 'addElement', link: '/en-US/api/add-element' }, { text: 'updateElement', link: '/en-US/api/update-element' }, @@ -113,6 +114,7 @@ export default defineConfig({ items: [ { text: 'setData', link: '/zh-CN/api/set-data' }, { text: 'getData', link: '/zh-CN/api/get-data' }, + { text: 'setMode', link: '/zh-CN/api/set-mode' }, { text: 'selectElement', link: '/zh-CN/api/select-element' }, { text: 'addElement', link: '/zh-CN/api/add-element' }, { text: 'updateElement', link: '/zh-CN/api/update-element' }, diff --git a/src/en-US/api/center-content.md b/src/en-US/api/center-content.md index ff98fe3..cb25409 100644 --- a/src/en-US/api/center-content.md +++ b/src/en-US/api/center-content.md @@ -24,9 +24,7 @@ const options = { height: 400, devicePixelRatio: 2 }; -const idraw = new iDraw(app, options, { - scrollWrapper: { use: true } -}); +const idraw = new iDraw(app, options); idraw.setData({ element: [ /* ... */ diff --git a/src/en-US/api/resize.md b/src/en-US/api/resize.md index bc6d236..3695eb2 100644 --- a/src/en-US/api/resize.md +++ b/src/en-US/api/resize.md @@ -26,16 +26,14 @@ const options = { height: 400, devicePixelRatio: 2 }; -const idraw = new iDraw(app, options, { - scrollWrapper: { use: true } -}); +const idraw = new iDraw(app, options); idraw.setData({ element: [ /* ... */ ] }); -idraw.resetSize({ +idraw.resize({ width: 300, height: 200, devicePixelRatio: 2 diff --git a/src/en-US/api/set-mode.md b/src/en-US/api/set-mode.md new file mode 100644 index 0000000..bac1297 --- /dev/null +++ b/src/en-US/api/set-mode.md @@ -0,0 +1,45 @@ +# setMode + +## Introduction + +`setMode` Can switch view operation mode + +## Arguments + +- `{IDrawType}` `mode` View operating mode + - `'select'`: Selection mode, also the default mode, is used to select and edit elements + - `'drag'`: Drag mode, used to drag and move the overall canvas position + - `'readOnly'`: Read-only mode, only displays the view content and cannot be edited + +```ts +type IDrawMode = 'select' | 'drag' | 'readOnly'; +``` + +## Returns + +> N/A + +## Usage + +```js +import { iDraw } from 'idraw'; + +const app = document.querySelector('#app'); +const options = { + width: 600, + height: 400, + devicePixelRatio: 2 +}; +const idraw = new iDraw(app, options); +idraw.setMode('readOnly'); +``` + +## Example + +[More Demo >>](https://idrawjs.com/playground/?demo=api-resize) + + diff --git a/src/zh-CN/api/center-content.md b/src/zh-CN/api/center-content.md index ffd816b..35112ca 100644 --- a/src/zh-CN/api/center-content.md +++ b/src/zh-CN/api/center-content.md @@ -24,9 +24,7 @@ const options = { height: 400, devicePixelRatio: 2 }; -const idraw = new iDraw(app, options, { - scrollWrapper: { use: true } -}); +const idraw = new iDraw(app, options); idraw.setData({ element: [ /* ... */ diff --git a/src/zh-CN/api/resize.md b/src/zh-CN/api/resize.md index 443ffa5..2a9fdf6 100644 --- a/src/zh-CN/api/resize.md +++ b/src/zh-CN/api/resize.md @@ -26,16 +26,14 @@ const options = { height: 400, devicePixelRatio: 2 }; -const idraw = new iDraw(app, options, { - scrollWrapper: { use: true } -}); +const idraw = new iDraw(app, options); idraw.setData({ element: [ /* ... */ ] }); -idraw.resetSize({ +idraw.resize({ width: 300, height: 200, devicePixelRatio: 2 diff --git a/src/zh-CN/api/set-mode.md b/src/zh-CN/api/set-mode.md new file mode 100644 index 0000000..dc11955 --- /dev/null +++ b/src/zh-CN/api/set-mode.md @@ -0,0 +1,45 @@ +# setMode + +## 说明 + +`setMode` 可以切换视图操作模式 + +## 参数 + +- `{IDrawType}` `mode` 视图操作模式 + - `'select'`: 选择模式，也是默认模式，用于选择和编辑元素 + - `'drag'`: 拖拽模式，用于拖拽移动整体画布位置 + - `'readOnly'`: 只读模式，仅显示视图内容，无法进行编辑操作 + +```ts +type IDrawMode = 'select' | 'drag' | 'readOnly'; +``` + +## 返回值 + +> 无返回值 + +## 用法 + +```js +import { iDraw } from 'idraw'; + +const app = document.querySelector('#app'); +const options = { + width: 600, + height: 400, + devicePixelRatio: 2 +}; +const idraw = new iDraw(app, options); +idraw.setMode('readOnly'); +``` + +## 示例 + +[Demo完整预览 Playground >>](https://idrawjs.com/playground/?demo=api-resize) + +