SeparatorWidget drag-to-resize not working in mobile/responsive view in Chrome nor Firefox [Bug]

[gldstrrbt]

Version

Latest version of v9

Steps to Reproduce

Everything is set up as shown in the examples and everything works fine (drag to resize panes, etc) in browser, but after I open dev tools to view mobile/responsive views in Chrome and Firefox the SeparatorWidget comes up as null and I'm unable to resize any of the panes.

As of now, while troubleshooting I noticed that the block in the dist build file that starts with "ChartEvent.prototype._findWidgetByEvent = function (event) {", at the condition of "if (pane !== null) {", console log returns true for a brief moment, but when I continue to hold the mouse down it quickly flips back to null. Not sure what the relevancy of that is, but this is something that is important for my project and I'm in the process of trying to hack this thing apart to get it working.

Any help resolving this issue would be greatly appreciated. Thank you

Current Behavior

Unable to resize panes in mobile/responsive view in Chrome and Firefox

Expected Behavior

Heights of panes adjusting upon dragging the separator widget, in both normal desktop browser view and in mobile browser view.

Environment

- OS: Windows 10
- Browser: Firefox + Chrome
- Framework: ReactJS

Any additional comments?

No response

[gldstrrbt]

For anyone who is facing a similar issue with touch events and wondering how to resolve it, I've made some progress and was able to edit the dist/klinecharts.js file as needed for touch events.

Just a few moments ago, I was able to get the yAxis scaling working by copying the WidgetNameConstants.YAXIS case blocks from ChartEvent.prototype.mouseDownEvent and ChartEvent.prototype.pressedMouseMoveEvent

Be sure to replace the "event" variable names in your blocks though. For example,
ChartEvent.prototype.pressedMouseMoveEvent uses:
var event_3 = this._makeWidgetEvent(e, widget);

And ChartEvent.prototype.touchMoveEvent uses:
var event_9 = this._makeWidgetEvent(e, widget);

---

Also, make sure to add any variables, that exist in the mouse event's blocks, to your touch event's block.

For example, var _b exists didn't exist in ChartEvent.prototype.touchStartEvent, but did exist in ChartEvent.prototype.mouseDownEvent. So just make sure to add it in or make a new one for your touch event block

---

Here's what I did for the touch events for yAxis scaling. Please don't mind the mess/console logs... legit just got it working and haven't cleaned up:

