@yuebai008/cli/dist/cli-server/client/front_end/panels/sources/CSSPlugin.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as Host from"../../core/host/host.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as SDK from"../../core/sdk/sdk.js";import*as ColorPicker from"../../ui/legacy/components/color_picker/color_picker.js";import*as InlineEditor from"../../ui/legacy/components/inline_editor/inline_editor.js";import*as CodeMirror from"../../third_party/codemirror.next/codemirror.next.js";import*as UI from"../../ui/legacy/legacy.js";import{assertNotNullOrUndefined}from"../../core/platform/platform.js";import{Plugin}from"./Plugin.js";const UIStrings={openColorPicker:"Open color picker.",openCubicBezierEditor:"Open cubic bezier editor."},str_=i18n.i18n.registerUIStrings("panels/sources/CSSPlugin.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),dontCompleteIn=new Set(["ColorLiteral","NumberLiteral","StringLiteral","Comment","Important"]);function findPropertyAt(e,t){if(dontCompleteIn.has(e.name))return null;for(let o=e;o&&("StyleSheet"!==o.name&&"Styles"!==o.name&&"CallExpression"!==o.name);o=o.parent)if("Declaration"===o.name){const e=o.getChild("PropertyName"),r=o.getChild(":");return e&&r&&r.to<=t?e:null}return null}function getCurrentStyleSheet(e,t){const o=t.getStyleSheetIdsForURL(e);return 0===o.length&&Platform.DCHECK((()=>0!==o.length),"Can't find style sheet ID for current URL"),o[0]}async function specificCssCompletion(e,t,o){const r=CodeMirror.syntaxTree(e.state).resolveInner(e.pos,-1);if("ClassName"===r.name){assertNotNullOrUndefined(o);const e=getCurrentStyleSheet(t.url(),o),n=await o.getClassNames(e);return{from:r.from,options:n.map((e=>({type:"constant",label:e})))}}const n=findPropertyAt(r,e.pos);if(n){const t=SDK.CSSMetadata.cssMetadata().getPropertyValues(e.state.sliceDoc(n.from,n.to));return{from:"ValueName"===r.name?r.from:e.pos,options:t.map((e=>({type:"constant",label:e}))),validFor:/^[\w\P{ASCII}\-]+$/u}}return null}function findColorsAndCurves(e,t,o,r,n){let i=e.doc.lineAt(t);function s(t,o){return t>=i.to&&(i=e.doc.lineAt(t)),i.text.slice(t-i.from,o-i.from)}const c=CodeMirror.ensureSyntaxTree(e,o,100);c&&c.iterate({from:t,to:o,enter:t=>{let o;if("ValueName"===t.name||"ColorLiteral"===t.name?o=s(t.from,t.to):"Callee"===t.name&&/^(?:(?:rgba?|hsla?|hwba?|lch|oklch|lab|oklab|color)|cubic-bezier)$/.test(s(t.from,t.to))&&(o=e.sliceDoc(t.from,t.node.parent.to)),o){const e=Common.Color.parse(o);if(e)r(t.from,e,o);else{const e=UI.Geometry.CubicBezier.parse(o);e&&n(t.from,e,o)}}}})}class ColorSwatchWidget extends CodeMirror.WidgetType{#e;#t;#o;constructor(e,t,o){super(),this.#t=e,this.#e=t,this.#o=o}eq(e){return this.#t.equal(e.#t)&&this.#e===e.#e&&this.#o===e.#o}toDOM(e){const t=new InlineEditor.ColorSwatch.ColorSwatch;t.renderColor(this.#t,!1,i18nString(UIStrings.openColorPicker));const o=t.createChild("span");return o.textContent=this.#e,o.setAttribute("hidden","true"),t.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName,(o=>{e.dispatch({changes:{from:this.#o,to:this.#o+this.#e.length,insert:o.data.text}}),this.#e=o.data.text,this.#t=t.getColor()})),t.addEventListener(InlineEditor.ColorSwatch.ClickEvent.eventName,(o=>{o.consume(!0),e.dispatch({effects:setTooltip.of({type:0,pos:e.posAtDOM(t),text:this.#e,swatch:t,color:this.#t})})})),t}ignoreEvent(){return!0}}class CurveSwatchWidget extends CodeMirror.WidgetType{curve;text;constructor(e,t){super(),this.curve=e,this.text=t}eq(e){return this.curve.asCSSText()===e.curve.asCSSText()&&this.text===e.text}toDOM(e){const t=InlineEditor.Swatches.BezierSwatch.create();return t.setBezierText(this.text),UI.Tooltip.Tooltip.install(t.iconElement(),i18nString(UIStrings.openCubicBezierEditor)),t.iconElement().addEventListener("click",(o=>{o.consume(!0),e.dispatch({effects:setTooltip.of({type:1,pos:e.posAtDOM(t),text:this.text,swatch:t,curve:this.curve})})}),!1),t.hideText(!0),t}ignoreEvent(){return!0}}function createCSSTooltip(e){return{pos:e.pos,arrow:!0,create(t){let o,r,n=e.text;if(0===e.type){const n=new ColorPicker.Spectrum.Spectrum;r=e=>{n.addEventListener(ColorPicker.Spectrum.Events.ColorChanged,e)},n.addEventListener(ColorPicker.Spectrum.Events.SizeChanged,(()=>t.requestMeasure())),n.setColor(e.color,e.color.format()),o=n,Host.userMetrics.colorPickerOpenedFrom(0)}else{const t=new InlineEditor.BezierEditor.BezierEditor(e.curve);o=t,r=e=>{t.addEventListener(InlineEditor.BezierEditor.Events.BezierChanged,e)}}const i=document.createElement("div");return i.className="cm-tooltip-swatchEdit",o.markAsRoot(),o.show(i),o.showWidget(),o.element.addEventListener("keydown",(r=>{"Escape"===r.key&&(r.consume(),t.dispatch({effects:setTooltip.of(null),changes:n===e.text?void 0:{from:e.pos,to:e.pos+n.length,insert:e.text}}),o.hideWidget(),t.focus())})),o.element.addEventListener("focusout",(e=>{e.relatedTarget&&!o.element.contains(e.relatedTarget)&&(t.dispatch({effects:setTooltip.of(null)}),o.hideWidget())}),!1),o.element.addEventListener("mousedown",(e=>e.consume())),{dom:i,resize:!1,offset:{x:-8,y:0},mount:()=>{o.focus(),o.wasShown(),r((o=>{t.dispatch({changes:{from:e.pos,to:e.pos+n.length,insert:o.data},annotations:isSwatchEdit.of(!0)}),n=o.data}))}}}}}const setTooltip=CodeMirror.StateEffect.define(),isSwatchEdit=CodeMirror.Annotation.define(),cssTooltipState=CodeMirror.StateField.define({create:()=>null,update(e,t){!t.docChanged&&!t.selection||t.annotation(isSwatchEdit)||(e=null);for(const o of t.effects)o.is(setTooltip)&&(e=o.value);return e},provide:e=>CodeMirror.showTooltip.from(e,(e=>e&&createCSSTooltip(e)))});function computeSwatchDeco(e,t,o){const r=new CodeMirror.RangeSetBuilder;return findColorsAndCurves(e,t,o,((e,t,o)=>{r.add(e,e,CodeMirror.Decoration.widget({widget:new ColorSwatchWidget(t,o,e)}))}),((e,t,o)=>{r.add(e,e,CodeMirror.Decoration.widget({widget:new CurveSwatchWidget(t,o)}))})),r.finish()}const cssSwatchPlugin=CodeMirror.ViewPlugin.fromClass(class{decorations;constructor(e){this.decorations=computeSwatchDeco(e.state,e.viewport.from,e.viewport.to)}update(e){(e.viewportChanged||e.docChanged)&&(this.decorations=computeSwatchDeco(e.state,e.view.viewport.from,e.view.viewport.to))}},{decorations:e=>e.decorations});function cssSwatches(){return[cssSwatchPlugin,cssTooltipState]}function getNumberAt(e){if("Unit"===e.name&&(e=e.parent),"NumberLiteral"===e.name){const t=e.lastChild;return{from:e.from,to:t&&"Unit"===t.name?t.from:e.to}}return null}function modifyUnit(e,t){const{head:o}=e.state.selection.main,r=CodeMirror.syntaxTree(e.state).resolveInner(o,-1),n=getNumberAt(r)||getNumberAt(r.resolve(o,1));if(!n)return!1;const i=Number(e.state.sliceDoc(n.from,n.to));return!isNaN(i)&&(e.dispatch({changes:{from:n.from,to:n.to,insert:String(i+t)},scrollIntoView:!0,userEvent:"insert.modifyUnit"}),!0)}export function cssBindings(){let e=null;const t=UI.ShortcutRegistry.ShortcutRegistry.instance().getShortcutListener({"sources.increment-css":()=>Promise.resolve(modifyUnit(e,1)),"sources.increment-css-by-ten":()=>Promise.resolve(modifyUnit(e,10)),"sources.decrement-css":()=>Promise.resolve(modifyUnit(e,-1)),"sources.decrement-css-by-ten":()=>Promise.resolve(modifyUnit(e,-10))});return CodeMirror.EditorView.domEventHandlers({keydown:(o,r)=>{const n=e;return e=r,t(o),e=n,o.defaultPrevented}})}export class CSSPlugin extends Plugin{#r;constructor(e,t){super(e,t),SDK.TargetManager.TargetManager.instance().observeModels(SDK.CSSModel.CSSModel,this)}static accepts(e){return e.contentType().hasStyleSheets()}modelAdded(e){e.target()===SDK.TargetManager.TargetManager.instance().primaryPageTarget()&&(this.#r=e)}modelRemoved(e){this.#r===e&&(this.#r=void 0)}editorExtension(){return[cssBindings(),this.#n(),cssSwatches()]}#n(){const{cssCompletionSource:e}=CodeMirror.css,t=this.uiSourceCode,o=this.#r;return CodeMirror.autocompletion({override:[async r=>await specificCssCompletion(r,t,o)||e(r)]})}}