@balkangraph/orgchart.js 8.16.13 → 8.16.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/orgchart.d.ts +74 -30
  2. package/orgchart.js +1 -1
  3. package/package.json +1 -1
package/orgchart.d.ts CHANGED
@@ -1,5 +1,38 @@
1
1
 
2
2
 
3
+
4
+ /**
5
+ * ```typescript
6
+ * <!DOCTYPE html>
7
+ * <html>
8
+ * <head>
9
+ * <meta charset="utf-8">
10
+ * <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ * <title>OrgChartJS</title>
12
+ * <style>
13
+ * html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: Helvetica; }
14
+ * #tree { width: 100%; height: 100%; }
15
+ * </style>
16
+ * </head>
17
+ * <body>
18
+ * <script src="https://cdn.balkan.app/orgchart.js"></script>
19
+ * <div id="tree"></div>
20
+ * <script>
21
+ * let chart = new OrgChart(document.getElementById("tree"), {
22
+ * mouseScrool: OrgChart.action.scroll,
23
+ * enableDragDrop: true,
24
+ * nodeBinding: { field_0: "name" },
25
+ * nodes: [
26
+ * { id: 1, name: "Amber McKenzie" },
27
+ * { id: 2, pid: 1, name: "Ava Field" },
28
+ * { id: 3, pid: 1, name: "Peter Stevens" }
29
+ * ]
30
+ * });
31
+ * </script>
32
+ * </body>
33
+ * </html>
34
+ * ```
35
+ */
3
36
  declare class OrgChart {
4
37
  /**
5
38
  * ```typescript
@@ -418,7 +451,7 @@ declare class OrgChart {
418
451
  * ```
419
452
  * @param id identification number of the node
420
453
  */
421
- get(id: string | number): OrgChart.node;
454
+ get(id: string | number): Node;
422
455
  /**
423
456
  * If specified node has assistant/s or partner/s as children will return false.
424
457
  * ```typescript
@@ -2213,14 +2246,20 @@ declare class OrgChart {
2213
2246
  static grCloseTag: any;
2214
2247
  }
2215
2248
 
2249
+ interface Node {
2250
+ id: number | string,
2251
+ pid?: number | string,
2252
+ [key: string]: any
2253
+ }
2254
+
2216
2255
  declare namespace OrgChart {
2217
2256
 
2218
- interface node {
2219
- /**
2220
- * same pid you provided in the source node, the default value is null if not provided or if node with the same id does not exist
2221
- */
2222
- pid?: string | number,
2223
- }
2257
+ // interface node {
2258
+ // /**
2259
+ // * same pid you provided in the source node, the default value is null if not provided or if node with the same id does not exist
2260
+ // */
2261
+ // pid?: string | number,
2262
+ // }
2224
2263
  /**
2225
2264
  * deprecated, use OrgChart.align.center isntead
2226
2265
  * @ignore
@@ -2452,13 +2491,18 @@ declare namespace OrgChart {
2452
2491
  movey?: number | undefined
2453
2492
  }
2454
2493
 
2455
-
2494
+ /**
2495
+ * Template definition
2496
+ * ```typescript
2497
+ * OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ana);
2498
+ * ```
2499
+ */
2456
2500
  interface template