ChartEvent.prototype.touchStartEvent = function (e) {
        var _a = this._findWidgetByEvent(e), pane = _a.pane, widget = _a.widget;
        var _c, _b;
        if (widget !== null) {
            var event_8 = this._makeWidgetEvent(e, widget);
            var name_7 = widget.getName();

            // EDIT //
            console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: e: ", e);
            console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: _a: ", _a);
            console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: event_8: ", event_8);
            console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: name_7: ", name_7);
            // EDIT //


            switch (name_7) {
                case WidgetNameConstants.MAIN: {
                    var chartStore = this._chart.getChartStore();
                    var tooltipStore = chartStore.getTooltipStore();
                    if (widget.dispatchEvent('mouseDownEvent', event_8)) {
                        this._touchCancelCrosshair = true;
                        this._touchCoordinate = null;
                        tooltipStore.setCrosshair(undefined, true);
                        this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                        return true;
                    }
                    if (this._flingScrollRequestId !== null) {
                        cancelAnimationFrame(this._flingScrollRequestId);
                        this._flingScrollRequestId = null;
                    }
                    this._flingStartTime = new Date().getTime();
                    this._startScrollCoordinate = { x: event_8.x, y: event_8.y };
                    chartStore.getTimeScaleStore().startScroll();
                    this._touchZoomed = false;
                    if (this._touchCoordinate !== null) {
                        var xDif = event_8.x - this._touchCoordinate.x;
                        var yDif = event_8.y - this._touchCoordinate.y;
                        var radius = Math.sqrt(xDif * xDif + yDif * yDif);
                        if (radius < TOUCH_MIN_RADIUS) {
                            this._touchCoordinate = { x: event_8.x, y: event_8.y };
                            tooltipStore.setCrosshair({ x: event_8.x, y: event_8.y, paneId: pane === null || pane === void 0 ? void 0 : pane.getId() });
                        }
                        else {
                            this._touchCoordinate = null;
                            this._touchCancelCrosshair = true;
                            tooltipStore.setCrosshair();
                        }
                    }
                    return true;
                }
                case WidgetNameConstants.SEPARATOR:
                    // EDIT //
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.SEPARATOR: e: ", e);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.SEPARATOR: _a: ", _a);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.SEPARATOR: event_8: ", event_8);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.SEPARATOR: name_7: ", name_7);
                    // EDIT //
                case WidgetNameConstants.XAXIS:
                    // EDIT //
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.XAXIS: e: ", e);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.XAXIS: _a: ", _a);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.XAXIS: event_8: ", event_8);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.XAXIS: name_7: ", name_7);
                    // EDIT //
                // EDIT //
                case WidgetNameConstants.YAXIS: {
                    var consumed = widget.dispatchEvent('mouseDownEvent', event_8);
                    if (consumed) {
                        this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                    }
                    var extremum = (_b = pane === null || pane === void 0 ? void 0 : pane.getAxisComponent().getExtremum()) !== null && _b !== void 0 ? _b : null;
                    this._prevYAxisExtremum = extremum === null ? extremum : __assign({}, extremum);
                    this._yAxisStartScaleDistance = event_8.pageY;
                    return consumed;
                    // EDIT //
                    // console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: e: ", e);
                    // console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: _a: ", _a);
                    // console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: event_8: ", event_8);
                    // console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: name_7: ", name_7);
                    // // EDIT //
                    // var consumed = widget.dispatchEvent('mouseDownEvent', event_8);
                    // if (consumed) {
                    //     this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                    // }
                    // return consumed;
                }
            }
        }
        return false;
    };
    ChartEvent.prototype.touchMoveEvent = function (e) {
        var _a, _b, _c;
        var _d = this._findWidgetByEvent(e), pane = _d.pane, widget = _d.widget;
        if (widget !== null) {
            var event_9 = this._makeWidgetEvent(e, widget);
            var name_8 = widget.getName();
            var chartStore = this._chart.getChartStore();
            var tooltipStore = chartStore.getTooltipStore();
            switch (name_8) {
                case WidgetNameConstants.MAIN: {
                    if (widget.dispatchEvent('pressedMouseMoveEvent', event_9)) {
                        (_a = event_9.preventDefault) === null || _a === void 0 ? void 0 : _a.call(event_9);
                        tooltipStore.setCrosshair(undefined, true);
                        this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                        return true;
                    }
                    if (this._touchCoordinate !== null) {
                        (_b = event_9.preventDefault) === null || _b === void 0 ? void 0 : _b.call(event_9);
                        tooltipStore.setCrosshair({ x: event_9.x, y: event_9.y, paneId: pane === null || pane === void 0 ? void 0 : pane.getId() });
                    }
                    else {
                        if (this._startScrollCoordinate !== null &&
                            Math.abs(this._startScrollCoordinate.x - event_9.x) > this._startScrollCoordinate.y - event_9.y) {
                            var distance = event_9.x - this._startScrollCoordinate.x;
                            chartStore.getTimeScaleStore().scroll(distance);
                        }
                    }
                    return true;
                }
                case WidgetNameConstants.XAXIS:
                case WidgetNameConstants.YAXIS: 
                {
                    var consumed = widget.dispatchEvent('pressedMouseMoveEvent', event_9);
                    if (!consumed) {
                        var yAxis = pane === null || pane === void 0 ? void 0 : pane.getAxisComponent();
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: ***************");
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: name_8: ", name_8);
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: event_9: ", event_9);
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: yAxis.getScrollZoomEnabled(): ", yAxis.getScrollZoomEnabled());
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: this._prevYAxisExtremum: ", this._prevYAxisExtremum);
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: this._prevYAxisExtremum !== null: ", this._prevYAxisExtremum !== null);
                        // if (yAxis.getScrollZoomEnabled()) {
                        if (this._prevYAxisExtremum !== null && yAxis.getScrollZoomEnabled()) {
                            console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: PASSED");
                            var _h = this._prevYAxisExtremum, min = _h.min, max = _h.max, range = _h.range;
                            var scale = event_9.pageY / this._yAxisStartScaleDistance;
                            var newRange = range * scale;
                            var difRange = (newRange - range) / 2;
                            var newMin = min - difRange;
                            var newMax = max + difRange;
                            var yAxis_1 = pane === null || pane === void 0 ? void 0 : pane.getAxisComponent();
                            var newRealMin = yAxis_1.convertToRealValue(newMin);
                            var newRealMax = yAxis_1.convertToRealValue(newMax);
                            yAxis_1.setExtremum({
                                min: newMin,
                                max: newMax,
                                range: newRange,
                                realMin: newRealMin,
                                realMax: newRealMax,
                                realRange: newRealMax - newRealMin
                            });
                            this._chart.adjustPaneViewport(false, true, true, true);
                        }
                    }
                    else {
                        this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                    }
                    return consumed;
                }
                // case WidgetNameConstants.YAXIS: {
                //     var consumed = widget.dispatchEvent('pressedMouseMoveEvent', event_9);
                //     console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: name_8: ", name_8);
                //     console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: event_9: ", event_9);
                //     if (consumed) {
                //         (_c = event_9.preventDefault) === null || _c === void 0 ? void 0 : _c.call(event_9);
                //         this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                //     }
                //     return consumed;
                // }
            }
        }
        return false;
    };

