Develop Reference

g tag rect shape to moldable shape and text inside g tag to wrap and be responsive in angular7

My Objective is:
1) Instead of rect tag my aim is to make the rect object remoldable(as in it can be changed to any polygon when the vertices of the rect shape is clicked twice the side should be added by 1 , so by default it is 4 side , when the user clicks on a vertex then 1 more edge should be added , so it will become pentagon-5sides)
2) The text inside the g tag shape should wrap and be responsive it hsould become bigger wrt to the gtag when g tag becomes bigger and viceversa
ts code
drop(event:any){
event.preventDefault();
let data = event.dataTransfer.getData("text"),
x = (event.clientX - event.srcElement.parentElement.offsetLeft - 80),
y = (event.clientY - event.srcElement.parentElement.offsetTop),
inner = `<g>
<rect
class = "draggable"
fill = "#e24301"
fill-opacity = "0.2"
stroke = "#24301"
stroke-width = "1.5"
style = "pointer-events:inherit"
x= inherit
y= inherit
width='${this.zoneAttribute.minWidth}'
height='${this.zoneAttribute.minHeight}'
id='${data}
stroke-dasharray="none"
onContextMenu="return false;">
</rect>
<text
x= inherit
y= inherit
style='user-select: none'>
${data}
</text>
<text
style='cursor:pointer; user-select: none'
class="close"
x= inherit
y= inherit
>X
</text>
<text
style='user-select: none'
class="temp-display"
x= inherit
y= inherit
>
</text>
</g>`,
close = document.getElementByClassName('close');
(<HTMLDivElement>event.target.parentElement.querySelector
('.from-them')).insertAdjacentHTML('beforeend',inner);
for(let i=0; i<close.length; i++){
close[i].addEventListner('click',(event: Event) => {});
}
if(event.target.getElementById(data)){
this.changeDimension(event.currentTarget.lastElementChild);
}
(<HTMLDivElement>document.getElementById(''+ (data) + '').style.display = 'none';
}
changeDimension(event:any){
interact(event.firstElementChild)
.draggable({
inertia: true,
restrict: {
restriction: '.from-them',
endonly: true,
elementRect: {top:0, left:0, bottom:1, right:1}
},
autoscroll: true,
onmove: this.dragMoveListner,
onend: function(event){
const textEl = event.target.querySelector('.close');
textEl && (textEl.textContent =
'moved a distance of'
+(Math.sqrt(Math.pow(event.pageX - event.x0, 2)+
Math.pow(event.pageY - event.y0, 2) | 0))
.toFixed(2) + 'px');
}
})
.ressizable({
edges: {left: true, right:true, bottom:true, top:true}
})
.on('resizemove',(event:any) =>{
let target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0)
target.style.width = event.rect.width < this.zoneAttribute.minWidth ? this.zoneAttribute.minWidth :
event.rect.width + 'px';
target.style.width = event.rect.width < this.zoneAttribute.minHeight ? this.zoneAttribute.minHeight :
event.rect.height + 'px';
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webKitTransform = target.style.transform = 'translate('+ x + 'px,' + y + 'px)';
target.nextElementSibling.style.transform = 'translate('+ x + 'px,' + y + 'px)';
target.nextElementSibling.nextElementSibling.style.transform = 'translate('+ x + 'px,' + y + 'px)';
target.nextElementSibling.nextElementSibling.nextElementSibling.style.transform = 'translate('+ x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
});
}
dragMoveListner(event:any){
const target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.webKitTransform = target.style.transform = 'translate('+ x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.nextElementSibling.style.transform = 'translate('+ x + 'px,' + y + 'px)';
target.nextElementSibling.nextElementSibling.style.transform = 'translate('+ x + 'px,' + y + 'px)';
target.nextElementSibling.nextElementSibling.nextElementSibling.style.transform = 'translate('+ x + 'px,' + y + 'px)';
}
html code
<svg xmlns="http://www.w3.org/2000/svg" id="imgpos" viewBox="0 0 80 80"
class="form-them" (dragover)="allowDrop($event)" (drop)="drop($event)"
[innerHTML]= "abcsvg | safeHtml" [ngStyle]="{'background-
image':'url('+url+')', 'background-repeat':'no-repeat', 'background-
position':'center','background-size':'contain'}">
__________________________________
| _______ ______ |
| | | | |--> g tag |----> svg image
| |_______| |______| |
|__________________________________|
For ref the snippet from the above ts code which is for the g tag
inner = `<g>
<rect
class = "draggable"
fill = "#e24301"
fill-opacity = "0.2"
stroke = "#24301"
stroke-width = "1.5"
style = "pointer-events:inherit"
x='${x}'
y='${y}'
width='${this.zoneAttribute.minWidth}'
height='${this.zoneAttribute.minHeight}'
id='${data}
stroke-dasharray="none"
onContextMenu="return false;">
</rect>
<text
x='${x+40}'
y='${y+40}'
style='user-select: none'>
${data}
</text>
<text
style='cursor:pointer; user-select: none'
class="close"
x='${x+80}'
y='${y+20}'
>X
</text>
<text
style='user-select: none'
class="temp-display"
x='${x+40}'
y='${y+25}'
>
</text>
</g>`

