@yanqirenshi/d3.deployment 0.0.7 → 0.2.2

package/src/D3DeploymentNode.js

@@ -1,305 +0,0 @@
-import {Background,Position,Rectangle,Stroke,Label,Padding} from '@yanqirenshi/assh0le';
-
-export default class D3DeploymentNode {
-    constructor() {
-        this.label = new Label();
-        this.rectangle = new Rectangle();
-        this.position = new Position();
-        this.stroke = new Stroke();
-        this.background = new Background();
-        this.padding = new Padding();
-    }
-    ///// ////////////////////////////////////////////////////////////////
-    /////   Utility
-    ///// ////////////////////////////////////////////////////////////////
-    getFourSides  (data) {
-        let port_r = 4;
-        let margin =  4 + port_r;
-
-        let x = data._position.x;
-        let y = data._position.y;
-
-        let w = data._size.w;
-        let h = data._size.h;
-
-        let top_left     = { x: x -     margin, y: y -     margin};
-        let top_right    = { x: x + w + margin, y: y -     margin};
-        let bottom_rigth = { x: x + w + margin, y: y + h + margin};
-        let bottom_left  = { x: x -     margin, y: y + h + margin};
-
-        return [
-            { from: top_left,     to: top_right    },
-            { from: top_right,    to: bottom_rigth },
-            { from: bottom_rigth, to: bottom_left  },
-            { from: bottom_left,  to: top_left     },
-        ];
-    }
-    ///// ////////////////////////////////////////////////////////////////
-    /////   Adjust
-    ///// ////////////////////////////////////////////////////////////////
-    dataTemplate () {
-        return {
-            type: '',
-            label: {
-                contents: '',
-                position: { x: 20, y: 20 },
-                font: { size: 16, color: '#333333' },
-            },
-            position: null,
-            size:     null,
-            background: null,
-            border: null,
-            link: null,
-            children: [],
-            _id: null,
-            _core: null,
-            _class: 'NODE',
-        };
-    };
-    normalizeBase (data) {
-        let core = data._core;
-
-        if (core.id || core.id===0)
-            data._id = core.id;
-
-        if (core.type)
-            data.type = core.type;
-
-        if (core.link)
-            data.link = core.link;
-        else
-            data.link = { url: null };
-    }
-    normalize (data) {
-        if (!data)
-            return null;
-
-        let new_data = this.dataTemplate();
-
-        new_data._core = data;
-
-        const children = data.children;
-        if (children && children.length > 0)
-            new_data.children = children.map((child) => {
-                return this.normalize(child);
-            });
-
-        this.normalizeBase(new_data);
-
-        new_data.label      = this.label.build(new_data._core.label);
-
-        new_data.size       = this.rectangle.build(new_data._core.size);
-        new_data.position   = this.position.build(new_data._core.position);
-        new_data.border     = this.stroke.build(new_data._core.border) || this.stroke.template();
-        new_data.padding    = this.padding.build(new_data._core.padding);
-        new_data.background = this.background.build(new_data._core.background);
-
-        data._node = new_data;
-
-        return new_data;
-    }
-    ///// ////////////////////////////////////////////////////////////////
-    /////   Filter
-    ///// ////////////////////////////////////////////////////////////////
-    addFilterShadow (svg) {
-        var filter = svg.append("defs")
-            .append("filter")
-            .attr("id", "drop-shadow")
-            .attr("height", "130%");
-
-        filter.append("feGaussianBlur")
-            .attr("in", "SourceAlpha")
-            .attr("stdDeviation", 5)
-            .attr("result", "blur");
-
-        filter.append("feOffset")
-            .attr("in", "blur")
-            .attr("dx", 5)
-            .attr("dy", 5)
-            .attr("result", "offsetBlur");
-
-        var feMerge = filter.append("feMerge");
-
-        feMerge
-            .append("feMergeNode")
-            .attr("in", "offsetBlur");
-        feMerge
-            .append("feMergeNode")
-            .attr("in", "SourceGraphic");
-    }
-    ///// ////////////////////////////////////////////////////////////////
-    /////   Draw
-    ///// ////////////////////////////////////////////////////////////////
-    drawGroup (place, data, type) {
-        return place.selectAll('g.' + type)
-            .data([data], (d) => { return d._id; })
-            .enter()
-            .append('g')
-            .attr('class', type)
-            .attr("transform", (d) => {
-                return "translate(" +
-                    d._position.x + "," +
-                    d._position.y +
-                    ")";
-            })
-            .attr('level',  (d) => { return d._level;});
-    }
-    drawBody (groups) {
-        groups
-            .append('rect')
-            .attr('class', 'node-body')
-            .attr('width', (d) => { return d._size.w; })
-            .attr('height', (d) => { return d._size.h; })
-            .attr('rx', (d) => { return (d.border && d.border.r) || 0; })
-            .attr('ry', (d) => { return (d.border && d.border.r) || 0; })
-            .attr('fill', (d) => {
-                return d.background.color;
-            })
-            .attr('stroke', (d) => { return d.border.color; })
-            .attr('stroke-width', (d) => { return d.border.width; })
-            .style("filter", (d) => {
-                return (d.type==='NODE') ? 'url(#drop-shadow)' : '';
-            });
-    }
-    drawLabel (groups) {
-        groups
-            .append('text')
-            .attr('class', 'node-label')
-            .attr('x',  (d) => {
-                return d.label.position.x;
-            })
-            .attr('y', (d) => {
-                return d.label.position.y;
-            })
-            .style('fill', (d) => {
-                return d.label.font.color;
-            })
-            .attr('stroke', (d) => {
-                return 'none';
-            })
-            .style('font-size', (d) => {
-                return d.label.font.size;
-            })
-            .text((d) => {
-                return d.label.text;
-            })
-        ;
-    }
-    drawIcon (groups) {
-        let icon_groups = groups
-            .append('g')
-            .attr('class', 'icon-group')
-            .attr("transform", (d) => {
-                return "translate(" +
-                    (d.size.w - 24 - 20) + "," +
-                    15 +
-                    ")";
-            });
-
-        icon_groups
-            .append('rect')
-            .attr('class', 'node-body')
-            .attr('width', (d) => { return 18;})
-            .attr('height', (d) => { return 24;})
-            .attr('x', (d) => { return 6;})
-            .attr('y', (d) => { return 0;})
-            .attr('fill', (d) => {
-                return '#fff';
-            })
-            .attr('stroke', (d) => { return '#333'; })
-            .attr('stroke-width', (d) => { return 1; });
-
-        icon_groups
-            .append('rect')
-            .attr('class', 'node-body')
-            .attr('width', (d) => { return 12;})
-            .attr('height', (d) => { return 6;})
-            .attr('x', (d) => { return 0;})
-            .attr('y', (d) => { return 3;})
-            .attr('fill', (d) => {
-                return '#fff';
-            })
-            .attr('stroke', (d) => { return '#333'; })
-            .attr('stroke-width', (d) => { return 1; });
-
-        icon_groups
-            .append('rect')
-            .attr('class', 'node-body')
-            .attr('width', (d) => { return 12;})
-            .attr('height', (d) => { return 6;})
-            .attr('x', (d) => { return 0;})
-            .attr('y', (d) => { return 15;})
-            .attr('fill', (d) => {
-                return '#fff';
-            })
-            .attr('stroke', (d) => { return '#333'; })
-            .attr('stroke-width', (d) => { return 1; });
-    }
-    drawLink (groups) {
-        let a_element = groups
-            .append('a')
-            .attr('class', 'link-alt')
-            .attr('href', (d) => {
-                let url = d.link.url;
-
-                if (!url)
-                    return null;
-
-                if (typeof(url) === "function")
-                    return url(d);
-
-                return url;
-            })
-            .attr('target', '_blank')
-            .attr('rel', 'noopener noreferrer')
-            .style('color', '#888888');
-
-        a_element
-            .append('text')
-            .attr('x', (d) => { return 10;})
-            .attr('y', (d) => {
-                return d.size.h - 10;
-            })
-            .style("font-size", (d) => {
-                return '12px';
-            })
-            .style("display", (d) => {
-                if (!d.link.url)
-                    return 'none';
-
-                return 'block';
-            })
-            .text((d) => {
-                if (!d.link.url)
-                    return '';
-
-                return 'link';
-            });
-    }
-    drawComponent (place, data) {
-        let groups = this.drawGroup(place, data, 'component');
-
-        this.drawBody(groups, data);
-        this.drawIcon(groups, data);
-        this.drawLabel(groups, data);
-        this.drawLink(groups, data);
-    }
-    drawNode (place, data) {
-        let groups = this.drawGroup(place, data, 'node');
-
-        this.drawBody(groups, data);
-        this.drawLabel(groups, data);
-        this.drawLink(groups, data);
-    }
-    draw (place, data) {
-        if (data.type==='NODE') {
-            this.drawNode(place, data);
-            return;
-        }
-
-        if (data.type==='COMPONENT') {
-            this.drawComponent(place, data);
-            return;
-        }
-    }
-}

