mumuki-styles 1.13.1 → 1.14.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +77 -0
- data/app/assets/javascripts/mumuki-styles.js +316 -111
- data/app/assets/stylesheets/_mu-erd.scss +71 -0
- data/app/assets/stylesheets/mumuki-styles.css +61 -0
- data/app/assets/stylesheets/mumuki-styles.scss +1 -0
- data/lib/mumuki/styles/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c78a16aab5f73e7228d2913d2a3fc74df693929d
|
4
|
+
data.tar.gz: f0b13effa905aec8b6dccb960b1667591e981341
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9d4f6a26f4df6afd1b67bdc29baa5236be69393022906c10ac61e7a15aa42e53bafcff40b4e56c2635c9546d1f8645f8ae74447467deb9a111a0e744b84e14c8
|
7
|
+
data.tar.gz: 4c77855b665fb366940a1367b4413159a2808a8d68adde3e18b52746b90eb02ab080d1cac225b3cb75630463cc2c6ace0de38981adb67c2c0ebcab371ae78207
|
data/README.md
CHANGED
@@ -90,6 +90,83 @@
|
|
90
90
|
|
91
91
|
With jQuery you can use function `$('.mu-file-browser').renderFileBrowser()`;
|
92
92
|
|
93
|
+
```html
|
94
|
+
<div
|
95
|
+
class='mu-erd'
|
96
|
+
data-entities='[
|
97
|
+
{
|
98
|
+
"name": "Entity_1",
|
99
|
+
"columns": [
|
100
|
+
{
|
101
|
+
"name": "ent1_id",
|
102
|
+
"type": "Integer",
|
103
|
+
"pk": true
|
104
|
+
},
|
105
|
+
{
|
106
|
+
"name": "ent2_id",
|
107
|
+
"type": "Integer",
|
108
|
+
"pk": true,
|
109
|
+
"fk": {
|
110
|
+
"to": { "entity": "Entity_2", "column": "ent2_id" },
|
111
|
+
"type": "one_to_one"
|
112
|
+
}
|
113
|
+
},
|
114
|
+
{
|
115
|
+
"name": "ent1_description",
|
116
|
+
"type": "Varchar"
|
117
|
+
}
|
118
|
+
]
|
119
|
+
},
|
120
|
+
{
|
121
|
+
"name": "Entity_2",
|
122
|
+
"columns": [
|
123
|
+
{
|
124
|
+
"name": "ent2_id",
|
125
|
+
"type": "Integer",
|
126
|
+
"pk": true
|
127
|
+
}
|
128
|
+
]
|
129
|
+
},
|
130
|
+
{
|
131
|
+
"name": "Entity_3",
|
132
|
+
"columns": [
|
133
|
+
{
|
134
|
+
"name": "ent3_id",
|
135
|
+
"type": "Integer",
|
136
|
+
"pk": true
|
137
|
+
},
|
138
|
+
{
|
139
|
+
"name": "ent2_id",
|
140
|
+
"type": "Integer",
|
141
|
+
"pk": true,
|
142
|
+
"fk": {
|
143
|
+
"to": { "entity": "Entity_2", "column": "ent2_id" },
|
144
|
+
"type": "many_to_one"
|
145
|
+
}
|
146
|
+
},
|
147
|
+
{
|
148
|
+
"name": "ent1_description",
|
149
|
+
"type": "Varchar"
|
150
|
+
}
|
151
|
+
]
|
152
|
+
}
|
153
|
+
]'>
|
154
|
+
</div>
|
155
|
+
```
|
156
|
+
|
157
|
+
#### mu-erd attributes
|
158
|
+
* `data-entities`: (`Array<Object>`) Every entity object of the array should have:
|
159
|
+
* `name`: (`String`) Entity name.
|
160
|
+
* `columns`: (`Array<Object>`) Every column object of the array should have:
|
161
|
+
* `name`: (`String`) Column field,
|
162
|
+
* `type`: (`String`) Column type (Char, Number, Integer, Varchar),
|
163
|
+
* `pk`: (`Boolean` - Optional) True if column es PK or part of one,
|
164
|
+
* `fk`: (`Object` - Optional) with properties:
|
165
|
+
* `to`: (`Object`) { entity: (Foreign entity), column: (Foreign column name) }
|
166
|
+
* `type`: (`String`) one\_to\_one | one\_to\_many | many\_to\_one | many\_to\_many
|
167
|
+
|
168
|
+
With jQuery you can use function `$('.mu-erd').renderERD()`;
|
169
|
+
|
93
170
|
|
94
171
|
## Installing
|
95
172
|
|
@@ -12597,7 +12597,6 @@ if (typeof jQuery === 'undefined') {
|
|
12597
12597
|
|
12598
12598
|
}(jQuery);
|
12599
12599
|
|
12600
|
-
|
12601
12600
|
(function (window, document) {
|
12602
12601
|
'use strict';
|
12603
12602
|
|
@@ -12622,146 +12621,352 @@ if (typeof jQuery === 'undefined') {
|
|
12622
12621
|
}
|
12623
12622
|
}
|
12624
12623
|
|
12625
|
-
|
12624
|
+
})(window, document);
|
12625
|
+
|
12626
|
+
|
12627
|
+
mumuki.load(function () {
|
12626
12628
|
|
12627
|
-
|
12628
|
-
|
12629
|
-
|
12630
|
-
|
12631
|
-
|
12632
|
-
|
12633
|
-
|
12634
|
-
|
12635
|
-
|
12636
|
-
}
|
12629
|
+
var descriptorType = {
|
12630
|
+
file: {
|
12631
|
+
open: function (state, filename) {
|
12632
|
+
if (state.onFileOpen) {
|
12633
|
+
var onFileOpen = eval(state.onFileOpen);
|
12634
|
+
if (typeof onFileOpen === 'function') {
|
12635
|
+
onFileOpen(filename, lastFolder(state)[filename]);
|
12636
|
+
} else {
|
12637
|
+
throw new Error('"data-on-file-open" should be a function');
|
12637
12638
|
}
|
12638
12639
|
}
|
12639
|
-
}
|
12640
|
-
|
12641
|
-
|
12642
|
-
|
12643
|
-
|
12644
|
-
|
12645
|
-
|
12646
|
-
|
12640
|
+
}
|
12641
|
+
},
|
12642
|
+
folder: {
|
12643
|
+
open: function (state, foldername) {
|
12644
|
+
if (state.canBrowse) {
|
12645
|
+
var folder = lastFolder(state)[foldername];
|
12646
|
+
state.breadcrumb.push({name: foldername, files: folder});
|
12647
|
+
createExplorerFrom(state, folder);
|
12647
12648
|
}
|
12648
12649
|
}
|
12649
12650
|
}
|
12651
|
+
}
|
12650
12652
|
|
12651
|
-
|
12652
|
-
|
12653
|
-
|
12654
|
-
|
12655
|
-
}
|
12653
|
+
function back(state) {
|
12654
|
+
if (state.breadcrumb.length > 1) {
|
12655
|
+
state.breadcrumb.pop();
|
12656
|
+
createExplorerFrom(state, lastFolder(state));
|
12656
12657
|
}
|
12658
|
+
}
|
12657
12659
|
|
12658
|
-
|
12659
|
-
|
12660
|
-
|
12661
|
-
|
12662
|
-
|
12663
|
-
|
12664
|
-
|
12660
|
+
function getPath(state) {
|
12661
|
+
return state.breadcrumb
|
12662
|
+
.map(function (it) {
|
12663
|
+
return it.name;
|
12664
|
+
})
|
12665
|
+
.join('/') || '/';
|
12666
|
+
}
|
12665
12667
|
|
12666
|
-
|
12667
|
-
|
12668
|
-
|
12668
|
+
function lastFolder(state) {
|
12669
|
+
return state.breadcrumb[state.breadcrumb.length - 1].files;
|
12670
|
+
}
|
12669
12671
|
|
12670
|
-
|
12671
|
-
|
12672
|
-
|
12673
|
-
|
12674
|
-
|
12675
|
-
|
12676
|
-
|
12677
|
-
}
|
12672
|
+
function sortByTypeAndName(obj, key1, key2) {
|
12673
|
+
if (typeof obj[key1] === typeof obj[key2]) {
|
12674
|
+
return key1.localeCompare(key2);
|
12675
|
+
} else if (obj[key1] instanceof Object && obj[key2] instanceof String) {
|
12676
|
+
return 1;
|
12677
|
+
} else {
|
12678
|
+
return -1;
|
12678
12679
|
}
|
12680
|
+
}
|
12679
12681
|
|
12680
|
-
|
12681
|
-
|
12682
|
-
|
12683
|
-
|
12684
|
-
|
12682
|
+
function sortedFilesKeys(files) {
|
12683
|
+
return Object.keys(files || {}).sort(function (a, b) {
|
12684
|
+
return sortByTypeAndName(files, a, b);
|
12685
|
+
});
|
12686
|
+
}
|
12685
12687
|
|
12686
|
-
|
12687
|
-
|
12688
|
-
|
12689
|
-
|
12690
|
-
|
12691
|
-
|
12692
|
-
|
12693
|
-
|
12694
|
-
|
12695
|
-
|
12688
|
+
function getListItem(files, key, state) {
|
12689
|
+
return $([
|
12690
|
+
'<li>',
|
12691
|
+
' <i class="' + fileBrowserClassType(files[key]) + '"></i>',
|
12692
|
+
' <span>' + key + '</span>',
|
12693
|
+
'</li>'].join(''))
|
12694
|
+
.click(function () {
|
12695
|
+
descriptorType[fileBrowserClassType(files[key])].open(state, key);
|
12696
|
+
});
|
12697
|
+
}
|
12696
12698
|
|
12697
|
-
|
12698
|
-
|
12699
|
-
|
12699
|
+
function fileBrowserClassType(file) {
|
12700
|
+
return file instanceof Object ? 'folder' : 'file';
|
12701
|
+
}
|
12700
12702
|
|
12701
|
-
|
12702
|
-
|
12703
|
-
|
12704
|
-
|
12705
|
-
|
12703
|
+
function appendFiles($ul, files, state) {
|
12704
|
+
sortedFilesKeys(files).forEach(function (key) {
|
12705
|
+
$ul.append(getListItem(files, key, state));
|
12706
|
+
});
|
12707
|
+
}
|
12706
12708
|
|
12707
|
-
|
12708
|
-
|
12709
|
-
|
12710
|
-
|
12711
|
-
|
12712
|
-
|
12713
|
-
|
12709
|
+
function createExplorerFrom(state, files) {
|
12710
|
+
state.container.empty();
|
12711
|
+
var $ul = $('<ul></ul>');
|
12712
|
+
appendFiles($ul, files, state);
|
12713
|
+
state.container.append($ul);
|
12714
|
+
state.header.find('.mu-file-browser-path').val(getPath(state));
|
12715
|
+
}
|
12714
12716
|
|
12715
|
-
|
12716
|
-
|
12717
|
-
|
12718
|
-
|
12719
|
-
|
12720
|
-
|
12721
|
-
|
12722
|
-
|
12717
|
+
function getExplorerHeader(canBrowse) {
|
12718
|
+
return $([
|
12719
|
+
'<header>',
|
12720
|
+
canBrowse ? '<i class="fa fa-fw fa-arrow-left"></i>' : '',
|
12721
|
+
' <input class="mu-file-browser-path" type="text" readonly>',
|
12722
|
+
'</header>'
|
12723
|
+
].join(''))
|
12724
|
+
}
|
12723
12725
|
|
12724
|
-
|
12725
|
-
|
12726
|
-
|
12727
|
-
|
12728
|
-
|
12729
|
-
|
12730
|
-
|
12731
|
-
|
12726
|
+
$.fn.renderFileBrowser = function () {
|
12727
|
+
var self = this;
|
12728
|
+
self.empty();
|
12729
|
+
self.each(function (i) {
|
12730
|
+
var $explorer = $(self[i]);
|
12731
|
+
var files = $explorer.data('file');
|
12732
|
+
var canBrowse = $explorer.data('can-browse');
|
12733
|
+
var onFileOpen = $explorer.data('on-file-open');
|
12732
12734
|
|
12733
|
-
|
12734
|
-
|
12735
|
+
var $header = getExplorerHeader(canBrowse);
|
12736
|
+
var $main = $('<main></main>');
|
12735
12737
|
|
12736
|
-
|
12738
|
+
var ROOT_FOLDER_NAME = '/home/mumuki';
|
12737
12739
|
|
12738
12740
|
|
12739
|
-
|
12740
|
-
|
12741
|
-
|
12742
|
-
|
12743
|
-
|
12744
|
-
|
12745
|
-
|
12746
|
-
|
12741
|
+
if (files instanceof Object) {
|
12742
|
+
var state = {
|
12743
|
+
container: $main,
|
12744
|
+
header: $header,
|
12745
|
+
canBrowse: !!canBrowse,
|
12746
|
+
onFileOpen: onFileOpen,
|
12747
|
+
breadcrumb: [{name: ROOT_FOLDER_NAME, files: files}]
|
12748
|
+
};
|
12747
12749
|
|
12748
|
-
|
12749
|
-
|
12750
|
+
$explorer.append($header);
|
12751
|
+
$explorer.append($main);
|
12750
12752
|
|
12751
|
-
|
12752
|
-
|
12753
|
-
|
12753
|
+
$header.find('i').click(function () {
|
12754
|
+
back(state)
|
12755
|
+
});
|
12754
12756
|
|
12755
|
-
|
12757
|
+
createExplorerFrom(state, files);
|
12756
12758
|
|
12757
|
-
|
12758
|
-
|
12759
|
-
|
12759
|
+
}
|
12760
|
+
});
|
12761
|
+
return self;
|
12762
|
+
}
|
12763
|
+
|
12764
|
+
$('.mu-file-browser').renderFileBrowser();
|
12765
|
+
|
12766
|
+
});
|
12767
|
+
|
12768
|
+
mumuki.load(function () {
|
12769
|
+
|
12770
|
+
var C = 10;
|
12771
|
+
var BORDER = 4;
|
12772
|
+
|
12773
|
+
var availableDirections = {
|
12774
|
+
up: function ($entity, $column) {
|
12775
|
+
var x1 = $entity.from.position().left + $entity.from.width() + BORDER;
|
12776
|
+
var y1 = $column.from.position().top + $column.from.height() / 2 + 5;
|
12777
|
+
var x2 = $entity.to.position().left + $entity.to.width() + BORDER;
|
12778
|
+
var y2 = $column.to.position().top + $column.to.height() / 2 + 5;
|
12779
|
+
return { x1: x1, x2: x2, y1: y1, y2: y2, mi: Math.max(x1, x2) + C * 2, dx1: C, dx2: C };
|
12780
|
+
},
|
12781
|
+
down: function ($entity, $column) {
|
12782
|
+
var x1 = $entity.from.position().left + $entity.from.width() + BORDER;
|
12783
|
+
var y1 = $column.from.position().top + $column.from.height() / 2 + 5;
|
12784
|
+
var x2 = $entity.to.position().left + $entity.to.width() + BORDER;
|
12785
|
+
var y2 = $column.to.position().top + $column.to.height() / 2 + 5;
|
12786
|
+
return { x1: x1, x2: x2, y1: y1, y2: y2, mi: Math.max(x1, x2) + C * 2, dx1: C, dx2: C };
|
12787
|
+
},
|
12788
|
+
left: function ($entity, $column) {
|
12789
|
+
var x1 = $entity.from.position().left;
|
12790
|
+
var y1 = $column.from.position().top + $column.from.height() / 2 + 5;
|
12791
|
+
var x2 = $entity.to.position().left + $entity.to.width() + BORDER;
|
12792
|
+
var y2 = $column.to.position().top + $column.to.height() / 2 + 5;
|
12793
|
+
return { x1: x1, x2: x2, y1: y1, y2: y2, mi: (x1 + x2) / 2, dx1: -C, dx2: C };
|
12794
|
+
},
|
12795
|
+
right: function ($entity, $column) {
|
12796
|
+
var x1 = $entity.from.position().left + $entity.from.width() + BORDER;
|
12797
|
+
var y1 = $column.from.position().top + $column.from.height() / 2 + 5;
|
12798
|
+
var x2 = $entity.to.position().left;
|
12799
|
+
var y2 = $column.to.position().top + $column.to.height() / 2 + 5;
|
12800
|
+
return { x1: x1, x2: x2, y1: y1, y2: y2, mi: (x1 + x2) / 2, dx1: C, dx2: -C };
|
12801
|
+
},
|
12802
|
+
up_left: function ($entity, $column) {
|
12803
|
+
var x1 = $entity.from.position().left;
|
12804
|
+
var y1 = $column.from.position().top + $column.from.height() / 2 + 5;
|
12805
|
+
var x2 = $entity.to.position().left + $entity.to.width() + BORDER;
|
12806
|
+
var y2 = $column.to.position().top + $column.to.height() / 2 + 5;
|
12807
|
+
return { x1: x1, x2: x2, y1: y1, y2: y2, mi: (x1 + x2) / 2, dx1: -C, dx2: C };
|
12808
|
+
},
|
12809
|
+
up_right: function ($entity, $column) {
|
12810
|
+
return;
|
12811
|
+
},
|
12812
|
+
down_left: function ($entity, $column) {
|
12813
|
+
return;
|
12814
|
+
},
|
12815
|
+
down_right: function ($entity, $column) {
|
12816
|
+
return;
|
12817
|
+
},
|
12818
|
+
}
|
12819
|
+
|
12820
|
+
var connectors = {
|
12821
|
+
one_to_one: function (points) {
|
12822
|
+
return [
|
12823
|
+
svgLine(points.x1 + points.dx1, points.x1 + points.dx1, points.y1 - C, points.y1 + C), // | from
|
12824
|
+
svgLine(points.x2 + points.dx2, points.x2 + points.dx2, points.y2 - C, points.y2 + C), // | to
|
12825
|
+
].join('');
|
12826
|
+
},
|
12827
|
+
many_to_one: function (points) {
|
12828
|
+
return [
|
12829
|
+
svgLine(points.x1, points.x1 + points.dx1, points.y1 - C, points.y1), // \ from many
|
12830
|
+
svgLine(points.x1, points.x1 + points.dx1, points.y1 + C, points.y1), // / from many
|
12831
|
+
svgLine(points.x2 + points.dx2, points.x2 + points.dx2, points.y2 - C, points.y2 + C), // | to one
|
12832
|
+
].join('');
|
12833
|
+
},
|
12834
|
+
one_to_many: function (points) {
|
12835
|
+
return [
|
12836
|
+
svgLine(points.x1 + points.dx1, points.x1 + points.dx1, points.y1 - C, points.y1 + C), // | from one
|
12837
|
+
svgLine(points.x2, points.x2 + points.dx2, points.y2 - C, points.y2), // \ to many
|
12838
|
+
svgLine(points.x2, points.x2 + points.dx2, points.y2 + C, points.y2), // / to many
|
12839
|
+
].join('');
|
12840
|
+
},
|
12841
|
+
many_to_many: function (points) {
|
12842
|
+
return [
|
12843
|
+
svgLine(points.x1, points.x1 + points.dx1, points.y1 - C, points.y1), // \ from many
|
12844
|
+
svgLine(points.x1, points.x1 + points.dx1, points.y1 + C, points.y1), // / from many
|
12845
|
+
svgLine(points.x2, points.x2 + points.dx2, points.y2 - C, points.y2), // \ to many
|
12846
|
+
svgLine(points.x2, points.x2 + points.dx2, points.y2 + C, points.y2), // / to many
|
12847
|
+
].join('');
|
12760
12848
|
}
|
12849
|
+
}
|
12850
|
+
|
12851
|
+
function entityID(entity) {
|
12852
|
+
return 'mu-erd-' + entity.toLowerCase().replace(/[_]/g, '-');
|
12853
|
+
}
|
12854
|
+
|
12855
|
+
function columnID(entity, column) {
|
12856
|
+
return entityID(entity) + '-' + column.toLowerCase().replace(/[_]/g, '-');
|
12857
|
+
}
|
12761
12858
|
|
12762
|
-
|
12859
|
+
function keyIconFor(column, field) {
|
12860
|
+
return !!column[field] ? '<i class="fa fa-fw fa-key mu-erd-' + field + '"></i>' : '';
|
12861
|
+
}
|
12763
12862
|
|
12863
|
+
function generateEntityColumns(entity) {
|
12864
|
+
var columns = entity.columns || [];
|
12865
|
+
var html = '';
|
12866
|
+
columns.forEach(function (column) {
|
12867
|
+
html += [
|
12868
|
+
'<li id="', columnID(entity.name, column.name), '" class="mu-erd-entity-column">',
|
12869
|
+
' <span class="mu-erd-entity-column-name">',
|
12870
|
+
keyIconFor(column, 'pk'),
|
12871
|
+
keyIconFor(column, 'fk'),
|
12872
|
+
'<span>', column.name, '</span>',
|
12873
|
+
' </span>',
|
12874
|
+
' <span class="mu-erd-entity-column-type">', column.type, '</span>',
|
12875
|
+
'</li>'
|
12876
|
+
].join('');
|
12877
|
+
})
|
12878
|
+
return html;
|
12879
|
+
}
|
12880
|
+
|
12881
|
+
function appendEntities($diagram, entities) {
|
12882
|
+
entities.forEach(function (entity) {
|
12883
|
+
var $entity = $([
|
12884
|
+
'<div id="', entityID(entity.name), '" class="mu-erd-entity">',
|
12885
|
+
' <div class="mu-erd-entity-name">',
|
12886
|
+
entity.name,
|
12887
|
+
' </div>',
|
12888
|
+
' <ul class="mu-erd-entity-columns">',
|
12889
|
+
generateEntityColumns(entity),
|
12890
|
+
' </ul>',
|
12891
|
+
'</div>',
|
12892
|
+
].join(''));
|
12893
|
+
$diagram.append($entity);
|
12894
|
+
});
|
12895
|
+
}
|
12896
|
+
|
12897
|
+
function drawColumnFK(entity, column) {
|
12898
|
+
return drawFK(entity, column, column.fk);
|
12899
|
+
}
|
12900
|
+
|
12901
|
+
function getDirection($entityFrom, $entityTo) {
|
12902
|
+
var direction = ''
|
12903
|
+
direction += $entityFrom.position().top > ($entityTo.position().top + $entityTo.height()) ? 'down' : '';
|
12904
|
+
direction += $entityTo.position().top > ($entityFrom.position().top + $entityFrom.height()) ? 'up' : '';
|
12905
|
+
direction += ' ';
|
12906
|
+
direction += $entityFrom.position().left > ($entityTo.position().left + $entityTo.width()) ? 'left' : '';
|
12907
|
+
direction += $entityTo.position().left > ($entityFrom.position().left + $entityFrom.width()) ? 'right' : '';
|
12908
|
+
direction = direction.trim();
|
12909
|
+
return direction.replace(' ', '_');
|
12910
|
+
}
|
12911
|
+
|
12912
|
+
function drawFK(entity, column, fk) {
|
12913
|
+
if (!fk) return '';
|
12914
|
+
var $entity = {
|
12915
|
+
from: $('#' + entityID(entity.name)),
|
12916
|
+
to: $('#' + entityID(fk.to.entity))
|
12917
|
+
}
|
12918
|
+
var $column = {
|
12919
|
+
from: $('#' + columnID(entity.name, column.name)),
|
12920
|
+
to: $('#' + columnID(fk.to.entity, fk.to.column))
|
12921
|
+
}
|
12922
|
+
var direction = getDirection($entity.from, $entity.to);
|
12923
|
+
var points = getPointsFrom(direction, $entity, $column);
|
12924
|
+
return [
|
12925
|
+
svgLine(points.x1, points.mi, points.y1, points.y1),
|
12926
|
+
svgLine(points.mi, points.mi, points.y1, points.y2),
|
12927
|
+
svgLine(points.mi, points.x2, points.y2, points.y2),
|
12928
|
+
].join('') + connectors[fk.type](points);
|
12929
|
+
}
|
12930
|
+
|
12931
|
+
function getPointsFrom(direction, $entity, $column) {
|
12932
|
+
return availableDirections[direction]($entity, $column);
|
12933
|
+
}
|
12934
|
+
|
12935
|
+
function drawConnectorLines(entity) {
|
12936
|
+
var columns = entity.columns || [];
|
12937
|
+
return columns.map(drawColumnFK.bind(this, entity)).join('');
|
12938
|
+
}
|
12939
|
+
|
12940
|
+
function getSVGFor(entity) {
|
12941
|
+
return ['<svg>', drawConnectorLines(entity), '</svg>'].join('');
|
12942
|
+
}
|
12943
|
+
|
12944
|
+
function appendConnectors($diagram, entities) {
|
12945
|
+
entities.forEach(function (entity) {
|
12946
|
+
var $svg = $(getSVGFor(entity));
|
12947
|
+
$diagram.append($svg);
|
12948
|
+
});
|
12949
|
+
}
|
12950
|
+
|
12951
|
+
function svgLine(x1, x2, y1 , y2) {
|
12952
|
+
return ['<line x1="', x1, '" x2="', x2, '" y1="', y1, '" y2="', y2, '" stroke="black" stroke-width="1"/>'].join('');
|
12953
|
+
}
|
12954
|
+
|
12955
|
+
$.fn.renderERD = function () {
|
12956
|
+
var self = this;
|
12957
|
+
self.each(function (i) {
|
12958
|
+
var $diagram = $(self[i]);
|
12959
|
+
var entities = $diagram.data('entities');
|
12960
|
+
appendEntities($diagram, entities);
|
12961
|
+
appendConnectors($diagram, entities);
|
12962
|
+
});
|
12963
|
+
return self;
|
12964
|
+
}
|
12965
|
+
|
12966
|
+
window.addEventListener('resize', function () {
|
12967
|
+
$('.mu-erd').empty().renderERD();
|
12764
12968
|
});
|
12765
12969
|
|
12766
|
-
|
12970
|
+
$('.mu-erd').renderERD();
|
12767
12971
|
|
12972
|
+
});
|
@@ -0,0 +1,71 @@
|
|
1
|
+
$mu-erd-border: 2px solid $mu-color-dark-separator;
|
2
|
+
|
3
|
+
.mu-erd {
|
4
|
+
position: relative;
|
5
|
+
width: 100%;
|
6
|
+
padding: 15px;
|
7
|
+
display: flex;
|
8
|
+
flex-flow: row;
|
9
|
+
flex-wrap: wrap;
|
10
|
+
justify-content: space-around;
|
11
|
+
align-items: center;
|
12
|
+
svg {
|
13
|
+
z-index: 0;
|
14
|
+
width: 100%;
|
15
|
+
height: 100%;
|
16
|
+
position: absolute;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
.mu-erd-entity {
|
21
|
+
z-index: 1;
|
22
|
+
margin: 20px 0;
|
23
|
+
width: 250px;
|
24
|
+
min-width: 250px;
|
25
|
+
border: $mu-erd-border;
|
26
|
+
border-top-left-radius: 15px;
|
27
|
+
border-top-right-radius: 15px;
|
28
|
+
}
|
29
|
+
|
30
|
+
.mu-erd-entity-name {
|
31
|
+
padding: 5px 10px;
|
32
|
+
list-style: none;
|
33
|
+
text-align: center;
|
34
|
+
border-bottom: $mu-erd-border;
|
35
|
+
border-top-left-radius: 15px;
|
36
|
+
border-top-right-radius: 15px;
|
37
|
+
background-color: $mu-color-separator;
|
38
|
+
margin: 0;
|
39
|
+
}
|
40
|
+
|
41
|
+
.mu-erd-entity-columns {
|
42
|
+
list-style: none;
|
43
|
+
padding: 5px 10px;
|
44
|
+
margin: 0;
|
45
|
+
background-color: white;
|
46
|
+
.mu-erd-entity-column {
|
47
|
+
display: flex;
|
48
|
+
padding: 5px 0;
|
49
|
+
flex-flow: row;
|
50
|
+
justify-content: space-between;
|
51
|
+
border-bottom: 1px dashed $mu-color-dark-separator;
|
52
|
+
&:last-child {
|
53
|
+
border-bottom: none;
|
54
|
+
}
|
55
|
+
.mu-erd-entity-column-name {
|
56
|
+
text-align: left;
|
57
|
+
span {
|
58
|
+
margin-left: 5px;
|
59
|
+
}
|
60
|
+
.mu-erd-pk { color: rgb(196, 173, 44) }
|
61
|
+
.mu-erd-fk { color: rgb(184, 184, 184) }
|
62
|
+
.mu-erd-pk,
|
63
|
+
.mu-erd-fk {
|
64
|
+
font-size: 75%;
|
65
|
+
};
|
66
|
+
}
|
67
|
+
.mu-erd-entity-column-type {
|
68
|
+
text-align: right;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
@@ -9442,6 +9442,67 @@ pre code {
|
|
9442
9442
|
display: block;
|
9443
9443
|
margin: 2em; }
|
9444
9444
|
|
9445
|
+
.mu-erd {
|
9446
|
+
position: relative;
|
9447
|
+
width: 100%;
|
9448
|
+
padding: 15px;
|
9449
|
+
display: flex;
|
9450
|
+
flex-flow: row;
|
9451
|
+
flex-wrap: wrap;
|
9452
|
+
justify-content: space-around;
|
9453
|
+
align-items: center; }
|
9454
|
+
.mu-erd svg {
|
9455
|
+
z-index: 0;
|
9456
|
+
width: 100%;
|
9457
|
+
height: 100%;
|
9458
|
+
position: absolute; }
|
9459
|
+
|
9460
|
+
.mu-erd-entity {
|
9461
|
+
z-index: 1;
|
9462
|
+
margin: 20px 0;
|
9463
|
+
width: 250px;
|
9464
|
+
min-width: 250px;
|
9465
|
+
border: 2px solid #cfd9db;
|
9466
|
+
border-top-left-radius: 15px;
|
9467
|
+
border-top-right-radius: 15px; }
|
9468
|
+
|
9469
|
+
.mu-erd-entity-name {
|
9470
|
+
padding: 5px 10px;
|
9471
|
+
list-style: none;
|
9472
|
+
text-align: center;
|
9473
|
+
border-bottom: 2px solid #cfd9db;
|
9474
|
+
border-top-left-radius: 15px;
|
9475
|
+
border-top-right-radius: 15px;
|
9476
|
+
background-color: #ecf0f1;
|
9477
|
+
margin: 0; }
|
9478
|
+
|
9479
|
+
.mu-erd-entity-columns {
|
9480
|
+
list-style: none;
|
9481
|
+
padding: 5px 10px;
|
9482
|
+
margin: 0;
|
9483
|
+
background-color: white; }
|
9484
|
+
.mu-erd-entity-columns .mu-erd-entity-column {
|
9485
|
+
display: flex;
|
9486
|
+
padding: 5px 0;
|
9487
|
+
flex-flow: row;
|
9488
|
+
justify-content: space-between;
|
9489
|
+
border-bottom: 1px dashed #cfd9db; }
|
9490
|
+
.mu-erd-entity-columns .mu-erd-entity-column:last-child {
|
9491
|
+
border-bottom: none; }
|
9492
|
+
.mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name {
|
9493
|
+
text-align: left; }
|
9494
|
+
.mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name span {
|
9495
|
+
margin-left: 5px; }
|
9496
|
+
.mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name .mu-erd-pk {
|
9497
|
+
color: #c4ad2c; }
|
9498
|
+
.mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name .mu-erd-fk {
|
9499
|
+
color: #b8b8b8; }
|
9500
|
+
.mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name .mu-erd-pk,
|
9501
|
+
.mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name .mu-erd-fk {
|
9502
|
+
font-size: 75%; }
|
9503
|
+
.mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-type {
|
9504
|
+
text-align: right; }
|
9505
|
+
|
9445
9506
|
.mu-file-browser {
|
9446
9507
|
width: 100%;
|
9447
9508
|
position: relative; }
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: mumuki-styles
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.14.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Federico Scarpa
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-12-
|
11
|
+
date: 2017-12-26 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -94,6 +94,7 @@ files:
|
|
94
94
|
- app/assets/stylesheets/_hovers.scss
|
95
95
|
- app/assets/stylesheets/_mixines.scss
|
96
96
|
- app/assets/stylesheets/_modules.scss
|
97
|
+
- app/assets/stylesheets/_mu-erd.scss
|
97
98
|
- app/assets/stylesheets/_mu-file-browser.scss
|
98
99
|
- app/assets/stylesheets/_navbar.scss
|
99
100
|
- app/assets/stylesheets/_styles.scss
|