From 1bae203a78b3fd4a51bc800efb2a8960fac28fe7 Mon Sep 17 00:00:00 2001 From: lissitz <53315888+lissitz@users.noreply.github.com> Date: Sat, 25 Jan 2020 18:58:57 +0100 Subject: [PATCH] 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 --- src/actions/actionProperties.tsx | 16 ++++++++++++++++ src/appState.ts | 4 ++++ src/element/textWysiwyg.tsx | 3 +++ src/index.tsx | 22 ++++++++++++++-------- src/types.ts | 4 ++++ 5 files changed, 41 insertions(+), 8 deletions(-) diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx index b2414555..07a4c00d 100644 --- a/src/actions/actionProperties.tsx +++ b/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 }) => ( diff --git a/src/appState.ts b/src/appState.ts index 08964af9..8ca9fabb 100644 --- a/src/appState.ts +++ b/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, diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index 7e2cfa6f..7d8aede6 100644 --- a/src/element/textWysiwyg.tsx +++ b/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%)", diff --git a/src/index.tsx b/src/index.tsx index ac50de21..453119e1 100644 --- a/src/index.tsx +++ b/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 { y, this.state.currentItemStrokeColor, this.state.currentItemBackgroundColor, - "hachure", - 1, - 1, - 100, + this.state.currentItemFillStyle, + this.state.currentItemStrokeWidth, + this.state.currentItemRoughness, + this.state.currentItemOpacity, ); if (isTextElement(element)) { @@ -892,6 +896,7 @@ export class App extends React.Component { 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 { y, this.state.currentItemStrokeColor, this.state.currentItemBackgroundColor, - "hachure", - 1, - 1, - 100, + this.state.currentItemFillStyle, + this.state.currentItemStrokeWidth, + this.state.currentItemRoughness, + this.state.currentItemOpacity, ), "", // default text this.state.currentItemFont, // default font @@ -1296,6 +1301,7 @@ export class App extends React.Component { y: textY, strokeColor: element.strokeColor, font: element.font, + opacity: this.state.currentItemOpacity, onSubmit: text => { if (text) { elements = [ diff --git a/src/types.ts b/src/types.ts index 3634dacd..f9d6cd81 100644 --- a/src/types.ts +++ b/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;