package/src/D3DeploymentPort.js

@@ -1,34 +0,0 @@
-export default class D3DeploymentPort {
-    dataTemplate () {
-        return {
-            node:   null,
-            edge:   null,
-            _id:    null,
-            _core:  null,
-            _class: 'PORT',
-        };
-    }
-    normalize (data) {
-        let tmp = this.dataTemplate();
-
-        tmp._core = data;
-
-        return data;
-    }
-    ///// ////////////////////////////////////////////////////////////////
-    /////   Draw
-    ///// ////////////////////////////////////////////////////////////////
-    draw (place, data) {
-        place.selectAll('circle.port')
-            .data([data], (d) => { return d._id; })
-            .enter()
-            .append('circle')
-            .attr('class', 'port')
-            .attr('cx', (d) => { return d.position.x;})
-            .attr('cy', (d) => { return d.position.y;})
-            .attr('r',  (d) => { return 6;})
-            .attr('level',  (d) => { return d._level;})
-            .style('fill',  (d) => { return '#fff';})
-            .style("stroke", d => { return '#888';});
-    }
-}

package/tests/D3Deployment.test.js

@@ -1,7 +0,0 @@
-// https://chaika.hatenablog.com/entry/2019/07/16/083000
-
-import D3Deployment from "../index.js";
-
-test('adds 1 + 2 to equal 3', () => {
-    expect(3).toBe(3);
-});