Circles

by whelkaholism

HTML

<input type="file" id="loadImage" />
<div class="circle-container">
  <div class="task-circle-details">
      <div class="task-circle-circle" id="c"></div>
  </div>
  <div class="task-circle-details">
    <div class="task-circle-circle" id="c2">
    </div>
  </div>
</div>

CSS

.circle-container {
    position: relative;
    height: calc(100vh);
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
    border: 1px dashed red;
    align-items: stretch;
}

.task-circle-details {
    background: #ddeeff;
    width: calc(50% - 2em);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed blue;
}

.task-circle-circle {
    position: relative;
    width: calc(100% - 2em);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed darkgreen;
}

.circles {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
}

.circle {
    box-sizing: border-box;
    background: rgba(82, 53, 214, 0.25);
    position: relative;
    z-index: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sub-circle {
    background: rgba(61, 144, 114, 0.5);
    position:absolute;
}

JavaScript

(function()
{
    // =======================================================================================================================================
    window.Circle = function(defcfg)
    {
        const _this = this;
        const _owner = defcfg.owner;
        const _ownerelement = defcfg.element;
        const _events = defcfg.options && defcfg.options.events;
        let _parentcircle = null;

        //
        this.element;
        this.title;
        this.text;
        this.image;
        this.x;
        this.y;
        this.radius;
        this.selected = false;

        this.items = [];

        this.update = function(cfg)
        {
            (typeof (cfg.title) != 'undefined') && (_this.title = cfg.title);
            (typeof (cfg.text) != 'undefined') && (_this.text = cfg.text);
            (typeof (cfg.image) != 'undefined') && (_this.image = cfg.image || null);

            (typeof (cfg.x) != 'undefined') && (_this.x = cfg.x);
            (typeof (cfg.y) != 'undefined') && (_this.y = cfg.y);

            (typeof (cfg.radius) != 'undefined') && (_this.radius = cfg.radius);

            (typeof (cfg.parentCircle) != 'undefined') && (_parentcircle = cfg.parentCircle);

            (cfg.redraw == true) && _this.draw();
        };

        this.draw = function(cfg)
        {
            var el = _this.element;
            el && el.remove();

            _this.element = el = document.createElement('div');
            el.classList.add('circle');
            _parentcircle && el.classList.add('sub-circle');
            el.addEventListener('click', _clicked);

            !!_this.text && el.classList.add('has-text');

            el.style.left = _this.x - _this.radius + 'px';
            el.style.top = _this.y - _this.radius + 'px';
            el.style.width = _this.radius * 2 + 'px';
            el.style.height = _this.radius * 2 + 'px';

            var ntitle =...