Snap.svg scale and animate SVG

I'm trying to scale my SVG with g.animate({ transform: "s2.5,2.5," + bbox.cx + "," + bbox.cy }, 0); and then animate wheelAnimation(bbox.cx, bbox.cy, 1500);
var i = 0;
function wheelAnimation(cx, cy, speed){
i++;
g.animate(
{ transform: "r360," + cx + ',' + cy}, // Basic rotation around a point. No frills.
speed, // Nice slow turning rays
function(){
if(i == 5)
speed = 5000;
g.attr({ transform: 'rotate(0 ' + cx + ' ' + cy}); // Reset the position of the rays.
wheelAnimation(cx,cy, speed); // Repeat this animation so it appears infinite.
}
);
}
But my SVG didn't scaling. It's only rotates. If I remove rotation - SVG scaling. How to combine it to immediately scale and then animate rotation?
Plunker example

I've never used Snap.svg but you might try this:
var i = 0;
function wheelAnimation(cx, cy, speed, scale){
i++;
g.attr({ transform: "r0 " + cx + " " + cy + " s" + scale + "," + scale + "," + cx + "," + cy }); //Reset + Scale setup
g.animate({
transform: "r360," + cx + "," + cy + " s" + scale + "," + scale + "," + cx + "," + cy }, // Basic rotation around a point. No frills.
speed, // Nice slow turning rays
function(){
if(i == 5)
speed = 5000;
wheelAnimation(cx, cy, speed, scale); // Repeat this animation so it appears infinite.
}
);
}
Hope this helps you :)
See Plunkr

Preserve a Transform in an SVG element

I have a SVG shape (which is quite complex, I have made it simple for the sake of understanding) which I need to transform. My requirement is,
When mouseover, The group should be scaled to 2x
When mouseout, group should scale back to 1x
When dragging the group scale should be preseved
So far, I have managed to do all the parts, except one issue. After I drag the element when I try to mouseover the group it reverts to its original location. I cannot understand why it happens. Here is a working fiddle. Can anyone help me out?
index.html
<svg width="400" height="400" style="background-color: red">
<g id="op" class="operator" transform="translate(0,0)">
<circle class="head" cx="50" cy="50" r="20" style="fill: yellow"></circle>
<circle cx="40" cy="40" r="10" style="fill: blue"></circle>
<circle cx="60" cy="40" r="10" style="fill: blue"></circle>
</g>
</svg>
script.js
d3.selectAll('.operator')
.on('mouseenter', function () {
console.log('Mouse Enter');
var c = d3.select(this).select('.head');
var x = c.attr('cx');
var y = c.attr('cy');
var scale = 2;
var scaleX = -1 * x * (scale - 1);
var scaleY = -1 * y * (scale - 1);
d3.select(this).attr('transform', 'translate(' + scaleX + ',' + scaleY + ')' + 'scale(' + scale + ')');
})
.on('mouseleave', function () {
console.log('Mouse Leave');
var c = d3.select(this).select('.head');
var x = c.attr('cx');
var y = c.attr('cy');
var scale = 1;
var scaleX = -1 * x * (scale - 1);
var scaleY = -1 * y * (scale - 1);
d3.select(this).attr('transform', 'translate(' + scaleX + ',' + scaleY + ')' + 'scale(' + scale + ')');
})
.call(d3.behavior.drag()
.origin(function () {
var t = d3.select(this);
return {
x: d3.transform(t.attr("transform")).translate[0],
y: d3.transform(t.attr("transform")).translate[1]
};
})
.on('drag', function () {
var oldScale = d3.transform(d3.select(this).attr('transform')).scale;
d3.select(this).attr('transform', 'translate(' + d3.event.x + ',' + d3.event.y + ')scale(' + oldScale + ')');
}))

