Fixed samples integration into react-live

Author: BasicPrimitives

README.md

@@ -38,7 +38,7 @@ Add following changes into App.js
 
 ``` JavaScript
 import React from 'react';
-import './App.css';
+import './global.css';
 import { OrgDiagram } from 'basicprimitivesreact';
 import primitives from 'basicprimitives';
 

docs/DiagramSizing.md

@@ -16,13 +16,13 @@ Having scroll bars enabled for components is fine if they fit into the page view
 
 The "classic" and the most popular approach for desktop applications is to fit page and diagram 100%. In that case you have to design your web site appropriatly.
 
-![Classic desktop layout](./images/PageSizeDiagram2.png "Classic desktop layout")
+![Classic desktop layout](./images/PageSizeDiagram3.png "Classic desktop layout")
 
 The following sample control hight is sized by CSS @Media rules to be within current page view port size. Try to resize your browser window in order to see how it works. The diagraming component has minimum vertical size set to hardcoded 250px.
 
 See [CSS @Media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) for more reference
 
-[Sample of diagram size controlled by CSS @Media](../src/Samples/PageSizeDiagram.js)
+[React](../src/Samples/PageSizeDiagram.js)
 
 ## Auto Size Diagram in Article
 Another diagram integration scenario is diagram placement inside article, so component needs to auto expand its size in order to accommodate all nodes of diagram without minimization or trancation. Set `pageFitMode` to `primitives.common.PageFitMode.AutoSize` and component will size itself to show all nodes of diagram. 

docs/DragNDrop.md

@@ -0,0 +1,42 @@
+# Drag & Drop Support
+
+Basic Primitives Diagrams library for React was created with only one purpose, it is to be complient with [React Drag & Drop](http://react-dnd.github.io/react-dnd/about) library. The only option to achive this is to render all content using React Virtual DOM without direct DOM manipulations. 
+
+In the best software engineering traditions our library does not implement any Drag & Drop related functionalty. Everything as before is achived via item templates customizations.
+
+See [React Drag & Drop](http://react-dnd.github.io/react-dnd/about) library for reference and samples, from our side pay attentions to the following take aways:
+
+## npm packages
+* [react-dnd](https://www.npmjs.com/package/react-dnd)
+* [react-dnd-cjs](https://www.npmjs.com/package/react-dnd-html5-backend)
+
+## React `DndProvider` does not support nested `backend`s
+If you use Drag and Drop in multiple places of your application `DndProvider` should create no nested `backend`s.
+
+```JavaScript
+import React, { Component } from 'react';
+import { App } from './App';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+
+class Sample extends Component {
+  render() {
+    return <>
+      <DndProvider backend={HTML5Backend}>
+        <App />
+      </DndProvider>
+    </>;
+  }
+}
+
+export default Sample;
+```
+
+## Drag & Drop diagram nodes
+
+[React](../src/Samples/DragNDrop.js)
+
+
+## Drag & Drop diagram nodes to application
+
+[React](../src/Samples/DragToTrashBin.js)

docs/FirstFamilyChart.md

@@ -70,4 +70,4 @@ Family diagram shares a lot of common features with Organizational chart. The ma
 * Loops - loop references between nodes
 * Hiding grand parent connections - if node is accessable via other node then direct connection can be eliminated to minimize clutter
 
-[React](../src/Samples/FirstFamilyChart.js)
+[React](../src/Samples/FirstFamilyChart.js)

docs/FirstOrganizationalChart.md

@@ -17,7 +17,7 @@ Add following changes into App.js
 
 ```JavaScript
 import React from 'react';
-import './App.css';
+import './global.css';
 import { OrgDiagram } from 'basicprimitivesreact';
 import primitives from 'basicprimitives';
 

docs/ItemTemplateLabel.md renamed to docs/Labels.md

@@ -1,6 +1,6 @@
 {
   "name": "basicprimitivesreact",
-  "version": "5.4.16",
+  "version": "5.4.17",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "babel": {

package.json

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import primitives from 'basicprimitives';
 import SamplesList from './SamplesList';
-import './App.css';
+import './global.css';
 
 class App extends Component {
   constructor(props, context) {

src/App.js

@@ -14,12 +14,19 @@ class CheckBoxTemplate extends AbstractTemplate {
       <input type="checkbox" name="checkbox" style={{
         fontSize: "12px",
         lineHeight: "12px",
-        verticalAlign: "middle"
+        verticalAlign: "middle",
+        margin: "0px",
+        padding: "0px"
       }} checked={data.isSelected} data-id={data.id} />
       <span name="selectiontext" style={{
         fontSize: "12px",
         lineHeight: "12px",
-        verticalAlign: "middle"
+        verticalAlign: "middle",
+        maring: "0px",
+        paddingLeft: "2px",
+        paddingTop: "0px",
+        paddingRight: "0px",
+        paddingBottom: "0px"
       }} data-id={data.id} >
         {this.selectCheckBoxLabel}
       </span>

src/Diagrams/Templates/CheckBoxTemplate.js

@@ -31,7 +31,7 @@ class Sample extends Component {
           annotationType: primitives.common.AnnotationType.Connector,
           fromItem: 0,
           toItem: 2,
-          label: <div className="Badge" style={{
+          label: <div className="BadgeSymbol" style={{
             backgroundColor: primitives.common.Colors.Green
           }}>2</div>,
           labelSize: { width: 80, height: 30 },
@@ -48,7 +48,7 @@ class Sample extends Component {
           annotationType: primitives.common.AnnotationType.Connector,
           fromItem: 0,
           toItem: 1,
-          label: <div className="Badge" style={{
+          label: <div className="BadgeSymbol" style={{
             backgroundColor: primitives.common.Colors.Red
           }}>1</div>,
           labelSize: new primitives.common.Size(80, 30),
@@ -65,7 +65,7 @@ class Sample extends Component {
           annotationType: primitives.common.AnnotationType.Connector,
           fromItem: 0,
           toItem: 3,
-          label: <div className="Badge" style={{
+          label: <div className="BadgeSymbol" style={{
             backgroundColor: primitives.common.Colors.Blue
           }}>3</div>,
           labelSize: new primitives.common.Size(80, 30),