mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 05:07:52 +00:00
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:
parent
f705bf9a61
commit
44415b3769
@ -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(
|
||||||
|
Loading…
Reference in New Issue
Block a user