html ops

src/ops/base/Ops.Dev.Html.Element/Ops.Dev.Html.Element.js

@@ -13,6 +13,7 @@ const
     inBlacklist = op.inString("Disable CSS Props"),
 
     inDisplay = op.inSwitch("Display", ["None", "Block", "Inline"], "Block"),
+    inOpacity = op.inFloatSlider("Opacity", 1),
     inPropagation = op.inValueBool("Propagate Click-Events", true),
 
     outElement = op.outObject("DOM Element", null, "element"),
@@ -35,6 +36,7 @@ inClass.onChange = updateClass;
 inText.onChange = updateText;
 
 inDisplay.onChange =
+    inOpacity.onChange =
     inPos.onChange =
     inWidth.onChange =
     inHeight.onChange =
@@ -101,6 +103,7 @@ function updateStyle()
 
     div.style.overflow = inOverflow.get().toLowerCase();
     div.style.display = inDisplay.get();
+    div.style.opacity = inOpacity.get();
 
     if (inSetSize.get())
     {

src/ops/base/Ops.Dev.Html.Element/Ops.Dev.Html.Element.json

@@ -92,6 +92,11 @@
                 ],
                 "subType": "integer"
             },
+            {
+                "type": 0,
+                "name": "Opacity",
+                "subType": "number"
+            },
             {
                 "type": 0,
                 "name": "Propagate Click-Events",

src/ops/base/Ops.Dev.Html.ElementCssFont/Ops.Dev.Html.ElementCssFont.js

@@ -0,0 +1,55 @@
+const
+    inEle = op.inObject("Element"),
+    inSize = op.inFloat("Text Size", 12),
+    inFamily = op.inString("Font Family", "sans serif"),
+    inAlign = op.inSwitch("Text Align", ["Left", "Center", "Right"], "Left"),
+    inWeight = op.inString("Font Weight", "normal"),
+    inLineHeight = op.inFloat("Line Height", 0),
+    // in1 = op.inSwitch("White Space",["Initial","no-wrap"], "Initial"),
+    outEle = op.outObject("HTML Element");
+
+let ele = null;
+
+inEle.onChange =
+    inEle.onLinkChanged =
+    inFamily.onChange =
+    inSize.onChange =
+    inWeight.onChange =
+    inAlign.onChange =
+    inLineHeight.onChange =
+        update;
+
+op.onDelete = remove;
+
+function remove()
+{
+    if (!ele) return;
+    ele.style.removeProperty("font-family");
+    ele.style.removeProperty("font-size");
+}
+
+function update()
+{
+    remove();
+    ele = inEle.get();
+
+    if (ele && ele.style)
+    {
+        ele.style["font-family"] = inFamily.get();
+        ele.style["font-weight"] = inWeight.get();
+        ele.style["text-align"] = inAlign.get().toLowerCase();
+
+        if (inSize.get())ele.style["font-size"] = inSize.get() + "px";
+        else ele.style["font-size"] = "";
+
+        if (inLineHeight.get()) ele.style["line-height"] = inLineHeight.get() + "px";
+        else ele.style["line-height"] = "";
+    }
+    else
+    {
+        setTimeout(update, 50);
+    }
+
+    if (outEle != inEle.get())
+        outEle.setRef(inEle.get());
+}

src/ops/base/Ops.Dev.Html.ElementCssFont/Ops.Dev.Html.ElementCssFont.json

@@ -0,0 +1,74 @@
+{
+    "id": "8413b842-6b92-487e-b74b-da3c0259bd08",
+    "created": 1723570981057,
+    "license": "MIT",
+    "authorName": "pandur",
+    "changelog": [
+        {
+            "message": "op created",
+            "type": "new op",
+            "author": "pandur",
+            "date": 1723570293627
+        },
+        {
+            "message": "Ops.Patch.P14nxll.CssPad2 renamed to Ops.Dev.Html.ElementCssPadding",
+            "type": "rename",
+            "author": "pandur",
+            "date": 1723570447775
+        },
+        {
+            "message": "op created",
+            "type": "new op",
+            "author": "pandur",
+            "date": 1723570981057
+        },
+        {
+            "message": "Ops.Patch.PU99Vll.ElementCssFont renamed to Ops.Dev.Html.ElementCssFont",
+            "type": "rename",
+            "author": "pandur",
+            "date": 1723571628645
+        }
+    ],
+    "layout": {
+        "portsIn": [
+            {
+                "type": 2,
+                "name": "Element"
+            },
+            {
+                "type": 0,
+                "name": "Text Size",
+                "subType": "number"
+            },
+            {
+                "type": 5,
+                "name": "Font Family"
+            },
+            {
+                "type": 0,
+                "name": "Text Align index",
+                "values": [
+                    "Left",
+                    "Center",
+                    "Right"
+                ],
+                "subType": "integer"
+            },
+            {
+                "type": 5,
+                "name": "Font Weight"
+            },
+            {
+                "type": 0,
+                "name": "Line Height",
+                "subType": "number"
+            }
+        ],
+        "portsOut": [
+            {
+                "type": 2,
+                "name": "HTML Element"
+            }
+        ]
+    }
+}