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

feat: update icons and locale

packages/studio-base/src/icons/aim.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="M952 474H829.8C812.5 327.6 696.4 211.5 550 194.2V72c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v122.2C327.6 211.5 211.5 327.6 194.2 474H72c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h122.2C211.5 696.4 327.6 812.5 474 829.8V952c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V829.8C696.4 812.5 812.5 696.4 829.8 550H952c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM512 756c-134.8 0-244-109.2-244-244s109.2-244 244-244 244 109.2 244 244-109.2 244-244 244z"></path>
+        <path d="M512 392c-32.1 0-62.1 12.4-84.8 35.2-22.7 22.7-35.2 52.7-35.2 84.8s12.5 62.1 35.2 84.8C449.9 619.4 480 632 512 632s62.1-12.5 84.8-35.2C619.4 574.1 632 544 632 512s-12.5-62.1-35.2-84.8C574.1 404.4 544.1 392 512 392z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/code.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="M438.4 849.1l222.7-646.7c0.2-0.5 0.3-1.1 0.4-1.6L438.4 849.1z" opacity=".224"></path>
+        <path d="M661.2 168.7h-67.5c-3.4 0-6.5 2.2-7.6 5.4L354.7 846c-0.3 0.8-0.4 1.7-0.4 2.6 0 4.4 3.6 8 8 8h67.8c3.4 0 6.5-2.2 7.6-5.4l0.7-2.1 223.1-648.3 7.4-21.4c0.3-0.8 0.4-1.7 0.4-2.6-0.1-4.5-3.6-8.1-8.1-8.1zM954.6 502.1c-0.8-1-1.7-1.9-2.7-2.7l-219-171.3c-3.5-2.7-8.5-2.1-11.2 1.4-1.1 1.4-1.7 3.1-1.7 4.9v81.3c0 2.5 1.1 4.8 3.1 6.3l115 90-115 90c-1.9 1.5-3.1 3.8-3.1 6.3v81.3c0 4.4 3.6 8 8 8 1.8 0 3.5-0.6 4.9-1.7l219-171.3c6.9-5.4 8.2-15.5 2.7-22.5zM291.1 328.1l-219 171.3c-1 0.8-1.9 1.7-2.7 2.7-5.4 7-4.2 17 2.7 22.5l219 171.3c1.4 1.1 3.1 1.7 4.9 1.7 4.4 0 8-3.6 8-8v-81.3c0-2.5-1.1-4.8-3.1-6.3l-115-90 115-90c1.9-1.5 3.1-3.8 3.1-6.3v-81.3c0-1.8-0.6-3.5-1.7-4.9-2.7-3.5-7.7-4.1-11.2-1.4z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/download.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="M505.7 661c3.2 4.1 9.4 4.1 12.6 0l112-141.7c4.1-5.2 0.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8z"></path>
+        <path d="M878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/github.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="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/heart.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="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

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

@@ -1,3 +1,4 @@
+import IconAim from './aim';
 import IconAlignCenter from './align-center';
 import IconAlignLeft from './align-left';
 import IconAlignRight from './align-right';
@@ -13,6 +14,7 @@ import IconCheck from './check';
 import IconCircle from './circle';
 import IconCloseCircle from './close-circle';
 import IconConstrain from './constrain';
+import IconCode from './code';
 import IconCornerRadiusBottomLeft from './corner-radius-bottom-left';
 import IconCornerRadiusBottomRight from './corner-radius-bottom-right';
 import IconCornerRadiusTopLeft from './corner-radius-top-left';
@@ -24,14 +26,17 @@ import IconDelete from './delete';
 import IconDoubleCircle from './double-circle';
 import IconDoubleLeft from './double-left';
 import IconDown from './down';
+import IconDownload from './download';
 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 IconGitHub from './github';
 import IconGroup from './group';
 import IconHand from './hand';
+import IconHeart from './heart';
 import IconHome from './home';
 import IconHTML from './html';
 import IconIndent from './indent';
@@ -40,6 +45,7 @@ import IconInvisible from './invisible';
 import IconLayer from './layer';
 import IconLeft from './left';
 import IconLight from './light';
+import IconLike from './like';
 import IconLock from './lock';
 import IconMore from './more';
 import IconMouse from './mouse';
