susielu / react-annotation Goto Github PK

Hey,

first of all thank you for this nice library. Unfortunately, I'm facing troubles in detecting the bounding box of an annotation with getBBox(). I do this via refs of React. Strangely, for a some annotations I can get the correct bounding box and for others I only get width and height equals 0. I think, my Parent component calls the getBox function before the annotations are actually completely rendered in some cases.

What is the correct way to get the bounding boxes of annotations?

Thanks a lot!
Cheers,
Jan

I'm trying to use react-annotation on a pie chart.

<Annotation
     x={centroidX}
     y={centroidY}
     dx={startAngle < Math.PI ? 170 : -170}
     dy={startAngle < Math.PI ? 70 : -70}
     radius={35}
     color={"#9610ff"}
     title={arc.data.value}
>
    <ConnectorElbow>
       <ConnectorEndDot />
    </ConnectorElbow>
    <Note align="middle" lineType="vertical" padding={startAngle < Math.PI ? -5 : 5} />
</Annotation>

centroidX and centroidY are calculated before and enable to get the coordinates of the point in the middle of the "pie" (mid-radius and mid-angle). So, with a pie of size PI and radius=1 on the pie chart, centroid would be located at radius=0.5, and an angle of Pi/2.

So, this works, except that an offset is introduced, for some reason, in the annotation component. The value that the component is offset with is the value in the transform translate in the ConnectorEndDot component. Same value on x and on y.
If I add these x and y offset values to the translate values of the Annotation component in the html code, then things will display as expected, with the connector dot located at centroid.

There does not seem to be any parameter to fix this in the API doc.

Any idea where that offset comes from ? How can I fix that ?

As a prototype I created a custom subject and used AnnotationCalloutCustom to put it on the page. Moving it around I do not get the props value in the onDragEnd event. Without these values state cannot be updated and position later persisted to a data store.

As a part of our refactoring project, we are overhauling all of the old screenshots, including feature tutorials. During this overhaul, we came up with the idea of using components for our annotations rather than embedding them directly into the images, allowing for better accessibility, localization, and modifications. That's what led us to this package. It appears to have everything we're looking for in an annotation library, and we're excited to implement it into our project.

There's just one little thing that's preventing us from proceeding at the moment. Since we have a responsive layout, pixel-based positioning won't really work. We'd need something more relative, specifically percentage-based positioning. It would be great if this package could accept percentage-based values (and by extension, maybe even all length-based values that SVG elements can accept)!

Since this is a critical feature to our project, my employer has authorized me to write code for this repository. In other words, if desired, I'd be more than happy to write a PR for this!

I tried to implement some touch events (like touchmove) but it's not working. Are there any plans in the future to add this support?

hi, i couldn't install this.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-annotation
npm ERR! react-annotation@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

Hi,
I basically used an example from the site:

import './annotate.css';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Annotation, SubjectCircle, ConnectorElbow, ConnectorEndDot, Note } from 'react-annotation';

class Annotate extends Component {
  static propTypes = {}

  static defaultProps = {}

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <Annotation
        x={100}
        y={100}
        dx={100}
        dy={50}
        radius={35}
        title="Custom annotation"
        label="Donut annotations be free!"
      >

        <Note align="middle" lineType="vertical" padding={10} />
        </Annotation>
    );
  }
}

export { Annotate };

and came away with the following error:

Uncaught TypeError: textRef.lastChild.getComputedTextLength is not a function
    at Note.wrapText (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:41187)
    at Note.updateText (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:41134)
    at Note.componentDidMount (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:41099)
    at modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:17556
    at measureLifeCyclePerf (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:17367)
    at modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:17555
    at CallbackQueue.notifyAll (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:10182)
    at ReactReconcileTransaction.close (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:20583)
    at ReactReconcileTransaction.closeAll (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:11341)
    at ReactReconcileTransaction.perform (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:11288)

Hi, @susielu,
I've started using react-annotation in a project and I'm really enjoying the broad range of features that it offers! However, I've been trying to build the library and experiment with some of my own changes, and I'm having some trouble.
When I first tried to build the project, I didn't realize that I had to use yarn instead of npm. Also, I'm wondering, what's the best way to test out changes I've made to this library? I think both of these issues could be addressed in a new section of the 'README.md'. What do you think?

Could not resolve dependency:
peer react@"^15.0.0 || ^16.0.0" from [email protected]
node_modules/react-annotation
react-annotation@"^2.2.1" from the root project

cc @demartsc

I'm trying to capture the Event parameter when someone double clicks. Basically to know that a Note has been double clicked and not a Handle.
Realised that this will work, except after when you drag the Note around. The Event e (like the example code below), would be switched to become props instead. Something like the log below:

First try

{x: 150, y: 170, dx: 162, dy: 117, color: "#3ff", …}
null
Class {dispatchConfig: {…}, _targetInst: FiberNode, _dispatchListeners: Array(2), _dispatchInstances: Array(2), nativeEvent: MouseEvent, …}

After dragging the Note

