Fixes #87: Adopt deltaDecorations in samples
Alex Dima
parent
300fe6ab69
commit
eaf0fb53f0
|
|
@ -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
|
||||
<div id="container" style="height:100%;"></div>
|
||||
|
|
@ -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
|
||||
<div id="container" style="height:100%;"></div>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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":"<div id=\"container\" style=\"height:100%;\"></div>\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":"<div id=\"container\" style=\"height:100%;\"></div>\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"});
|
||||
|
|
|
|||
|
|
@ -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":"<div id=\"output\" style=\"height:29%;font-family:'Courier New', monospace;\">Last 3 events:<br/></div>\n<div style=\"background:#ccc;height:1%\"></div>\n<div id=\"container\" style=\"height:70%;\"></div>\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":"<div id=\"output\" style=\"height:29%;font-family:'Courier New', monospace;\">Last 3 events:<br/></div>\n<div style=\"background:#ccc;height:1%\"></div>\n<div id=\"container\" style=\"height:70%;\"></div>\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"});
|
||||
|
|
|
|||
|
|
@ -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":"<div id=\"container\" style=\"height:100%;\"></div>\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":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"});
|
||||
|
|
|
|||
Loading…
Reference in New Issue