Добавление пользовательского метода удаления в Raphael JS Graffle Connection

Question

Я использую пользовательский метод подключения (Raphael.fn.connection), добавленный в примере, найденном по адресу: raphaeljs.com/graffle.html

Мой пример здесь: http://jsfiddle.net/WwT2L/ (прокрутите окно дисплея, чтобы увидеть эффект)

По сути, я связал граффлируемое соединение с пузырем, чтобы оно оставалось с ним при масштабировании.Я надеюсь, что смогу переключить соединение на следующий пузырь, когда пользователь прокручивает определенную точку.

Для этого я подумал, что мне нужно удалить соединение и добавить еще одно, но в качествеМетод подключения не является нативным элементом Raphael, у него нет встроенного метода удаления, и у меня возникают проблемы при добавлении метода удаления к прототипу.

Я нашел некоторую информацию о добавлении пользовательских методов в этом обсуждении в группе Google , и я попытался:

this.connections [0] = this.r.соединение (this.bubbles [0], this.unitConnector, "#fff", "#fff") .__proto__. remove = function () {alert ('рабочий пользовательский метод');};

, который, кажется, добавляет метод к этому экземпляру соединения, но я не уверен, что метод должен делать, и кажется, что должен быть лучший способ.

Answer 1

Напомним ... когда мы создаем соединение, мы часто используем следующее:

connections.push(
    r.connection(r.getById(firstObjectId), r.getById(secondObjectId), '#fff')
);

То, что мы здесь делаем, - это добавление (добавление) объекта Raphael.connections в connections[]массив, основанный на их Raphael идентификаторах объектов

Чтобы добавить метод / функцию к Raphael, можно использовать:

Raphael.fn.fnName = function (){ /* Your code here */ }

Это создает функцию в нашем пространстве имен Raphaelдля использования с нашими Raphael объектами.

Ниже приведен код, который я создал и который делает именно то, что вам нужно.Я не смог найти хороший ресурс для Raphael, но скоро обязательно его создам, так как я много занимался с ним разработкой.

Raphael.fn.removeConnection = function (firstObjectId, secondObjectId) {
    for (var i = 0; i < connections.length; i++) {
        if (connections[i].from.id == firstObjectId) {
            if (connections[i].to.id == secondObjectId) {
                connections[i].line.remove();
                connections.splice(i, 1);
            }
        }
        else if (connections[i].from.id == secondObjectId) {
            if (connections[i].to.id == firstObjectId) {
                connections[i].line.remove();
                connections.splice(i, 1);
            }
        }
    }
};

Так же, как в соединениях create,предоставляются два идентификатора.Мы должны найти эти идентификаторы в массиве соединений, которые мы установили для каждого соединения.Если у вас есть только одно соединение, нет необходимости в обходе массива, хотя этот случай встречается реже.

У нас есть два возможных сценария - исключая случай отсутствия соединения для простоты.Он также находит, что:

1. объекты соединения from.id соответствуют первому предоставленному параметру firstObjectId.Затем to соответствует второму предоставленному параметру secondObjectId.
2. , а объекты соединения from.id соответствуют первому предоставленному параметру secondObjectId.Затем to соответствует второму предоставленному параметру firstObjectId.

Этот метод проверки охватывает все наши базы, поэтому независимо от того, как взаимодействует соединение (в моем случае пользователь нажимаетдва объекта, чтобы соединить их и удалить их соединение)

После того, как мы подтвердили, что у нас есть два правильных объекта, мы затем удаляем линию из DOM, используя connections[i].line.remove(); как простое удаление объекта соединения изМассив оставит его на карте.

Наконец, мы удаляем указанный объект соединения из массива, а метод сращивания оставляет нам несвященный массив (в нашем массиве нет дыр, то есть;))используя connections.splice(i, 1);

Тогда

Answer 2

это то, что я использую для удаления соединений из массива соединений, используемого в примере с graffle, и до сих пор у меня нет проблем с ним. вопрос может быть старым, но я наткнулся на него в поисках соответствующего решения, поэтому, когда мне не повезло, я создал свой и хочу поделиться с остальным миром.

    //checks if the current object has any relation with any other object
    //then remove all the to and from connections related to current object             
            for(var i =0 ; i<connections.length; i++){
                if(connections[i].from.id == objectId || connections[i].to.id ==objectId ){
                     connections[i].line.remove();

                }
            }

    //finds out which connections to remove from array and updates connections array
            connections = $.grep(connections, function(el){
                return el.line.paper != null;
            })

У метода сплайсинга были проблемы с моим случаем, как будто объект имеет более одного соединения (с, из) с несколькими объектами, и каждый раз, когда я использовал сплайс, длина массива основных соединений менялась, а значение i увеличивалось , поэтому я использовал jQuery grep метод для обновления массива на основе удаленных строк. я надеюсь, что это поможет и другим.

Answer 3

function removeShape(shape) {
    //CONNECTIONS is my global structure.

    var connections = [];

    while (CONNECTIONS.length) {
        var connection = CONNECTIONS.pop();

        if (connection.from.id == shape.id || connection.to.id == shape.id)
            connection.line.remove();
        else
            connections.push(connection);
    }

    shape.remove();

    CONNECTIONS = connections;
}