<commit_before><template>
  <div>
    <v-subheader>{{ title }}</v-subheader>
    <div :id="'drag-and-drop-panel-' + title"/>
  </div>
</template>

<script>
import {
  DefaultLabelStyle,
  DragDropEffects,
  DragDropItem,
  DragSource,
  Font,
  GraphComponent,
  IEdge,
  ILabel,
  IListEnumerable,
  INode,
  Insets,
  InteriorLabelModel,
  IPort,
  IStripe,
  LabelDropInputMode,
  ListEnumerable,
  NodeDropInputMode,
  Point,
  PortDropInputMode,
  Rect,
  ShapeNodeShape,
  ShapeNodeStyle,
  SimpleNode,
  SvgExport,
  VoidNodeStyle
} from "yfiles";
import {ModelClassModel} from "@/components/zetalayout/model/model-editor/model/nodes/ModelClassModel";
import {addClass, removeClass} from "@/components/zetalayout/model/model-editor/utils/Bindings";

export default {
  name: "DndPalette",
  data: function () {
    return {
      maxItemWidth: 150,
    }
  },
  props: {
    graphComponent: {
      type: Object,
      required: true,
    },
     references: {
      type: Array,
      required: true,
    },
    nodes: {
      type: Array,
      required: true,
    },
    title: {
      type: String,
      default: function () {
        return 'Category Name N/A'
      }
    },
    passiveSupported: {
      type: Boolean,
      required: true
    },
    concept: {
      type: Object,
      required: true
    }
  },
  mounted() {
    let divElement = document.querySelector('#drag-and-drop-panel-' + this.title);
    let panelItems = this.getPanelItems(this.nodes);
    // Append svg images as draggable nodes to the drag-and-drop-panel
    this.appendVisuals(panelItems, divElement)
  },
  methods: {
    getPanelItems(nodes) {
      const graphComponent = new GraphComponent()
      const graph = graphComponent.graph;
      const name = nodes[0].name;

      let geoElements = nodes[0].geoElements;
      let conceptElement = nodes[0].conceptElement;

      for (var i = 0; i < geoElements.length; i++) {
        let shapeNode = geoElements[i]

        if (typeof shapeNode.size !== 'undefined') {
          //const NodeConstructor = Vue.extend(NodeExample)

          const node = graph.createNode({
            layout: new Rect(0, 0, shapeNode.size.width, shapeNode.size.height),
            style: new ShapeNodeStyle({
              shape: this.selectedShape(shapeNode),
              fill: shapeNode.style.background.color.hex,
              stroke: shapeNode.style.line.color.hex
            }),
            tag: new ModelClassModel({
              attributes: this.concept.classes.find(c => c.name === conceptElement).attributes,
              methods: this.concept.classes.find(c => c.name === conceptElement).methods,
              description: shapeNode.type,
              className: name
            })
          })

          if (typeof shapeNode.childGeoElements[0] !== 'undefined') {
            const fontStyle = new Font({
              fontFamily: shapeNode.style.fontFamily,
              fontSize: shapeNode.style.font.size
            })

            graph.addLabel({
              owner: node,
              text: shapeNode.childGeoElements[0].identifier,
              layoutParameter: InteriorLabelModel.CENTER,
              style: new DefaultLabelStyle({
                font: fontStyle,
                verticalTextAlignment: "center",
                horizontalTextAlignment: "center"
              })
            })
          }
        }
      }
      return this.createNodeList(graph)
    },
    selectedShape(shapeNode) {
      switch (shapeNode.type) {
        case "rectangle":
          return ShapeNodeShape.RECTANGLE;

        case "roundedRectangle":
          return ShapeNodeShape.ROUND_RECTANGLE;

        case "ellipse":
          return ShapeNodeShape.ELLIPSE;

        case "triangle":
          return ShapeNodeShape.TRIANGLE;

        case "shearedRectangle":
          return ShapeNodeShape.SHEARED_RECTANGLE;
<commit_msg>fix palette bug<commit_after><template>
  <div>
    <v-subheader>{{ title }}</v-subheader>
    <div :id="'drag-and-drop-panel-' + title"/>
  </div>
</template>

<script>
import {
  DefaultLabelStyle,
  DragDropEffects,
  DragDropItem,
  DragSource,
  Font,
  GraphComponent,
  IEdge,
  ILabel,
  IListEnumerable,
  INode,
  Insets,
  InteriorLabelModel,
  IPort,
  IStripe,
  LabelDropInputMode,
  ListEnumerable,
  NodeDropInputMode,
  Point,
  PortDropInputMode,
  Rect,
  ShapeNodeShape,
  ShapeNodeStyle,
  SimpleNode,
  SvgExport,
  VoidNodeStyle
} from "yfiles";
import {ModelClassModel} from "@/components/zetalayout/model/model-editor/model/nodes/ModelClassModel";
import {addClass, removeClass} from "@/components/zetalayout/model/model-editor/utils/Bindings";

export default {
  name: "DndPalette",
  data: function () {
    return {
      maxItemWidth: 150,
    }
  },
  props: {
    graphComponent: {
      type: Object,
      required: true,
    },
     references: {
      type: Array,
      required: true,
    },
    nodes: {
      type: Array,
      required: true,
    },
    title: {
      type: String,
      default: function () {
        return 'Category Name N/A'
      }
    },
    passiveSupported: {
      type: Boolean,
      required: true
    },
    concept: {
      type: Object,
      required: true
    }
  },
  mounted() {
    let divElement = document.querySelector('#drag-and-drop-panel-' + this.title);
    let panelItems = this.getPanelItems(this.nodes);
    // Append svg images as draggable nodes to the drag-and-drop-panel
    this.appendVisuals(panelItems, divElement)
  },
  methods: {
    getPanelItems(nodes) {
      const graphComponent = new GraphComponent()
      const graph = graphComponent.graph;
      const name = nodes[0].name;

      let numberOfNodes = nodes.length

      for (let i = 0; i < numberOfNodes; i++) {
        let conceptElement = nodes[i].conceptElement
        let geoElements = nodes[i].geoElements

        for (let j = 0; j < geoElements.length; j++) {
          let shapeNode = geoElements[j]

          if (typeof shapeNode.size !== 'undefined') {
            //const NodeConstructor = Vue.extend(NodeExample)

            const node = graph.createNode({
              layout: new Rect(0, 0, shapeNode.size.width, shapeNode.size.height),
              style: new ShapeNodeStyle({
                shape: this.selectedShape(shapeNode),
                fill: shapeNode.style.background.color.hex,
                stroke: shapeNode.style.line.color.hex
              }),
              tag: new ModelClassModel({
                attributes: this.concept.classes.find(c => c.name === conceptElement).attributes,
                methods: this.concept.classes.find(c => c.name === conceptElement).methods,
                description: shapeNode.type,
                className: name
              })
            })

            if (typeof shapeNode.childGeoElements[0] !== 'undefined') {
              const fontStyle = new Font({
                fontFamily: shapeNode.style.fontFamily,
                fontSize: shapeNode.style.font.size
              })

              graph.addLabel({
                owner: node,
                text: shapeNode.childGeoElements[0].identifier,
                layoutParameter: InteriorLabelModel.CENTER,
                style: new DefaultLabelStyle({
                  font: fontStyle,
                  verticalTextAlignment: "center",
                  horizontalTextAlignment: "center"
                })
              })
            }
          }
        }
      }
      return this.createNodeList(graph)
    },
    selectedShape(shapeNode) {
      switch (shapeNode.type) {
        case "rectangle":
          return ShapeNodeShape.RECTANGLE;

        case "roundedRectangle":
          return ShapeNodeShape.ROUND_RECTANGLE;

        case "ellipse":
          return ShapeNodeShape.ELLIPSE;

        case "triangle":
          return ShapeNodeShape.TRIANGLE;

        case "shearedRectangle":
          return ShapeNodeShape.SHEARED_RECTANGLE;

{'fraction_non_alphanumeric': 0.10833963214915596, 'fraction_numerical': 0.0026455026455026454, 'mean_word_length': 2.0939204988308653, 'pattern_counts': {'":': 10, '<': 22, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6651972', 'n_tokens_mistral': 2347, 'n_tokens_neox': 2265, 'n_words': 476}