docs: add setMode doc

.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' },

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: [
     /* ... */

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

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)
+
+<iframe class="idraw-playground-preview" 
+  src="https://idrawjs.com/playground/?demo=api-setMode&header=false&sider=false&default-editor-split=50" 
+  width="1000" height="480" frameborder="no" border="0"
+  style="border: 1px solid #cecece; margin: 0px auto;"
+></iframe>

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: [
     /* ... */

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

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)
+
+<iframe class="idraw-playground-preview" 
+  src="https://idrawjs.com/playground/?demo=api-setMode&header=false&sider=false&default-editor-split=50" 
+  width="1000" height="480" frameborder="no" border="0"
+  style="border: 1px solid #cecece; margin: 0px auto;"
+></iframe>