As #PhilAnderson said, you shouldn't be mixing translate and cx/cy. In fact, the way you are nesting elements, you should only be translating. Translate your g within the SVG and then translate your circles within the g. Correcting that, things get much simpler:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<svg width="400" height="400" style="background-color: red">
<g id="op" class="operator" transform="translate(50,50)">
<circle class="head" r="20" style="fill: yellow"></circle>
<circle transform="translate(-10,0)" r="10" style="fill: blue"></circle>
<circle transform="translate(10,0)" r="10" style="fill: blue"></circle>
</g>
</svg>
<script>
d3.select('.operator')
.on('mouseenter', function() {
console.log('Mouse Enter');
var self = d3.select(this),
xy = d3.transform(self.attr('transform')).translate,
scale = 2;
self.attr('transform', 'translate(' + xy[0] + ',' + xy[1] + ')' + 'scale(' + scale + ')');
})
.on('mouseleave', function() {
console.log('Mouse Leave');
var self = d3.select(this),
xy = d3.transform(self.attr('transform')).translate,
scale = 1;
self.attr('transform', 'translate(' + xy[0] + ',' + xy[1] + ')' + 'scale(' + scale + ')');
})
.call(d3.behavior.drag()
.on('drag', function() {
var self = d3.select(this),
oldScale = d3.transform(self.attr('transform')).scale;
self.attr('transform', 'translate(' + d3.event.x + ',' + d3.event.y + ')scale(' + oldScale + ')');
}))
</script>
</body>
</html>

It looks like you're confusing the cx and cy attributes with the translate.
In mouseenter and mouseleave you move the shape according to the values of cx and cy, but in the drag event you simply translate using the x and y values of the event.
One way of fixing this would be to set the cx and cy attributes in your drag event, although tbh it would be better to settle for one approach and stick to it throughout.

javascript code to change clip rect settings

