feat(property): support stroke style setting

packages/drawnix/src/components/size-slider.tsx

@@ -49,7 +49,6 @@ export const SizeSlider: React.FC<SliderProps> = ({
         const newValue =
           Math.round((percentage * (max - min)) / step) * step + min;
         setValue(newValue);
-        console.log(`newValue: ${newValue}`);
         onChange && onChange(newValue);
       }
     },

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

@@ -29,3 +29,13 @@
         }
     }
 }
+
+.stroke-setting {
+    &.has-stroke-style {
+        padding-top: 8px !important;
+    }
+    .stroke-style-picker {
+        justify-content: space-between;
+        padding: 0 8px;
+    }
+}

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

@@ -61,6 +61,7 @@ export const PopupToolbar: React.FC<PopupToolbarProps> = ({}) => {
     fontColor?: string;
     hasFontColor?: boolean;
     hasStroke?: boolean;
+    hasStrokeStyle?: boolean;
     marks?: Omit<CustomText, 'text'>;
   } = {
     fill: 'red',
@@ -72,12 +73,18 @@ export const PopupToolbar: React.FC<PopupToolbarProps> = ({}) => {
     const hasText = selectedElements.some((value) =>
       hasTextProperty(board, value)
     );
-    const hasStroke = !PlaitBoard.hasBeenTextEditing(board);
+    const hasStroke =
+      selectedElements.some((value) => hasStrokeProperty(board, value)) &&
+      !PlaitBoard.hasBeenTextEditing(board);
+    const hasStrokeStyle =
+      selectedElements.some((value) => hasStrokeStyleProperty(board, value)) &&
+      !PlaitBoard.hasBeenTextEditing(board);
     state = {
       ...getElementState(board),
       hasFill,
       hasFontColor: hasText,
       hasStroke,
+      hasStrokeStyle,
     };
   }
   useEffect(() => {
@@ -178,6 +185,7 @@ export const PopupToolbar: React.FC<PopupToolbarProps> = ({}) => {
                 key={1}
                 currentColor={state.strokeColor}
                 title={`Stroke`}
+                hasStrokeStyle={state.hasStrokeStyle || false}
                 onColorSelect={(selectedColor: string) => {
                   PropertyTransforms.setStrokeColor(
                     board,
@@ -308,6 +316,33 @@ export const hasFillProperty = (board: PlaitBoard, element: PlaitElement) => {
   return false;
 };
 
+export const hasStrokeProperty = (board: PlaitBoard, element: PlaitElement) => {
+  if (MindElement.isMindElement(board, element)) {
+    return true;
+  }
+  if (PlaitDrawElement.isDrawElement(element)) {
+    return (
+      (PlaitDrawElement.isShapeElement(element) &&
+        !PlaitDrawElement.isImage(element) &&
+        !PlaitDrawElement.isText(element)) ||
+      PlaitDrawElement.isArrowLine(element) ||
+      PlaitDrawElement.isVectorLine(element) ||
+      PlaitDrawElement.isTable(element)
+    );
+  }
+  return false;
+};
+
+export const hasStrokeStyleProperty = (
+  board: PlaitBoard,
+  element: PlaitElement
+) => {
+  return (
+    hasStrokeProperty(board, element) &&
+    !MindElement.isMindElement(board, element)
+  );
+};
+
 export const hasTextProperty = (board: PlaitBoard, element: PlaitElement) => {
   if (MindElement.isMindElement(board, element)) {
     return true;

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

@@ -5,13 +5,23 @@ import { ATTACHED_ELEMENT_CLASS_NAME, PlaitBoard } from '@plait/core';
 import { Island } from '../../island';
 import { ColorPicker } from '../../color-picker';
 import { isTransparent, isWhite, removeHexAlpha } from '../../../utils/color';
-import { StrokeIcon, StrokeWhiteIcon } from '../../icons';
+import {
+  StrokeIcon,
+  StrokeStyleDashedIcon,
+  StrokeStyleDotedIcon,
+  StrokeStyleNormalIcon,
+  StrokeWhiteIcon,
+} from '../../icons';
 import { Popover, PopoverContent, PopoverTrigger } from '../../popover/popover';
+import Stack from '../../stack';
+import { PropertyTransforms } from '@plait/common';
+import { getMemorizeKey, StrokeStyle } from '@plait/draw';
 
 export type PopupStrokeButtonProps = {
   board: PlaitBoard;
   currentColor: string | undefined;
   title: string;
+  hasStrokeStyle: boolean;
   children?: React.ReactNode;
   onColorSelect: (selectedColor: string) => void;
 };
@@ -20,6 +30,7 @@ export const PopupStrokeButton: React.FC<PopupStrokeButtonProps> = ({
   board,
   currentColor,
   title,
+  hasStrokeStyle,
   children,
   onColorSelect,
 }) => {
@@ -33,6 +44,10 @@ export const PopupStrokeButton: React.FC<PopupStrokeButtonProps> = ({
     ? StrokeWhiteIcon
     : undefined;
 
+  const setStrokeStyle = (style: StrokeStyle) => {
+    PropertyTransforms.setStrokeStyle(board, style, { getMemorizeKey });
+  };
+
   return (
     <>
       <Popover
@@ -61,14 +76,54 @@ export const PopupStrokeButton: React.FC<PopupStrokeButtonProps> = ({
         <PopoverContent container={container}>
           <Island
             padding={4}
-            className={classNames(`${ATTACHED_ELEMENT_CLASS_NAME}`)}
+            className={classNames(
+              `${ATTACHED_ELEMENT_CLASS_NAME}`,
+              'stroke-setting',
+              { 'has-stroke-style': hasStrokeStyle }
+            )}
           >
-            <ColorPicker
-              onSelect={(selectedColor) => {
-                onColorSelect(selectedColor);
-              }}
-              currentColor={currentColor}
-            ></ColorPicker>
+            <Stack.Col>
+              {hasStrokeStyle && (
+                <Stack.Row className={classNames('stroke-style-picker')}>
+                  <ToolButton
+                    visible={true}
+                    icon={StrokeStyleNormalIcon}
+                    type="button"
+                    title={title}
+                    aria-label={title}
+                    onPointerUp={() => {
+                      setStrokeStyle(StrokeStyle.solid);
+                    }}
+                  ></ToolButton>
+                  <ToolButton
+                    visible={true}
+                    icon={StrokeStyleDashedIcon}
+                    type="button"
+                    title={title}
+                    aria-label={title}
+                    onPointerUp={() => {
+                      setStrokeStyle(StrokeStyle.dashed);
+                    }}
+                  ></ToolButton>
+                  <ToolButton
+                    visible={true}
+                    icon={StrokeStyleDotedIcon}
+                    type="button"
+                    title={title}
+                    aria-label={title}
+                    onPointerUp={() => {
+                      setStrokeStyle(StrokeStyle.dotted);
+                    }}
+                  ></ToolButton>
+                </Stack.Row>
+              )}
+              <ColorPicker
+                onSelect={(selectedColor) => {
+                  onColorSelect(selectedColor);
+                }}
+                currentColor={currentColor}
+              ></ColorPicker>
+            </Stack.Col>
           </Island>
         </PopoverContent>
       </Popover>