From 9bc0a462b573fb829e130e8cb52d00d464a36382 Mon Sep 17 00:00:00 2001 From: Hunter Perrin Date: Tue, 21 Nov 2017 19:53:57 -0800 Subject: [PATCH] Fix selector reference causing weird side effects. --- lib/QueryEditor.js | 10 ++++++---- lib/SelectorEditor.js | 9 +++++---- src/QueryEditor.html | 2 ++ src/SelectorEditor.html | 1 + 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/lib/QueryEditor.js b/lib/QueryEditor.js index 2171025..56964cb 100644 --- a/lib/QueryEditor.js +++ b/lib/QueryEditor.js @@ -148,6 +148,8 @@ }, removeSelector: function removeSelector(index) { var selectors = this.get("selectors"); + this.set({ selectors: [] }); + selectors.splice(index, 1); this.set({ selectors: selectors }); }, @@ -160,13 +162,13 @@ }; function encapsulateStyles(node) { - setAttribute(node, "svelte-672087078", ""); + setAttribute(node, "svelte-331703558", ""); } function add_css() { var style = createElement("style"); - style.id = 'svelte-672087078-style'; - style.textContent = "[svelte-672087078].query-editor,[svelte-672087078] .query-editor{font-family:monospace}[svelte-672087078].options-editor,[svelte-672087078] .options-editor,[svelte-672087078].selector-editor,[svelte-672087078] .selector-editor,[svelte-672087078].selector-editor .selector,[svelte-672087078] .selector-editor .selector{padding-left:1em;display:flex;flex-direction:column}[svelte-672087078].options-editor .option,[svelte-672087078] .options-editor .option,[svelte-672087078].selector-editor .selector .clause,[svelte-672087078] .selector-editor .selector .clause{padding:.5em 1em;display:flex;flex-direction:row}[svelte-672087078].query-result,[svelte-672087078] .query-result{border:1px solid}[svelte-672087078].query-result .query,[svelte-672087078] .query-result .query{font-family:monospace;margin:0;padding:1em;overflow:auto;max-height:200px}[svelte-672087078].help-dialog-container,[svelte-672087078] .help-dialog-container{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;bottom:0;right:0;z-index:1000}[svelte-672087078].help-dialog-overlay,[svelte-672087078] .help-dialog-overlay{position:absolute;top:0;left:0;bottom:0;right:0;background-color:rgba(0, 0, 0, 0.3);z-index:1}[svelte-672087078].help-dialog,[svelte-672087078] .help-dialog{display:flex;flex-direction:column;box-shadow:0px 5px 36px 0px rgba(0,0,0,0.25);background-color:#fff;padding:2em;max-height:80vh;max-width:80vw;overflow:auto;z-index:2}[svelte-672087078].help-dialog > *,[svelte-672087078] .help-dialog > *{margin-bottom:1em}[svelte-672087078].help-dialog > *:last-child,[svelte-672087078] .help-dialog > *:last-child{margin-bottom:0}[svelte-672087078].help-dialog .actions,[svelte-672087078] .help-dialog .actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}[svelte-672087078].help-dialog .actions > *,[svelte-672087078] .help-dialog .actions > *{margin-left:1em}"; + style.id = 'svelte-331703558-style'; + style.textContent = "[svelte-331703558].query-editor,[svelte-331703558] .query-editor{font-family:monospace}[svelte-331703558].options-editor,[svelte-331703558] .options-editor,[svelte-331703558].selector-editor,[svelte-331703558] .selector-editor,[svelte-331703558].selector-editor .selector,[svelte-331703558] .selector-editor .selector{padding-left:1em;display:flex;flex-direction:column}[svelte-331703558].options-editor .option,[svelte-331703558] .options-editor .option,[svelte-331703558].selector-editor .selector .clause,[svelte-331703558] .selector-editor .selector .clause{padding:.5em 1em;display:flex;flex-direction:row}[svelte-331703558].query-result,[svelte-331703558] .query-result{border:1px solid}[svelte-331703558].query-result .query,[svelte-331703558] .query-result .query{font-family:monospace;margin:0;padding:1em;overflow:auto;max-height:200px}[svelte-331703558].help-dialog-container,[svelte-331703558] .help-dialog-container{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;bottom:0;right:0;z-index:1000}[svelte-331703558].help-dialog-overlay,[svelte-331703558] .help-dialog-overlay{position:absolute;top:0;left:0;bottom:0;right:0;background-color:rgba(0, 0, 0, 0.3);z-index:1}[svelte-331703558].help-dialog,[svelte-331703558] .help-dialog{display:flex;flex-direction:column;box-shadow:0px 5px 36px 0px rgba(0,0,0,0.25);background-color:#fff;padding:2em;max-height:80vh;max-width:80vw;overflow:auto;z-index:2}[svelte-331703558].help-dialog > *,[svelte-331703558] .help-dialog > *{margin-bottom:1em}[svelte-331703558].help-dialog > *:last-child,[svelte-331703558] .help-dialog > *:last-child{margin-bottom:0}[svelte-331703558].help-dialog .actions,[svelte-331703558] .help-dialog .actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}[svelte-331703558].help-dialog .actions > *,[svelte-331703558] .help-dialog .actions > *{margin-left:1em}"; appendNode(style, document.head); } @@ -1392,7 +1394,7 @@ this._state = assign(data(), options.data); this._recompute({ options: 1, supportedOptions: 1, selectors: 1 }, this._state); - if (!document.getElementById("svelte-672087078-style")) add_css(); + if (!document.getElementById("svelte-331703558-style")) add_css(); if (!options._root) { this._oncreate = []; diff --git a/lib/SelectorEditor.js b/lib/SelectorEditor.js index c914123..1129eb0 100644 --- a/lib/SelectorEditor.js +++ b/lib/SelectorEditor.js @@ -305,6 +305,7 @@ }, removeSelector: function removeSelector(key) { var selector = this.get("selector"); + this.set({ selector: { type: '&' } }); // Delete the keyed selector. delete selector[key]; @@ -327,13 +328,13 @@ }; function encapsulateStyles(node) { - setAttribute(node, "svelte-2599719345", ""); + setAttribute(node, "svelte-2783728598", ""); } function add_css() { var style = createElement("style"); - style.id = 'svelte-2599719345-style'; - style.textContent = "[svelte-2599719345].selector,[svelte-2599719345] .selector{margin:.5em;padding:.5em;display:flex;flex-direction:column;border:1px dotted}[svelte-2599719345].selector .clause,[svelte-2599719345] .selector .clause,[svelte-2599719345].selector .clause .clause-entry,[svelte-2599719345] .selector .clause .clause-entry{padding:.5em 1em;display:flex;flex-direction:row}"; + style.id = 'svelte-2783728598-style'; + style.textContent = "[svelte-2783728598].selector,[svelte-2783728598] .selector{margin:.5em;padding:.5em;display:flex;flex-direction:column;border:1px dotted}[svelte-2783728598].selector .clause,[svelte-2783728598] .selector .clause,[svelte-2783728598].selector .clause .clause-entry,[svelte-2783728598] .selector .clause .clause-entry{padding:.5em 1em;display:flex;flex-direction:row}"; appendNode(style, document.head); } @@ -1904,7 +1905,7 @@ this._state = assign(data(), options.data); this._recompute({ selector: 1, supportedClauses: 1 }, this._state); - if (!document.getElementById("svelte-2599719345-style")) add_css(); + if (!document.getElementById("svelte-2783728598-style")) add_css(); if (!options._root) { this._oncreate = []; diff --git a/src/QueryEditor.html b/src/QueryEditor.html index 9c28e44..a28a94b 100644 --- a/src/QueryEditor.html +++ b/src/QueryEditor.html @@ -417,6 +417,8 @@

How to Build Nymph Queries

removeSelector (index) { const selectors = this.get("selectors"); + this.set({selectors: []}); + selectors.splice(index, 1); this.set({selectors}); }, diff --git a/src/SelectorEditor.html b/src/SelectorEditor.html index 54e2047..1d66af4 100644 --- a/src/SelectorEditor.html +++ b/src/SelectorEditor.html @@ -326,6 +326,7 @@ removeSelector (key) { const selector = this.get("selector"); + this.set({selector: {type: '&'}}); // Delete the keyed selector. delete selector[key];