feat: add stroke select state, add stroke type text

packages/drawnix/src/components/toolbar/popup-toolbar/popup-toolbar.tsx

@@ -26,12 +26,13 @@ import './popup-toolbar.scss';
 import {
   ArrowLineHandle,
   getStrokeColorByElement as getStrokeColorByDrawElement,
+  getStrokeStyleByElement,
   isClosedCustomGeometry,
   isClosedDrawElement,
   isDrawElementsIncludeText,
   PlaitDrawElement,
 } from '@plait/draw';
-import { CustomText } from '@plait/common';
+import { CustomText, StrokeStyle } from '@plait/common';
 import { getTextMarksByElement } from '@plait/text-plugins';
 import { PopupFontColorButton } from './font-color-button';
 import { PopupStrokeButton } from './stroke-button';
@@ -60,6 +61,7 @@ export const PopupToolbar = () => {
   let state: {
     fill: string | undefined;
     strokeColor?: string;
+    strokeStyle?: StrokeStyle;
     hasFill?: boolean;
     hasText?: boolean;
     fontColor?: string;
@@ -195,6 +197,7 @@ export const PopupToolbar = () => {
                 board={board}
                 key={1}
                 currentColor={state.strokeColor}
+                currentStyle={state.strokeStyle}
                 title={t('popupToolbar.stroke')}
                 hasStrokeStyle={state.hasStrokeStyle || false}
               >
@@ -234,7 +237,6 @@ export const PopupToolbar = () => {
                   key={4}
                   end={'source'}
                   endProperty={state.source}
-
                 />
                 <ArrowMarkButton
                   board={board}
@@ -259,6 +261,7 @@ export const getMindElementState = (
   return {
     fill: element.fill,
     strokeColor: getStrokeColorByMindElement(board, element),
+    strokeStyle:getStrokeStyleByElement(board, element),
     marks,
   };
 };
@@ -271,6 +274,7 @@ export const getDrawElementState = (
   return {
     fill: element.fill,
     strokeColor: getStrokeColorByDrawElement(board, element),
+    strokeStyle: getStrokeStyleByElement(board, element),
     marks,
     source: element?.source || {},
     target: element?.target || {},

packages/drawnix/src/components/toolbar/popup-toolbar/stroke-button.tsx

@@ -25,10 +25,12 @@ import {
   setStrokeColor,
   setStrokeColorOpacity,
 } from '../../../transforms/property';
+import { useI18n } from '../../../i18n';
 
 export type PopupStrokeButtonProps = {
   board: PlaitBoard;
   currentColor: string | undefined;
+  currentStyle?: StrokeStyle;
   title: string;
   hasStrokeStyle: boolean;
   children?: React.ReactNode;
@@ -37,6 +39,7 @@ export type PopupStrokeButtonProps = {
 export const PopupStrokeButton: React.FC<PopupStrokeButtonProps> = ({
   board,
   currentColor,
+  currentStyle,
   title,
   hasStrokeStyle,
   children,
@@ -45,6 +48,7 @@ export const PopupStrokeButton: React.FC<PopupStrokeButtonProps> = ({
   const hexColor = currentColor && removeHexAlpha(currentColor);
   const opacity = currentColor ? hexAlphaToOpacity(currentColor) : 100;
   const container = PlaitBoard.getBoardContainer(board);
+  const { t } = useI18n();
 
   const icon = isFullyTransparent(opacity)
     ? StrokeIcon
@@ -94,30 +98,35 @@ export const PopupStrokeButton: React.FC<PopupStrokeButtonProps> = ({
               <Stack.Row className={classNames('stroke-style-picker')}>
                 <ToolButton
                   visible={true}
+                  selected={
+                    !currentStyle || currentStyle === StrokeStyle.solid
+                  }
                   icon={StrokeStyleNormalIcon}
                   type="button"
-                  title={title}
-                  aria-label={title}
+                  title={`${title}—${t('stroke.solid')}`}
+                  aria-label={`${title}—${t('stroke.solid')}`}
                   onPointerUp={() => {
                     setStrokeStyle(StrokeStyle.solid);
                   }}
                 ></ToolButton>
                 <ToolButton
                   visible={true}
+                  selected={currentStyle === StrokeStyle.dashed}
                   icon={StrokeStyleDashedIcon}
                   type="button"
-                  title={title}
-                  aria-label={title}
+                  title={`${title}—${t('stroke.dashed')}`}
+                  aria-label={`${title}—${t('stroke.dashed')}`}
                   onPointerUp={() => {
                     setStrokeStyle(StrokeStyle.dashed);
                   }}
                 ></ToolButton>
                 <ToolButton
                   visible={true}
+                  selected={currentStyle === StrokeStyle.dotted}
                   icon={StrokeStyleDotedIcon}
                   type="button"
-                  title={title}
-                  aria-label={title}
+                  title={`${title}—${t('stroke.dotted')}`}
+                  aria-label={`${title}—${t('stroke.dotted')}`}
                   onPointerUp={() => {
                     setStrokeStyle(StrokeStyle.dotted);
                   }}

packages/drawnix/src/i18n.tsx

@@ -92,11 +92,16 @@ export interface Translations {
   'popupToolbar.fillColor': string;
   'popupToolbar.link': string;
 
-  //line 
+  //line
   'line.source': string;
   'line.target': string;
   'line.arrow': string;
   'line.none': string;
+
+  // stroke stype
+  'stroke.solid': string;
+  'stroke.dashed': string;
+  'stroke.dotted': string;
 }
 
 // Translation data
@@ -188,6 +193,11 @@ const translations: Record<Language, Translations> = {
     'line.target': '终点',
     'line.arrow': '箭头',
     'line.none': '无',
+
+    // stroke stype
+    'stroke.solid': '实线',
+    'stroke.dashed': '虚线',
+    'stroke.dotted': '点线',
   },
   en: {
     // Toolbar items
@@ -280,6 +290,11 @@ const translations: Record<Language, Translations> = {
     'line.target': 'End',
     'line.arrow': 'Arrow',
     'line.none': 'None',
+
+    // stroke stype
+    'stroke.solid': 'Solid',
+    'stroke.dashed': 'Dashed',
+    'stroke.dotted': 'Dotted',
   },
 };