Can magnetjs be used with interactjs resize?

[talhakaanozkan]

https://github.com/taye/interact.js

hi, i'm using interactjs in events like resize. But how do you use magnetjs (snap events) to make the two better together?

drag event works with magnet. I couldn't run with the resize event. can you help me ?

[lf2com]

Hi @talhakaanozkan, it sounds like you want to apply magnet effects when resizing. Unfortunately magnet.js does not support this function. However since interact.js already integrate both dragging and resizing together, it is a good reference to migrate into magnet.js to doing attracts when resizing. I will add this into the next milestone.
Currently we need to implement it ourselves with magnet.check(element, rect) and magnet.setMemberRectangle(element, rect).
I wrote a sample to manually check alignments of rightToLeft, leftToRight, topToBottom, and bottomToTop then apply position/size changes:

const magnet = new Magnet();
const handleChange = (evt, fixedSize = false) => {
  const { dx, dy, rect: currRect, target } = evt;
  const checkResult = magnet.check(target, currRect, ['rightToLeft', 'leftToRight', 'topToBottom', 'bottomToTop']);
  const { mins } = checkResult;
  const resultRect = {
    top: currRect.top,
    left: currRect.left,
    width: currRect.width,
    height: currRect.height,
  };
  const distance = magnet.getDistance();
  const getMinimum = (types) => {
    return types
      .reduce((result, type, typeIndex) => {
        const target = mins[type];
        if (type === target.min) {
          const currValue = target.results[type];
          if (currValue < result.value) {
            return {
              value: currValue,
              type,
              dom: target.target,
            };
          }
        }
        return result;
      }, {
        value: Infinity,
        type: null,
        dom: null,
      });
  };
  if (dx) {
    let { value, type, dom } = getMinimum(['rightToLeft', 'leftToRight']);
    if (value <= distance) {
      let { rect } = dom;
      switch (type) {
        case 'rightToLeft':
          if (fixedSize) {
            resultRect.left = (rect.left - resultRect.width);
          } else {
            resultRect.width = (rect.left - currRect.left);
          }
          break;
        case 'leftToRight':
          resultRect.left = rect.right;
          if (!fixedSize) {
            resultRect.width = (currRect.right - rect.right);
          }
          break;
      }
    }
  }
  if (dy) {
    let { value, type, dom } = getMinimum(['topToBottom', 'bottomToTop']);
    if (value <= distance) {
      let { rect } = dom;
      switch (type) {
        case 'topToBottom':
          resultRect.top = rect.bottom;
          if (!fixedSize) {
            resultRect.height = (currRect.bottom - rect.bottom);
          }
          break;
        case 'bottomToTop':
          if (fixedSize) {
            resultRect.top = (rect.top - resultRect.height);
          } else {
            resultRect.height = (rect.top - currRect.top);
          }
          break;
      }
    }
  }
  magnet.setMemberRectangle(target, Magnet.stdRect(resultRect));
};

magnet.add(element);
magnet.setAllowDrag(false); // need to disable dragging function of magnet.js
interact(element)
  .draggable({
    listeners: {
      move: (evt) => handleChange(evt, true),
    },
  })
  .resizable({
    edges: { top: true, right: true, bottom: true, left: true },
    onmove: (evt) => handleChange(evt, false),
  });

[talhakaanozkan]

thanks for your quick answer

[talhakaanozkan]

Where does the value "mins" always be empty?

[lf2com]

Sorry, That's my mistake that I didn't realize you were using jQuery plugin. After repeating what you encountered, I found out there were some functions of magnet.js did not really return value for jQuery plugin. I fixed this issue and released a new version here. Also I have tested it on the code and it worked. Please use the v1.0.6 version of magnet.js jQuery plugin.

[talhakaanozkan]

I'm trying now.

[talhakaanozkan]

thanks worked.

[lf2com]

Glade to hear that! If there is any question, please kindly let me know.