[IlanKalendarov]

For anyone who is facing a similar issue with touch events and wondering how to resolve it, I've made some progress and was able to edit the dist/klinecharts.js file as needed for touch events.

Just a few moments ago, I was able to get the yAxis scaling working by copying the WidgetNameConstants.YAXIS case blocks from ChartEvent.prototype.mouseDownEvent and ChartEvent.prototype.pressedMouseMoveEvent

Be sure to replace the "event" variable names in your blocks though. For example, ChartEvent.prototype.pressedMouseMoveEvent uses: var event_3 = this._makeWidgetEvent(e, widget);

And ChartEvent.prototype.touchMoveEvent uses: var event_9 = this._makeWidgetEvent(e, widget);

Also, make sure to add any variables, that exist in the mouse event's blocks, to your touch event's block.

For example, var _b exists didn't exist in ChartEvent.prototype.touchStartEvent, but did exist in ChartEvent.prototype.mouseDownEvent. So just make sure to add it in or make a new one for your touch event block

Here's what I did for the touch events for yAxis scaling. Please don't mind the mess/console logs... legit just got it working and haven't cleaned up:

ChartEvent.prototype.touchStartEvent = function (e) {
        var _a = this._findWidgetByEvent(e), pane = _a.pane, widget = _a.widget;
        var _c, _b;
        if (widget !== null) {
            var event_8 = this._makeWidgetEvent(e, widget);
            var name_7 = widget.getName();

            // EDIT //
            console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: e: ", e);
            console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: _a: ", _a);
            console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: event_8: ", event_8);
            console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: name_7: ", name_7);
            // EDIT //


            switch (name_7) {
                case WidgetNameConstants.MAIN: {
                    var chartStore = this._chart.getChartStore();
                    var tooltipStore = chartStore.getTooltipStore();
                    if (widget.dispatchEvent('mouseDownEvent', event_8)) {
                        this._touchCancelCrosshair = true;
                        this._touchCoordinate = null;
                        tooltipStore.setCrosshair(undefined, true);
                        this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                        return true;
                    }
                    if (this._flingScrollRequestId !== null) {
                        cancelAnimationFrame(this._flingScrollRequestId);
                        this._flingScrollRequestId = null;
                    }
                    this._flingStartTime = new Date().getTime();
                    this._startScrollCoordinate = { x: event_8.x, y: event_8.y };
                    chartStore.getTimeScaleStore().startScroll();
                    this._touchZoomed = false;
                    if (this._touchCoordinate !== null) {
                        var xDif = event_8.x - this._touchCoordinate.x;
                        var yDif = event_8.y - this._touchCoordinate.y;
                        var radius = Math.sqrt(xDif * xDif + yDif * yDif);
                        if (radius < TOUCH_MIN_RADIUS) {
                            this._touchCoordinate = { x: event_8.x, y: event_8.y };
                            tooltipStore.setCrosshair({ x: event_8.x, y: event_8.y, paneId: pane === null || pane === void 0 ? void 0 : pane.getId() });
                        }
                        else {
                            this._touchCoordinate = null;
                            this._touchCancelCrosshair = true;
                            tooltipStore.setCrosshair();
                        }
                    }
                    return true;
                }
                case WidgetNameConstants.SEPARATOR:
                    // EDIT //
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.SEPARATOR: e: ", e);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.SEPARATOR: _a: ", _a);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.SEPARATOR: event_8: ", event_8);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.SEPARATOR: name_7: ", name_7);
                    // EDIT //
                case WidgetNameConstants.XAXIS:
                    // EDIT //
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.XAXIS: e: ", e);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.XAXIS: _a: ", _a);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.XAXIS: event_8: ", event_8);
                    console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.XAXIS: name_7: ", name_7);
                    // EDIT //
                // EDIT //
                case WidgetNameConstants.YAXIS: {
                    var consumed = widget.dispatchEvent('mouseDownEvent', event_8);
                    if (consumed) {
                        this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                    }
                    var extremum = (_b = pane === null || pane === void 0 ? void 0 : pane.getAxisComponent().getExtremum()) !== null && _b !== void 0 ? _b : null;
                    this._prevYAxisExtremum = extremum === null ? extremum : __assign({}, extremum);
                    this._yAxisStartScaleDistance = event_8.pageY;
                    return consumed;
                    // EDIT //
                    // console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: e: ", e);
                    // console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: _a: ", _a);
                    // console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: event_8: ", event_8);
                    // console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: name_7: ", name_7);
                    // // EDIT //
                    // var consumed = widget.dispatchEvent('mouseDownEvent', event_8);
                    // if (consumed) {
                    //     this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                    // }
                    // return consumed;
                }
            }
        }
        return false;
    };
    ChartEvent.prototype.touchMoveEvent = function (e) {
        var _a, _b, _c;
        var _d = this._findWidgetByEvent(e), pane = _d.pane, widget = _d.widget;
        if (widget !== null) {
            var event_9 = this._makeWidgetEvent(e, widget);
            var name_8 = widget.getName();
            var chartStore = this._chart.getChartStore();
            var tooltipStore = chartStore.getTooltipStore();
            switch (name_8) {
                case WidgetNameConstants.MAIN: {
                    if (widget.dispatchEvent('pressedMouseMoveEvent', event_9)) {
                        (_a = event_9.preventDefault) === null || _a === void 0 ? void 0 : _a.call(event_9);
                        tooltipStore.setCrosshair(undefined, true);
                        this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                        return true;
                    }
                    if (this._touchCoordinate !== null) {
                        (_b = event_9.preventDefault) === null || _b === void 0 ? void 0 : _b.call(event_9);
                        tooltipStore.setCrosshair({ x: event_9.x, y: event_9.y, paneId: pane === null || pane === void 0 ? void 0 : pane.getId() });
                    }
                    else {
                        if (this._startScrollCoordinate !== null &&
                            Math.abs(this._startScrollCoordinate.x - event_9.x) > this._startScrollCoordinate.y - event_9.y) {
                            var distance = event_9.x - this._startScrollCoordinate.x;
                            chartStore.getTimeScaleStore().scroll(distance);
                        }
                    }
                    return true;
                }
                case WidgetNameConstants.XAXIS:
                case WidgetNameConstants.YAXIS: 
                {
                    var consumed = widget.dispatchEvent('pressedMouseMoveEvent', event_9);
                    if (!consumed) {
                        var yAxis = pane === null || pane === void 0 ? void 0 : pane.getAxisComponent();
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: ***************");
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: name_8: ", name_8);
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: event_9: ", event_9);
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: yAxis.getScrollZoomEnabled(): ", yAxis.getScrollZoomEnabled());
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: this._prevYAxisExtremum: ", this._prevYAxisExtremum);
                        console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: this._prevYAxisExtremum !== null: ", this._prevYAxisExtremum !== null);
                        // if (yAxis.getScrollZoomEnabled()) {
                        if (this._prevYAxisExtremum !== null && yAxis.getScrollZoomEnabled()) {
                            console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchMoveEvent: WidgetNameConstants.YAXIS: PASSED");
                            var _h = this._prevYAxisExtremum, min = _h.min, max = _h.max, range = _h.range;
                            var scale = event_9.pageY / this._yAxisStartScaleDistance;
                            var newRange = range * scale;
                            var difRange = (newRange - range) / 2;
                            var newMin = min - difRange;
                            var newMax = max + difRange;
                            var yAxis_1 = pane === null || pane === void 0 ? void 0 : pane.getAxisComponent();
                            var newRealMin = yAxis_1.convertToRealValue(newMin);
                            var newRealMax = yAxis_1.convertToRealValue(newMax);
                            yAxis_1.setExtremum({
                                min: newMin,
                                max: newMax,
                                range: newRange,
                                realMin: newRealMin,
                                realMax: newRealMax,
                                realRange: newRealMax - newRealMin
                            });
                            this._chart.adjustPaneViewport(false, true, true, true);
                        }
                    }
                    else {
                        this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                    }
                    return consumed;
                }
                // case WidgetNameConstants.YAXIS: {
                //     var consumed = widget.dispatchEvent('pressedMouseMoveEvent', event_9);
                //     console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: name_8: ", name_8);
                //     console.log("klinecharts: ChartEvent: ChartEvent.prototype.touchStartEvent: WidgetNameConstants.YAXIS: event_9: ", event_9);
                //     if (consumed) {
                //         (_c = event_9.preventDefault) === null || _c === void 0 ? void 0 : _c.call(event_9);
                //         this._chart.updatePane(1 /* UpdateLevel.Overlay */);
                //     }
                //     return consumed;
                // }
            }
        }
        return false;
    };

Hey! How were you able to edit the js file inside the dist folder?
I'm having a problem on mobile where the Y-Axis does not work.
Also would you mind sharing your final version of the code?