615 |
1073 |
1074 |
616 |
617 |
618 |
619 |
620 |
621 |
622 |
623 |
624 | Permalink
625 |
626 |
627 |
692 |
701 |
702 |
703 |
704 |
705 |
1072 |
628 |
640 |
641 |
642 |
629 |
639 |
630 |
638 | Join GitHub today
635 |GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
636 | Sign up 637 |
643 |
644 |
645 |
659 |
660 |
688 |
689 |
690 |
691 |
661 |
665 | Find file
666 |
667 |
668 | Copy path
669 |
670 |
671 |
672 | 673 | jsplumb/doc/api/overlays-api.js 674 |
675 | 676 |
677 |
681 | Find file
682 |
683 |
684 | Copy path
685 |
686 |
687 |
693 | Fetching contributors…
694 |
695 |
696 |
697 | 
698 | Cannot retrieve contributors at this time
699 |
700 |
698 | Cannot retrieve contributors at this time
699 |
706 |
707 |
1057 |
1058 |
1059 |
1060 |
1068 |
1069 |
1070 |
1071 |
708 |
737 |
738 |
739 |
740 |
741 |
742 |
743 |
709 |
710 | 71 lines (66 sloc)
711 |
712 | 4.93 KB
713 |
714 |
715 |
736 |
744 |
745 |
746 |
1031 |
1032 |
1053 |
1054 |
1055 |
1056 | | 748 | | /** | 749 |
| 752 | | * Parent for all Overlay types. The core concept with an Overlay is that of its `location`, which is specified | 753 |
| 756 | | * as follows: | 757 |
| 760 | | * | 761 |
| 764 | | * ###### Connectors | 765 |
| 768 | | * - a value between 0 and 1 inclusive is a proportional value, relative to the length of the Connector's path. | 769 |
| 772 | | * - a value greater than 1 or less than 0 is an absolute value (travel along the path inscribed by the Connector) | 773 |
| 776 | | * | 777 |
| 780 | | * For Connectors, the default value is `0.5`. | 781 |
| 784 | | * | 785 |
| 788 | | * ###### Endpoints | 789 |
| 792 | | * - An array of two values which are proportional to the width and height of the Endpoint. | 793 |
| 796 | | * | 797 |
| 800 | | * For Endpoints, the default value is `[0.5, 0.5]`. | 801 |
| 804 | | * @class Overlay | 805 |
| 808 | | */ | 809 |
| 812 | | 813 | | 814 |
| 817 | | /** | 818 |
| 821 | | * Draws an arrow, using four points: the head and two tail points, and a `foldback` point, which permits the tail of the arrow to be indented. | 822 |
| 825 | | * @class Overlays.Arrow | 826 |
| 829 | | * @constructor | 830 |
| 833 | | * @param {Object} params Constructor parameters | 834 |
| 837 | | * @param {Integer} [params.width=20] Width of the tail of the arrow | 838 |
| 841 | | * @param {Integer} [params.length=20] Distance from the tail of the arrow to the head | 842 |
| 845 | | * @param {Float} [params.location=0.5] Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Arrow should appear on the Connector | 846 |
| 849 | | * @param {Integer} [params.direction=1] Which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards | 850 |
| 853 | | * @param {Float} [params.foldback=0.623] How far along the axis of the arrow the tail points foldback in to. | 854 |
| 857 | | * @param {Object} [params.paintStyle] A style object in the form used for paintStyle values for Endpoints and Connectors. | 858 |
| 861 | | */ | 862 |
| 865 | | 866 | | 867 |
| 870 | | /** | 871 |
| 874 | | * This is just a specialized instance of Arrow in which jsPlumb hardcodes `foldback` to 1, meaning the tail of the Arrow is a flat edge | 875 |
| 878 | | * @class Overlays.PlainArrow | 879 |
| 882 | | * @constructor | 883 |
| 886 | | * @param {Object} params Constructor parameters | 887 |
| 890 | | * @param {Integer} [params.width=20] Width of the tail of the arrow | 891 |
| 894 | | * @param {Integer} [params.length=20] Distance from the tail of the arrow to the head | 895 |
| 898 | | * @param {Float} [params.location=0.5] Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the PlainArrow should appear on the Connector | 899 |
| 902 | | * @param {Integer} [params.direction=1] Which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards | 903 |
| 906 | | * @param {Object} [params.paintStyle] A style object in the form used for paintStyle values for Endpoints and Connectors. | 907 |
| 910 | | */ | 911 |
| 914 | | 915 | | 916 |
| 919 | | /** | 920 |
| 923 | | * This is a specialized instance of Arrow in which jsPlumb hardcodes `foldback` to 2, meaning the Arrow turns into a Diamond | 924 |
| 927 | | * @class Overlays.Diamond | 928 |
| 931 | | * @param {Object} params Constructor parameters | 932 |
| 935 | | * @param {Integer} [params.width=20] Width of the diamond. | 936 |
| 939 | | * @param {Integer} [params.length=20] Length of the diamond. | 940 |
| 943 | | * @param {Float} [params.location=0.5] Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Diamond should appear on the Connector | 944 |
| 947 | | * @param {Object} [params.paintStyle] A style object in the form used for paintStyle values for Endpoints and Connectors. | 948 |
| 951 | | */ | 952 |
| 955 | | 956 | | 957 |
| 960 | | /** | 961 |
| 964 | | * Provides a text label with which to decorate Connectors or Endpoints. jsPlumb draws a Label overlay as a styled DIV. You can style a Label | 965 |
| 968 | | * using the `cssClass` parameter, or - if you need to programmatically generate the appearance - the `labelStyle` parameter. | 969 |
| 972 | | * @class Overlays.Label | 973 |
| 976 | | * @constructor | 977 |
| 980 | | * @param {Object} params Constructor parameters | 981 |
| 984 | | * @param {String|Function} label - The text to display. You can provide a function here instead of plain text: it is passed the component as an argument, and it should return a String. | 985 |
| 988 | | * @param {String} [cssClass] Optional css class to use for the Label. | 989 |
| 992 | | * @param {Float} [location=0.5] Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Label should appear on the Connector | 993 |
| 996 | | * @param {Object} [labelStyle] Optional object containing properties for the label's style. Use this if you need to prgrammatically generate the label's appearance. | 997 |
| 1000 | | * @param {String} [labelStyle.cssClass] css class for the label (you can also use the `cssClass` parameter on the label; this exists for historical reasons) | 1001 |
| 1004 | | * @param {String} [labelStyle.font] A string specifying a font to use, in valid CSS format. | 1005 |
| 1008 | | * @param {String} [labelStyle.color] A string specifying a font color to use, in valid CSS format. | 1009 |
| 1012 | | * @param {String} [labelStyle.fill] A string specifying the background for the label, in valid CSS format. | 1013 |
| 1016 | | * @param {String} [labelStyle.borderStyle] A string specifying the border color for the label, in valid CSS format. | 1017 |
| 1020 | | * @param {Integer} [labelStyle.borderWidth] Width of the border's label | 1021 |
| 1024 | | * @param {Integer} [labelStyle.padding] Padding for the label. | 1025 |
| 1028 | | */ | 1029 |