Пишем плагины для Obsidian. Часть 228.11.2024 19:15

async onload() {
	this.registerMarkdownCodeBlockProcessor('chess', (source, el, ctx) => {
		// Parse code
		const data = new BoardData(source)

		// Render chess board
		el.innerHTML = boardHtml

		// Fill chess board with pieces
		for (const [addr, piece] of Object.entries(data.addresses)) {
			const cell = el.querySelector('[id=' + addr + ']')
			if (cell) {
				cell.innerText = piece
			}
		}
	})
}

Смотрите, мы заранее заложились на мифическую BoardData, которой еще нет, но мы знаем, что у нее должны быть:

• Конструктор, принимающий в себя source-HTML

• Поле addresses — словарик вида {адрес; ACSII-фигура}

Осталось лишь реализовать BoardData, и плагин должен заработать.

Парсим и отображаем FEN

Требования к парсящему классу у нас уже сформированы в предыдущем разделе: наша конечная цель — получить поле-словарь addresses с адресами фигур. Делаем:

class BoardData {
    // map of {address piece} like {'a4': '♞'}
    addresses = {}

    constructor(source) {
        const lines = source.split('\n')
        const line = lines?.[0]
        this.#parseFen(line)
    }

    #parseFen(fen) {
        const rowLines = fen.split('/')
    
        let row = 8
        let col = 1
    
        this.addresses = {}
    
        for (const rowLine of rowLines) {
            col = 1
            for (const ch of rowLine) {
                if (isLetter(ch)) {
                    let piece = ''
    
                    if (ch == 'p') piece = '♟'
                    else if (ch == 'r') piece = '♜'
                    else if (ch == 'n') piece = '♞'
                    else if (ch == 'b') piece = '♝'
                    else if (ch == 'q') piece = '♛'
                    else if (ch == 'k') piece = '♚'
                    else if (ch == 'P') piece = '♙'
                    else if (ch == 'R') piece = '♖'
                    else if (ch == 'N') piece = '♘'
                    else if (ch == 'B') piece = '♗'
                    else if (ch == 'Q') piece = '♕'
                    else if (ch == 'K') piece = '♔'
    
                    this.addresses[getAddress(row, col)] = piece
    
                    col += 1
                } else {
                    col += parseInt(ch, 10)
                }
            }
            row -= 1
        }
    }
}

Этот класс использует щепотку вспомогательных функций:

function isLetter(c) {
    return c.toLowerCase() != c.toUpperCase()
}

function rowToString(r) {
    return r.toString()
}

function colToString(c) {
    return String.fromCharCode('a'.charCodeAt() + c - 1)
}

function getAddress(r, c) {
    return colToString(c) + rowToString(r)
}

Теперь плагин должен рисовать шахматные позиции в соответствии с FEN-описанием. Достаем нашу старую заготовку:

# Two rooks mate

```chess
8/8/4k3/R7/7R/8/8/6K1
```

```chess
8/4k3/7R/R7/8/8/8/6K1
```

Заметка приобретает вид:

Ура — вот мы и добились работоспособного отображения доски и фигур, я нас поздравляю.

Подсветка клеток

У нас есть базовое отображение доски, но отсутствует одна существенная для шахматных зарисовок вещь — возможность помечать клетки цветами, чтобы можно было яснее выражать мысль и развитие событий на доске. Вот как, например, это реализовано в chess.com:

Я хотел бы иметь в арсенале зеленый, красный и синий цвета. Так же есть требование, чтобы цвета ложились на клетку с некоторой прозрачностью, чтобы все еще можно было отличить белую и черную клетки, даже если они подсвечены. Так же подошел бы эффект «виньетка».

Раскрашивание клетки будем реализовывать через программное добавление подсвеченной клетке одного из трех специальных классов: .green-hihglight, .red-hihglight, .blue-hihglight:

.red-hihglight {
    box-shadow: 0 0 calc(var(--cell-size)*2) rgba(255, 0, 0, 0.75) inset;
}

.blue-hihglight {
    box-shadow: 0 0 calc(var(--cell-size)*2) rgba(0, 0, 255, 0.4) inset;
}

.green-hihglight {
    box-shadow: 0 0 calc(var(--cell-size)*2) rgba(0, 255, 0, 0.5) inset;
}

Как видите, в классе присутствует некий box-shadow со странными вычислениями. Это результат моих исследований наложения эффекта «виньетка» на клетку разными цветами. По итогу получилась не то чтобы виньетка, но результат меня устроил — скоро увидите.

