I want create a simple animation where length of a rectangle changes smoothly to half its value when 'mouseover' event occurs and doubles up again when 'mouseout' event occurs.
the following code works if mouse is moved slowly but doesn't if mouse is moved rapidly. The rectangle just gets stuck if mouse is moved rapidly. Please suggest how to overcome this.
<body>
<svg id="svg" width="600" height="100">
<rect id="myrect" width="600" height="100" fill="green">
</svg>
<script>
svg = document.getElementById("svg");
var w = 600;
var step = 10;
svg.addEventListener("mouseover", function(){
function anim () {
w -= step;
if( w >= 300) {
myrect = document.getElementById("myrect");
myrect.setAttribute("width", w);
requestAnimationFrame(anim);
}
}
anim();
});
svg.addEventListener("mouseout", function(){
function anim () {
w += step;
if( w <= 600) {
myrect = document.getElementById("myrect");
myrect.setAttribute("width", w);
requestAnimationFrame(anim);
}
}
anim();
});
</script>
</body>
Today, please do not use JavaScript for this kind of animation.
CSS Transitions are made for this - and they show way better performace as most browser can calculate them faster on graphic card rather than CPU.
For more info see W3C School on CSS Transitions
So an improved and lot shorter version of your example would look like
#myrect {
transition: transform 0.5s ease;
}
#myrect:hover {
transform: scale(0.5, 1.0);
}
<svg id="svg" width="600" height="100">
<rect id="myrect" width="600" height="100" fill="green" />
</svg>
Note: It seems you can not animate 'width' property for SVGs by simple CSS like done before. For easy handling, you can use translate-property and scale it to 50% of width instead.
(Ok, according to SVG Standard - Section Attributes 'width' can be animated with the more compelx SVG-animation logic, but CSS looks quiet easier and this knowledge can be applied to HTML elements as well :-) )
Short explanation of the below code:
Animation process unified in a single function that can work in two direction dependent on the direction parameter value. Mouse events just change the animation direction. Variable animActive prevent from double call of requestAnimationFrame and makes direction changes smooth.
<body>
<svg id="svg" width="600" height="100">
<rect id="myrect" width="600" height="100" fill="green">
</svg>
<script>
svg = document.getElementById("svg");
var w = 600;
var step = 10;
var direction;
var animActive = false;
svg.addEventListener("mouseover", function(){
direction = true;
if (!animActive)
requestAnimationFrame(anim);
});
svg.addEventListener("mouseout", function(){
direction = false;
if (!animActive)
requestAnimationFrame(anim);
});
function anim(){
if (direction){
if( w > 300){
animActive = true;
w -= step;
myrect = document.getElementById("myrect");
myrect.setAttribute("width", w);
requestAnimationFrame(anim);
}
else
animActive = false;
}
else{
if( w < 600){
animActive = true;
w += step;
myrect = document.getElementById("myrect");
myrect.setAttribute("width", w);
requestAnimationFrame(anim);
}
else
animActive = false;
}
}
</script>
</body>
Related
I want to make a round slider with 4 different colors, basically, the round slider should be four-part, each part represents 25% with different colors, when someone triggers 25% then slider color should be changed and its value in the text should be changed too, like if the first part background color is red then its text is name1, the second part background color should be green and its text is name2 and third and fourth part should also have different colors and text.
For reference, please see the image, I want to implement the same functionality like in attached image, can you please help, how I can develop it?
Instead of developing your own plugin, if you are comfortable to use the roundSlider plugin then I made a demo for your requirement.
Since writing the custom logic involves more code and check points to consider.
Check the below demo, still you can do a lot of more customization.
DEMO
Screenshot:
If you can't use any 3rd party library for that I think you might be interested in this
The worst part will be dragging button so it only can move along the circle border
Here's a bit of fiddle
$(function() {
const svg = document.querySelector("svg");
const circleButton = document.querySelector("#circle-button");
const circle = document.querySelector("#circle2");
const baseX = Number(circle.getAttributeNS(null, "cx"));
const baseY = Number(circle.getAttributeNS(null, "cy"));
const radius = Number(circle.getAttributeNS(null, "r"));
let sliderHandle = null;
let value = 0;
let chunk = Math.PI * radius * 2 / 10;
$("#start").click(function() {
if(sliderHandle) {
$(this).text('Start Slider');
clearTimeout(sliderHandle);
sliderHandle = null;
return;
}
const loop = () => {
circle.setAttributeNS(null, "stroke-dashoffset", value);
value = value - chunk;
sliderHandle = setTimeout(loop, 500);
}
$(this).text('Stop Slider');
sliderHandle = setTimeout(loop, 500);
})
let handle = null;
$("#move-button").click(function() {
if(handle) {
clearTimeout(handle);
handle = null;
$(this).text('Move Button');
return;
}
$(this).text('Stop Button');
runTimer();
})
svg.addEventListener('mousedown', startDrag);
svg.addEventListener('mousemove', drag);
svg.addEventListener('mouseup', endDrag);
svg.addEventListener('mouseleave', endDrag);
function getMousePosition({clientY, clientX}) {
const {a, d, e, f} = svg.getScreenCTM();
return {
x: (clientX - e) / a,
y: (clientY - f) / d
};
}
let offset = {
x: -1,
y: -1
}
let isDragging = false;
let selectedElement = null;
function startDrag(event) {
selectedElement = event.target;
isDragging = true;
offset = getMousePosition(event);
offset.x -= parseFloat(circle.getAttributeNS(null, "cx"));
offset.y -= parseFloat(circle.getAttributeNS(null, "cy"));
}
function drag(event) {
if(!isDragging) {
return;
}
event.preventDefault();
const coord = getMousePosition(event);
const cx = coord.x - offset.x;
const cy = coord.y - offset.y;
selectedElement.setAttributeNS(null, "cx", cx);
selectedElement.setAttributeNS(null, "cy", cy);
}
const inc = Math.PI / 90;
let t = 0;
function runTimer() {
const loop = () => {
const cx = baseX + radius * Math.cos(t);
const cy = baseY + radius * Math.sin(t);
t = t + inc;
circleButton.setAttributeNS(null, "cx", cx);
circleButton.setAttributeNS(null, "cy", cy);
handle = setTimeout(loop, 100);
}
handle = setTimeout(loop, 100);
}
function endDrag(event) {
selectedElement = null;
isDragging = false;
}
})
#circle2, #circle-button {
transition: all .2s ease-in;
}
#circle-button {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200">
<circle
cx="100" cy="100" r="50"
fill="none"
stroke="gray"
stroke-width="10"
></circle>
<circle
id="circle2"
cx="100" cy="100" r="50"
fill="none"
stroke="red"
stroke-width="10"
stroke-dasharray="320"
stroke-dashoffset="0"></circle>
<circle
id="circle-button"
cx="150"
cy="100"
r="12"
fill="black"></circle>
</svg>
<button id="start">Start Slider</button>
<button id="move-button">Move Button</button>
Happy coding!
I'm having a strange problem... I have a page that uses some JavaScript to make an image inside of an SVG draggable and it works. But not when accessing the page with a link from another page. Reloading the page after the initial load works perfectly and even visiting the page directly via the URL bar works. I am at a loss as to what to try.
In my research, I stumbled upon this answer: Rails, javascript not loading after clicking through link_to helper
But upon trying all the solutions, none seemed to fix my problem, though it could easily be that I wasn't applying them to my code correctly. My SVG element as a 'onload' attribute that points to the 'makeDraggable(evt)' function, and most of the solutions on there made it so it couldn't access that function.
Here's the code for the initial link that I generate:
<%= link_to 'Play', canvas_path(:game => #game) %>
Here's my HTML code:
<div id="container">
<svg id="svg" onload="makeDraggable(evt)" width="50%" height="90%"
xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" width="40" height="40"
patternUnits="userSpaceOnUse">
<rect width="80" height="80" fill="url(#smallGrid)"/>
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="black" stroke-
width="1"/>
</pattern>
</defs>
<%#game_assets.each do |asset| %>
<image class="draggable" id="<%=asset.id %>" height="536" width="536"
xlink:href="<%= url_for(asset.image) %>" x="<%= asset.position_x %>" y="
<%= asset.position_y %>" style="position: relative;"
transform="translate(0 0)"></image>
<% end %>
<rect width="100%" height="100%" style="pointer-events: none;"
fill="url(#grid)" />
</svg>
</div>
And here is my JavaScript:
$(document).on('turbolinks:load', function () {
$('#svg').draggable();
$('.draggable').draggable();
});
// Makes content inside of SVG draggable
// Source: http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/
function makeDraggable(evt) {
var svg = evt.target;
svg.addEventListener('mousedown', startDrag);
svg.addEventListener('mousemove', drag);
svg.addEventListener('mouseup', endDrag);
svg.addEventListener('mouseleave', endDrag);
svg.addEventListener('touchstart', startDrag);
svg.addEventListener('touchmove', drag);
svg.addEventListener('touchend', endDrag);
svg.addEventListener('touchleave', endDrag);
svg.addEventListener('touchcancel', endDrag);
var selectedElement, offset, transform,
bbox, minX, maxX, minY, maxY, confined;
var boundaryX1 = 10.5;
var boundaryX2 = 30;
var boundaryY1 = 2.2;
var boundaryY2 = 19.2;
function getMousePosition(evt) {
var CTM = svg.getScreenCTM();
if (evt.touches) { evt = evt.touches[0]; }
return {
x: (evt.clientX - CTM.e) / CTM.a,
y: (evt.clientY - CTM.f) / CTM.d
};
}
function startDrag(evt) {
if (evt.target.classList.contains('draggable')) {
selectedElement = evt.target;
offset = getMousePosition(evt);
console.log("started dragging")
// Make sure the first transform on the element is a translate transform
var transforms = selectedElement.transform.baseVal;
if (transforms.length === 0 || transforms.getItem(0).type !==
SVGTransform.SVG_TRANSFORM_TRANSLATE) {
// Create an transform that translates by (0, 0)
var translate = svg.createSVGTransform();
translate.setTranslate(0, 0);
selectedElement.transform.baseVal.insertItemBefore(translate,
0);
}
// Get initial translation
transform = transforms.getItem(0);
offset.x -= transform.matrix.e;
offset.y -= transform.matrix.f;
confined = evt.target.classList.contains('confine');
if (confined) {
bbox = selectedElement.getBBox();
minX = boundaryX1 - bbox.x;
maxX = boundaryX2 - bbox.x - bbox.width;
minY = boundaryY1 - bbox.y;
maxY = boundaryY2 - bbox.y - bbox.height;
}
}
}
function drag(evt) {
if (selectedElement) {
evt.preventDefault();
console.log("drag triggered")
var coord = getMousePosition(evt);
var dx = coord.x - offset.x;
var dy = coord.y - offset.y;
if (confined) {
if (dx < minX) { dx = minX; }
else if (dx > maxX) { dx = maxX; }
if (dy < minY) { dy = minY; }
else if (dy > maxY) { dy = maxY; }
}
transform.setTranslate(dx, dy);
}
}
function endDrag(evt) {
selectedElement = false;
}
}
If anyone could shed some light on what is happening, I would greatly appreciate it.
Also, forgive me if my formatting of this post isn't quite correct. First time poster :)
Remove onload="makeDraggable(evt)" from the #svg element, because the
onload function won't work when written inline when you're using turbolinks (as Rails does).
Then add the following to your JS:
$(document).on('turbolinks:load', function () {
if($('#svg').length == 1){
makeDraggable($('#svg'));
}
});
and change var svg = evt.target; to var svg = evt;
I'm trying to create a function that will measure how big a text element will be in a SVG element. The code examples I found at Stack Overflow does not work and gives a width of zero. If I delay the measurement I can get the text, but not right away. How is this solved?
var messureSVGtext = function(text, svg, options){
var text = document.createElementNS(svgns, 'text');
text.style.fontFamily = options.font;
text.setAttribute("style",
"font-family:" + options.font + ";" +
"font-size:" + options.fontSize + "px;"
);
var textNode = document.createTextNode(text);
text.appendChild(textNode);
svg.appendChild(text);
// This does not work
console.log(text.clientWidth);
//This does
setTimeout(function(){
console.log(text.clientWidth);
}, 100);
}
You can get the "computed style" of an element and then check the width & height from that.
Give the element an id attribute and after it is appended to the DOM, try this:
var elem1 = document.getElementById("text_elem");
var style = window.getComputedStyle(elem1, null);
console.log(style.width, style.height);
Working example
SVG
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="640"
height="480"
viewBox="0 0 640 480"
style="display:block">
<text id="svg_text" x="20" y="50" style="font-family:Arial; font-size:36px; fill:#BADA55">Hello World!</text>
</svg>
JavaScript
function getCompStyle(oid, cbf)
{
var obj, stl, itv;
obj = document.getElementById(oid);
itv = setInterval(function()
{
stl = window.getComputedStyle(obj, null);
if (stl && (stl.width.indexOf('0') != 0))
{
clearInterval(itv);
cbf(stl);
}
},0);
}
getCompStyle('svg_text', function(style)
{
console.log(style.width);
});
To use the example, place the SVG in your HTML <body> and the JavaScript in a <script> tag below the SVG - also in the <body>.
I found some interesting code on petercollingridge.co.uk for dragging SVGs.
After a while of trying to get it to work in my project, I decided to just try to get Peter's code to run in a fiddle.
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
<style>
.draggable {
cursor: move;
}
</style>
<script type="text/ecmascript">
< ![CDATA[
var selectedElement = 0;
var currentX = 0;
var currentY = 0;
var currentMatrix = 0;
function selectElement(evt) {
selectedElement = evt.target;
currentX = evt.clientX;
currentY = evt.clientY;
currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7, -1).split(' ');
for (var i = 0; i < currentMatrix.length; i++) {
currentMatrix[i] = parseFloat(currentMatrix[i]);
}
selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
}
function moveElement(evt) {
var dx = evt.clientX - currentX;
var dy = evt.clientY - currentY;
currentMatrix[4] += dx;
currentMatrix[5] += dy;
selectedElement.setAttributeNS(null, "transform", "matrix(" + currentMatrix.join(' ') + ")");
currentX = evt.clientX;
currentY = evt.clientY;
}
function deselectElement(evt) {
if (selectedElement != 0) {
selectedElement.removeAttributeNS(null, "onmousemove");
selectedElement.removeAttributeNS(null, "onmouseout");
selectedElement.removeAttributeNS(null, "onmouseup");
selectedElement = 0;
}
}
]] >
</script>
<rect x="0.5" y="0.5" width="399" height="199" fill="none" stroke="black" />
<rect class="draggable" x="30" y="30" width="80" height="80" fill="blue" transform="matrix(1 0 0 1 25 20)" onmousedown="selectElement(evt)" />
<rect class="draggable" x="160" y="50" width="50" height="50" fill="green" transform="matrix(1 0 0 1 103 -25)" onmousedown="selectElement(evt)" />
</svg>
I'm still getting the errors I was in my project, those being:
" Uncaught SyntaxError: Unexpected token <" and "Uncaught ReferenceError: selectElement is not defined "
I read something about invisible characters causing the first problem if you copy/paste code, but I haven't found any.
Thanks for any help you can offer.
Like others said, just remove the CDATA jumbo. Here is an updated fiddle:
https://jsfiddle.net/88pocqsr/1/
We've removed < ![CDATA[ and ]]>
Change the line
< ![CDATA[
to
<![CDATA[
(remove space between < and !)
and the line
]] >
to
]]>
I have a TinyMCE editor on my website and I would like to have the editable area (or the whole thing) displayed in A4 format.
Basically, I would like to view the document in the same way as in MS Word. (width, pagebreaks etc.)
Is that even possible? Please point me in the right direction.
Everybody says it's difficult, but Google already done it in Google Docs (TIP: you could use Google API and even get the PDF version of your document. I didn't do this, because we needed extra functions in the editor.)
Here's my solution:
I have resized the page to A4 width
Added a ruler, that shows how much page is left (obviously not 100% reliable, but close). And even page numbers! Yes!
Thoughts:
Ruler is much easier than trying to show each page, which would mean to split up the contents... IT WOULD BE DOPE THOUGH... I had my attempts to do full A4 pages even using css clip, but it was messing with text selection, so I don't know... I wish I could do it, but...
The reason I used SVG inside HTML tag is because it's the only thing I can place there... if you select all text in TinyMCE you could erase my ruler, or even copy and paste... even if you used contenteditable="false"... the choices were limited.
See here my solution:
https://jsfiddle.net/mzvarik/59smpdv8/
// plugin pravítko
tinymce.PluginManager.add('ruler', function(editor) {
var domHtml;
var lastPageBreaks;
function refreshRuler()
{
console.log("ddd");
try {
domHtml = $( editor.getDoc().getElementsByTagName('HTML')[0] );
// HACK - erase this, I have to put my CSS here
console.log($('tinystyle').html() );
domHtml.find('head').append( $('<style>'+$('tinystyle').html()+'</style>'));
} catch (e) {
return setTimeout(refreshRuler, 50);
}
var dpi = 96
var cm = dpi/2.54;
var a4px = cm * (29.7-5.7); // A4 height in px, -5.5 are my additional margins in my PDF print
// ruler begins (in px)
var startMargin = 4;
// max size (in px) = document size + extra to be sure, idk, the height is too small for some reason
var imgH = domHtml.height() + a4px*5;
var pageBreakHeight = 14; // height of the pagebreak line in tinyMce
var pageBreaks = [];
domHtml.find('.mce-pagebreak').each(function(){
pageBreaks[pageBreaks.length] = $(this).offset().top;
});
pageBreaks.sort();
// if pageBreak is too close next page, then ignore it
if (lastPageBreaks == pageBreaks) {
return; // no change
}
lastPageBreaks = pageBreaks;
console.log("Redraw ruler");
var s = '';
s+= '<svg width="100%" height="'+imgH+'" xmlns="http://www.w3.org/2000/svg">';
s+= '<style>';
s+= '.pageNumber{font-weight:bold;font-size:19px;font-family:verdana;text-shadow:1px 1px 1px rgba(0,0,0,.6);}';
s+= '</style>';
var pages = Math.ceil(imgH/a4px);
var i, j, curY = startMargin;
for (i=0; i<pages; i++)
{
var blockH = a4px;
var isPageBreak = 0;
for (var j=0; j<pageBreaks.length; j++) {
if (pageBreaks[j] < curY + blockH) {
// musime zmensit velikost stranky
blockH = pageBreaks[j] - curY;
// pagebreak prijde na konec stranky
isPageBreak = 1;
pageBreaks.splice(j, 1);
}
}
s+= '<line x1="0" y1="'+curY+'" x2="100%" y2="'+curY+'" stroke-width="1" stroke="red"/>';
// zacneme pravitko
s+= '<pattern id="ruler'+i+'" x="0" y="'+curY+'" width="37.79527559055118" height="37.79527559055118" patternUnits="userSpaceOnUse">';
s+= '<line x1="0" y1="0" x2="100%" y2="0" stroke-width="1" stroke="black"/>';
s+= '</pattern>';
s+= '<rect x="0" y="'+curY+'" width="100%" height="'+blockH+'" fill="url(#ruler'+i+')" />';
// napiseme cislo strany
s+= '<text x="10" y="'+(curY+19+5)+'" class="pageNumber" fill="#ffffff">'+(i+1)+'.</text>';
curY+= blockH;
if (isPageBreak) {
//s+= '<rect x="0" y="'+curY+'" width="100%" height="'+pageBreakHeight+'" fill="#FFFFFF" />';
curY+= pageBreakHeight;
}
}
s+= '</svg>';
domHtml.css('background-image', 'url("data:image/svg+xml;utf8,'+encodeURIComponent(s)+'")');
}
editor.on('NodeChange', refreshRuler);
editor.on("init", refreshRuler);
});
tinymce.init({
plugins: "ruler pagebreak",
toolbar1: "pagebreak",
selector: 'textarea',
height: 300
});
Btw.
Imagine Google would make free rich text editor!
CKEditor also can't do it and is paid, what a shame!
It is possible, but hard, error prone and you won't get near MS Word. Maybe you can get it right for one font or so.
What you need to do is a custom CSS and a custom template. The template should resemble a grey background with the white page (with a shadow :). Define some buttons that will add custom classes to the template with Javascript and you will get the margin settings (narrow, wide, normal, no values). For the page break, you can insert a special <hr> that styles the underlying page template as if it ends and another one begins. Bear in mind you will have to replace almost all of your custom CSS in order to make it print-ready. Also, you should make tinymce fullscreen.
Another (very weird) approach that I've seen is a combination between tinymce and a PDF renderer library or equivalent. This way you'll get the WYSIWYG right.
Hope that helps.
I modified the Martin's ruler. Thanks
// plugin pravítko, modified by SerhatSoylemez
tinymce.PluginManager.add("editor-ruler", function(editor) {
var domHtml;
var lastPageBreaks;
var pagen= tinymce.util.I18n.translate("p.");
function refreshRuler() {
try {
domHtml = $(editor.getDoc().getElementsByTagName('HTML')[0]);
} catch (e) {
return setTimeout(refreshRuler, 50);
}
var dpi = 96
var cm = dpi/2.54;
var a4px = cm * (29.7); // A4 height in px, -5.5 are my additional margins in my PDF print
// ruler begins (in px)
var startMargin = 0;
// max size (in px) = document size + extra to be sure, idk, the height is too small for some reason
var imgH = domHtml.height() + a4px*5;
var pageBreakHeight = 4; // height of the pagebreak line in tinyMce
var pageBreaks = []; // I changed .mce-pagebreak with .page-break !!!
domHtml.find('.page-break').each(function() {
pageBreaks[pageBreaks.length] = $(this).offset().top;
});
pageBreaks.sort();
// if pageBreak is too close next page, then ignore it
if (lastPageBreaks == pageBreaks) {
return; // no change
}
lastPageBreaks = pageBreaks;
// console.log("Redraw ruler");
var s = '';
s+= '<svg width="100%" height="'+imgH+'" xmlns="http://www.w3.org/2000/svg">';
s+= '<style>';
s+= '.pageNumber{font-weight:bold;font-size:20px;font-family:verdana;text-shadow:1px 1px 1px rgba(0,0,0,.6);}';
s+= '</style>';
var pages = Math.ceil(imgH/a4px);
var i, j, curY = startMargin;
for (i=0; i<pages; i++) {
var blockH = a4px;
var isPageBreak = 0;
for (var j=0; j<pageBreaks.length; j++) {
if (pageBreaks[j] < curY + blockH) {
// musime zmensit velikost stranky
blockH = pageBreaks[j] - curY;
// pagebreak prijde na konec stranky
isPageBreak = 1;
pageBreaks.splice(j, 1);
}
}
curY2 = curY+38;
s+= '<line x1="0" y1="'+curY2+'" x2="100%" y2="'+curY2+'" stroke-width="1" stroke="red"/>';
// zacneme pravitko
s+= '<pattern id="ruler'+i+'" x="0" y="'+curY+'" width="37.79527559055118" height="37.79527559055118" patternUnits="userSpaceOnUse">';
s+= '<line x1="0" y1="0" x2="100%" y2="0" stroke-width="1" stroke="black"/>';
s+= '<line x1="24" y1="0" x2="0" y2="100%" stroke-width="1" stroke="black"/>';
s+= '</pattern>';
s+= '<rect x="0" y="'+curY+'" width="100%" height="'+blockH+'" fill="url(#ruler'+i+')" />';
// napiseme cislo strany
s+= '<text x="10" y="'+(curY2+19+5)+'" class="pageNumber" fill="#e03e2d">'+pagen+(i+1)+'.</text>';
curY+= blockH;
if (isPageBreak) {
//s+= '<rect x="0" y="'+curY+'" width="100%" height="'+pageBreakHeight+'" fill="#ffffff" />';
curY+= pageBreakHeight;
}
}
s+= '</svg>';
domHtml.css('background-image', 'url("data:image/svg+xml;utf8,'+encodeURIComponent(s)+'")');
}
function deleteRuler() {
domHtml.css('background-image', '');
}
var toggleState = false;
editor.on("NodeChange", function () {
if (toggleState == true) {
refreshRuler();
}
});
editor.on("init", function () {
if (toggleState == true) {
refreshRuler();
}
});
editor.ui.registry.addIcon("square_foot", '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">'+
'<g><rect fill="none" height="24" width="24"/></g><g><g><path d="M17.66,17.66l-1.06,1.06l-0.71-0.71l1.06-1.06l-1.94-1.94l-1.06,1.06l-0.71-0.71'+
'l1.06-1.06l-1.94-1.94l-1.06,1.06 l-0.71-0.71l1.06-1.06L9.7,9.7l-1.06,1.06l-0.71-0.71l1.06-1.06L7.05,7.05L5.99,8.11L5.28,7.4l1.06-1.06L4,4'+
'v14c0,1.1,0.9,2,2,2 h14L17.66,17.66z M7,17v-5.76L12.76,17H7z"/></g></g></svg>');
editor.ui.registry.addToggleMenuItem("ruler", {
text: "Show ruler",
icon: "square_foot",
onAction: function() {
toggleState = !toggleState;
if (toggleState == false) {
deleteRuler();
} else {
refreshRuler();
}
},
onSetup: function(api) {
api.setActive(toggleState);
return function() {};
}
});
});
function loadJavascript(url) {
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
}
loadJavascript("https://code.jquery.com/jquery-3.5.1.min.js");