gribnoysup / react-yandex-maps

Yandex Maps API bindings for React
MIT License
328 stars 116 forks source link

editor property on instanceRef #294

Closed codejet closed 3 years ago

codejet commented 3 years ago

Hi,

in issue 122 (https://github.com/gribnoysup/react-yandex-maps/issues/122) I saw that you mentioned an editor property on the instanceRef which has a method named startFraming. But when I access the instanceRef of my geo object (currently a circle) in my code, it doesn't have an editor property. Did something in your library change or is this an issue on my end?

Relevant snippet from my code:

<Circle
    geometry={[[lat, lon], radius * 1000]}
    options={{
        fillColor: colors.bluePrimary,
        fillOpacity: 0.36,
        strokeColor: colors.bluePrimary,
        strokeWidth: 7,
        strokeOpacity: 1,
        draggable: !!locationDraggable
    }}
    onDragEnd={onDragEnd ? handleDragend : noop}
    instanceRef={ref => {
        ref?.editor?.startFraming();
    }}
/>;

When adding myCircle.editor.startFraming(); in the example in https://yandex.ru/dev/maps/jsbox/2.1/circle/, I get the expected result.

Thanks! Oliver

mmarkelov commented 3 years ago

@codejet hi! Make sure that you add "geoObject.addon.editor" to modules:

import "./styles.css";
import { YMaps, Map, Polygon } from "react-yandex-maps";

export default function App() {
  const mapState = {
    center: [30, 50],
    zoom: 4
  };

  const polygonCoords = [
    [
      [30, 40],
      [30, 50],
      [40, 50],
      [40, 40],
      [30, 40]
    ]
  ];
  return (
    <div className="App">
      <YMaps>
        <Map state={mapState}>
          <Polygon
            modules={["geoObject.addon.editor"]}
            geometry={polygonCoords}
            instanceRef={(ref) => ref.editor.startFraming()}
          />
        </Map>
      </YMaps>
    </div>
  );
}
codejet commented 3 years ago

Thanks a lot, @mmarkelov, that worked!