{x: 150, y: 170, dx: 162, dy: 117, color: "#3ff", …}
null
{x: 150, y: 170, dx: 162, dy: 117, color: "#3ff", …}

<EditableAnnotation
  x={150}
  y={170}
  dy={117}
  dx={162}
  color={"#9610ff"}     
  title={"Annotations :)"}
  label={"Longer text to show text wrapping"}
  events={ {
    onDoubleClick: ( props, state, e )  => {
      console.log( props, state, e ); // e will not become an event after dragging the Note
    }
  } }
>
  <ConnectorLine />
  <Note 
    align={"middle"}
    orientation={"topBottom"}
    bgPadding={20}
    padding={15}
    titleColor={"#59039c"} />
</EditableAnnotation>
```

Hi
Is there any place where I can found the code of your demo component ? : https://react-annotation.susielu.com/#types

Hello 👋

Have you considered adding TypeScript typings to react-annotation? :)

Is there a way to style Subjects without changing root CSS classes or adding custom CSS selectors?
I see that color can be passed to SubjectRect but I'd need to change its background color (fill) for example.

I ended up doing this and it works, but would be great if Subjects can receive a className or style prop:
https://codepen.io/inakiabt/pen/mgwaJB

Hi @susielu, I'd love to get circleci enabled so that builds, tests, and flow can operate and make sure that regressions aren't introduced. https://circleci.com/ just needs you to enable the tests for the repo. After that I can make a pr to introduce a reasonable config.

It would be very useful to have the possibility to provide formatted content (styles, links, ...) within the annotation’s body.

Do you already planned some similar feature ?

Rickshaw and John Burn-Murdoch's links are broken

Could you provide an example of onDragEnd?
Im currently trying this, but i am unable to get it to work.

      <AnnotationCallout
              x={320}
              y={140}
              dy={117}
              dx={162}
              color={"#ff0032"}
              className="show-bg"
              editMode={true}
              note={{
                "title" : "001",
                "dataTest":"123",
                "lineType" : null,
                "padding" : 15,
                "titleColor" : "#ff0032"}}
              connector={{"end" : "arrow"}}
              events={{onDragEnd: (props) => {console.log(props)}}}
       />

This looks like a fantastic app, but I'm looking through the documentation (maybe I'm missing it) and am trying to find a clear way to import an image on which to annotate. Then a way to export it... although I could figure out how to export it on my own.

Any suggestions?

Thanks!

npm i prop-types instead, otherwise it has compatibility issues with React 15.6.

This is a wonderful tool for image annotation. 💯

I have a problem that It is so hard to see those handlers when background color is grey, could u please add some props/api for its color?

It is difficult for me to change the source code because I am not a professional front-end developer. 😿

I created a new app via create-react-app and then installed react-annotation. When I ran npm start it came up with an error. I'm on windows 10 using npm v5.6.0 and node v8.9.4.

Here is the console output after I had installed create-react-app if it helps.

PS C:\Users\David\Desktop> cd ra-test
PS C:\Users\David\Desktop\ra-test> npm i react-annotation -S
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\.bin\jest.cmd as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\jest
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\.bin\jest as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\jest
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\.bin\uglifyjs.cmd as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\uglify-js
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\.bin\uglifyjs as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\uglify-js
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\html-minifier\node_modules\.bin\uglifyjs.cmd as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\html-minifier\node_modules\uglify-js
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\html-minifier\node_modules\.bin\uglifyjs as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\html-minifier\node_modules\uglify-js
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\.bin\esparse.cmd as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\esprima
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\.bin\esvalidate.cmd as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\esprima
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\.bin\esparse as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\esprima
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\.bin\esvalidate as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\esprima
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\espree\node_modules\.bin\acorn.cmd as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\espree\node_modules\acorn
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\espree\node_modules\.bin\acorn as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\espree\node_modules\acorn
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\.bin\browserslist.cmd as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\browserslist
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\.bin\browserslist as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\browserslist
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\autoprefixer\node_modules\.bin\browserslist.cmd as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\autoprefixer\node_modules\browserslist
npm WARN rm not removing C:\Users\David\Desktop\ra-test\node_modules\autoprefixer\node_modules\.bin\browserslist as it wasn't installed by C:\Users\David\Desktop\ra-test\node_modules\autoprefixer\node_modules\browserslist
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of react@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 6 packages, removed 1045 packages and updated 16 packages in 29.55s
PS C:\Users\David\Desktop\ra-test> npm start

> [email protected] start C:\Users\David\Desktop\ra-test
> react-scripts start

'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\David\AppData\Roaming\npm-cache\_logs\2018-01-22T15_26_56_290Z-debug.log
PS C:\Users\David\Desktop\ra-test>

When sizing a SubjectCirle, if you drag past the center (subject handle) the circle is hidden and the connector extends. It would be nice if the circle inverts like SubjectRect.

Hi Susie -- thank you for putting this great library together! Is it possible to add a background color to an annotation to set the titleColor and labelColor against? I have looked through the docs and a few of the examples provided. Any help would be greatly appreciated!