"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
//React
var React = require("react");
//wijmo
var wjcViewer = require("wijmo/wijmo.viewer");
var wjInput = require("wijmo/wijmo.react.input");
var wjViewer = require("wijmo/wijmo.react.viewer");
var BasicFeatures = /** @class */ (function (_super) {
    __extends(BasicFeatures, _super);
    function BasicFeatures(props) {
        var _this = _super.call(this, props) || this;
        _this.mouseModes = ['SelectTool', 'MoveTool', 'RubberbandTool', 'MagnifierTool'];
        _this.state = {
            pdfServiceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf',
            pdfFilePath: 'pdfroot/DefaultDocument.pdf',
            fullScreen: false,
            mouseMode: 'SelectTool',
            zoomFactor: 1
        };
        _this.initialized = _this.initialized.bind(_this);
        _this.stateChanged = _this.stateChanged.bind(_this);
        _this.zoomFactorChangedByViewer = _this.zoomFactorChangedByViewer.bind(_this);
        _this.mouseModeChangedByViewer = _this.mouseModeChangedByViewer.bind(_this);
        _this.mouseModeChanged = _this.mouseModeChanged.bind(_this);
        _this.zoomFactorChanged = _this.zoomFactorChanged.bind(_this);
        _this.fullScreenChanged = _this.fullScreenChanged.bind(_this);
        return _this;
    }
    BasicFeatures.prototype.initialized = function (s) {
        this.pdfViewer = s;
    };
    BasicFeatures.prototype.stateChanged = function (event) {
        var target = event.target, value = target.type === 'checkbox' ? target.checked : target.value, name = target.name;
        this.setState((_a = {},
            _a[name] = value,
            _a));
        if (name == 'continuousViewMode') {
            this.pdfViewer.viewMode = value ? wjcViewer.ViewMode.Continuous : wjcViewer.ViewMode.Single;
        }
        var _a;
    };
    BasicFeatures.prototype.zoomFactorChangedByViewer = function () {
        this.setState({
            zoomFactor: this.pdfViewer.zoomFactor
        });
    };
    BasicFeatures.prototype.mouseModeChangedByViewer = function () {
        this.setState({
            mouseMode: this.mouseModes[this.pdfViewer.mouseMode]
        });
    };
    BasicFeatures.prototype.mouseModeChanged = function (menu) {
        var mouseMode = menu.selectedValue;
        this.setState({ mouseMode: mouseMode });
    };
    BasicFeatures.prototype.zoomFactorChanged = function (s) {
        this.setState({
            zoomFactor: s.value
        });
    };
    BasicFeatures.prototype.fullScreenChanged = function () {
        this.setState({
            fullScreen: this.pdfViewer.fullScreen
        });
    };
    BasicFeatures.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "Legend" }, "Basic Features"),
            React.createElement("p", null, "The PdfViewer control has four basic properties that allow you to customize its appearance and behavior:"),
            React.createElement("ul", null,
                React.createElement("li", null,
                    React.createElement("b", null, "fullScreen"),
                    ":  Indicates whether viewer is under full screen mode."),
                React.createElement("li", null,
                    React.createElement("b", null, "mouseMode"),
                    ":  Indicates whether clicking and dragging with the mouse in the view panel selects text."),
                React.createElement("li", null,
                    React.createElement("b", null, "viewMode"),
                    ":  Indicates how to show the document pages."),
                React.createElement("li", null,
                    React.createElement("b", null, "zoomFactor"),
                    ":  Indicates the current zoom factor to show the document pages.")),
            React.createElement("p", null, "The example below allows you to see what happens when you change these properties."),
            React.createElement("div", { className: "row" },
                React.createElement("div", { className: "col-md-12" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement("div", { className: "row" },
                        React.createElement(wjViewer.PdfViewer, { initialized: this.initialized, serviceUrl: this.state.pdfServiceUrl, filePath: this.state.pdfFilePath, fullScreen: this.state.fullScreen, mouseMode: wjcViewer.MouseMode[this.state.mouseMode], zoomFactor: this.state.zoomFactor, zoomFactorChanged: this.zoomFactorChangedByViewer, mouseModeChanged: this.mouseModeChangedByViewer, fullScreenChanged: this.fullScreenChanged })),
                    React.createElement("br", null),
                    React.createElement("div", { className: "row" },
                        React.createElement("div", { className: "form-horizontal" },
                            React.createElement("div", { className: "form-group" },
                                React.createElement("div", { className: "col-md-3" },
                                    React.createElement("div", { className: "checkbox" },
                                        React.createElement("label", null,
                                            React.createElement("input", { name: "continuousViewMode", type: "checkbox", checked: this.state.continuousViewMode, onChange: this.stateChanged }),
                                            " Continuous View Mode?"))),
                                React.createElement("div", { className: "col-md-3" },
                                    React.createElement(wjInput.Menu, { header: "Mouse Mode:  " + "<b>" + this.state.mouseMode + "</b>", itemsSource: this.mouseModes, itemClicked: this.mouseModeChanged })),
                                React.createElement("div", { className: "col-md-2" },
                                    React.createElement("div", { className: "checkbox" },
                                        React.createElement("label", null,
                                            React.createElement("input", { name: "fullScreen", type: "checkbox", checked: this.state.fullScreen, onChange: this.stateChanged }),
                                            " Full Screen?"))),
                                React.createElement("div", { className: "col-mod-4" },
                                    React.createElement("label", { className: "col-md-2 control-label" }, "Zoom Factor"),
                                    React.createElement("div", { className: "col-md-2" },
                                        React.createElement(wjInput.InputNumber, { value: this.state.zoomFactor, min: 0.05, max: 10, step: .1, format: 'n2', valueChanged: this.zoomFactorChanged })))))))),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement("div", { className: "row" },
                React.createElement("div", { className: "col-md-12" },
                    React.createElement("ul", { className: "nav nav-tabs", role: "tablist" },
                        React.createElement("li", { className: "active" },
                            React.createElement("a", { href: "#bfJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#bfJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "bfJsx" },
                            '    <wjViewer.PdfViewer\n',
                            '        initialized={this.initialized}\n',
                            '        serviceUrl={this.state.pdfServiceUrl}\n',
                            '        filePath={this.state.pdfFilePath}\n',
                            '        fullScreen={this.state.fullScreen}\n',
                            '        mouseMode={wjcViewer.MouseMode[this.state.mouseMode]}\n',
                            '        zoomFactor={this.state.zoomFactor}\n',
                            '        zoomFactorChanged={this.zoomFactorChangedByViewer}\n',
                            '        mouseModeChanged={this.mouseModeChangedByViewer}\n',
                            '        fullScreenChanged={this.fullScreenChanged}/>\n',
                            '</div>\n',
                            '<br />\n',
                            '<br />\n',
                            ' <br />\n',
                            '<div className="row">\n',
                            '    <div className="form-horizontal">\n',
                            '        <div className="form-group">\n',
                            '            <div className="col-md-3">\n',
                            '                <div className="checkbox">\n',
                            '                    <label>\n',
                            '                        <input name="continuousViewMode" type="checkbox" checked={this.state.continuousViewMode}\n',
                            '                            onChange={this.stateChanged}/> Continuous View Mode?\n',
                            '                    </label>\n',
                            '                </div>\n',
                            '            </div>\n',
                            '            <div className="col-md-3">\n',
                            '                <wjInput.Menu\n',
                            '                    header={"Mouse Mode:  " + "<b>" + this.state.mouseMode + "</b>"}\n',
                            '                    itemsSource={this.mouseModes}\n',
                            '                    itemClicked={this.mouseModeChanged} />\n',
                            '            </div>\n',
                            '            <div className="col-md-2">\n',
                            '                <div className="checkbox">\n',
                            '                    <label>\n',
                            '                        <input name="fullScreen" type="checkbox" checked={this.state.fullScreen}\n',
                            '                            onChange={this.stateChanged} /> Full Screen?\n',
                            '                    </label>\n',
                            '                </div>\n',
                            '            </div>\n',
                            '            <div className="col-mod-4">\n',
                            '                <label className="col-md-2 control-label">Zoom Factor</label>\n',
                            '                <div className="col-md-2">\n',
                            '                    <wjInput.InputNumber \n',
                            '                        value={this.state.zoomFactor}\n',
                            '                        min={0.05}\n',
                            '                        max={10}\n',
                            '                        step={.1}\n',
                            '                        format={\'n2\'}\n',
                            '                        valueChanged={this.zoomFactorChanged}>\n',
                            '                    </wjInput.InputNumber>\n',
                            '            </div>\n',
                            '        </div>\n',
                            '    </div>\n',
                            '</div>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "bfJs" },
                            '   pdfViewer: wjcViewer.PdfViewer;\n',
                            '   mouseModes = [\'SelectTool\', \'MoveTool\', \'RubberbandTool\', \'MagnifierTool\'];\n',
                            '\n',
                            '   constructor(props) {\n',
                            '       super(props);\n',
                            '       this.state = {\n',
                            '           pdfServiceUrl: \'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf\',\n',
                            '           pdfFilePath: \'pdfroot/DefaultDocument.pdf\',\n',
                            '           fullScreen: false,\n',
                            '           mouseMode: \'SelectTool\',\n',
                            '           zoomFactor:1\n',
                            '       }\n',
                            '       this.initialized = this.initialized.bind(this);\n',
                            '       this.stateChanged = this.stateChanged.bind(this);\n',
                            '       this.zoomFactorChangedByViewer = this.zoomFactorChangedByViewer.bind(this);\n',
                            '       this.mouseModeChangedByViewer = this.mouseModeChangedByViewer.bind(this);\n',
                            '       this.mouseModeChanged = this.mouseModeChanged.bind(this);\n',
                            '       this.zoomFactorChanged = this.zoomFactorChanged.bind(this);\n',
                            '       this.fullScreenChanged = this.fullScreenChanged.bind(this);\n',
                            '   }\n',
                            '\n',
                            '   initialized(s) {\n',
                            '       this.pdfViewer = s;\n',
                            '   }\n',
                            '\n',
                            '   stateChanged(event) {\n',
                            '       var target = event.target,\n',
                            '           value = target.type === \'checkbox\' ? target.checked : target.value,\n',
                            '           name = target.name;\n',
                            '\n',
                            '       this.setState({\n',
                            '           [name]: value\n',
                            '       });\n',
                            '\n',
                            '       if (name == \'continuousViewMode\') {\n',
                            '           this.pdfViewer.viewMode = value ? wjcViewer.ViewMode.Continuous : wjcViewer.ViewMode.Single;\n',
                            '       }\n',
                            '   }\n',
                            '\n',
                            '    zoomFactorChangedByViewer() {\n',
                            '       this.setState({\n',
                            '           zoomFactor: this.pdfViewer.zoomFactor\n',
                            '       });\n',
                            '   }\n',
                            '\n',
                            '   mouseModeChangedByViewer() {\n',
                            '       this.setState({\n',
                            '           mouseMode: this.pdfViewer.mouseMode\n',
                            '       });\n',
                            '   }\n',
                            '   mouseModeChanged(menu: wjcInput.Menu) {\n',
                            '       var mouseMode = menu.selectedValue;\n',
                            '        this.setState({mouseMode: mouseMode });\n',
                            '   }\n',
                            '   zoomFactorChanged(s) {\n',
                            '       this.setState({\n',
                            '           zoomFactor: s.value\n',
                            '       });\n',
                            '   }\n',
                            '\n',
                            '   fullScreenChanged() {\n',
                            '       this.setState({\n',
                            '           fullScreen: this.pdfViewer.fullScreen\n',
                            '       });\n',
                            '   }\n')))));
    };
    return BasicFeatures;
}(React.Component));
exports.BasicFeatures = BasicFeatures;
//# sourceMappingURL=BasicFeatures.js.map