Skip to content

Commit

Permalink
fix: opeartor modal state messup
Browse files Browse the repository at this point in the history 
more:
1. fix translation
2. make `compression.quality` as undefined by default
  • Loading branch information
@hemengke1997
hemengke1997 committed Apr 7, 2024
1 parent 672978b commit c1caafc
Show file tree
Hide file tree
Showing 17 changed files with 184 additions and 110 deletions.
60 changes: 25 additions & 35 deletions README.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@
[中文 README](./README.md)

[功能介绍文章](https://juejin.cn/post/7348004403016794147)

## Screenshot

### Overview
Expand Down Expand Up @@ -59,21 +57,30 @@ Right click in Explorer, select `Image Manager` to open extension. (Open current
## Extension Configurations



| Name | Type | Description | Default value |
| ----------------------------------------- | ----------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| image-manager.file.root | `string[]` | root folder to scan images | current workspace |
| image-manager.file.exclude | `string[]` | scan images not in exclude | `['**/node_modules/**','**/.git/**',`<br>`'**/dist/**','**/coverage/**','**/.next/**',`<br/>`'**/.nuxt/**','**/.vercel/**']` |
| image-manager.file.scan | `string[]` | scan images with imageType | `['svg','png','jpeg','jpg',`<br/>`'ico','gif','webp','bmp',`<br/>`'tif','tiff','apng','avif']` |
| image-manager.appearance.theme | `dark \| light \| auto` | theme | `auto` |
| image-manager.appearance.language | `en \| zh-CN \| auto` | language | `auto` |
| image-manager.appearance.primaryColor | `string` | primary color | undefined |
| image-manager.viewer.warningSize | `number \| boolean` | show warning dot if image size is larger than this value (KB) | 1024 |
| image-manager.viewer.imageWidth | `number` | width of image (px) | 100 |
| image-manager.viewer.imageBackgroundColor | `string` | image background color | `#1a1a1a` |
| image-manager.mirror.enabled | `boolean` | use mirror for downloading dependencies | false |
| image-manager.mirror.url | `string` | custom mirror url (No need to custom this in general) | undefined |

| Name | Type | Description | Default value |
| ---------------------------------------------- | ----------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| image-manager.file.root | `string[]` | root folder to scan images | current workspace |
| image-manager.file.exclude | `string[]` | scan images not in exclude | `['**/node_modules/**','**/.git/**',`<br>`'**/dist/**','**/coverage/**','**/.next/**',`<br/>`'**/.nuxt/**','**/.vercel/**']` |
| image-manager.file.scan | `string[]` | scan images with imageType | `['svg','png','jpeg','jpg',`<br/>`'ico','gif','webp','bmp',`<br/>`'tif','tiff','apng','avif']` |
| image-manager.appearance.theme | `dark \| light \| auto` | theme | `auto` |
| image-manager.appearance.language | `en \| zh-CN \| auto` | language | `auto` |
| image-manager.appearance.primaryColor | `string` | primary color | undefined |
| image-manager.viewer.warningSize | `number \| boolean` | show warning dot if image size is larger than this value (KB) | 1024 |
| image-manager.viewer.imageWidth | `number` | width of image (px) | 100 |
| image-manager.viewer.imageBackgroundColor | `string` | image background color | `#1a1a1a` |
| image-manager.mirror.enabled | `boolean` | use mirror for downloading dependencies | false |
| image-manager.mirror.url | `string` | custom mirror url (No need to custom this in general) | undefined |
| image-manager.compression.keepOriginal | `boolean` | keep original image after compression | false |
| image-manager.compression.fileSuffix | `string` | add suffix to compressed image | `.min` |
| image-manager.compression.skipCompressed | `boolean` | skip the compressed images | true |
| image-manager.compression.quality | `number` | compression quality | - |
| image-manager.compression.size | `number` | image size (x scale factor) | 1 |
| image-manager.compression.format | `string` | convert format after compression | '' |
| image-manager.compression.png.compressionLevel | `number` | compression level of png | 9 |
| image-manager.compression.gif.colors | `number` | image colors of gif | 256 |
| image-manager.compression.svg.* | `svgo 配置` | svgo config. Please refer to svgo offical docs | - |
| image-manager.conversion.format | `string` | convert format | '' |
| image-manager.conversion.keepOriginal | `boolean` | keep original image after format conversion | false |

## Tips

Expand All @@ -95,27 +102,10 @@ Right click in Explorer, select `Image Manager` to open extension. (Open current

### Common Questions

#### Why is opening the extension slow the first time?
#### Why is opening the extension slow at the first time?

The first time you open the extension, it will need to download the necessary dependencies. Depending on your network environment, this process may be slow. Please be patient!

#### Error: Install dependencies failed. Please check network.

If you are in China and the network environment is not good (you know all about it), please enable the mirror configuration then reload vscode

Two ways：

- Open `command palette`, input `enable mirror`, then choose the right option and press `Enter`

Or

- Manually modify the configuration file `settings.json` and add the following configuration

```json
{
"image-manager.mirror.enabled": true
}
```

## Thanks

Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
| image-manager.compression.keepOriginal | `boolean` | 压缩后保留原图 | false |
| image-manager.compression.fileSuffix | `string` | 压缩图片文件名添加后缀 | `.min` |
| image-manager.compression.skipCompressed | `boolean` | 跳过已压缩的图片 | true |
| image-manager.compression.quality | `number` | 压缩图片质量 | 90 |
| image-manager.compression.quality | `number` | 压缩图片质量 | - |
| image-manager.compression.size | `number` | 图片尺寸（几倍图） | 1 |
| image-manager.compression.format | `string` | 压缩时转化图片的格式 | '' |
| image-manager.compression.png.compressionLevel | `number` | png图片压缩等级 | 9 |
Expand Down
7 changes: 5 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,8 +231,11 @@
"description": "%pkg.compression.skipCompressed%"
},
"image-manager.compression.quality": {
"type": "number",
"default": 90,
"type": [
"null",
"number"
],
"default": null,
"description": "%pkg.compression.quality%"
},
"image-manager.compression.size": {
Expand Down
2 changes: 1 addition & 1 deletion src/core/config/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const DEFAULT_CONFIG: ConfigType = {
keepOriginal: false,
skipCompressed: true,
fileSuffix: '.min',
quality: 90,
quality: undefined,
size: 1,
format: '',
png: {
Expand Down
3 changes: 1 addition & 2 deletions src/core/operator/Compressor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export type CompressionOptions = {
/**
* @description
* use the lowest number of colours needed to achieve given quality, sets palette to true
* @default 100
* @default undefined
*/
quality?: number
/**
Expand All @@ -38,7 +38,6 @@ export type CompressionOptions = {
* @default 1
*/
size: number

png: {
/**
* @description
Expand Down
1 change: 0 additions & 1 deletion src/core/operator/Svgo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export class Svgo {
const restPlugin: PluginConfig[] = Object.keys(pickBy(restConfig, (v) => v === true)) as PluginConfig[]

const config: Config = {
multipass: true,
js2svg: {
pretty: options.pretty,
},
Expand Down
10 changes: 9 additions & 1 deletion src/message/MessageCenter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import mime from 'mime/lite'
import path from 'node:path'
import git from 'simple-git'
import { optimize } from 'svgo'
import { type ConfigurationTarget, Uri, type Webview, commands } from 'vscode'
import { type ConfigurationTarget, Uri, ViewColumn, type Webview, commands, window, workspace } from 'vscode'
import { type SharpNS } from '~/@types/global'
import {
type CompressionOptions,
Expand Down Expand Up @@ -455,6 +455,14 @@ export const VscodeMessageCenter = {
await fs.writeFile(filePath, svgStr)
return true
},
/* --------- open file in text editor --------- */
[CmdToVscode.open_file_in_text_editor]: async (data: { filePath: string }) => {
const { filePath } = data
workspace.openTextDocument(Uri.file(filePath)).then((document) => {
window.showTextDocument(document, ViewColumn.Active)
})
return true
},
}

export class MessageCenter {
Expand Down
2 changes: 2 additions & 0 deletions src/message/cmd.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,6 @@ export const enum CmdToVscode {
clear_useless_workspace_state = 'clear_useless_workspace_state',
// 格式化svg
pretty_svg = 'pretty_svg',
// 在text editor中打开指定文件
open_file_in_text_editor = 'open_file_in_text_editor',
}
90 changes: 57 additions & 33 deletions src/webview/ImageManager/components/ImageCompressor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { intersection, isEmpty, merge, omit, pick } from '@minko-fe/lodash-pro'
import { useMemoizedFn } from '@minko-fe/react-hook'
import { App, Divider, Form, Input, InputNumber, Segmented, Tooltip } from 'antd'
import { flatten as flattenObject, unflatten } from 'flat'
import { motion } from 'framer-motion'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { BsQuestionCircleFill } from 'react-icons/bs'
Expand All @@ -23,13 +24,15 @@ type FormValue = CompressionOptions & {
type ImageCompressorProps = {} & ImageOperatorProps

function ImageCompressor(props: ImageCompressorProps) {
const { images, open, onOpenChange } = props
const { images: imagesProp, open, onOpenChange } = props
const { t } = useTranslation()

const { compressor } = GlobalContext.usePicker(['compressor'])
const [form] = Form.useForm()
const { message } = App.useApp()

const [images, setImages] = useState(imagesProp)

const [submitting, setSubmitting] = useState(false)

const hasSomeImageType = useMemoizedFn((type: string) => {
Expand Down Expand Up @@ -272,52 +275,73 @@ function ImageCompressor(props: ImageCompressorProps) {
}, {} as FormComponent<CompressionOptions>)
}, [tabList])

const displayTabs = useMemo(() => tabList.filter((item) => !item.hidden), [tabList])

if (isEmpty(allCompressorOption)) return null

return (
<ImageOperator
title={t('im.image_compression')}
images={images}
onImagesChange={setImages}
open={open}
onOpenChange={onOpenChange}
form={form}
submitting={submitting}
onSubmittingChange={setSubmitting}
>
<Form
layout='horizontal'
colon={false}
name='image-compressor'
initialValues={allCompressorOption}
form={form}
requiredMark={false}
onFinish={onFinish}
>
<div className={'max-h-96 overflow-auto'}>
{Object.keys(allComponents).map((key, index) => {
return (
<div key={index} hidden={!displayComponents.keys.includes(key)}>
{allComponents[key]?.el()}
</div>
)
})}
</div>
<div className={'flex flex-col'}>
{displayTabs.length > 1 ? (
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.15 }}>
<div className={'flex justify-center'}>
<Segmented
options={displayTabs.map((t) => ({
label: t.label,
value: t.value,
}))}
value={activeTab}
onChange={(value) => setActiveTab(value as any)}
></Segmented>
</div>
<Divider />
</motion.div>
) : null}
<Form
layout='horizontal'
colon={false}
name='image-compressor'
initialValues={allCompressorOption}
form={form}
requiredMark={false}
onFinish={onFinish}
>
<div className={'max-h-96 overflow-auto'}>
{Object.keys(allComponents).map((key, index) => {
return (
<div key={index} hidden={!displayComponents.keys.includes(key)}>
{allComponents[key]?.el()}
</div>
)
})}
</div>

<Divider plain className={'!my-0'}>
{t('im.universal')}
</Divider>
<Divider plain className={'!my-0'}>
{t('im.universal')}
</Divider>

<KeepOriginal />
<KeepOriginal />

<Form.Item noStyle shouldUpdate={(p, c) => p.keepOriginal !== c.keepOriginal}>
{({ getFieldValue }) =>
getFieldValue('keepOriginal') ? (
<Form.Item label={t('im.suffix')} name={'fileSuffix'} rules={[{ required: true, message: '' }]}>
<Input type='text' className='w-auto' placeholder={t('im.file_suffix')} />
</Form.Item>
) : null
}
</Form.Item>
</Form>
<Form.Item noStyle shouldUpdate={(p, c) => p.keepOriginal !== c.keepOriginal}>
{({ getFieldValue }) =>
getFieldValue('keepOriginal') ? (
<Form.Item label={t('im.suffix')} name={'fileSuffix'} rules={[{ required: true, message: '' }]}>
<Input type='text' className='w-auto' placeholder={t('im.file_suffix')} />
</Form.Item>
) : null
}
</Form.Item>
</Form>
</div>
</ImageOperator>
)
}
Expand Down
Loading

0 comments on commit c1caafc

Please sign in to comment.