CreatBotMainsail/src/components/panels/Status/ExcludeObjectDialogMap.vue

253 lines
7.3 KiB
Vue

<style lang="scss" scoped>
svg {
//background: rgba(200, 200, 200);
border: 2px solid #888;
}
#tooltipObjectMap {
display: none;
position: absolute;
background: black;
border-radius: 3px;
color: white;
padding: 3px 7px;
z-index: 100;
&:before {
display: block;
content: ' ';
width: 0;
height: 0;
position: absolute;
bottom: -10px;
left: 10px;
border-top: 10px solid black;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
}
</style>
<template>
<div style="position: relative">
<div id="tooltipObjectMap" ref="tooltipObjectMap"></div>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
:viewBox="viewBox"
xml:space="preserve">
<defs>
<marker id="arrowhead" markerWidth="5" markerHeight="4" refX="2" refY="2" orient="auto">
<polygon points="0 0, 5 2, 0 4" :fill="coordinationCrossColor" />
</marker>
</defs>
<line
:x1="convertX(0)"
:y1="convertY(1)"
:x2="convertX(stepperXmax / 4)"
:y2="convertY(1)"
:stroke="coordinationCrossColor"
stroke-width="2"
marker-end="url(#arrowhead)" />
<line
:x1="convertX(1)"
:y1="convertY(0)"
:x2="convertX(1)"
:y2="convertY(stepperYmax / 4)"
:stroke="coordinationCrossColor"
stroke-width="2"
marker-end="url(#arrowhead)" />
<g>
<line
v-for="x in xStripes"
:key="'xLines' + x"
:x1="convertX(x)"
:x2="convertX(x)"
:y1="convertY(stepperYmin)"
:y2="convertY(stepperYmax)"
:stroke="coordinationCrossColor"
:stroke-opacity="0.25"
stroke-width="1" />
<line
v-for="y in yStripes"
:key="'yLines' + y"
:x1="convertX(stepperXmin)"
:x2="convertX(stepperXmax)"
:y1="convertY(y)"
:y2="convertY(y)"
:stroke="coordinationCrossColor"
:stroke-opacity="0.25"
stroke-width="1" />
</g>
<g v-for="(object, index) in printing_objects_with_polygons" :key="index">
<polygon
:points="object.polygon.map((point) => convertX(point[0]) + ',' + convertY(point[1])).join(' ')"
style="cursor: pointer"
:stroke="current_object === object.name ? primaryColor : '#666'"
stroke-width="2"
fill-rule="evenodd"
:fill="
hoverName === object.name
? primaryColor
: excluded_objects.includes(object.name)
? '#6668'
: '#bbb'
"
@mouseover="showObjectTooltip(object.name)"
@mouseout="hideObjectTooltip"
@click="openExcludeObjectDialog(object.name)" />
</g>
</svg>
</div>
</template>
<script lang="ts">
import Component from 'vue-class-component'
import { Mixins, Prop } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import { defaultPrimaryColor } from '@/store/variables'
@Component
export default class StatusPanelObjectsDialogMap extends Mixins(BaseMixin) {
private coordinationCrossColor = '#888'
private stripesOffset = 50
@Prop({ required: false, default: '' }) declare readonly hoverName: string
declare $refs: {
tooltipObjectMap: HTMLDivElement
}
get printing_objects() {
return this.$store.state.printer.exclude_object?.objects ?? []
}
get printing_objects_with_polygons() {
return this.printing_objects.filter((eobject: any) => 'polygon' in eobject)
}
get current_object() {
return this.$store.state.printer.exclude_object?.current_object ?? null
}
get excluded_objects() {
return this.$store.state.printer.exclude_object?.excluded_objects ?? []
}
get viewBox() {
return (
this.convertX(this.stepperXmin) +
' ' +
this.convertY(this.stepperYmax) +
' ' +
this.absoluteX +
' ' +
this.absoluteY
)
}
get toolhead() {
return this.$store.state.printer.toolhead ?? {}
}
get axis_minimum() {
return this.toolhead.axis_minimum ?? []
}
get axis_maximum() {
return this.toolhead.axis_maximum ?? []
}
get stepperXmin() {
return this.axis_minimum[0] ?? 0
}
get stepperXmax() {
return this.axis_maximum[0] ?? 200
}
get stepperYmin() {
return this.axis_minimum[1] ?? 0
}
get stepperYmax() {
return this.axis_maximum[1] ?? 200
}
get absoluteX() {
return Math.abs(this.stepperXmin) + Math.abs(this.stepperXmax)
}
get absoluteY() {
return Math.abs(this.stepperYmin) + Math.abs(this.stepperYmax)
}
get xStripes() {
const output = []
const minXstripe = Math.floor(this.stepperXmin / this.stripesOffset) * this.stripesOffset
const maxXstripe = Math.floor(this.stepperXmax / this.stripesOffset) * this.stripesOffset
for (let i = minXstripe; i <= maxXstripe; i = i + this.stripesOffset) {
output.push(i)
}
return output
}
get yStripes() {
const output = []
const minYstripe = Math.floor(this.stepperYmin / this.stripesOffset) * this.stripesOffset
const maxYstripe = Math.floor(this.stepperYmax / this.stripesOffset) * this.stripesOffset
for (let i = minYstripe; i <= maxYstripe; i = i + this.stripesOffset) {
output.push(i)
}
return output
}
get primaryColor() {
return this.$store.state.gui.theme?.primary ?? defaultPrimaryColor
}
convertX(x: number) {
return x
}
convertY(y: number) {
return y * -1
}
showObjectTooltip(text: string) {
if (this.$refs.tooltipObjectMap) {
this.$refs.tooltipObjectMap.innerHTML = text
this.$refs.tooltipObjectMap.style.display = 'block'
}
window.addEventListener('mousemove', this.moveTooltip)
}
hideObjectTooltip() {
if (this.$refs.tooltipObjectMap) {
this.$refs.tooltipObjectMap.style.display = 'none'
}
window.removeEventListener('mousemove', this.moveTooltip)
}
moveTooltip(event: any) {
if (this.$refs.tooltipObjectMap) {
this.$refs.tooltipObjectMap.style.left = event.layerX - 20 + 'px'
this.$refs.tooltipObjectMap.style.top = event.layerY - 45 + 'px'
}
}
openExcludeObjectDialog(name: string) {
this.$emit('update:name', name)
this.$emit('update:bool', true)
}
}
</script>