From 672002cc0e63928090af8fe8bcbac1bed9ecefb9 Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Sun, 17 Dec 2023 16:42:47 +0800
Subject: [PATCH] docs: update readme and select color

---
 .../core/src/middleware/selector/config.ts    |  4 +-
 packages/idraw/README.md                      | 69 +++++++++++++++----
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/middleware/selector/config.ts b/packages/core/src/middleware/selector/config.ts
index 50d6164..e1b6a66 100644
--- a/packages/core/src/middleware/selector/config.ts
+++ b/packages/core/src/middleware/selector/config.ts
@@ -23,5 +23,5 @@ export const keyDebugEnd0 = Symbol(`${key}_debug_end0`);
 export const selectWrapperBorderWidth = 2;
 export const resizeControllerBorderWidth = 4;
 export const areaBorderWidth = 1;
-// export const wrapperColor = '#1973ba';
-export const wrapperColor = '#1890ff';
+export const wrapperColor = '#1973ba';
+// export const wrapperColor = '#1890ff';
diff --git a/packages/idraw/README.md b/packages/idraw/README.md
index 42aa116..1c5b9b6 100644
--- a/packages/idraw/README.md
+++ b/packages/idraw/README.md
@@ -2,12 +2,22 @@
 
 <p align="center">iDraw.js is a simple JavaScript framework for Drawing on the web.</p>
 
+<p align="center">一个面向Web绘图的JavaScript框架</p>
+
+
+<p align="center"><a href="https://idraw.js.org">idraw.js.org</a></p>
+
 
 <p align="center">
+
   <a title="CI" href="https://github.com/idrawjs/idraw/actions/workflows/node.js.yml">
     <img src="https://github.com/idrawjs/idraw/actions/workflows/node.js.yml/badge.svg?branch=main" alt="CI">
   <a>
 
+  <!-- <a href="https://codecov.io/gh/idrawjs/idraw">
+    <img src="https://codecov.io/gh/idrawjs/idraw/branch/main/graph/badge.svg?token=MICIC9SCKY"/>
+  </a> -->
+    
   <a href="https://www.npmjs.com/package/idraw">
     <img src="https://img.shields.io/npm/v/idraw.svg?sanitize=idraw" alt="Version">
   </a>
@@ -17,21 +27,37 @@
 </p>
 
 
+
+
 <!-- [![Node.js CI](https://github.com/idrawjs/idraw/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/idrawjs/idraw/actions/workflows/node.js.yml) -->
 
 <hr/>
 
+
 - [Documents](https://idraw.js.org/docs/en/) | [中文文档](https://idraw.js.org/docs/zh/) 
 - [Online Playground](https://idraw.js.org/playground/) | [在线API示例](https://idraw.js.org/playground/)
 - [Online Studio](https://idraw.js.org/studio/) | [在线绘图演示](https://idraw.js.org/studio/)
  
+
+> Note:
+> At present, the development content of the main branch is v0.4, and it is currently in the development and reconstruction stage, mainly based on the v0.3 version for optimization and reconstruction.
+> The npm module is version v0.3. If you encounter any problems while using the npm module, you can view the content of this branch: [https://github.com/idrawjs/idraw/tree/v0.3](https://github.com/idrawjs/idraw/tree/v0.3)
+
+
+> 注意:
+> 当前`main`分支开发内容为`v0.4`，目前处于开发重构阶段，主要基于`v0.3`版本进行优化重构。
+> 目前npm 模块是`v0.3 `版本。 如果你在使用npm模块的过程中遇到什么问题，可以查看这个分支的内容： [https://github.com/idrawjs/idraw/tree/v0.3](https://github.com/idrawjs/idraw/tree/v0.3)
+
+
 ## @idraw/studio Preview
 
 The preview of `@idraw/studo`. Click [here](https://github.com/idrawjs/studio) to get it.
 
-<div style="text-align: center">
-  <img src="./assets/preview/idraw-studio-preview.png" width="700" />
-</div>
+<p align="center">
+  <img width="1145" alt="image" src="https://github.com/idrawjs/studio/assets/8216630/62b9bc71-5fca-421d-9c6e-b7512edc77f2" width="700">
+
+  <img width="1145" alt="image" src="https://github.com/idrawjs/studio/assets/8216630/5b4cc1dc-89e1-4f67-84fa-578667d42bf7" width="700">
+</p>
 
 ## Install
 
@@ -41,6 +67,8 @@ npm i idraw
 
 ## Getting Started
 
+### Common
+
 ```js
 import iDraw from 'idraw';
 
@@ -49,8 +77,6 @@ const idraw = new iDraw(
   {
     width: 600,
     height: 400,
-    contextWidth: 600,
-    contextHeight: 400,
     devicePixelRatio: 1,
   }
 );
@@ -62,7 +88,7 @@ idraw.addElement({
   h: 100,
   type: "rect",
   detail: {
-    bgColor: "#f7d3c1",
+    background: "#f7d3c1",
     borderRadius: 20,
     borderWidth: 4,
     borderColor: "#ff6032",
@@ -81,9 +107,7 @@ function Demo() {
   useEffect(() => {
     const idraw = new iDraw(ref.current, {
       width: 600,
-      height: 400,
-      contextWidth: 600,
-      contextHeight: 400,
+      height: 400, 
       devicePixelRatio: 1,
     });
     idraw.addElement({
@@ -94,7 +118,7 @@ function Demo() {
       h: 100,
       type: "rect",
       detail: {
-        bgColor: "#f7d3c1",
+        background: "#f7d3c1",
         borderRadius: 20,
         borderWidth: 4,
         borderColor: "#ff6032",
@@ -123,9 +147,7 @@ const mount = ref();
 onMounted(() => {
   const idraw = new iDraw(mount.value, {
     width: 600,
-    height: 400,
-    contextWidth: 600,
-    contextHeight: 400,
+    height: 400, 
     devicePixelRatio: 1,
   });
   idraw.addElement({
@@ -136,7 +158,7 @@ onMounted(() => {
     h: 100,
     type: "rect",
     detail: {
-      bgColor: "#f7d3c1",
+      background: "#f7d3c1",
       borderRadius: 20,
       borderWidth: 4,
       borderColor: "#ff6032",
@@ -145,3 +167,22 @@ onMounted(() => {
 })
 </script>
 ```
+
+
+## Contributing
+
+We appreciate your help!
+
+To contribute, please follow the steps:
+
+### Step 1: Prepare Project
+
+- `git clone git@github.com:idrawjs/idraw.git`
+- `cd idraw`
+- `pnpm i`
+- `npm run dev`
+
+### Step 2: Development
+
+- `npm run dev` to select and develop single package
+