Merge pull request #64 from idrawjs/dev-v0.4

Dev v0.4

package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0-alpha.10",
+  "version": "0.4.0-alpha.11",
   "workspaces": [
     "packages/*"
   ],
@@ -19,7 +19,7 @@
     "upgrade:version": "vite-node ./scripts/upgrade-version.ts && pnpm i"
   },
   "dependencies": {
-    "idraw": "0.4.0-beta.10",
+    "idraw": "0.4.0-beta.11",
     "antd": "5.12.1"
   },
   "devDependencies": {

packages/studio-base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio-base",
-  "version": "0.4.0-alpha.10",
+  "version": "0.4.0-alpha.11",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,7 +22,7 @@
   "peerDependencies": {
     "antd": "^5.12.1",
     "classnames": "^2.3.2",
-    "idraw": "^0.4.0-beta.10",
+    "idraw": "^0.4.0-beta.11",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"

packages/studio-base/src/modules/element-detail/content-attribute.tsx

@@ -67,12 +67,12 @@ export const ContentAttribute = (props: ContentAttributeProps) => {
     return (
       <>
         <Form ref={ref} style={style} className={rootClassName} onValuesChange={onValuesChange}>
-          {['rect', 'circle', 'text', 'group'].includes(element?.type as string) && (
+          {['rect', 'circle', 'text', 'group', 'path'].includes(element?.type as string) && (
             <Row className={rowClassName}>
               <Col className={colClassName} span="10">
                 {moduleLocale.background}
               </Col>
-              <Col className={colClassName} span="12">
+              <Col className={colClassName} span="14">
                 <Form.Item className={formItemClassName} name="background">
                   <MultipleColor
                     elementSize={element ? getElementSize(element) : undefined}
@@ -91,7 +91,7 @@ export const ContentAttribute = (props: ContentAttributeProps) => {
             <Col className={colClassName} span="10">
               {moduleLocale.opacity}
             </Col>
-            <Col className={colClassName} span="12">
+            <Col className={colClassName} span="14">
               <Form.Item className={formItemClassName} name="opacity">
                 <InputNumber disabled={disabled} size="small" style={{ width: '100%' }} step={0.1} />
               </Form.Item>

packages/studio-base/src/modules/element-detail/index.tsx

@@ -3,7 +3,7 @@ import type { CSSProperties } from 'react';
 import classnames from 'classnames';
 import type { Element, ElementType, RecursivePartial } from 'idraw';
 import { getDefaultElementDetailConfig } from 'idraw';
-import { Collapse } from 'antd';
+import { Collapse, Empty } from 'antd';
 import type { CollapseProps } from 'antd';
 import { ConfigContext } from '../config-provider';
 import { BasicAttribute } from './basic-attribute';
@@ -59,14 +59,16 @@ export const ElementDetail = (props: ElementDetailProps) => {
     {
       key: 'border-attribute',
       label: moduleLocale.borderAttribute,
-      children: (
+      children: ['rect', 'circle', 'text', 'image', 'group'].includes(elem?.type as string) ? (
         <BorderAttribute
           element={element}
           disabled={!element}
           onChange={(e) => {
             onChange?.(e);
           }}
         />
+      ) : (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={false} />
       )
     },
     {
@@ -87,14 +89,16 @@ export const ElementDetail = (props: ElementDetailProps) => {
     {
       key: 'shadow-attribute',
       label: moduleLocale.shadowAttribute,
-      children: (
+      children: ['rect', 'circle', 'text', 'image', 'group'].includes(elem?.type as string) ? (
         <ShadowAttribute
           element={element}
           disabled={!element}
           onChange={(e) => {
             onChange?.(e);
           }}
         />
+      ) : (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={false} />
       )
     }
   ];

packages/studio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio",
-  "version": "0.4.0-alpha.10",
+  "version": "0.4.0-alpha.11",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,13 +20,13 @@
   "author": "chenshenhai",
   "license": "MIT",
   "dependencies": {
-    "@idraw/studio-base": "^0.4.0-alpha.10",
+    "@idraw/studio-base": "^0.4.0-alpha.11",
     "classnames": "^2.3.2",
     "is-hotkey": "^0.2.0"
   },
   "peerDependencies": {
     "antd": "^5.12.1",
-    "idraw": "^0.4.0-beta.10",
+    "idraw": "^0.4.0-beta.11",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"

packages/studio/src/modules/sketch/index.tsx

@@ -121,6 +121,30 @@ export const Sketch = (props: SketchProps) => {
       idraw.selectElements([elem.uuid]);
     };
 
+    const addElementCallback = (e: SharedEventMap['addElement']) => {
+      const { element, position = [] } = e;
+      const centerPoint = idraw.getViewCenter();
+      const newEditingData = idraw.addElement(
+        {
+          ...element,
+          ...{
+            x: centerPoint.x - element.w / 2,
+            y: centerPoint.y - element.h / 2
+          }
+        },
+        { position }
+      );
+      const newTreeData = getElementTree(newEditingData);
+      dispatch({
+        type: 'update',
+        payload: {
+          editingData: { ...newEditingData },
+          treeData: newTreeData
+        }
+      });
+      idraw.selectElements([element.uuid]);
+    };
+
     const deleteElementCallback = (e: SharedEventMap['deleteElement']) => {
       const { uuid } = e;
       idraw?.deleteElement(uuid);
@@ -247,6 +271,7 @@ export const Sketch = (props: SketchProps) => {
     idraw.on('change', listenDataChange);
     idraw.on(middlewareEventScale, listenMiddlewareEventScale);
     sharedEvent.on('createElement', createElementCallback);
+    sharedEvent.on('addElement', addElementCallback);
     sharedEvent.on('deleteElement', deleteElementCallback);
     sharedEvent.on('resetEditingView', resetEditingViewCallback);
     sharedEvent.on('resetData', resetDataCallback);
@@ -273,7 +298,8 @@ export const Sketch = (props: SketchProps) => {
       idraw.off(middlewareEventSelect, listenMiddlewareEventSelect);
       idraw.off('change', listenDataChange);
       idraw.off(middlewareEventScale, listenMiddlewareEventScale);
-      // sharedEvent.off('addElement', createElementCallback);
+      // sharedEvent.off('createElement', createElementCallback);
+      // sharedEvent.off('addElement', addElementCallback);
       // sharedEvent.off('deleteElement', deleteElementCallback);
       // sharedEvent.off('resetEditingView', resetEditingViewCallback);
       // sharedEvent.off('resetData', resetDataCallback);