#133 [bug] Sixel protocol on iTerm2

[Anonymous]

Originally created by: supreme-gg-gg

Describe the bug
This has been recorded during testing of [#127], on iTerm2 the Sixel protocol rendering does not proper fit in the entire area and has overlap with the boarders of the components. The issue is currently reported, verified, and undergoing investigation to pinpoint the root cause and potential fix.

NOTE: This protocol works fine for all other terminal emulators

If this happens to anyone else, please comment below 😄

To Reproduce
Steps to reproduce the behavior:
On iTerm2, run the command to test image or render the following component:

import React, {useState, useEffect} from 'react';
import Image from '../ui/components/image/index.js';
import {Text, Box} from 'ink';
import {TerminalInfoProvider} from '../ui/context/TerminalInfo.js';

const testImages = [
    'https://sipi.usc.edu/database/preview/misc/4.1.01.png',
    'https://sipi.usc.edu/database/preview/misc/4.1.06.png',
    'https://sipi.usc.edu/database/preview/misc/4.2.06.png',
    'https://www.math.hkust.edu.hk/~masyleung/Teaching/CAS/MATLAB/image/images/cameraman.jpg',
    'https://example.com/bad-url/image-that-doesnt-exist.jpg',
    '/home/endernoke/Downloads/wn_php.png',
    'https://upload.wikimedia.org/wikipedia/en/thumb/7/7d/Lenna_%28test_image%29.png/500px-Lenna_%28test_image%29.png',
];

export default function TestImage() {
    const [, setTick] = useState(true);

    useEffect(() => {
        const id = setInterval(() => {
            setTick(t => !t);
        }, 10000);
        return () => clearInterval(id);
    }, []);
    return (
        <TerminalInfoProvider>
            <Box flexDirection="column">
                <Text>{Sixel}</Text>
                <Box flexDirection="column">
                    {/* First row */}
                    <Box flexDirection="row">
                        {testImages.slice(0, 3).map((src, index) => (
                            <Box
                                key={index}
                                borderStyle="round"
                                borderColor="cyan"
                                width={32}
                                height={17}
                            >
                                <Image
                                    src={src}
                                    alt={`Test Image ${index + 1}`}
                                    protocol={sixel}
                                />
                            </Box>
                        ))}
                    </Box>
                    {/* Second row */}
                    <Box flexDirection="row">
                        {testImages.slice(3, 6).map((src, index) => (
                            <Box
                                key={index + 3}
                                borderStyle="round"
                                borderColor="cyan"
                                width={32}
                                height={17}
                            >
                                <Image
                                    src={src}
                                    alt={`Test Image ${index + 4}`}
                                    protocol={sixel}
                                />
                            </Box>
                        ))}
                    </Box>
                </Box>
            </Box>
            <Box>
                <Text>Ctrl+C to exit</Text>
            </Box>
        </TerminalInfoProvider>
    );
}

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[Anonymous]

Originally posted by: endernoke

Closing as this will be tracked in https://github.com/endernoke/ink-picture/issues/1, to have better separation of concerns.

[Anonymous]

Ticket changed by: endernoke

• status: open --> closed