From 200bc5d2ac256571286cdd760cd3256cf40eddd9 Mon Sep 17 00:00:00 2001
From: liuxiu <liuxiu@hongdatelecom.cn>
Date: Thu, 20 Apr 2023 16:01:06 +0800
Subject: [PATCH 1/2] perf: Optimizing the conversion of .png images

---
 src/app.jsx | 50 +++++++++++++++++++++++++++++---------------------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index a12e1fa..87d6d57 100755
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -1,6 +1,5 @@
 import React, { Fragment, useState } from 'react';
 import tinycolor from 'tinycolor2';
-import _ from 'lodash';
 
 import {
   JBX,
@@ -36,34 +35,36 @@ const Textarea = Styled.textarea({
   },
 });
 
-function compressColor(rgb) {
-  const hex = tinycolor(rgb).toHexString();
+function compressColor(rgba) {
+  const hex = tinycolor(rgba).toHex8String();
 
   switch (
     hex // based on CSS3 supported color names http://www.w3.org/TR/css3-color/
   ) {
-    case '#c0c0c0':
+    case '#c0c0c0ff':
       return 'silver';
-    case '#808080':
+    case '#808080ff':
       return 'gray';
-    case '#800000':
+    case '#800000ff':
       return 'maroon';
-    case '#ff0000':
+    case '#ff0000ff':
       return 'red';
-    case '#800080':
+    case '#800080ff':
       return 'purple';
-    case '#008000':
+    case '#008000ff':
       return 'green';
-    case '#808000':
+    case '#808000ff':
       return 'olive';
-    case '#000080':
+    case '#000080ff':
       return 'navy';
-    case '#008080':
+    case '#008080ff':
       return 'teal';
   }
-  return hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]
-    ? '#' + hex[1] + hex[3] + hex[5]
-    : hex;
+  if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6] && hex[7] === hex[8]) {
+    if (hex[7] === 'f') return '#' + hex[1] + hex[3] + hex[5];
+    return '#' + hex[1] + hex[3] + hex[5] + hex[7];
+  }
+  return hex.slice(0, 7);
 }
 
 function App() {
@@ -109,20 +110,27 @@ function App() {
 
   let scale = 1;
 
-  const masterShadow = _.map(rgbMatrix, (row, rowIndexSrc) => {
-    return _.map(row, (col, colIndexSrc) => {
+  const masterShadowArr = [];
+  rgbMatrix?.forEach((row, rowIndexSrc) => {
+    row.forEach((col, colIndexSrc) => {
+      if (col.a === 0) return;
+
       const i = colIndexSrc * scale;
       const j = rowIndexSrc * scale;
 
-      const color = compressColor(`rgb(${col.r},${col.g},${col.b})`);
+      const color = compressColor(`rgba(${col.r},${col.g},${col.b},${col.a})`);
 
       const scaleCompensation = scale !== 1 ? ` 0 ${scale / 2}px` : ``;
 
-      return `${color} ${j ? j + 'px' : 0} ${
+      const shadow = `${color} ${j ? j + 'px' : 0} ${
         i ? i + 'px' : 0
       }${scaleCompensation}`;
-    }).join(',');
-  }).join(',');
+
+      masterShadowArr.push(shadow);
+    });
+  });
+
+  const masterShadow = masterShadowArr.join(',');
 
   const handleFocus = (event) => {
     event.preventDefault();

From 1a7af0bab3273ad53fb0d876118a1229a1a69b72 Mon Sep 17 00:00:00 2001
From: liuxiu <liuxiu@hongdatelecom.cn>
Date: Thu, 20 Apr 2023 16:36:50 +0800
Subject: [PATCH 2/2] remove lodash logical structure optimization

---
 package.json |  1 -
 src/app.jsx  | 10 ++++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 6b2e137..c612892 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
     "canvas-image-utils": "^2.1.1",
     "capsize": "^2.0.0",
     "jbx": "^1.7.6",
-    "lodash": "^4.17.20",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "^5.0.0",
diff --git a/src/app.jsx b/src/app.jsx
index 87d6d57..7be7b7f 100755
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -60,11 +60,13 @@ function compressColor(rgba) {
     case '#008080ff':
       return 'teal';
   }
-  if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6] && hex[7] === hex[8]) {
-    if (hex[7] === 'f') return '#' + hex[1] + hex[3] + hex[5];
-    return '#' + hex[1] + hex[3] + hex[5] + hex[7];
+  if (hex[7] === hex[8] && hex[7] === 'f') {
+    if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {
+      return '#' + hex[1] + hex[3] + hex[5];
+    }
+    return hex.slice(0, 7);
   }
-  return hex.slice(0, 7);
+  return hex;
 }
 
 function App() {