@@ -67,6 +73,7 @@ import IconVerticalTop from './vertical-top';
 import IconVisible from './visible';
 
 export {
+  IconAim,
   IconAlignCenter,
   IconAlignLeft,
   IconAlignRight,
@@ -81,6 +88,7 @@ export {
   IconCheck,
   IconCircle,
   IconCloseCircle,
+  IconCode,
   IconConstrain,
   IconCornerRadiusBottomLeft,
   IconCornerRadiusBottomRight,
@@ -93,14 +101,17 @@ export {
   IconDoubleCircle,
   IconDoubleLeft,
   IconDown,
+  IconDownload,
   IconDrag,
   IconEdit,
   IconExperiment,
   IconFile,
   IconFileCopy,
   IconFullCornerRadius,
+  IconGitHub,
   IconGroup,
   IconHand,
+  IconHeart,
   IconHome,
   IconHTML,
   IconIndent,
@@ -109,6 +120,7 @@ export {
   IconLayer,
   IconLeft,
   IconLight,
+  IconLike,
   IconLock,
   IconMore,
   IconMouse,

packages/studio-base/src/icons/like.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="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4-20.5-21.5-48.1-33.4-77.9-33.4-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-0.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81z m636.4-353l-21.9 19 13.9 25.4c4.6 8.4 6.9 17.6 6.9 27.3 0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4c4.6 8.4 6.9 17.6 6.9 27.3 0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4c4.6 8.4 6.9 17.6 6.9 27.3 0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5c5.2-18.9 22.5-32.2 42.2-32.3 7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/util/icon-wrapper.tsx

@@ -1,11 +1,12 @@
-import React, { CSSProperties, useMemo, useContext } from 'react';
+import React, { CSSProperties, useMemo } from 'react';
 import classnames from 'classnames';
-import { ConfigContext } from '../../modules/config-provider';
+// import { ConfigContext } from '../../modules/config-provider';
+import { generateClassName } from '../../css';
 
 const iconPrefixBaseName = 'icon';
 
 export const useIconClassName = () => {
-  const { generateClassName } = useContext(ConfigContext);
+  // const { generateClassName } = useContext(ConfigContext);
   const iconClassName = generateClassName(iconPrefixBaseName);
   return { iconClassName };
 };

packages/studio-base/src/index.ts

@@ -14,6 +14,7 @@ export { useThemeClassName } from './hooks/theme';
 export * from './locale/types';
 
 export {
+  IconAim,
   IconAlignCenter,
   IconAlignLeft,
   IconAlignRight,
@@ -28,6 +29,7 @@ export {
   IconCheck,
   IconCircle,
   IconCloseCircle,
+  IconCode,
   IconConstrain,
   IconCornerRadiusBottomLeft,
   IconCornerRadiusBottomRight,
@@ -40,14 +42,17 @@ export {
   IconDoubleCircle,
   IconDoubleLeft,
   IconDown,
+  IconDownload,
   IconDrag,
   IconEdit,
   IconExperiment,
   IconFile,
   IconFileCopy,
   IconFullCornerRadius,
+  IconGitHub,
   IconGroup,
   IconHand,
+  IconHeart,
   IconHome,
   IconHTML,
   IconIndent,
@@ -56,6 +61,7 @@ export {
   IconLayer,
   IconLeft,
   IconLight,
+  IconLike,
   IconLock,
   IconMore,
   IconMouse,

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

@@ -22,7 +22,8 @@ const localeValues: Locale = {
     layers: 'Layers',
     ruler: 'Ruler',
     attributes: 'Attributes',
-    hand: 'Hand tool'
+    hand: 'Hand tool',
+    centerContent: 'Center content'
   },
   contextMenu: {
     copy: 'Copy',

packages/studio/src/locale/languages/zh-CN.ts

@@ -22,7 +22,8 @@ const localeValues: Locale = {
     layers: '图层',
     ruler: '标尺',
     attributes: '属性',
-    hand: '拖拽工具'
+    hand: '拖拽工具',
+    centerContent: '内容居中'
   },
   contextMenu: {
     copy: '复制',

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo, useContext } from 'react';
 import type { CSSProperties } from 'react';
 import classnames from 'classnames';
 import { Button, type ButtonProps, Tooltip } from 'antd';
-import { ConfigContext, IconLayer, IconSetting, IconRuler, IconDrag } from '@idraw/studio-base';
+import { ConfigContext, IconLayer, IconSetting, IconRuler, IconDrag, IconAim } from '@idraw/studio-base';
 import type { SharedEvent, SharedStore } from '../../types';
 import { useLocale } from '../../locale';
 
@@ -87,6 +87,17 @@ export const Toolbar = (props: ToolbarProps) => {
               }}
             />
           </Tooltip>
+          <Tooltip title={moduleLocale.centerContent}>
+            <Button
+              {...btnProps}
+              type="text"
+              icon={<IconAim style={{ ...iconStyle, fontSize: 20 }} />}
+              onClick={() => {
+                const idraw = sharedStore.get('idraw');
+                idraw?.centerContent();
+              }}
+            />
+          </Tooltip>
         </div>
       </div>
     );

packages/studio/src/types/lib/locale.ts

@@ -25,6 +25,7 @@ export interface Locale<T = LocaleCode> {
     ruler: string;
     attributes: string;
     hand: string;
+    centerContent: string;
   };
   contextMenu: {
     copy: string;