svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
11.04k stars 1.08k forks source link

部分插件在v3.0.16下无法工作 #1146

Closed vCloudSail closed 1 year ago

vCloudSail commented 4 years ago

svg.draw.js & svg.resize.js & svg.select.js 在svg.js v3.0.16下无法工作,它会产生一个“SVG is not defined”的错误 能否尽快修复这个BUG呢?

package.json

image

using

image

error

image

Fuzzyma commented 4 years ago

Unfortunately, I can't read Chinese.

However, the plugins svg.draw.js, svg.resize.js, svg.select.js don't support svg.js v3 yet

vCloudSail commented 4 years ago

Thank you for your answer. Is there any plan to be compatible with v3 version? When I try to modify the source code, I find there is no Set class in V3. How do I handle this

vCloudSail commented 4 years ago

like this image

Fuzzyma commented 4 years ago

Yes at some point we will update. Until then using version 3 is your best choice

vCloudSail commented 4 years ago

I fixed the problem by adding the following code

import { rbox as RBox } from '@svgdotjs/svg.js/src/types/Box'
import { extend, Element } from '@svgdotjs/svg.js'

export default class Set {
  constructor(members) {
    if (members instanceof Set) {
      this.members = members.members.slice()
    } else {
      Array.isArray(members) ? (this.members = members) : this.clear()
    }
  }
  // Add element to set
  add() {
    var i,
      il,
      elements = [].slice.call(arguments)

    for (i = 0, il = elements.length; i < il; i++) this.members.push(elements[i])

    return this
  }
  // Remove element from set
  remove(element) {
    var i = this.index(element)

    // remove given child
    if (i > -1) this.members.splice(i, 1)

    return this
  }
  // Iterate over all members
  each(block) {
    for (var i = 0, il = this.members.length; i < il; i++) block.apply(this.members[i], [ i, this.members ])

    return this
  }
  // Restore to defaults
  clear() {
    // initialize store
    this.members = []

    return this
  }
  // Get the length of a set
  length() {
    return this.members.length
  }
  // Checks if a given element is present in set
  has(element) {
    return this.index(element) >= 0
  }
  // retuns index of given element in set
  index(element) {
    return this.members.indexOf(element)
  }
  // Get member at given index
  get(i) {
    return this.members[i]
  }
  // Get first member
  first() {
    return this.get(0)
  }
  // Get last member
  last() {
    return this.get(this.members.length - 1)
  }
  // Default value
  valueOf() {
    return this.members
  }
  // Get the bounding box of all members included or empty box if set has no items
  bbox() {
    // return an empty box of there are no members
    if (this.members.length == 0) return new RBox()

    // get the first rbox and update the target bbox
    var rbox = this.members[0].rbox(this.members[0].doc())

    this.each(function() {
      // user rbox for correct position and visual representation
      rbox = rbox.merge(this.rbox(this.doc()))
    })

    return rbox
  }
}

extend(Element, {
  set(members) {
    return new Set(members)
  }
})