diff --git a/dist/ReactGraph.css b/dist/ReactGraph.css index 07ddef86..c9f1d064 100644 --- a/dist/ReactGraph.css +++ b/dist/ReactGraph.css @@ -1,6 +1,117 @@ -.style_react-graph__24Zk8 { +.react-graph { width: 100%; height: 100%; position: relative; overflow: hidden; -} \ No newline at end of file +} + +.react-graph__renderer { + width: 100%; + height: 100%; + position: absolute; +} + +.react-graph__zoompane { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +.react-graph__selectionpane { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; +} + +.react-graph__selection { + position: absolute; + top: 0; + left: 0; + background: rgba(0, 89, 220, 0.08); + border: 1px dotted rgba(0, 89, 220, 0.8); +} + +.react-graph__edges { + position: absolute; + top: 0; + left: 0; + pointer-events: none; + z-index: 2; +} + +.react-graph__edge { + fill: none; + stroke: #333; + stroke-width: 2; + pointer-events: all; +} + +.react-graph__edge.selected { + stroke: #ff5050; + } + +.react-graph__nodes { + width: 100%; + height: 100%; + position: absolute; + z-index: 2; + pointer-events: none; + transform-origin: 0 0; +} + +.react-graph__node { + position: absolute; + color: #222; + font-family: sans-serif; + font-size: 12px; + text-align: center; + cursor: -webkit-grab; + cursor: grab; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + pointer-events: all; + transform-origin: 0 0; +} + +.react-graph__node:hover > * { + box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08); + } + +.react-graph__node.selected > * { + box-shadow: 0 0 0 2px #000; + } + +.react-graph__handle { + position: absolute; + width: 12px; + height: 12px; + transform: translate(-50%, -50%); + background: #222; + left: 50%; + border-radius: 50%; +} + +.react-graph__nodesselection { + z-index: 3; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + transform-origin: left top; + pointer-events: none; +} + +.react-graph__nodesselection-rect { + position: absolute; + background: rgba(0, 89, 220, 0.08); + border: 1px dotted rgba(0, 89, 220, 0.8); + } \ No newline at end of file diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js index 08b42cc3..542ddbcd 100644 --- a/dist/ReactGraph.js +++ b/dist/ReactGraph.js @@ -32992,36 +32992,6 @@ return _objectSpread2({}, standardTypes, {}, specialTypes); } - function styleInject(css, ref) { - if ( ref === void 0 ) ref = {}; - var insertAt = ref.insertAt; - - if (!css || typeof document === 'undefined') { return; } - - var head = document.head || document.getElementsByTagName('head')[0]; - var style = document.createElement('style'); - style.type = 'text/css'; - - if (insertAt === 'top') { - if (head.firstChild) { - head.insertBefore(style, head.firstChild); - } else { - head.appendChild(style); - } - } else { - head.appendChild(style); - } - - if (style.styleSheet) { - style.styleSheet.cssText = css; - } else { - style.appendChild(document.createTextNode(css)); - } - } - - var css = ".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n pointer-events: all;\n}\n\n.react-graph__edge.selected {\n stroke: #ff5050;\n }\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 2;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #000;\n }\n\n.react-graph__handle {\n position: absolute;\n width: 12px;\n height: 12px;\n transform: translate(-50%, -50%);\n background: #222;\n left: 50%;\n border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n }"; - styleInject(css); - var ReactGraph = /*#__PURE__*/ function (_PureComponent) { diff --git a/rollup.config.js b/rollup.config.js index 843d48f0..8877a52c 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -29,6 +29,7 @@ export default [{ plugins: [ bundleSize(), postcss({ + extract: true, plugins: [ autoprefixer(), postCssNested()