Add a slider for changing the logo's size

.eslintrc.json

@@ -9,10 +9,7 @@
         "plugin:react/recommended",
         "plugin:@typescript-eslint/recommended",
         "standard",
-        "prettier",
-        "prettier/@typescript-eslint",
-        "prettier/react",
-        "prettier/standard"
+        "prettier"
     ],
     "rules": {
         "react-hooks/rules-of-hooks": "error",

.gitignore

@@ -1,6 +1,6 @@
 .build
 build
-plugin_build
+plugin_build/
 web_modules
 node_modules
 package-lock.json

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "emmet.showAbbreviationSuggestions": false
+    "emmet.showAbbreviationSuggestions": false,
+    "editor.formatOnSave": true,
+    "vsintellicode.features.python.deepLearning": "enabled"
 }

package.json

@@ -28,6 +28,7 @@
     "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
+    "react-range": "^1.8.7",
     "react-router-dom": "^5.2.0",
     "react-select": "^4.3.0",
     "uuid": "^8.3.2"

plugin_build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-blocks', 'wp-i18n'), 'version' => 'a403e8cba0f53d92a2ebe57ed4fa2915');
+<?php return array('dependencies' => array('react', 'wp-blocks', 'wp-i18n'), 'version' => '11d8a41369fd062bd2e1e7a26ad930c9');

plugin_build/logo-maker.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '42468e3f7249b847b516c0bcb82753e5');
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => 'f64ee99e26b2eac9d17c8012291dd287');

src/components/ui/SelectLogo.tsx

@@ -2,12 +2,14 @@ import * as React from "react"
 import logos, { LogoSVGImport } from "../../assets/logos/index"
 import LogoItem from "./LogoItem"
 import store from "../../stores/UIStore"
+import { Range } from "react-range"
 
 /**
  * This function will generate the `Select Logo Meniu` from design
  */
 const SelectLogo: React.FunctionComponent<unknown> = () => {
     const selectedLogoID = store.useState((s) => s.logo.src.id)
+    const scaleLogo = store.useState((s) => s.logo.scale) || 1.0
 
     /**
      * Updated logo source of the user interface store
@@ -20,6 +22,12 @@ const SelectLogo: React.FunctionComponent<unknown> = () => {
         })
     }
 
+    const setScale = (value: number) => {
+        store.update((s) => {
+            s.logo.scale = value
+        })
+    }
+
     /**
      * Render the logos for the menu
      */
@@ -32,6 +40,77 @@ const SelectLogo: React.FunctionComponent<unknown> = () => {
     return (
         <div className="select-logo">
             <h1>{`LOGO OPTIONS (${logos.length})`}</h1>
+            <p>Select the scale</p>
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    flexWrap: "wrap",
+                    height: "75px",
+                }}
+            >
+                <Range
+                    step={0.1}
+                    min={0.5}
+                    max={2.0}
+                    values={[scaleLogo]}
+                    onChange={(values) => setScale(values.pop() || 1)}
+                    renderTrack={({ props, children }) => (
+                        <div
+                            {...props}
+                            style={{
+                                ...props.style,
+                                height: "6px",
+                                width: "90%",
+                                backgroundColor: "#ccc",
+                            }}
+                        >
+                            {children}
+                        </div>
+                    )}
+                    renderThumb={({ props, isDragged }) => (
+                        <div
+                            {...props}
+                            style={{
+                                ...props.style,
+                                height: "42px",
+                                width: "42px",
+                                borderRadius: "4px",
+                                backgroundColor: "#FFF",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                boxShadow: "0px 2px 6px #AAA",
+                            }}
+                        >
+                            <div
+                                style={{
+                                    position: "absolute",
+                                    top: "-28px",
+                                    color: "#fff",
+                                    fontWeight: "bold",
+                                    fontSize: "14px",
+                                    fontFamily: "Arial,Helvetica Neue,Helvetica,sans-serif",
+                                    padding: "4px",
+                                    borderRadius: "4px",
+                                    backgroundColor: "#548BF4",
+                                }}
+                            >
+                                {`${scaleLogo.toFixed(1)}x`}
+                            </div>
+                            <div
+                                style={{
+                                    height: "16px",
+                                    width: "5px",
+                                    backgroundColor: isDragged ? "#548BF4" : "#CCC",
+                                }}
+                            />
+                        </div>
+                    )}
+                />
+            </div>
+
             <p>Select a symbol for the logo</p>
             <div
                 className="logo-list"

src/engine/render/shapesBuilder.ts

@@ -71,7 +71,7 @@ export function buildDefaultShapes(parent: Svg, componentsProps: LogoProps, font
 
     // Apply other properties
     logo.viewbox(0, 0, logo.bbox().width, logo.bbox().height + 5)
-        .size(pLogo.width, pLogo.height)
+        .size(pLogo.width * pLogo.scale, pLogo.height * pLogo.scale)
         .css("fill", pLogo.style.fill);
 
     if( (title as Text).font !== undefined ) {

src/stores/UIStore.ts

@@ -37,6 +37,8 @@ export type TLogo = {
     style: {
         fill: string
     }
+    /** Scale */
+    scale: number
 }
 
 /** The title props */
@@ -100,6 +102,7 @@ export const UIStore = new Store<StoreProps>(
             style: {
                 fill: "#FFFFFF",
             },
+            scale: 1
         },
 
         title: {