@balkangraph/orgchart.js 8.16.14 → 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 +60 -22
  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
@@ -2458,13 +2491,18 @@ declare namespace OrgChart {
2458
2491
  movey?: number | undefined
2459
2492
  }
2460
2493
 
2461
-
2494
+ /**
2495
+ * Template definition
2496
+ * ```typescript
2497
+ * OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ana);
2498
+ * ```
2499
+ */
2462
2500
  interface template
2463
2501
  {
2464
2502
  /**
2465
2503
  * SVG <defs?> of the template
2466
2504
  * ```typescript
2467
- * OrgChart.templates.rony.defs =
2505
+ * OrgChart.templates.myTemplate.defs =
2468
2506
  * `<filter id="{randId}" x="0" y="0" width="200%" height="200%">
2469
2507
  * <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5"></feOffset>
2470
2508
  * <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"></feGaussianBlur>
@@ -2527,7 +2565,7 @@ declare namespace OrgChart {
2527
2565
  /**
2528
2566
  * Assistance link
2529
2567
  * ```typescript
2530
- * OrgChart.templates.ana.assistanseLink =
2568
+ * OrgChart.templates.myTemplate.assistanseLink =
2531
2569
  * `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="2px" fill="none"
2532
2570
  * d="M{xa},{ya} {xb},{yb} {xc},{yc} {xd},{yd} L{xe},{ye}" />`;
2533
2571
  * }
@@ -2538,7 +2576,7 @@ declare namespace OrgChart {
2538
2576
  /**
2539
2577
  * Assistance link
2540
2578
  * ```typescript
2541
- * OrgChart.templates.ana.svg =
2579
+ * OrgChart.templates.myTemplate.svg =
2542
2580
  * `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
2543
2581
  * style="display:block;" width="{w}" height="{h}" viewBox="{viewBox}">{content}
2544
2582
  * </svg>`;
@@ -2549,7 +2587,7 @@ declare namespace OrgChart {
2549
2587
  /**
2550
2588
  * Link
2551
2589
  * ```typescript
2552
- * OrgChart.templates.ana.link =
2590
+ * OrgChart.templates.myTemplate.link =
2553
2591
  * `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="{rounded}" />`;
2554
2592
  * ```
2555
2593
  */
@@ -2558,7 +2596,7 @@ declare namespace OrgChart {
2558
2596
  /**
2559
2597
  * Pointer
2560
2598
  * ```typescript
2561
- * OrgChart.templates.ana.pointer =
2599
+ * OrgChart.templates.myTemplate.pointer =
2562
2600
  * `<g data-pointer="pointer" transform="matrix(0,0,0,0,100,100)">
2563
2601
  * <radialGradient id="pointerGradient">
2564
2602
  * <stop stop-color="#ffffff" offset="0" />
@@ -2573,7 +2611,7 @@ declare namespace OrgChart {
2573
2611
  /**
2574
2612
  * Node
2575
2613
  * ```typescript
2576
- * OrgChart.templates.ana.node =
2614
+ * OrgChart.templates.myTemplate.node =
2577
2615
  * `<rect x="0" y="0" height="{h}" width="{w}" fill="#039BE5" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>`;
2578
2616
  * ```
2579
2617
  */
@@ -2582,7 +2620,7 @@ declare namespace OrgChart {
2582
2620
  /**
2583
2621
  * Plus/expand button
2584
2622
  * ```typescript
2585
- * OrgChart.templates.ana.plus =
2623
+ * OrgChart.templates.myTemplate.plus =
2586
2624
  * `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
2587
2625
  * <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>
2588
2626
  * <line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#aeaeae"></line>`;
@@ -2593,7 +2631,7 @@ declare namespace OrgChart {
2593
2631
  /**
2594
2632
  * Minus/collapse button
2595
2633
  * ```typescript
2596
- * OrgChart.templates.ana.minus =
2634
+ * OrgChart.templates.myTemplate.minus =
2597
2635
  * `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
2598
2636
  * <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>`;
2599
2637
  * ```
@@ -2603,7 +2641,7 @@ declare namespace OrgChart {
2603
2641
  /**
2604
2642
  * Node menu button
2605
2643
  * ```typescript
2606
- * OrgChart.templates.ana.nodeMenuButton =
2644
+ * OrgChart.templates.myTemplate.nodeMenuButton =
2607
2645
  * `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" data-ctrl-n-menu-id="{id}">
2608
2646
  * <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
2609
2647
  * <circle cx="0" cy="0" r="2" fill="#ffffff"></circle>
@@ -2616,7 +2654,7 @@ declare namespace OrgChart {
2616
2654
  /**
2617
2655
  * Menu button
2618
2656
  * ```typescript
2619
- * OrgChart.templates.ana.menuButton =
2657
+ * OrgChart.templates.myTemplate.menuButton =
2620
2658
  * `<div style="position:absolute;right:{p}px;top:{p}px; width:40px;height:50px;cursor:pointer;" data-ctrl-menu="">
2621
2659
  * <hr style="background-color: #7A7A7A; height: 3px; border: none;">
2622
2660
  * <hr style="background-color: #7A7A7A; height: 3px; border: none;">
@@ -2629,7 +2667,7 @@ declare namespace OrgChart {
2629
2667
  /**
2630
2668
  * Node image
2631
2669
  * ```typescript
2632
- * OrgChart.templates.ana.img_0 =
2670
+ * OrgChart.templates.myTemplate.img_0 =
2633
2671
  * `<clipPath id="{randId}"><circle cx="50" cy="30" r="40"></circle></clipPath>
2634
2672
  * <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="-10" width="80" height="80">
2635
2673
  * </image>`;
@@ -2640,7 +2678,7 @@ declare namespace OrgChart {
2640
2678
  /**
2641
2679
  * Link label
2642
2680
  * ```typescript
2643
- * OrgChart.templates.ana.link_field_0 =
2681
+ * OrgChart.templates.myTemplate.link_field_0 =
2644
2682
  * `<text text-anchor="middle" fill="#aeaeae" data-width="290" x="0" y="0" style="font-size:10px;">{val}</text>`;
2645
2683
  * ```
2646
2684
  */
@@ -2649,7 +2687,7 @@ declare namespace OrgChart {
2649
2687
  /**
2650
2688
  * Edit form header color
2651
2689
  * ```typescript
2652
- * OrgChart.templates.ana.editFormHeaderColor = '#039BE5'
2690
+ * OrgChart.templates.myTemplate.editFormHeaderColor = '#039BE5'
2653
2691
  * ```
2654
2692
  */
2655
2693
  editFormHeaderColor?: string,
@@ -2657,7 +2695,7 @@ declare namespace OrgChart {
2657
2695
  /**
2658
2696
  * EMode circle menu button
2659
2697
  * ```typescript
2660
- * OrgChart.templates.ana.nodeCircleMenuButton = {
2698
+ * OrgChart.templates.myTemplate.nodeCircleMenuButton = {
2661
2699
  * radius: 18,
2662
2700
  * x: 250,
2663
2701
  * y: 60,
@@ -2671,20 +2709,20 @@ declare namespace OrgChart {
2671
2709
  /**
2672
2710
  * Minimized template
2673
2711
  * ```typescript
2674
- * OrgChart.templates.ana.min = Object.assign({}, OrgChart.templates.ana);
2675
- * OrgChart.templates.ana.min.size = [250, 60];
2676
- * OrgChart.templates.ana.min.img_0 = "";
2677
- * 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 =
2678
2716
  * `<text data-width="230" style="font-size: 18px;" fill="#ffffff" x="125" y="40" text-anchor="middle">{val}</text>`;
2679
- * OrgChart.templates.ana.min.field_1 = "";
2717
+ * OrgChart.templates.myTemplate.min.field_1 = "";
2680
2718
  * ```
2681
2719
  */
2682
2720
  min?: OrgChart.template,
2683
2721
 
2684
2722
  /**
2685
- * A field
2723
+ * A custom field definition
2686
2724
  * ```typescript
2687
- * OrgChart.templates.orgTemplate.number =
2725
+ * OrgChart.templates.myTemplate.number =
2688
2726
  * `<text width="230" style="font-size: 11px;" fill="#64696b" x="150" y="53" text-anchor="start">{val}</text>`;
2689
2727
  * ```
2690
2728
  */