Implement fixed horizontal and vertical position controls

keitaroinc · Sep 6, 2023 · 64ac350 · 64ac350
1 parent 2d94ab6
commit 64ac350
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 2 deletions.
diff --git a/src/components/CanvasHeadline/CanvasHeadline.tsx b/src/components/CanvasHeadline/CanvasHeadline.tsx
@@ -14,6 +14,24 @@ export const CanvasHeadline: React.FunctionComponent<CanvasHeadlineProps> = (
     CanvasPreviewContextValues
   );
 
+  const handleHorizontalAlignChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setCanvasHeadlineValues({
+      ...canvasHeadlineValues,
+      align: { ...canvasHeadlineValues.align, horizontal: event.target.value },
+    });
+  };
+
+  const handleVerticalAlignChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setCanvasHeadlineValues({
+      ...canvasHeadlineValues,
+      align: { ...canvasHeadlineValues.align, vertical: event.target.value },
+    });
+  };
+
   const handleHorizontalPositionChange = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -95,7 +113,9 @@ export const CanvasHeadline: React.FunctionComponent<CanvasHeadlineProps> = (
           title="Headline Horizontal Position"
           id="headlineHorizontalRange"
           value={canvasHeadlineValues.position.x}
+          align={canvasHeadlineValues.align.horizontal}
           onChange={(e: any) => handleHorizontalPositionChange(e)}
+          onHorizontalAlignChange={(e: any) => handleHorizontalAlignChange(e)}
           labelTitle={"Horizontal Position"}
           labelValue={canvasHeadlineValues.position.x}
           type="horizontal-position"
@@ -107,7 +127,9 @@ export const CanvasHeadline: React.FunctionComponent<CanvasHeadlineProps> = (
           title="Headline Vertical Position"
           id="headlineVerticalRange"
           value={canvasHeadlineValues.position.y}
+          align={canvasHeadlineValues.align.vertical}
           onChange={(e: any) => handleVerticalPositionChange(e)}
+          onVerticalAlignChange={(e: any) => handleVerticalAlignChange(e)}
           labelTitle={"Vertical Position"}
           labelValue={canvasHeadlineValues.position.y}
           type="vertical-position"

diff --git a/src/components/CanvasLogo/CanvasLogo.tsx b/src/components/CanvasLogo/CanvasLogo.tsx
@@ -22,6 +22,24 @@ export const CanvasLogo: React.FunctionComponent<CanvasLogoProps> = (props) => {
   const max = 24;
   const maxStep = 1;
 
+  const handleHorizontalAlignChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setCanvasLogoValues({
+      ...canvasLogoValues,
+      align: { ...canvasLogoValues.align, horizontal: event.target.value },
+    });
+  };
+
+  const handleVerticalAlignChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setCanvasLogoValues({
+      ...canvasLogoValues,
+      align: { ...canvasLogoValues.align, vertical: event.target.value },
+    });
+  };
+
   return (
     <Fragment>
       <HeaderComponent>
@@ -106,9 +124,11 @@ export const CanvasLogo: React.FunctionComponent<CanvasLogoProps> = (props) => {
           id="logoHorizontalPosition"
           title="Logo Horizontal Position"
           value={canvasLogoValues.position.x}
+          align={canvasLogoValues.align.horizontal}
           min={1}
           max={max - 2}
           step={maxStep}
+          onHorizontalAlignChange={(e: any) => handleHorizontalAlignChange(e)}
           onChange={(e: any) =>
             setCanvasLogoValues({
               ...canvasLogoValues,
@@ -125,10 +145,12 @@ export const CanvasLogo: React.FunctionComponent<CanvasLogoProps> = (props) => {
         <RangeControl
           id="logoVerticalPosition"
           title="Logo Vertical Position"
-          defaultValue={canvasLogoValues.position.y}
+          value={canvasLogoValues.position.y}
+          align={canvasLogoValues.align.vertical}
           min={1}
           step={maxStep}
           max={max}
+          onVerticalAlignChange={(e: any) => handleVerticalAlignChange(e)}
           onChange={(e: any) =>
             setCanvasLogoValues({
               ...canvasLogoValues,

diff --git a/src/components/RangeControl/RangeControl.tsx b/src/components/RangeControl/RangeControl.tsx
@@ -7,7 +7,10 @@ type RangeControlProps = {
   id: any;
   title: string;
   value?: any;
+  align?: string;
   onChange: Function;
+  onHorizontalAlignChange?: any;
+  onVerticalAlignChange?: any;
   className?: any;
   defaultValue?: any;
   labelTitle?: string;
@@ -24,6 +27,9 @@ export const RangeControl: React.FC<RangeControlProps> = ({
   title,
   value,
   onChange,
+  align,
+  onHorizontalAlignChange,
+  onVerticalAlignChange,
   defaultValue,
   className,
   labelTitle,
@@ -41,6 +47,9 @@ export const RangeControl: React.FC<RangeControlProps> = ({
               className="btn-check"
               name={`${type}-${id}`}
               id={`${type}-${id}-start`}
+              value="start"
+              checked={align === "start"}
+              onChange={(e) => onHorizontalAlignChange(e)}
             />
             <label
               className="btn btn-outline-secondary"
@@ -53,6 +62,9 @@ export const RangeControl: React.FC<RangeControlProps> = ({
               className="btn-check"
               name={`${type}-${id}`}
               id={`${type}-${id}-center`}
+              value="center"
+              checked={align === "center"}
+              onChange={(e) => onHorizontalAlignChange(e)}
             />
             <label
               className="btn btn-outline-secondary"
@@ -65,13 +77,31 @@ export const RangeControl: React.FC<RangeControlProps> = ({
               className="btn-check"
               name={`${type}-${id}`}
               id={`${type}-${id}-end`}
+              value="end"
+              checked={align === "end"}
+              onChange={(e) => onHorizontalAlignChange(e)}
             />
             <label
               className="btn btn-outline-secondary"
               htmlFor={`${type}-${id}-end`}
             >
               <i className="bi bi-align-end"></i>
             </label>
+            <input
+              type="radio"
+              className="btn-check"
+              name={`${type}-${id}`}
+              id={`${type}-${id}-none`}
+              value=""
+              checked={align === ""}
+              onChange={(e) => onHorizontalAlignChange(e)}
+            />
+            <label
+              className="btn btn-outline-secondary"
+              htmlFor={`${type}-${id}-none`}
+            >
+              <i className="bi bi-distribute-horizontal"></i>
+            </label>
           </div>
         );
       case "vertical-position":
@@ -82,6 +112,9 @@ export const RangeControl: React.FC<RangeControlProps> = ({
               className="btn-check"
               name={`${type}-${id}`}
               id={`${type}-${id}-top`}
+              value="top"
+              checked={align === "top"}
+              onChange={(e) => onVerticalAlignChange(e)}
             />
             <label
               className="btn btn-outline-secondary"
@@ -94,6 +127,9 @@ export const RangeControl: React.FC<RangeControlProps> = ({
               className="btn-check"
               name={`${type}-${id}`}
               id={`${type}-${id}-middle`}
+              value="middle"
+              checked={align === "middle"}
+              onChange={(e) => onVerticalAlignChange(e)}
             />
             <label
               className="btn btn-outline-secondary"
@@ -106,13 +142,31 @@ export const RangeControl: React.FC<RangeControlProps> = ({
               className="btn-check"
               name={`${type}-${id}`}
               id={`${type}-${id}-bottom`}
+              value="bottom"
+              checked={align === "bottom"}
+              onChange={(e) => onVerticalAlignChange(e)}
             />
             <label
               className="btn btn-outline-secondary"
               htmlFor={`${type}-${id}-bottom`}
             >
               <i className="bi bi-align-bottom"></i>
             </label>
+            <input
+              type="radio"
+              className="btn-check"
+              name={`${type}-${id}`}
+              id={`${type}-${id}-none`}
+              value=""
+              checked={align === ""}
+              onChange={(e) => onVerticalAlignChange(e)}
+            />
+            <label
+              className="btn btn-outline-secondary"
+              htmlFor={`${type}-${id}-none`}
+            >
+              <i className="bi bi-distribute-vertical"></i>
+            </label>
           </div>
         );
       default:
@@ -141,8 +195,11 @@ export const RangeControl: React.FC<RangeControlProps> = ({
           onChange={(e) => onChange(e)}
           className={`form-range ${className}`}
           defaultValue={defaultValue && defaultValue}
+          disabled={align && align !== "" ? true : false}
         />
-        <span className="ms-3 badge bg-primary">{`${labelValue}${labelValueType}`}</span>
+        <span className="ms-3 badge bg-primary">
+          {align && align !== "" ? align : `${labelValue}${labelValueType}`}
+        </span>
       </div>
     </Fragment>
   );

diff --git a/src/contexts/CanvasPreviewContext.tsx b/src/contexts/CanvasPreviewContext.tsx
@@ -33,6 +33,10 @@ export const Provider = (props: {
       content: "Headline text goes here and it can get pretty long...",
       color: "#000000",
       size: 4,
+      align: {
+        horizontal: '',
+        vertical: ''
+      },
       position: {
         x: 2,
         y: 2,
@@ -78,6 +82,10 @@ export const Provider = (props: {
         content: "",
         color: "#000000",
       },
+      align: {
+        horizontal: '',
+        vertical: ''
+      },
       position: {
         x: 2,
         y: 22,

diff --git a/src/interfaces/canvasPreviewInterfaces.ts b/src/interfaces/canvasPreviewInterfaces.ts
@@ -23,6 +23,10 @@ export interface CanvasHeadlineValuesInterface {
   content: string;
   color: string;
   size: number;
+  align: {
+    horizontal: string;
+    vertical: string;
+  };
   position: {
     x: number;
     y: number;
@@ -65,6 +69,10 @@ export interface CanvasLogoValuesInterface {
     content: string;
     color: string;
   };
+  align: {
+    horizontal: string;
+    vertical: string;
+  };
   position: {
     x: number;
     y: number;