remove tree view stuff for now
Brad Cornes
parent
ab8baace62
commit
2fb32939af
225
src/treeView.ts
225
src/treeView.ts
|
|
@ -1,225 +0,0 @@
|
||||||
import {
|
|
||||||
TreeDataProvider,
|
|
||||||
TreeItem,
|
|
||||||
TreeItemCollapsibleState,
|
|
||||||
window as Window,
|
|
||||||
Command,
|
|
||||||
Event,
|
|
||||||
EventEmitter
|
|
||||||
} from 'vscode'
|
|
||||||
import { getSvgColorFromValue, createTempFile } from './util'
|
|
||||||
import dlv from 'dlv'
|
|
||||||
import * as path from 'path'
|
|
||||||
|
|
||||||
const ICONS = {
|
|
||||||
colors: 'palette.svg',
|
|
||||||
backgroundColors: 'palette.svg',
|
|
||||||
borderColors: 'palette.svg',
|
|
||||||
textColors: 'palette.svg',
|
|
||||||
svgFill: 'palette.svg',
|
|
||||||
svgStroke: 'palette.svg',
|
|
||||||
screens: 'devices.svg',
|
|
||||||
textSizes: 'format_size.svg',
|
|
||||||
fonts: 'title.svg',
|
|
||||||
fontWeights: 'format_bold.svg',
|
|
||||||
zIndex: 'layers.svg',
|
|
||||||
borderWidths: 'border_all.svg',
|
|
||||||
shadows: 'flip_to_front.svg',
|
|
||||||
borderRadius: 'rounded_corner.svg',
|
|
||||||
width: 'straighten.svg',
|
|
||||||
minWidth: 'straighten.svg',
|
|
||||||
maxWidth: 'straighten.svg',
|
|
||||||
height: 'straighten.svg',
|
|
||||||
minHeight: 'straighten.svg',
|
|
||||||
maxHeight: 'straighten.svg',
|
|
||||||
opacity: 'opacity.svg',
|
|
||||||
leading: 'format_line_spacing.svg',
|
|
||||||
backgroundSize: 'photo_size_select_large.svg',
|
|
||||||
padding: 'padding.svg',
|
|
||||||
margin: 'select_all.svg',
|
|
||||||
negativeMargin: 'select_all.svg',
|
|
||||||
tracking: 'tracking.svg',
|
|
||||||
modules: 'extension.svg',
|
|
||||||
options: 'settings.svg'
|
|
||||||
}
|
|
||||||
|
|
||||||
function configValueToString(value: any): string {
|
|
||||||
if (Array.isArray(value)) {
|
|
||||||
return value.join(', ')
|
|
||||||
}
|
|
||||||
return value.toString()
|
|
||||||
}
|
|
||||||
|
|
||||||
function isObject(val: any): boolean {
|
|
||||||
return val != null && typeof val === 'object' && Array.isArray(val) === false
|
|
||||||
}
|
|
||||||
|
|
||||||
class ConfigItem extends TreeItem {
|
|
||||||
constructor(
|
|
||||||
public label: string,
|
|
||||||
public key: string[],
|
|
||||||
public collapsibleState: TreeItemCollapsibleState,
|
|
||||||
public description?: string,
|
|
||||||
public iconPath?: string,
|
|
||||||
public command?: Command
|
|
||||||
) {
|
|
||||||
super(label, collapsibleState)
|
|
||||||
this.key = key
|
|
||||||
this.description = description
|
|
||||||
this.iconPath = iconPath
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class TailwindDataProvider implements TreeDataProvider<ConfigItem> {
|
|
||||||
private _onDidChangeTreeData: EventEmitter<ConfigItem | null> = new EventEmitter<ConfigItem | null>()
|
|
||||||
readonly onDidChangeTreeData: Event<ConfigItem | null> = this
|
|
||||||
._onDidChangeTreeData.event
|
|
||||||
|
|
||||||
private config: any
|
|
||||||
|
|
||||||
constructor(public configPath: string) {
|
|
||||||
this.config = require(configPath)
|
|
||||||
}
|
|
||||||
public refresh(configPath?: string): void {
|
|
||||||
if (configPath) this.configPath = configPath
|
|
||||||
delete require.cache[this.configPath]
|
|
||||||
this.config = require(this.configPath)
|
|
||||||
this._onDidChangeTreeData.fire()
|
|
||||||
}
|
|
||||||
getTreeItem(element: ConfigItem): ConfigItem {
|
|
||||||
return element
|
|
||||||
}
|
|
||||||
async getChildren(element: ConfigItem): Promise<ConfigItem[]> {
|
|
||||||
let command = {
|
|
||||||
command: 'tailwindcss.goToDefinition',
|
|
||||||
title: 'Go To Definition'
|
|
||||||
}
|
|
||||||
if (element) {
|
|
||||||
let item = dlv(this.config, element.key)
|
|
||||||
let children = Object.keys(item).map(key => {
|
|
||||||
let isObj = isObject(item[key])
|
|
||||||
let child = new ConfigItem(
|
|
||||||
key,
|
|
||||||
element.key.concat(key),
|
|
||||||
isObj
|
|
||||||
? TreeItemCollapsibleState.Collapsed
|
|
||||||
: TreeItemCollapsibleState.None,
|
|
||||||
isObj ? undefined : configValueToString(item[key]),
|
|
||||||
undefined,
|
|
||||||
isObj
|
|
||||||
? undefined
|
|
||||||
: { ...command, arguments: [element.key.concat(key)] }
|
|
||||||
)
|
|
||||||
let color = getSvgColorFromValue(item[key])
|
|
||||||
|
|
||||||
if (color) {
|
|
||||||
return createTempFile(
|
|
||||||
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><rect x="3.45" y="3.45" width="9.1" height="9.1" fill="${color}" /><rect x="2.8" y="2.8" width="10.4" height="10.4" fill="none" stroke="black" stroke-width="1.3" /></svg>`,
|
|
||||||
{ postfix: '.svg' }
|
|
||||||
).then(iconPath => {
|
|
||||||
child.iconPath = iconPath
|
|
||||||
return child
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return child
|
|
||||||
})
|
|
||||||
return Promise.all(children)
|
|
||||||
}
|
|
||||||
|
|
||||||
return Object.keys(this.config)
|
|
||||||
.filter(key => ['plugins'].indexOf(key) === -1)
|
|
||||||
.map(
|
|
||||||
key =>
|
|
||||||
new ConfigItem(
|
|
||||||
key,
|
|
||||||
[key],
|
|
||||||
isObject(this.config[key])
|
|
||||||
? TreeItemCollapsibleState.Collapsed
|
|
||||||
: TreeItemCollapsibleState.None,
|
|
||||||
isObject(this.config[key])
|
|
||||||
? undefined
|
|
||||||
: configValueToString(this.config[key]),
|
|
||||||
ICONS[key]
|
|
||||||
? path.join(
|
|
||||||
__filename,
|
|
||||||
'..',
|
|
||||||
'..',
|
|
||||||
'resources',
|
|
||||||
'icons',
|
|
||||||
ICONS[key]
|
|
||||||
)
|
|
||||||
: undefined,
|
|
||||||
isObject(this.config[key])
|
|
||||||
? undefined
|
|
||||||
: { ...command, arguments: [[key]] }
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function treeDataProvider1(config): TreeDataProvider<TreeItem> {
|
|
||||||
return {
|
|
||||||
getChildren: async (element): Promise<TreeItem[]> => {
|
|
||||||
if (element) {
|
|
||||||
let child = dlv(config, element.label, {})
|
|
||||||
let items = Object.keys(child).map(key => {
|
|
||||||
let color = getSvgColorFromValue(child[key])
|
|
||||||
|
|
||||||
if (color) {
|
|
||||||
return createTempFile(
|
|
||||||
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><rect x="3.45" y="3.45" width="9.1" height="9.1" fill="${color}" /><rect x="2.8" y="2.8" width="10.4" height="10.4" fill="none" stroke="black" stroke-width="1.3" /></svg>`,
|
|
||||||
{ postfix: '.svg' }
|
|
||||||
).then(iconPath => ({
|
|
||||||
label: key,
|
|
||||||
description: configValueToString(child[key]),
|
|
||||||
iconPath
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.resolve({
|
|
||||||
label: key,
|
|
||||||
description: configValueToString(child[key])
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return Promise.all(items)
|
|
||||||
}
|
|
||||||
|
|
||||||
return Object.keys(config)
|
|
||||||
.filter(key => ['modules', 'plugins', 'options'].indexOf(key) === -1)
|
|
||||||
.map(key => ({
|
|
||||||
label: key,
|
|
||||||
collapsibleState: isObject(config[key])
|
|
||||||
? TreeItemCollapsibleState.Collapsed
|
|
||||||
: TreeItemCollapsibleState.None,
|
|
||||||
description: isObject(config[key])
|
|
||||||
? undefined
|
|
||||||
: configValueToString(config[key]),
|
|
||||||
iconPath: ICONS[key]
|
|
||||||
? path.join(
|
|
||||||
__filename,
|
|
||||||
'..',
|
|
||||||
'..',
|
|
||||||
'resources',
|
|
||||||
'icons',
|
|
||||||
ICONS[key]
|
|
||||||
)
|
|
||||||
: undefined
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
getTreeItem: (element: TreeItem): TreeItem => {
|
|
||||||
return element
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createTreeView(configPath) {
|
|
||||||
let provider = new TailwindDataProvider(configPath)
|
|
||||||
let view = Window.createTreeView('tailwindcssConfigExplorer', {
|
|
||||||
treeDataProvider: provider,
|
|
||||||
showCollapseAll: true
|
|
||||||
})
|
|
||||||
view.reveal(undefined)
|
|
||||||
|
|
||||||
return () => provider.refresh()
|
|
||||||
}
|
|
||||||
31
src/util.ts
31
src/util.ts
|
|
@ -1,31 +0,0 @@
|
||||||
import * as fs from 'fs'
|
|
||||||
import Color from 'color'
|
|
||||||
import tmp from 'tmp'
|
|
||||||
|
|
||||||
export function createTempFile(content: string, options = {}): Promise<string> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
tmp.file(options, (err, path) => {
|
|
||||||
if (err) return reject(err)
|
|
||||||
fs.writeFile(path, content, { encoding: 'utf8' }, err => {
|
|
||||||
if (err) return reject(err)
|
|
||||||
resolve(path)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getSvgColorFromValue(value: string): string {
|
|
||||||
if (typeof value !== 'string') return null
|
|
||||||
|
|
||||||
if (value === 'transparent') {
|
|
||||||
return 'none'
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
let parsed = Color(value)
|
|
||||||
if (parsed.valpha === 0) return 'none'
|
|
||||||
return parsed.rgb().string()
|
|
||||||
} catch (err) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue