@@ -20,87 +20,93 @@ export const useEditor = () => {
2020 enabled : true ,
2121 } ,
2222 } ) ;
23- const selectedLanguage = ref ( "javascript" ) ;
24- const code = ref ( `/**
25- * converts an svg string to base64 png using the domUrl
26- * @param {string} svgText the svgtext
27- * @param {number} [margin=0] the width of the border - the image size will be height+margin by width+margin
28- * @param {string} [fill] optionally backgrund canvas fill
29- * @return {Promise} a promise to the bas64 png image
30- */
31- var svgToPng = function (svgText, margin, fill) {
32- // convert an svg text to png using the browser
33- return new Promise(function (resolve, reject) {
34- try {
35- // can use the domUrl function from the browser
36- var domUrl = window.URL || window.webkitURL || window;
37- if (!domUrl) {
38- throw new Error("(browser doesnt support this)")
39- }
40-
41- // figure out the height and width from svg text
42- var match = svgText.match(/height="(d+)/m);
43- var height = match && match[1] ? parseInt(match[1], 10) : 200;
44- var match = svgText.match(/width="(d+)/m);
45- var width = match && match[1] ? parseInt(match[1], 10) : 200;
46- margin = margin || 0;
47-
48- // it needs a namespace
49- if (!svgText.match(/xmlns="/mi)) {
50- svgText = svgText.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
51- }
52-
53- // create a canvas element to pass through
54- var canvas = document.createElement("canvas");
55- canvas.width = height + margin * 2;
56- canvas.height = width + margin * 2;
57- var ctx = canvas.getContext("2d");
58-
59-
60- // make a blob from the svg
61- var svg = new Blob([svgText], {
62- type: "image/svg+xml;charset=utf-8"
63- });
64-
65- // create a dom object for that image
66- var url = domUrl.createObjectURL(svg);
67-
68- // create a new image to hold it the converted type
69- var img = new Image;
70-
71- // when the image is loaded we can get it as base64 url
72- img.onload = function () {
73- // draw it to the canvas
74- ctx.drawImage(this, margin, margin);
75-
76- // if it needs some styling, we need a new canvas
77- if (fill) {
78- var styled = document.createElement("canvas");
79- styled.width = canvas.width;
80- styled.height = canvas.height;
81- var styledCtx = styled.getContext("2d");
82- styledCtx.save();
83- styledCtx.fillStyle = fill;
84- styledCtx.fillRect(0, 0, canvas.width, canvas.height);
85- styledCtx.strokeRect(0, 0, canvas.width, canvas.height);
86- styledCtx.restore();
87- styledCtx.drawImage(canvas, 0, 0);
88- canvas = styled;
23+ const snippet = useState ( "snippet" , ( ) => {
24+ return {
25+ title : "index.txt" ,
26+ body : `/**
27+ * converts an svg string to base64 png using the domUrl
28+ * @param {string} svgText the svgtext
29+ * @param {number} [margin=0] the width of the border - the image size will be height+margin by width+margin
30+ * @param {string} [fill] optionally backgrund canvas fill
31+ * @return {Promise} a promise to the bas64 png image
32+ */
33+ var svgToPng = function (svgText, margin, fill) {
34+ // convert an svg text to png using the browser
35+ return new Promise(function (resolve, reject) {
36+ try {
37+ // can use the domUrl function from the browser
38+ var domUrl = window.URL || window.webkitURL || window;
39+ if (!domUrl) {
40+ throw new Error("(browser doesnt support this)")
41+ }
42+
43+ // figure out the height and width from svg text
44+ var match = svgText.match(/height="(d+)/m);
45+ var height = match && match[1] ? parseInt(match[1], 10) : 200;
46+ var match = svgText.match(/width="(d+)/m);
47+ var width = match && match[1] ? parseInt(match[1], 10) : 200;
48+ margin = margin || 0;
49+
50+ // it needs a namespace
51+ if (!svgText.match(/xmlns="/mi)) {
52+ svgText = svgText.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
53+ }
54+
55+ // create a canvas element to pass through
56+ var canvas = document.createElement("canvas");
57+ canvas.width = height + margin * 2;
58+ canvas.height = width + margin * 2;
59+ var ctx = canvas.getContext("2d");
60+
61+
62+ // make a blob from the svg
63+ var svg = new Blob([svgText], {
64+ type: "image/svg+xml;charset=utf-8"
65+ });
66+
67+ // create a dom object for that image
68+ var url = domUrl.createObjectURL(svg);
69+
70+ // create a new image to hold it the converted type
71+ var img = new Image;
72+
73+ // when the image is loaded we can get it as base64 url
74+ img.onload = function () {
75+ // draw it to the canvas
76+ ctx.drawImage(this, margin, margin);
77+
78+ // if it needs some styling, we need a new canvas
79+ if (fill) {
80+ var styled = document.createElement("canvas");
81+ styled.width = canvas.width;
82+ styled.height = canvas.height;
83+ var styledCtx = styled.getContext("2d");
84+ styledCtx.save();
85+ styledCtx.fillStyle = fill;
86+ styledCtx.fillRect(0, 0, canvas.width, canvas.height);
87+ styledCtx.strokeRect(0, 0, canvas.width, canvas.height);
88+ styledCtx.restore();
89+ styledCtx.drawImage(canvas, 0, 0);
90+ canvas = styled;
91+ }
92+ // we don't need the original any more
93+ domUrl.revokeObjectURL(url);
94+ // now we can resolve the promise, passing the base64 url
95+ resolve(canvas.toDataURL());
96+ };
97+
98+ // load the image
99+ img.src = url;
100+
101+ } catch (err) {
102+ reject('failed to convert svg to png ' + err);
89103 }
90- // we don't need the original any more
91- domUrl.revokeObjectURL(url);
92- // now we can resolve the promise, passing the base64 url
93- resolve(canvas.toDataURL());
94- };
95-
96- // load the image
97- img.src = url;
98-
99- } catch (err) {
100- reject('failed to convert svg to png ' + err);
101- }
104+ });
105+ };` ,
106+ language : "javascript" ,
107+ } ;
102108 } ) ;
103- };` ) ;
109+ const selectedLanguage = ref ( "javascript" ) ;
104110 const lineCount = ref ( 0 ) ;
105111 const editorRef = shallowRef ( ) ;
106112 const handleMount = ( editor , monaco ) => {
@@ -111,13 +117,13 @@ var svgToPng = function (svgText, margin, fill) {
111117 } ;
112118
113119 const wordCount = computed ( ( ) => {
114- const text = code . value ;
120+ const text = snippet . value . body ;
115121 const words = text . match ( / \w + / g) ;
116122 return words ? words . length : 0 ;
117123 } ) ;
118124
119125 const letterCount = computed ( ( ) => {
120- const text = code . value ;
126+ const text = snippet . value . body ;
121127 return text . length ;
122128 } ) ;
123129
@@ -134,16 +140,16 @@ var svgToPng = function (svgText, margin, fill) {
134140 MONACO_EDITOR_OPTIONS . value . minimap . enabled =
135141 ! MONACO_EDITOR_OPTIONS . value . minimap . enabled ;
136142 }
137-
143+
138144 return {
139145 MONACO_EDITOR_OPTIONS ,
140146 selectedLanguage,
141147 languages,
142- code,
143148 lineCount,
144149 wordCount,
145150 letterCount,
146151 editorRef,
152+ snippet,
147153 toggleMinimap,
148154 handleMount,
149155 onChange,
0 commit comments