vaadin-component-factory / vcf-pdf-viewer-flow

Vaadin Addon for providing pdf viewing functionality
Apache License 2.0
9 stars 6 forks source link

Suggestion to add zoom in and out button #37

Open weiliang2 opened 1 year ago

weiliang2 commented 1 year ago

HI there,

trying to add a zoom button to make it work better.

``

private void addZoomInButton() {
    Button button = new Button(new Icon(VaadinIcon.PLUS));
    button.getElement().setAttribute("aria-label", "Zoom In");
    button.setThemeName("download-button");
    getElement().appendChild(button.getElement());
    button.addClickListener(e -> {
        ZoomLevel nextZoom = ZoomLevel.getNextZoom(getZoom());
        setZoom(nextZoom.getName());
    });
} 

private void addZoomOutButton() {
    Button button = new Button(new Icon(VaadinIcon.MINUS));
    button.getElement().setAttribute("aria-label", "Zoom Out");
    button.setThemeName("download-button");
    getElement().appendChild(button.getElement());
    button.addClickListener(e -> {
        ZoomLevel previousZoom = ZoomLevel.getPreviousZoom(getZoom());
        setZoom(previousZoom.getName());
    });
}

public enum ZoomLevel {

    Automatic_Zoom("auto", 1), 
    PAGE_FIT("page-fit", 2), 
    PERCENT_50("0.5", 3), 
    PERCENT_75("0.75", 4), 
    PERCENT_100("1.0", 5), 
    PERCENT_125("1.25", 6), 
    PERCENT_150("1.5", 7), 
    PERCENT_200("2.0", 8), 
    PERCENT_300("3.0", 9), 
    PERCENT_400("4.0", 10);

    @Getter
    private final String name;
    @Getter
    private int order;

    ZoomLevel(String name, int order) {
        this.name = name;
        this.order = order;
    }

    public static final ZoomLevel getByValue(String name) {
        return Stream.of(ZoomLevel.values()).filter(e -> e.name.equals(name)).findFirst().orElse(PAGE_FIT);
    }

    public static ZoomLevel getPreviousZoom(String name) {
        ZoomLevel value = getByValue(name);
        switch (value.getOrder()) {
        case 4:
            return PERCENT_50;
        case 5:
            return PERCENT_75;
        case 6:
            return PERCENT_100;
        case 7:
            return PERCENT_125;
        case 8:
            return PERCENT_150;
        case 9:
            return PERCENT_200;
        case 10:
            return PERCENT_300;
        default:
            return PAGE_FIT;
        }
    }

    public static ZoomLevel getNextZoom(String name) {
        ZoomLevel value = getByValue(name);
        switch (value.getOrder()) {
        case 1:
            return PAGE_FIT;
        case 2:
            return PERCENT_50;
        case 3:
            return PERCENT_75;
        case 4:
            return PERCENT_100;
        case 5:
            return PERCENT_125;
        case 6:
            return PERCENT_150;
        case 7:
            return PERCENT_200;
        case 8:
            return PERCENT_300;
        case 9:
            return PERCENT_400;
        default:
            return PAGE_FIT;
        }
    }
}

``

weiliang2 commented 1 year ago

zoomChanged(value) { if (!this.viewer || this.__loading) { return; } // This logs error 'TextLayerBuilder._bindEvents: this.cancel() should have // been called when the page was reset, or rendering cancelled.' // // There is a problem deep inside pdfjs viewer that causes an console.error() // to be logged, but the component still works. It seems to be due to // webcomponents/shadow dom messing with // TODO: Fix the issue so that we get rid of the error in log this.viewer.currentScaleValue = value; // Added Manualy this.viewer.forceRendering(); }