changing new shape property sets it as default (#520)

* changing new shape property sets it as default

* set correct opacity while editing new test

Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

src/actions/actionProperties.tsx

@@ -102,6 +102,7 @@ export const actionChangeFillStyle: Action = {
         shape: null,
         fillStyle: value,
       })),
+      appState: { ...appState, currentItemFillStyle: value },
     };
   },
   PanelComponent: ({ elements, appState, updateData, t }) => (
@@ -136,6 +137,7 @@ export const actionChangeStrokeWidth: Action = {
         shape: null,
         strokeWidth: value,
       })),
+      appState: { ...appState, currentItemStrokeWidth: value },
     };
   },
   PanelComponent: ({ elements, appState, updateData, t }) => (
@@ -168,6 +170,7 @@ export const actionChangeSloppiness: Action = {
         shape: null,
         roughness: value,
       })),
+      appState: { ...appState, currentItemRoughness: value },
     };
   },
   PanelComponent: ({ elements, appState, updateData, t }) => (
@@ -200,6 +203,7 @@ export const actionChangeOpacity: Action = {
         shape: null,
         opacity: value,
       })),
+      appState: { ...appState, currentItemOpacity: value },
     };
   },
   PanelComponent: ({ elements, appState, updateData, t }) => (
@@ -240,6 +244,12 @@ export const actionChangeFontSize: Action = {
 
         return el;
       }),
+      appState: {
+        ...appState,
+        currentItemFont: `${value}px ${
+          appState.currentItemFont.split("px ")[1]
+        }`,
+      },
     };
   },
   PanelComponent: ({ elements, appState, updateData, t }) => (
@@ -281,6 +291,12 @@ export const actionChangeFontFamily: Action = {
 
         return el;
       }),
+      appState: {
+        ...appState,
+        currentItemFont: `${
+          appState.currentItemFont.split("px ")[0]
+        }px ${value}`,
+      },
     };
   },
   PanelComponent: ({ elements, appState, updateData, t }) => (

src/appState.ts

@@ -13,6 +13,10 @@ export function getDefaultAppState(): AppState {
     exportBackground: true,
     currentItemStrokeColor: "#000000",
     currentItemBackgroundColor: "transparent",
+    currentItemFillStyle: "hachure",
+    currentItemStrokeWidth: 1,
+    currentItemRoughness: 1,
+    currentItemOpacity: 100,
     currentItemFont: "20px Virgil",
     viewBackgroundColor: "#ffffff",
     scrollX: 0,

src/element/textWysiwyg.tsx

@@ -7,6 +7,7 @@ type TextWysiwygParams = {
   y: number;
   strokeColor: string;
   font: string;
+  opacity: number;
   onSubmit: (text: string) => void;
   onCancel: () => void;
 };
@@ -23,6 +24,7 @@ export function textWysiwyg({
   y,
   strokeColor,
   font,
+  opacity,
   onSubmit,
   onCancel,
 }: TextWysiwygParams) {
@@ -38,6 +40,7 @@ export function textWysiwyg({
   Object.assign(editable.style, {
     color: strokeColor,
     position: "absolute",
+    opacity: opacity / 100,
     top: y + "px",
     left: x + "px",
     transform: "translate(-50%, -50%)",

src/index.tsx

@@ -126,6 +126,10 @@ function pickAppStatePropertiesForHistory(
     exportBackground: appState.exportBackground,
     currentItemStrokeColor: appState.currentItemStrokeColor,
     currentItemBackgroundColor: appState.currentItemBackgroundColor,
+    currentItemFillStyle: appState.currentItemFillStyle,
+    currentItemStrokeWidth: appState.currentItemStrokeWidth,
+    currentItemRoughness: appState.currentItemRoughness,
+    currentItemOpacity: appState.currentItemOpacity,
     currentItemFont: appState.currentItemFont,
     viewBackgroundColor: appState.viewBackgroundColor,
     name: appState.name,
@@ -791,10 +795,10 @@ export class App extends React.Component<any, AppState> {
               y,
               this.state.currentItemStrokeColor,
               this.state.currentItemBackgroundColor,
-              "hachure",
+              this.state.currentItemFillStyle,
-              1,
+              this.state.currentItemStrokeWidth,
-              1,
+              this.state.currentItemRoughness,
-              100,
+              this.state.currentItemOpacity,
             );
 
             if (isTextElement(element)) {
@@ -892,6 +896,7 @@ export class App extends React.Component<any, AppState> {
                 x: textX,
                 y: textY,
                 strokeColor: this.state.currentItemStrokeColor,
+                opacity: this.state.currentItemOpacity,
                 font: this.state.currentItemFont,
                 onSubmit: text => {
                   if (text) {
@@ -1234,10 +1239,10 @@ export class App extends React.Component<any, AppState> {
                       y,
                       this.state.currentItemStrokeColor,
                       this.state.currentItemBackgroundColor,
-                      "hachure",
+                      this.state.currentItemFillStyle,
-                      1,
+                      this.state.currentItemStrokeWidth,
-                      1,
+                      this.state.currentItemRoughness,
-                      100,
+                      this.state.currentItemOpacity,
                     ),
                     "", // default text
                     this.state.currentItemFont, // default font
@@ -1296,6 +1301,7 @@ export class App extends React.Component<any, AppState> {
               y: textY,
               strokeColor: element.strokeColor,
               font: element.font,
+              opacity: this.state.currentItemOpacity,
               onSubmit: text => {
                 if (text) {
                   elements = [

src/types.ts

@@ -11,6 +11,10 @@ export type AppState = {
   exportBackground: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;
+  currentItemFillStyle: string;
+  currentItemStrokeWidth: number;
+  currentItemRoughness: number;
+  currentItemOpacity: number;
   currentItemFont: string;
   viewBackgroundColor: string;
   scrollX: number;