Для начала нам стоит понять, как описывать информацию о выделенных клетках в Obsidian-заметке. Я пришел к той же схеме, какой пользовались все известные мне шахматные плагины:

```chess
fen: rnbqkbnr/pp2pppp/2p5/3p4/3PP3/8/PPP2PPP/RNBQKBNR
green: d7 d5
red: e4
```

А это значит что? Что у нас усложнится парсер класса BoardData. Так же у него прибавится полей:

class BoardData {
	...
	
    // arrays of [address] like [e2, e4]
    reds = []
    greens = []
    blues = []

    constructor(source) {
        const lines = source.split('\n').map(line => line.trim())

        for (const line of lines) {
            if (line.startsWith('fen:')) {
                const fen = removePrefix(line, 'fen:').trim()
                this.#parseFen(fen)
            } else if (line.startsWith('red:')) {
                const redLine = removePrefix(line, 'red:').trim()
                this.reds = redLine.split(' ')
            } else if (line.startsWith('green:')) {
                const greenLine = removePrefix(line, 'green:').trim()
                this.greens = greenLine.split(' ')
            } else if (line.startsWith('blue:')) {
                const blueLine = removePrefix(line, 'blue:').trim()
                this.blues = blueLine.split(' ')
            } else {
                if (line.contains(':')) {
                    continue
                }
                this.#parseFen(line)
            }
        }
    }
	...
}

А в плагин допишем использование новых распаршенных данных:

class ChessLightweightPlugin extends obsidian.Plugin {
    async onload() {
        this.registerMarkdownCodeBlockProcessor('chess', (source, el, ctx) => {
            // Parse code
            const data = new BoardData(source)

			...
			
            for (const addr of data.reds) {
                el.querySelector('[id=' + addr + ']').classList.add('red-hihglight')
            }

            for (const addr of data.greens) {
                el.querySelector('[id=' + addr + ']').classList.add('green-hihglight')
            }

            for (const addr of data.blues) {
                el.querySelector('[id=' + addr + ']').classList.add('blue-hihglight')
            }
        })
    }
}

Все, у нас все готово. Теперь доски в заметках могут показывать больше информации о происходящем:

Не знаю как вам, а я доволен результатом. Для полного счастья мне не хватает только одного…

Госпереворот доски

Предыдущая картинка описывает дебют Каро-Канн за черных. Его намного удобнее наблюдать со стороны черных. Хочу:

```chess
...
flipBoard: true
```

Как парсить это поле, я уж не стану показывать, это тривиальная задача. Задача чуть сложнее — как реально перевернуть доску? Применить transform? Программно переписать адреса клеток? Тут, как водится, в дело вступает щепотка говнокода, которая еще никому не помешала:

const whitesBoardHtml =
`

    

        

        

        

        

        

        

        

        

    
...
    

        

        

        

        

        

        

        

        

    
`

const blacksBoardHtml =
`

    

        

        

        

        

        

        

        

        

    
...
    

        

        

        

        

        

        

        

        

    
`

Не, ну, а что? Всего лишних восемьдесят строк позора, и вот вы уже пишете в плагине:

async onload() {
	this.registerMarkdownCodeBlockProcessor('chess', (source, el, ctx) => {
		// Parse code
        const data = new BoardData(source)
        
		...

		// Render chess board
		el.innerHTML = data.flipBoard ? blacksBoardHtml : whitesBoardHtml

		...
	})
}

И вот вы уже комфортно сидите на месте черных:

Все?

Все:)

Могли бы мы сделать плагин еще лучше? Безусловно! В данный момент на мне висит канбан-доска с вот таким списком TODO для этого плагина:

Когда-нибудь у меня доберутся руки закрыть и все эти задачи, но на сегодняшний момент я могу пользоваться плагином, как есть, а вы и так почерпнули из этой статьи ту единственную мысль, что я хотел донести:

Просто подложите styles.css в папку плагина!

Да, фактически, все остальное в статье это не про плагиностроение, а про верстку, бизнес-логику и щепотку вау-эффекта, когда ваша заметка из текста превращается в мини-веб-страничку. Так что считайте, что это моя небольшая афера.

На этом наша эпопея с написанием плагинов для Obsidian заканчивается, я желаю вам успехов в написании собственных плагинов для Obsidian, ведь теперь вы знаете, что это совершенно несложно, но очень весело, а главное — может быть полезно конкретно в ваших повседневных операциях с заметками.

Как и обещал, прикладываю ссылку на GitHub, если кто-то захочет поисследовать или использовать написанные нами здесь плагины.

© Habrahabr.ru