2457
2501
  {
2458
2502
  /**
2459
2503
  * SVG <defs?> of the template
2460
2504
  * ```typescript
2461
- * OrgChart.templates.rony.defs =
2505
+ * OrgChart.templates.myTemplate.defs =
2462
2506
  * `<filter id="{randId}" x="0" y="0" width="200%" height="200%">
2463
2507
  * <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5"></feOffset>
2464
2508
  * <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"></feGaussianBlur>
@@ -2521,7 +2565,7 @@ declare namespace OrgChart {
2521
2565
  /**
2522
2566
  * Assistance link
2523
2567
  * ```typescript
2524
- * OrgChart.templates.ana.assistanseLink =
2568
+ * OrgChart.templates.myTemplate.assistanseLink =
2525
2569
  * `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="2px" fill="none"
2526
2570
  * d="M{xa},{ya} {xb},{yb} {xc},{yc} {xd},{yd} L{xe},{ye}" />`;
2527
2571
  * }
@@ -2532,7 +2576,7 @@ declare namespace OrgChart {
2532
2576
  /**
2533
2577
  * Assistance link
2534
2578
  * ```typescript
2535
- * OrgChart.templates.ana.svg =
2579
+ * OrgChart.templates.myTemplate.svg =
2536
2580
  * `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
2537
2581
  * style="display:block;" width="{w}" height="{h}" viewBox="{viewBox}">{content}
2538
2582
  * </svg>`;
@@ -2543,7 +2587,7 @@ declare namespace OrgChart {
2543
2587
  /**
2544
2588
  * Link
2545
2589
  * ```typescript
2546
- * OrgChart.templates.ana.link =
2590
+ * OrgChart.templates.myTemplate.link =
2547
2591
  * `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="{rounded}" />`;
2548
2592
  * ```
2549
2593
  */
@@ -2552,7 +2596,7 @@ declare namespace OrgChart {
2552
2596
  /**
2553
2597
  * Pointer
2554
2598
  * ```typescript
2555
- * OrgChart.templates.ana.pointer =
2599
+ * OrgChart.templates.myTemplate.pointer =
2556
2600
  * `<g data-pointer="pointer" transform="matrix(0,0,0,0,100,100)">
2557
2601
  * <radialGradient id="pointerGradient">
2558
2602
  * <stop stop-color="#ffffff" offset="0" />
@@ -2567,7 +2611,7 @@ declare namespace OrgChart {
2567
2611
  /**
2568
2612
  * Node
2569
2613
  * ```typescript
2570
- * OrgChart.templates.ana.node =
2614
+ * OrgChart.templates.myTemplate.node =
2571
2615
  * `<rect x="0" y="0" height="{h}" width="{w}" fill="#039BE5" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>`;
2572
2616
  * ```
2573
2617
  */
@@ -2576,7 +2620,7 @@ declare namespace OrgChart {
2576
2620
  /**
2577
2621
  * Plus/expand button
2578
2622
  * ```typescript
2579
- * OrgChart.templates.ana.plus =
2623
+ * OrgChart.templates.myTemplate.plus =
2580
2624
  * `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
2581
2625
  * <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>
2582
2626
  * <line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#aeaeae"></line>`;
@@ -2587,7 +2631,7 @@ declare namespace OrgChart {
2587
2631
  /**
2588
2632
  * Minus/collapse button
2589
2633
  * ```typescript
2590
- * OrgChart.templates.ana.minus =
2634
+ * OrgChart.templates.myTemplate.minus =
2591
2635
  * `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
2592
2636
  * <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>`;
2593
2637
  * ```
@@ -2597,7 +2641,7 @@ declare namespace OrgChart {
2597
2641
  /**
2598
2642
  * Node menu button
2599
2643
  * ```typescript
2600
- * OrgChart.templates.ana.nodeMenuButton =
2644
+ * OrgChart.templates.myTemplate.nodeMenuButton =
2601
2645
  * `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" data-ctrl-n-menu-id="{id}">
2602
2646
  * <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
2603
2647
  * <circle cx="0" cy="0" r="2" fill="#ffffff"></circle>
@@ -2610,7 +2654,7 @@ declare namespace OrgChart {
2610
2654
  /**
2611
2655
  * Menu button
2612
2656
  * ```typescript
2613
- * OrgChart.templates.ana.menuButton =
2657
+ * OrgChart.templates.myTemplate.menuButton =
2614
2658
  * `<div style="position:absolute;right:{p}px;top:{p}px; width:40px;height:50px;cursor:pointer;" data-ctrl-menu="">
2615
2659
  * <hr style="background-color: #7A7A7A; height: 3px; border: none;">
2616
2660
  * <hr style="background-color: #7A7A7A; height: 3px; border: none;">
@@ -2623,7 +2667,7 @@ declare namespace OrgChart {
2623
2667
  /**
2624
2668
  * Node image
2625
2669
  * ```typescript
2626
- * OrgChart.templates.ana.img_0 =
2670
+ * OrgChart.templates.myTemplate.img_0 =
2627
2671
  * `<clipPath id="{randId}"><circle cx="50" cy="30" r="40"></circle></clipPath>
2628
2672
  * <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="-10" width="80" height="80">
2629
2673
  * </image>`;
@@ -2634,7 +2678,7 @@ declare namespace OrgChart {
2634
2678
  /**
2635
2679
  * Link label
2636
2680
  * ```typescript
2637
- * OrgChart.templates.ana.link_field_0 =
2681
+ * OrgChart.templates.myTemplate.link_field_0 =
2638
2682
  * `<text text-anchor="middle" fill="#aeaeae" data-width="290" x="0" y="0" style="font-size:10px;">{val}</text>`;
2639
2683
  * ```
2640
2684
  */
@@ -2643,7 +2687,7 @@ declare namespace OrgChart {
2643
2687
  /**
2644
2688
  * Edit form header color
2645
2689
  * ```typescript
2646
- * OrgChart.templates.ana.editFormHeaderColor = '#039BE5'
2690
+ * OrgChart.templates.myTemplate.editFormHeaderColor = '#039BE5'
2647
2691
  * ```
2648
2692
  */
2649
2693
  editFormHeaderColor?: string,
@@ -2651,7 +2695,7 @@ declare namespace OrgChart {
2651
2695
  /**
2652
2696
  * EMode circle menu button
2653
2697
  * ```typescript
2654
- * OrgChart.templates.ana.nodeCircleMenuButton = {
2698
+ * OrgChart.templates.myTemplate.nodeCircleMenuButton = {
2655
2699
  * radius: 18,
2656
2700
  * x: 250,
2657
2701
  * y: 60,
@@ -2665,20 +2709,20 @@ declare namespace OrgChart {
2665
2709
  /**
2666
2710
  * Minimized template
2667
2711
  * ```typescript
2668
- * OrgChart.templates.ana.min = Object.assign({}, OrgChart.templates.ana);
2669
- * OrgChart.templates.ana.min.size = [250, 60];
2670
- * OrgChart.templates.ana.min.img_0 = "";
2671
- * OrgChart.templates.ana.min.field_0 =
2712
+ * OrgChart.templates.myTemplate.min = Object.assign({}, OrgChart.templates.ana);
2713
+ * OrgChart.templates.myTemplate.min.size = [250, 60];
2714
+ * OrgChart.templates.myTemplate.min.img_0 = "";
2715
+ * OrgChart.templates.myTemplate.min.field_0 =
2672
2716
  * `<text data-width="230" style="font-size: 18px;" fill="#ffffff" x="125" y="40" text-anchor="middle">{val}</text>`;
2673
- * OrgChart.templates.ana.min.field_1 = "";
2717
+ * OrgChart.templates.myTemplate.min.field_1 = "";
2674
2718
  * ```
2675
2719
  */
2676
2720
  min?: OrgChart.template,
2677
2721
 
2678
2722
  /**
2679
- * A field
2723
+ * A custom field definition
2680
2724
  * ```typescript
2681
- * OrgChart.templates.orgTemplate.number =
2725
+ * OrgChart.templates.myTemplate.number =
2682
2726
  * `<text width="230" style="font-size: 11px;" fill="#64696b" x="150" y="53" text-anchor="start">{val}</text>`;
2683
2727
  * ```
2684
2728
  */
@@ -4600,7 +4644,7 @@ declare namespace OrgChart {
4600
4644
  * });
4601
4645
  * ```
4602
4646
  */
4603
- showYScroll?: boolean ,
4647
+ showYScroll?: boolean,
4604
4648
  /**
4605
4649
  * Set template if you want to change the appearance of the chart. Org Chart JS comes with number of build-in templates:
4606
4650
  * - ana