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

Dev v0.4

README.md

@@ -13,6 +13,13 @@
   <a href="https://idrawjs.com/studio/" target="_blank">idrawjs.com/studio/</a>
 </p>
 
+## Sponsors
+
+`@idraw/studio` is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider [sponsoring iDrawjs's development](https://opencollective.com/idrawjs).
+
+[![Become a Backer](https://opencollective.com/idrawjs/tiers/backers.svg?avatarHeight=48)](https://opencollective.com/idrawjs)
+
+
 
 ## @idraw/studio Preview
 
@@ -25,7 +32,7 @@ The preview of `@idraw/studo`.
 
   <img width="700" alt="idraw-studio-light-theme" src="https://github.com/idrawjs/studio/assets/8216630/8a49bab8-1e4a-44dd-9836-b6ce3861aaea" />
 
-  <img width="600" alt="idraw-studio-dark-theme" src="https://github.com/idrawjs/studio/assets/8216630/479fce0b-891f-47f2-ace8-d91580e68b4b" />
+  <img width="700" alt="idraw-studio-dark-theme" src="https://github.com/idrawjs/studio/assets/8216630/479fce0b-891f-47f2-ace8-d91580e68b4b" />
 
 </p>
 

package.json

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

packages/studio-base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio-base",
-  "version": "0.4.0-alpha.12",
+  "version": "0.4.0-alpha.13",
   "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.12",
+    "idraw": "^0.4.0-beta.13",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"

packages/studio-base/src/css/theme/dark.less

@@ -1,7 +1,7 @@
 // @import '../variable.less';
 
 &.@{prefix}-theme.@{prefix}-theme-dark {
-  --@{prefix}-bg-color: @gray-9;
+  --@{prefix}-bg-color: @gray-10;
   --@{prefix}-canvas-bg-color: @gray-9;
   --@{prefix}-text-color: @gray-4;
   --@{prefix}-text-hover-color: @gray-1;

packages/studio-base/src/icons/file-copy.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32z"></path>
+        <path d="M704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/index.ts

@@ -28,6 +28,7 @@ import IconDrag from './drag';
 import IconEdit from './edit';
 import IconExperiment from './experiment';
 import IconFile from './file';
+import IconFileCopy from './file-copy';
 import IconFullCornerRadius from './full-corner-radius';
 import IconGroup from './group';
 import IconHand from './hand';
@@ -47,6 +48,7 @@ import IconPath from './path';
 import IconPen from './pen';
 import IconPlus from './plus';
 import IconPosition from './position';
+import IconRedo from './redo';
 import IconRect from './rect';
 import IconResize from './resize';
 import IconRotation from './rotation';
@@ -56,6 +58,7 @@ import IconSetting from './setting';
 import IconSolidColor from './solid-color';
 import IconStar from './star';
 import IconText from './text';
+import IconUndo from './undo';
 import IconUnlock from './unlock';
 import IconVerticalBottom from './vertical-bottom';
 import IconVerticalMiddle from './vertical-middle';
@@ -94,6 +97,7 @@ export {
   IconEdit,
   IconExperiment,
   IconFile,
+  IconFileCopy,
   IconFullCornerRadius,
   IconGroup,
   IconHand,
@@ -113,6 +117,7 @@ export {
   IconPen,
   IconPlus,
   IconPosition,
+  IconRedo,
   IconRect,
   IconResize,
   IconRotation,
@@ -122,6 +127,7 @@ export {
   IconSolidColor,
   IconStar,
   IconText,
+  IconUndo,
   IconUnlock,
   IconVerticalBottom,
   IconVerticalMiddle,

packages/studio-base/src/icons/redo.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M1000.65998 0.00002h-94.819998a24 24 0 0 0-23.999999 25.14l8 165.519996A494.83999 494.83999 0 0 0 511.99999 16.00002C238.679995 16.00002 15.8 239.060015 16 512.38001 16.2 786.140005 238.199995 1008 511.99999 1008a494.19999 494.19999 0 0 0 332.359994-127.819997 24 24 0 0 0 0.959999-34.86l-67.999998-67.999998a24 24 0 0 0-32.76-1.1A351.999993 351.999993 0 1 1 804.199984 315.600014l-203.059996-9.74a24 24 0 0 0-25.139999 24v94.819998a24 24 0 0 0 23.999999 23.999999h400.659992a24 24 0 0 0 24-23.999999V24.00002a24 24 0 0 0-24-24z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/undo.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M424.666 448.666H24c-13.254 0-24-10.746-24-24V24C0 10.746 10.746 0 24 0h96c13.254 0 24 10.746 24 24v156.224C235.546 78.558 368.52 14.94 516.35 16.014c273.812 1.988 492.896 223.246 492.314 497.064C1008.082 786.516 786.24 1008 512.666 1008c-128.178 0-244.992-48.626-333.02-128.43-10.198-9.244-10.668-25.108-0.934-34.84l67.934-67.934c8.948-8.948 23.324-9.434 32.802-1.05C341.52 830.672 423.16 864 512.666 864c194.536 0 352-157.432 352-352 0-194.534-157.432-352-352-352-116.992 0-220.56 56.952-284.548 144.666h196.548c13.254 0 24 10.746 24 24v96c0 13.254-10.746 24-24 24z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/index.ts

@@ -2,7 +2,6 @@ export * from './types';
 
 export { ConfigContext, ConfigProvider, type ConfigContextValue } from './modules/config-provider';
 export { SplitPane, SplitPaneItem } from './modules/split-pane';
-export { Toolbar, type ToolbarProps } from './modules/toolbar';
 export { ThemeSwitch, type ThemeSwitchProps } from './modules/theme-switch';
 export { LocaleSelector, type LocaleSelectorProps } from './modules/locale-selector';
 export { ScaleSelector, type ScaleSelectorProps } from './modules/scale-selector';
@@ -45,6 +44,7 @@ export {
   IconEdit,
   IconExperiment,
   IconFile,
+  IconFileCopy,
   IconFullCornerRadius,
   IconGroup,
   IconHand,
@@ -64,6 +64,7 @@ export {
   IconPen,
   IconPlus,
   IconPosition,
+  IconRedo,
   IconRect,
   IconResize,
   IconRotation,
@@ -73,6 +74,7 @@ export {
   IconSolidColor,
   IconStar,
   IconText,
+  IconUndo,
   IconUnlock,
   IconVerticalBottom,
   IconVerticalMiddle,

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

@@ -2,7 +2,7 @@ import React, { useMemo, useEffect, useContext, useRef } from 'react';
 import type { CSSProperties } from 'react';
 import classnames from 'classnames';
 import type { Element, ElementTextDetail } from 'idraw';
-import { getElementSize } from 'idraw';
+import { getElementSize, formatNumber, is } from 'idraw';
 import { Radio, Row, Col, Form, InputNumber } from 'antd';
 import type { FormInstance } from 'antd';
 import { ConfigContext } from '../config-provider';
@@ -17,6 +17,13 @@ import IconAlignRight from '../../icons/align-right';
 const modName = 'base-element-detail-text';
 const iconStyle = { fontSize: 20 };
 
+const formatter = (val: any) => {
+  if (is.number(val * 1)) {
+    return formatNumber(val * 1);
+  }
+  return val;
+};
+
 export interface DetailTextProps {
   className?: string;
   style?: CSSProperties;
@@ -121,7 +128,7 @@ export const DetailText = (props: DetailTextProps) => {
             </Col>
             <Col span="14" className={colClassName}>
               <Form.Item className={formItemClassName} name="fontSize">
-                <InputNumber disabled={disabled} size="small" style={{ width: '100%' }} step={1} min={0} />
+                <InputNumber disabled={disabled} size="small" style={{ width: '100%' }} step={1} min={0} formatter={formatter} parser={formatter} />
               </Form.Item>
             </Col>
           </Row>
@@ -131,7 +138,16 @@ export const DetailText = (props: DetailTextProps) => {
             </Col>
             <Col span="14" className={colClassName}>
               <Form.Item className={formItemClassName} name="fontWeight">
-                <InputNumber disabled={disabled} size="small" style={{ width: '100%' }} step={100} max={1000} min={100} />
+                <InputNumber
+                  disabled={disabled}
+                  size="small"
+                  style={{ width: '100%' }}
+                  step={100}
+                  max={1000}
+                  min={100}
+                  formatter={formatter}
+                  parser={formatter}
+                />
               </Form.Item>
             </Col>
           </Row>
@@ -141,7 +157,7 @@ export const DetailText = (props: DetailTextProps) => {
             </Col>
             <Col span="14" className={colClassName}>
               <Form.Item className={formItemClassName} name="lineHeight">
-                <InputNumber disabled={disabled} size="small" style={{ width: '100%' }} step={1} min={0} />
+                <InputNumber disabled={disabled} size="small" style={{ width: '100%' }} step={1} min={0} formatter={formatter} parser={formatter} />
               </Form.Item>
             </Col>
           </Row>

packages/studio/README.md

@@ -13,6 +13,13 @@
   <a href="https://idrawjs.com/studio/" target="_blank">idrawjs.com/studio/</a>
 </p>
 
+## Sponsors
+
+`@idraw/studio` is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider [sponsoring iDrawjs's development](https://opencollective.com/idrawjs).
+
+[![Become a Backer](https://opencollective.com/idrawjs/tiers/backers.svg?avatarHeight=48)](https://opencollective.com/idrawjs)
+
+
 
 ## @idraw/studio Preview
 
@@ -25,7 +32,7 @@ The preview of `@idraw/studo`.
 
   <img width="700" alt="idraw-studio-light-theme" src="https://github.com/idrawjs/studio/assets/8216630/8a49bab8-1e4a-44dd-9836-b6ce3861aaea" />
 
-  <img width="600" alt="idraw-studio-dark-theme" src="https://github.com/idrawjs/studio/assets/8216630/479fce0b-891f-47f2-ace8-d91580e68b4b" />
+  <img width="700" alt="idraw-studio-dark-theme" src="https://github.com/idrawjs/studio/assets/8216630/479fce0b-891f-47f2-ace8-d91580e68b4b" />
 
 </p>
 

packages/studio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio",
-  "version": "0.4.0-alpha.12",
+  "version": "0.4.0-alpha.13",
   "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.12",
+    "@idraw/studio-base": "^0.4.0-alpha.13",
     "classnames": "^2.3.2",
     "is-hotkey": "^0.2.0"
   },
   "peerDependencies": {
     "antd": "^5.12.1",
-    "idraw": "^0.4.0-beta.12",
+    "idraw": "^0.4.0-beta.13",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"

packages/studio/src/css/modules/dashboard.less

@@ -48,9 +48,10 @@
     right: 0;
   }
   .@{mod-dashboard}-left {
-    border-right: 1px solid;
+    border-right: 2px solid;
     border-color: ~'var(--@{prefix}-border-color)';
     height: 100%;
+    box-sizing: border-box;
   }
 
   .@{mod-dashboard}-right {

packages/studio/src/css/modules/header.less

@@ -16,6 +16,7 @@
     flex-direction: row;
   }
   .@{mod-header}-center {
+    width: 100%;
     display: flex;
     flex-direction: row;
   }

packages/studio/src/locale/languages/en-US.ts

@@ -18,6 +18,12 @@ const localeValues: Locale = {
     group: 'Group',
     devicePixelRatio: 'Device pixel ratio'
   },
+  Toolbar: {
+    layers: 'Layers',
+    ruler: 'Ruler',
+    attributes: 'Attributes',
+    hand: 'Hand tool'
+  },
   contextMenu: {
     copy: 'Copy',
     paste: 'Paste',