cherry-pick(#6868): fix: toggling markers, alarm markers, marker style + update Vue.extend() usage to Vue 3 (#6873)

* fix: update to `defineComponent` from `Vue.extend()`
* fix: unwrap Proxy arg before WeakMap.get()
* refactor: `defineComponent` not needed here
This commit is contained in:
Jesse Mazzella 2023-08-01 14:16:20 -07:00 committed by GitHub
parent f705bf9a61
commit 44415b3769
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -42,7 +42,8 @@ import configStore from '../configuration/ConfigStore';
import PlotConfigurationModel from '../configuration/PlotConfigurationModel'; import PlotConfigurationModel from '../configuration/PlotConfigurationModel';
import LimitLine from './LimitLine.vue'; import LimitLine from './LimitLine.vue';
import LimitLabel from './LimitLabel.vue'; import LimitLabel from './LimitLabel.vue';
import Vue from 'vue'; import mount from 'utils/mount';
import { toRaw } from 'vue';
const MARKER_SIZE = 6.0; const MARKER_SIZE = 6.0;
const HIGHLIGHT_SIZE = MARKER_SIZE * 2.0; const HIGHLIGHT_SIZE = MARKER_SIZE * 2.0;
@ -315,7 +316,7 @@ export default {
return; return;
} }
const elements = this.seriesElements.get(series); const elements = this.seriesElements.get(toRaw(series));
elements.lines.forEach(function (line) { elements.lines.forEach(function (line) {
this.lines.splice(this.lines.indexOf(line), 1); this.lines.splice(this.lines.indexOf(line), 1);
line.destroy(); line.destroy();
@ -333,7 +334,7 @@ export default {
return; return;
} }
const elements = this.seriesElements.get(series); const elements = this.seriesElements.get(toRaw(series));
if (elements.alarmSet) { if (elements.alarmSet) {
elements.alarmSet.destroy(); elements.alarmSet.destroy();
this.alarmSets.splice(this.alarmSets.indexOf(elements.alarmSet), 1); this.alarmSets.splice(this.alarmSets.indexOf(elements.alarmSet), 1);
@ -349,7 +350,7 @@ export default {
return; return;
} }
const elements = this.seriesElements.get(series); const elements = this.seriesElements.get(toRaw(series));
elements.pointSets.forEach(function (pointSet) { elements.pointSets.forEach(function (pointSet) {
this.pointSets.splice(this.pointSets.indexOf(pointSet), 1); this.pointSets.splice(this.pointSets.indexOf(pointSet), 1);
pointSet.destroy(); pointSet.destroy();
@ -473,7 +474,7 @@ export default {
this.$emit('plotReinitializeCanvas'); this.$emit('plotReinitializeCanvas');
}, },
removeChartElement(series) { removeChartElement(series) {
const elements = this.seriesElements.get(series); const elements = this.seriesElements.get(toRaw(series));
elements.lines.forEach(function (line) { elements.lines.forEach(function (line) {
this.lines.splice(this.lines.indexOf(line), 1); this.lines.splice(this.lines.indexOf(line), 1);
@ -576,7 +577,7 @@ export default {
this.seriesLimits.set(series, limitElements); this.seriesLimits.set(series, limitElements);
}, },
clearLimitLines(series) { clearLimitLines(series) {
const seriesLimits = this.seriesLimits.get(series); const seriesLimits = this.seriesLimits.get(toRaw(series));
if (seriesLimits) { if (seriesLimits) {
seriesLimits.limitLines.forEach(function (line) { seriesLimits.limitLines.forEach(function (line) {
@ -747,16 +748,14 @@ export default {
left: 0, left: 0,
top: this.drawAPI.y(limit.point.y) top: this.drawAPI.y(limit.point.y)
}; };
let LimitLineClass = Vue.extend(LimitLine); const { vNode } = mount(LimitLine, {
const component = new LimitLineClass({ props: {
propsData: {
point, point,
limit limit
} }
}); });
component.$mount();
return component.$el; return vNode.el;
}, },
getLimitOverlap(limit, overlapMap) { getLimitOverlap(limit, overlapMap) {
//calculate if limit lines are too close to each other //calculate if limit lines are too close to each other
@ -792,16 +791,14 @@ export default {
left: 0, left: 0,
top: this.drawAPI.y(limit.point.y) top: this.drawAPI.y(limit.point.y)
}; };
let LimitLabelClass = Vue.extend(LimitLabel); const { vNode } = mount(LimitLabel, {
const component = new LimitLabelClass({ props: {
propsData: {
limit: Object.assign({}, overlap, limit), limit: Object.assign({}, overlap, limit),
point point
} }
}); });
component.$mount();
return component.$el; return vNode.el;
}, },
drawAlarmPoints(alarmSet) { drawAlarmPoints(alarmSet) {
this.drawAPI.drawLimitPoints( this.drawAPI.drawLimitPoints(