Add color inversion option to font import

VUEngine · Sep 7, 2024 · e914351 · e914351
1 parent 529ebc4
commit e914351
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 5 deletions.
diff --git a/extensions/vuengine-studio-extension/src/core/browser/ves-common-types.ts b/extensions/vuengine-studio-extension/src/core/browser/ves-common-types.ts
@@ -66,6 +66,21 @@ export const PALETTE_VALUE_INDEX_MAP: { [value: number]: number }[] = [
     255: 3,
   }];
 
+export const PALETTE_VALUE_INVERSION_MAP: { [value: number]: number }[] = [{
+  0: 255,
+  85: 170,
+  170: 85,
+  255: 0,
+}, {
+  0: 255,
+  42: 212,
+  85: 170,
+  127: 127,
+  170: 85,
+  212: 42,
+  255: 0,
+}];
+
 export const WINDOWS_EXECUTABLE_EXTENSIONS = [
   'bat',
   'bin',

diff --git a/...extension/src/editors/browser/components/FontEditor/Tools/ImportExport/ImportSettings.tsx b/...extension/src/editors/browser/components/FontEditor/Tools/ImportExport/ImportSettings.tsx
@@ -1,6 +1,7 @@
 import { nls, URI } from '@theia/core';
 import { OpenFileDialogProps } from '@theia/filesystem/lib/browser';
 import React, { useContext, useEffect, useState } from 'react';
+import styled from 'styled-components';
 import { ColorMode } from '../../../../../../core/browser/ves-common-types';
 import {
     DEFAULT_COLOR_DISTANCE_CALCULATOR,
@@ -30,6 +31,11 @@ interface ImportSettingsProps {
     setImportCharacterCount: React.Dispatch<React.SetStateAction<number>>
 }
 
+const ReconvertButton = styled.button`
+    background-color: transparent;
+    height: 100%;
+`;
+
 export default function ImportSettings(props: ImportSettingsProps): React.JSX.Element {
     const {
         open,
@@ -47,6 +53,7 @@ export default function ImportSettings(props: ImportSettingsProps): React.JSX.El
     const [sourceImagePath, setSourceImagePath] = useState<string>();
     const [sourceImageHeight, setSourceImageHeight] = useState<number>(0);
     const [sourceImageWidth, setSourceImageWidth] = useState<number>(0);
+    const [invert, setInvert] = useState<boolean>(false);
 
     const charPixelHeight = importedCharHeight;
     const charPixelWidth = importedCharWidth;
@@ -149,6 +156,7 @@ export default function ImportSettings(props: ImportSettingsProps): React.JSX.El
                 imageQuantizationAlgorithm: DEFAULT_IMAGE_QUANTIZATION_ALGORITHM,
                 minimumColorDistanceToDither: DEFAULT_MINIMUM_COLOR_DISTANCE_TO_DITHER,
                 serpentine: DEFAULT_DITHER_SERPENTINE,
+                invert,
             },
             ColorMode.Default,
         );
@@ -180,12 +188,13 @@ export default function ImportSettings(props: ImportSettingsProps): React.JSX.El
         importedCharWidth,
         importOffset,
         sourceImagePath,
+        invert,
     ]);
 
     return (
         <VContainer gap={10} grow={1} overflow='hidden' style={{ padding: '1px' }}>
-            <VContainer grow={1}>
-                <HContainer grow={1}>
+            <VContainer grow={1} overflow='hidden'>
+                <HContainer grow={1} overflow='hidden'>
                     <VContainer style={{ width: '50%' }} overflow='hidden'>
                         <HContainer justifyContent='space-between'>
                             <label>
@@ -212,9 +221,15 @@ export default function ImportSettings(props: ImportSettingsProps): React.JSX.El
                     </VContainer>
                     <VContainer justifyContent="center">
                         <label style={{ width: 34 }}>&nbsp;</label>
-                        <i className="codicon codicon-arrow-right"></i>
+                        <ReconvertButton
+                            className="theia-button"
+                            title={nls.localize('vuengine/editors/reconvertImage', 'Reconvert Image')}
+                            onClick={sourceImageToCharacters}
+                        >
+                            <i className="codicon codicon-arrow-right"></i>
+                        </ReconvertButton>
                     </VContainer>
-                    <VContainer style={{ width: '50%' }}>
+                    <VContainer style={{ width: '50%' }} overflow='hidden'>
                         <label>
                             {nls.localize('vuengine/editors/result', 'Result')}
                         </label>
@@ -302,6 +317,16 @@ export default function ImportSettings(props: ImportSettingsProps): React.JSX.El
                         )}
                     />
                 </VContainer>
+                <VContainer>
+                    <label>
+                        {nls.localize('vuengine/fontEditor/invertColors', 'Invert Colors')}
+                    </label>
+                    <input
+                        type="checkbox"
+                        checked={invert}
+                        onChange={() => setInvert(!invert)}
+                    />
+                </VContainer>
             </HContainer>
         </VContainer>
     );

diff --git a/extensions/vuengine-studio-extension/src/images/browser/ves-images-service.ts b/extensions/vuengine-studio-extension/src/images/browser/ves-images-service.ts
@@ -8,7 +8,7 @@ import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import cropImageData from 'crop-image-data';
 import * as iq from 'image-q';
 import { VesCommonService } from '../../core/browser/ves-common-service';
-import { ColorMode, PALETTE_R_VALUES, PALETTE_VALUE_INDEX_MAP } from '../../core/browser/ves-common-types';
+import { ColorMode, PALETTE_R_VALUES, PALETTE_VALUE_INDEX_MAP, PALETTE_VALUE_INVERSION_MAP } from '../../core/browser/ves-common-types';
 import { roundToNextMultipleOf8 } from '../../editors/browser/components/Common/Utils';
 import { VesProcessWatcher } from '../../process/browser/ves-process-service-watcher';
 import { VesProcessService, VesProcessType } from '../../process/common/ves-process-service-protocol';
@@ -276,6 +276,15 @@ export class VesImagesService {
       imageData.data = new Uint8Array(imageDataArray as number[]);
     }
 
+    if (processingSettings.invert) {
+      for (let i = 0; i < imageData.data.length; i += 4) {
+        // ignore fully transparent pixels
+        if (imageData.data[i + 3] > 0) {
+          imageData.data[i] = PALETTE_VALUE_INVERSION_MAP[colorMode][imageData.data[i]];
+        }
+      }
+    }
+
     // create point container
     const pointContainer = iq.utils.PointContainer.fromUint8Array(imageData.data, paddedWidth, paddedHeight);
 

diff --git a/extensions/vuengine-studio-extension/src/images/browser/ves-images-types.ts b/extensions/vuengine-studio-extension/src/images/browser/ves-images-types.ts
@@ -140,6 +140,7 @@ export interface ImageProcessingSettings {
   imageQuantizationAlgorithm: iq.ImageQuantization,
   minimumColorDistanceToDither: number,
   serpentine: boolean,
+  invert?: boolean,
 }
 
 export const DISTANCE_CALCULATOR_OPTIONS: BasicSelectOption[] = [
-Original file line number
+Diff line change
@@ Expand Up @@
 : 3,
       }];
+    export const PALETTE_VALUE_INVERSION_MAP: { [value: number]: number }[] = [{
+: 255,
+: 170,
+: 85,
+: 0,
+    }, {
+: 255,
+: 212,
+: 170,
+: 127,
+: 85,
+: 42,
+: 0,
+    }];
     export const WINDOWS_EXECUTABLE_EXTENSIONS = [
       'bat',
       'bin',
@@ Expand Down @@