diff --git a/website/playground/playground.mdoc b/website/playground/playground.mdoc index 88482587..86d51314 100644 --- a/website/playground/playground.mdoc +++ b/website/playground/playground.mdoc @@ -337,21 +337,18 @@ var editor = monaco.editor.create(document.getElementById("container"), { glyphMargin: true }); -var decorationId = editor.changeDecorations(function(changeAccessor) { - return changeAccessor.addDecoration({ - startLineNumber: 3, - startColumn: 1, - endLineNumber: 3, - endColumn: 1 - }, { - isWholeLine: true, - className: 'myContentClass', - glyphMarginClassName: 'myGlyphMarginClass' - }); -}); +var decorations = editor.deltaDecorations([], [ + { + range: new monaco.Range(3,1,3,1), + options: { + isWholeLine: true, + className: 'myContentClass', + glyphMarginClassName: 'myGlyphMarginClass' + } + } +]); - -// You can now use `decorationId` to change or remove the decoration +// You can now use `decorations` to change or remove the decoration =======================HTML
@@ -389,28 +386,10 @@ var editor = monaco.editor.create(document.getElementById("container"), { language: "javascript" }); -var lineDecorationId = editor.changeDecorations(function(changeAccessor) { - return changeAccessor.addDecoration({ - startLineNumber: 3, - startColumn: 1, - endLineNumber: 5, - endColumn: 1 - }, { - isWholeLine: true, - linesDecorationsClassName: 'myLineDecoration' - }); -}); - -var inlineDecorationId = editor.changeDecorations(function(changeAccessor) { - return changeAccessor.addDecoration({ - startLineNumber: 7, - startColumn: 1, - endLineNumber: 7, - endColumn: 24 - }, { - inlineClassName: 'myInlineDecoration' - }); -}); +var decorations = editor.deltaDecorations([], [ + { range: new monaco.Range(3,1,5,1), options: { isWholeLine: true, linesDecorationsClassName: 'myLineDecoration' }}, + { range: new monaco.Range(7,1,7,24), options: { inlineClassName: 'myInlineDecoration' }}, +]); =======================HTML
@@ -496,18 +475,16 @@ var editor = monaco.editor.create(document.getElementById("container"), { nativeContextMenu: false }); -var decorationId = editor.changeDecorations(function(changeAccessor) { - return changeAccessor.addDecoration({ - startLineNumber: 3, - startColumn: 1, - endLineNumber: 3, - endColumn: 1 - }, { - isWholeLine: true, - className: 'myContentClass', - glyphMarginClassName: 'myGlyphMarginClass' - }); -}); +var decorations = editor.deltaDecorations([], [ + { + range: new monaco.Range(3,1,3,1), + options: { + isWholeLine: true, + className: 'myContentClass', + glyphMarginClassName: 'myGlyphMarginClass' + } + } +]); // Add a zone to make hit testing more interesting var viewZoneId = null; diff --git a/website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js b/website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js index bbcd8e11..6b1d31ad 100644 --- a/website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js +++ b/website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js @@ -1,3 +1,3 @@ // This is a generated file. Please do not edit directly. var SAMPLES = this.SAMPLES || []; -SAMPLES.push({"id":"interacting-with-the-editor-line-and-inline-decorations","js":"//---------------------------------------------------\n// Interacting with the editor > Line and Inline decorations\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});\n\nvar lineDecorationId = editor.changeDecorations(function(changeAccessor) {\n\treturn changeAccessor.addDecoration({\n\t\tstartLineNumber: 3,\n\t\tstartColumn: 1,\n\t\tendLineNumber: 5,\n\t\tendColumn: 1\n\t}, {\n\t\tisWholeLine: true,\n\t\tlinesDecorationsClassName: 'myLineDecoration'\n\t});\n});\n\nvar inlineDecorationId = editor.changeDecorations(function(changeAccessor) {\n\treturn changeAccessor.addDecoration({\n\t\tstartLineNumber: 7,\n\t\tstartColumn: 1,\n\t\tendLineNumber: 7,\n\t\tendColumn: 24\n\t}, {\n\t\tinlineClassName: 'myInlineDecoration'\n\t});\n});\n","html":"
\n","css":".myInlineDecoration {\n\tcolor: red !important;\n\tcursor: pointer;\n\ttext-decoration: underline;\n\tfont-weight: bold;\n\tfont-style: oblique;\n}\n.myLineDecoration {\n\tbackground: lightblue;\n\twidth: 5px !important;\n\tleft: 3px;\n}\n"}); +SAMPLES.push({"id":"interacting-with-the-editor-line-and-inline-decorations","js":"//---------------------------------------------------\n// Interacting with the editor > Line and Inline decorations\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});\n\nvar decorations = editor.deltaDecorations([], [\n\t{ range: new monaco.Range(3,1,5,1), options: { isWholeLine: true, linesDecorationsClassName: 'myLineDecoration' }},\n\t{ range: new monaco.Range(7,1,7,24), options: { inlineClassName: 'myInlineDecoration' }},\n]);\n","html":"
\n","css":".myInlineDecoration {\n\tcolor: red !important;\n\tcursor: pointer;\n\ttext-decoration: underline;\n\tfont-weight: bold;\n\tfont-style: oblique;\n}\n.myLineDecoration {\n\tbackground: lightblue;\n\twidth: 5px !important;\n\tleft: 3px;\n}\n"}); diff --git a/website/playground/samples/interacting-with-the-editor-listening-to-mouse-events.js b/website/playground/samples/interacting-with-the-editor-listening-to-mouse-events.js index 58d5e55d..87a9e252 100644 --- a/website/playground/samples/interacting-with-the-editor-listening-to-mouse-events.js +++ b/website/playground/samples/interacting-with-the-editor-listening-to-mouse-events.js @@ -1,3 +1,3 @@ // This is a generated file. Please do not edit directly. var SAMPLES = this.SAMPLES || []; -SAMPLES.push({"id":"interacting-with-the-editor-listening-to-mouse-events","js":"//---------------------------------------------------\n// Interacting with the editor > Listening to mouse events\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tglyphMargin: true,\n\tnativeContextMenu: false\n});\n\nvar decorationId = editor.changeDecorations(function(changeAccessor) {\n\treturn changeAccessor.addDecoration({\n\t\tstartLineNumber: 3,\n\t\tstartColumn: 1,\n\t\tendLineNumber: 3,\n\t\tendColumn: 1\n\t}, {\n\t\tisWholeLine: true,\n\t\tclassName: 'myContentClass',\n\t\tglyphMarginClassName: 'myGlyphMarginClass'\n\t});\n});\n\n// Add a zone to make hit testing more interesting\nvar viewZoneId = null;\neditor.changeViewZones(function(changeAccessor) {\n\t\tvar domNode = document.createElement('div');\n\t\tdomNode.style.background = 'lightgreen';\n\t\tviewZoneId = changeAccessor.addZone({\n\t\t\t\t\tafterLineNumber: 3,\n\t\t\t\t\theightInLines: 3,\n\t\t\t\t\tdomNode: domNode\n\t\t});\n});\n\n// Add a content widget (scrolls inline with text)\nvar contentWidget = {\n\tdomNode: null,\n\tgetId: function() {\n\t\treturn 'my.content.widget';\n\t},\n\tgetDomNode: function() {\n\t\tif (!this.domNode) {\n\t\t\tthis.domNode = document.createElement('div');\n\t\t\tthis.domNode.innerHTML = 'My content widget';\n\t\t\tthis.domNode.style.background = 'grey';\n\t\t}\n\t\treturn this.domNode;\n\t},\n\tgetPosition: function() {\n\t\treturn {\n\t\t\tposition: {\n\t\t\t\tlineNumber: 7,\n\t\t\t\tcolumn: 8\n\t\t\t},\n\t\t\tpreference: [monaco.editor.ContentWidgetPositionPreference.ABOVE, monaco.editor.ContentWidgetPositionPreference.BELOW]\n\t\t};\n\t}\n};\neditor.addContentWidget(contentWidget);\n\n// Add an overlay widget\nvar overlayWidget = {\n\tdomNode: null,\n\tgetId: function() {\n\t\treturn 'my.overlay.widget';\n\t},\n\tgetDomNode: function() {\n\t\tif (!this.domNode) {\n\t\t\tthis.domNode = document.createElement('div');\n\t\t\tthis.domNode.innerHTML = 'My overlay widget';\n\t\t\tthis.domNode.style.background = 'grey';\n\t\t\tthis.domNode.style.right = '30px';\n\t\t\tthis.domNode.style.top = '50px';\n\t\t}\n\t\treturn this.domNode;\n\t},\n\tgetPosition: function() {\n\t\treturn null;\n\t}\n};\neditor.addOverlayWidget(overlayWidget);\n\nvar output = document.getElementById('output');\nfunction showEvent(str) {\n\twhile(output.childNodes.length > 6) {\n\t\toutput.removeChild(output.firstChild.nextSibling.nextSibling);\n\t}\n\toutput.appendChild(document.createTextNode(str));\n\toutput.appendChild(document.createElement('br'));\n}\n\n\n\neditor.onMouseMove(function (e) {\n\tshowEvent('mousemove - ' + e.target.toString());\n});\neditor.onMouseDown(function (e) {\n\tshowEvent('mousedown - ' + e.target.toString());\n});\neditor.onContextMenu(function (e) {\n\tshowEvent('contextmenu - ' + e.target.toString());\n});\neditor.onMouseLeave(function (e) {\n\tshowEvent('mouseleave');\n});\n","html":"
Last 3 events:
\n
\n
\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"}); +SAMPLES.push({"id":"interacting-with-the-editor-listening-to-mouse-events","js":"//---------------------------------------------------\n// Interacting with the editor > Listening to mouse events\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tglyphMargin: true,\n\tnativeContextMenu: false\n});\n\nvar decorations = editor.deltaDecorations([], [\n\t{\n\t\trange: new monaco.Range(3,1,3,1),\n\t\toptions: {\n\t\t\tisWholeLine: true,\n\t\t\tclassName: 'myContentClass',\n\t\t\tglyphMarginClassName: 'myGlyphMarginClass'\n\t\t}\n\t}\n]);\n\n// Add a zone to make hit testing more interesting\nvar viewZoneId = null;\neditor.changeViewZones(function(changeAccessor) {\n\t\tvar domNode = document.createElement('div');\n\t\tdomNode.style.background = 'lightgreen';\n\t\tviewZoneId = changeAccessor.addZone({\n\t\t\t\t\tafterLineNumber: 3,\n\t\t\t\t\theightInLines: 3,\n\t\t\t\t\tdomNode: domNode\n\t\t});\n});\n\n// Add a content widget (scrolls inline with text)\nvar contentWidget = {\n\tdomNode: null,\n\tgetId: function() {\n\t\treturn 'my.content.widget';\n\t},\n\tgetDomNode: function() {\n\t\tif (!this.domNode) {\n\t\t\tthis.domNode = document.createElement('div');\n\t\t\tthis.domNode.innerHTML = 'My content widget';\n\t\t\tthis.domNode.style.background = 'grey';\n\t\t}\n\t\treturn this.domNode;\n\t},\n\tgetPosition: function() {\n\t\treturn {\n\t\t\tposition: {\n\t\t\t\tlineNumber: 7,\n\t\t\t\tcolumn: 8\n\t\t\t},\n\t\t\tpreference: [monaco.editor.ContentWidgetPositionPreference.ABOVE, monaco.editor.ContentWidgetPositionPreference.BELOW]\n\t\t};\n\t}\n};\neditor.addContentWidget(contentWidget);\n\n// Add an overlay widget\nvar overlayWidget = {\n\tdomNode: null,\n\tgetId: function() {\n\t\treturn 'my.overlay.widget';\n\t},\n\tgetDomNode: function() {\n\t\tif (!this.domNode) {\n\t\t\tthis.domNode = document.createElement('div');\n\t\t\tthis.domNode.innerHTML = 'My overlay widget';\n\t\t\tthis.domNode.style.background = 'grey';\n\t\t\tthis.domNode.style.right = '30px';\n\t\t\tthis.domNode.style.top = '50px';\n\t\t}\n\t\treturn this.domNode;\n\t},\n\tgetPosition: function() {\n\t\treturn null;\n\t}\n};\neditor.addOverlayWidget(overlayWidget);\n\nvar output = document.getElementById('output');\nfunction showEvent(str) {\n\twhile(output.childNodes.length > 6) {\n\t\toutput.removeChild(output.firstChild.nextSibling.nextSibling);\n\t}\n\toutput.appendChild(document.createTextNode(str));\n\toutput.appendChild(document.createElement('br'));\n}\n\n\n\neditor.onMouseMove(function (e) {\n\tshowEvent('mousemove - ' + e.target.toString());\n});\neditor.onMouseDown(function (e) {\n\tshowEvent('mousedown - ' + e.target.toString());\n});\neditor.onContextMenu(function (e) {\n\tshowEvent('contextmenu - ' + e.target.toString());\n});\neditor.onMouseLeave(function (e) {\n\tshowEvent('mouseleave');\n});\n","html":"
Last 3 events:
\n
\n
\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"}); diff --git a/website/playground/samples/interacting-with-the-editor-rendering-glyphs-in-the-margin.js b/website/playground/samples/interacting-with-the-editor-rendering-glyphs-in-the-margin.js index 82a52e15..8493e0ef 100644 --- a/website/playground/samples/interacting-with-the-editor-rendering-glyphs-in-the-margin.js +++ b/website/playground/samples/interacting-with-the-editor-rendering-glyphs-in-the-margin.js @@ -1,3 +1,3 @@ // This is a generated file. Please do not edit directly. var SAMPLES = this.SAMPLES || []; -SAMPLES.push({"id":"interacting-with-the-editor-rendering-glyphs-in-the-margin","js":"//---------------------------------------------------\n// Interacting with the editor > Rendering glyphs in the margin\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tglyphMargin: true\n});\n\nvar decorationId = editor.changeDecorations(function(changeAccessor) {\n\treturn changeAccessor.addDecoration({\n\t\tstartLineNumber: 3,\n\t\tstartColumn: 1,\n\t\tendLineNumber: 3,\n\t\tendColumn: 1\n\t}, {\n\t\tisWholeLine: true,\n\t\tclassName: 'myContentClass',\n\t\tglyphMarginClassName: 'myGlyphMarginClass'\n\t});\n});\n\n\n// You can now use `decorationId` to change or remove the decoration\n","html":"
\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"}); +SAMPLES.push({"id":"interacting-with-the-editor-rendering-glyphs-in-the-margin","js":"//---------------------------------------------------\n// Interacting with the editor > Rendering glyphs in the margin\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tglyphMargin: true\n});\n\nvar decorations = editor.deltaDecorations([], [\n\t{\n\t\trange: new monaco.Range(3,1,3,1),\n\t\toptions: {\n\t\t\tisWholeLine: true,\n\t\t\tclassName: 'myContentClass',\n\t\t\tglyphMarginClassName: 'myGlyphMarginClass'\n\t\t}\n\t}\n]);\n\n// You can now use `decorations` to change or remove the decoration\n","html":"
\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"});