Qml unexpected behaviour

Question

In the following code a point can be removed from listmodel and in the next line it says ReferenceError : pthModel is not defined. Could you help me please?

import QtQuick
import QtQuick.Shapes 2.15
import "utils.js" as JS

Rectangle {
   id: mRct
   implicitHeight: 600
   implicitWidth: 800
   color: "transparent"

   property bool moving: false
   ListModel {
      id: pthModel

      onDataChanged: {
         console.log("dataChanged")
         cnvManual.requestPaint()
      }
   }

   MouseArea {
      anchors.fill: parent
      id: mouse
      onClicked: {
         if (moving)
            return
         pthModel.append({
                            "x": mouseX,
                            "y": mouseY
                         })
         cnvManual.requestPaint()
      }
   }

   Repeater {
      model: pthModel
      z: 21
      delegate: Rectangle {
         required property var modelData
         id: rctParent
         color: "white"
         width: 12
         height: 12
         radius: 6
         x: modelData.x - 6
         y: modelData.y - 6

         DragHandler {
            acceptedModifiers: Qt.ControlModifier
            target: parent

            onActiveChanged: {
               if (!active) {
                  modelData.x = rctParent.x + 6
                  modelData.y = rctParent.y + 6
                  cnvManual.requestPaint()
               }
            }
         }

         MouseArea {
            anchors.fill: parent
            id: ms
            acceptedButtons: Qt.AllButtons
            signal removed

            onRemoved: {
               console.log("removed")
               cnvManual.requestPaint()
            }
            onClicked: mouse => {
                          if (mouse.button === Qt.RightButton) {
                             //cnvManual.requestPaint() //Works
                             pthModel.remove(modelData.index, 1)
                           //cnvManual.requestPaint() //cnvManual is not defined error
                           //whatever happens it happens after this line
                             ms.removed() //msRemoved is not triggered
                          }
                       }
         }
      }
   }

   Canvas {
      id: cnvManual
      anchors.fill: parent

      onPaint: {
         if (pthModel.count === 0) {
            return
         }
         console.log(pthModel.count)
         var ctx = getContext("2d")
         ctx.clearRect(0, 0, width, height)

         ctx.strokeStyle = "blue"
         ctx.lineWidth = 2

         ctx.beginPath()
         var points = pthModel
         var firstPoint = points.get(0)
         ctx.moveTo(firstPoint.x, firstPoint.y)
         for (var i = 1; i < points.count; i++) {
            var pnt = pthModel.get(i)
            ctx.lineTo(pnt.x, pnt.y)
         }
         if (points.count > 2) {
            ctx.lineTo(firstPoint.x, firstPoint.y)
         }
         ctx.stroke()
      }
   }
}

I tried to trigger pthModel.datachanged event and i get the same reference is not defined error. It does not matter whatever i try, i could not make it to work.

By the way i am open to new ideas to add remove points , drawing lines between them and moving points as well.

Thanks in advance.

Answer 1

I have found a solution. I added onItemRemoved to repeater then called Canvas.requestPaint().

 Repeater {
  id: pthRpt
  model: pthModel
  z: 21
  onItemRemoved: cnvManual.requestPaint()
  delegate: Rectangle {
     required property var modelData
     id: rctParent
     color: "white"
     width: 12
     height: 12
     radius: 6