What I'm trying to accomplish is when the window is resized, the blurred image is resized as well. For some reason the code is not working. Can someone spot what is wrong and what I need to do to correct the code. Thanks.
CSS -
/* ------- BLUR BEHIND MESSAGE HOLDER CONTAINER SETTINGS ------- */
img.clipphoto {
/*--- CLIP SETTINGS: top, right, bottom, left ---*/
clip: rect(18px,770px,600px,240px);
position: absolute;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
JS -
window.addEventListener('resize', function(event){
var vInnerHeight= window.innerHeight;
var t = "18";
var r = "770";
var b = vInnerHeight-140;
var l = "240";
var clipString = "rect(" + t + "px " + r + "px " + b + "px " + l + "px)";
document.getElementByClassName(clipphoto).style.clip = clipString;
HTML -
<!-- blurred photo of pix -->
<img src="images/image1.png" width="1200" height="620" alt="" class="clipphoto">

There is no getElementByClassName() function. It's getElementsByClassName() (plural).
And you want the string "clipphoto", not the (non-existant) variable named clipphoto:
var clipString = "rect(" + t + "px, " + r + "px, " + b + "px, " + l + "px)";
document.getElementsByClassName('clipphoto')[0].style.clip = clipString;

Believe the values should be comma separated, not space separated
var clipString = "rect(" + t + "px," + r + "px," + b + "px," + l + "px)";
document.getElementsByClassName('clipphoto')[0].style.clip = clipString;
Edit: incorporated class accessor errror by Paul Roub too

jQuery .position() strangeness while using CSS3 rotate attribute

I'm getting absolutely positioned rotated elements position with jQuery .position() method, then setting position-related attributes (top, left) with jQuery .css(pos), where pos is the data returned by .position(). I think it'll leave the element in it's place, but elements position is changing.
How can I use set rotated elements position, so that it'll be placed as expected? Maybe there is a coefficient depended on angle that changes position?
I'm testing in Google Chrome v.9, Windows XP.
HTML
<div id="container">
<div id="element">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0Fawya9MVMez80ZusMVtk_4-ScKCIy6J_fg84oZ37GzKaJXU74Ma0vENc"/>
</div>
</div>
CSS
#container {
position: relative;
border: 1px solid #999;
padding: 5px;
height: 300px;
width:300px;
}
#element {
position: absolute;
top:50px;
left: 60px;
width: auto;
border: 1px solid #999;
padding: 5px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
JS
$(document).ready(function(){
var $el = $('#element'),
// getting position
pos = $el.position();
alert(pos.left + '/' + pos.top);
// alerts 37/11
// setting css position attributes equal to pos
$el.css(pos);
// re-getting position
pos = $el.position();
alert(pos.left + '/' + pos.top);
// alerts 14/-28
});
View it http://jsfiddle.net/Antaranian/2gVL4/

// Needed to read the "real" position
$.fn.adjustedPosition = function() {
var p = $(this).position();
return {
left: p.left - this.data('dx'),
top: p.top - this.data('dy')
}
};
$(function() {
var img = $('img'),
pos;
// Calculate the delta
img.each(function() {
var po = $(this).position(), // original position
pr = $(this).addClass('rot').position(); // rotated position
$(this).data({
dx: pr.left - po.left, // delta X
dy: pr.top - po.top // delta Y
});
});
// Read the position
pos = img.adjustedPosition();
alert(pos.left + '/' + pos.top);
// Write the position
img.css(pos);
// Read the position again
pos = img.adjustedPosition();
alert(pos.left + '/' + pos.top);
});
Live demo: http://jsfiddle.net/2gVL4/4/
So what is going on here:
The CSS code that rotates the image is stored inside a special CSS class. I do this because I want to read the original position of the image (before rotating). Once I read that original position, I apply the .rot class, and then read the position again to calculate the difference (delta), which is stored inside the element's data().
Now, I can read the position via the custom method adjustedPosition (which is defined above). This method will read the position of the element and then subtract the delta values stored inside the data() of the element.
To write the position, just use the css(pos) method like normally.

Had similar problem. There is simple solution (not elegant, but working):
set current angle to 0
read X/Y position
revert angle back to its value
var temp = $(this).position();
temp.angle = getRotationDegrees( $(this) ); // remember current angle
rotateObject($(this), 0); // set angle to 0
temp.left = Math.round($(this).position().left); // proper value
temp.top = Math.round($(this).position().top); // proper value
// revert back the angle
rotateObject($(this), temp.angle);
Used functions:
function rotateObject(obj, angle) {
obj.css({ '-webkit-transform': 'rotate(' + angle + 'deg)'});
obj.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
obj.css({ '-ms-transform': 'rotate(' + angle + 'deg)'});
obj.css({ 'msTransform': 'rotate(' + angle + 'deg)'});
obj.css({ '-o-transform': 'rotate(' + angle + 'deg)'});
obj.css({ '-sand-transform': 'rotate(' + angle + 'deg)'});
obj.css({ 'transform': 'rotate(' + angle + 'deg)'});
}
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if(matrix !== 'none') {
var tr;
if (tr = matrix.match('matrix\\((.*)\\)')) {
tr = tr[1].split(',');
if(typeof tr[0] != 'undefined' && typeof tr[1] != 'undefined') {
var angle = Math.round(Math.atan2(tr[1], tr[0]) * (180/Math.PI));
}else{
var angle = 0;
}
}else if(tr = matrix.match('rotate\\((.*)deg\\)')){
var angle = parseInt(tr[1]);
}
} else { var angle = 0; }
return (angle < 0) ? angle + 360 : angle;
}