{"id":15873820,"url":"https://github.com/phronmophobic/membrane.stretch.alpha","last_synced_at":"2025-06-14T23:01:54.452Z","repository":{"id":143868558,"uuid":"572887552","full_name":"phronmophobic/membrane.stretch.alpha","owner":"phronmophobic","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-27T22:23:28.000Z","size":20,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-11T06:08:05.990Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"epl-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phronmophobic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-01T08:43:10.000Z","updated_at":"2024-12-27T22:23:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"30a67971-8fda-4c6c-87d5-721656f24b4b","html_url":"https://github.com/phronmophobic/membrane.stretch.alpha","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"402029ceb28fd26601f806e2f351d1a34d22def4"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/phronmophobic/membrane.stretch.alpha","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phronmophobic%2Fmembrane.stretch.alpha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phronmophobic%2Fmembrane.stretch.alpha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phronmophobic%2Fmembrane.stretch.alpha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phronmophobic%2Fmembrane.stretch.alpha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phronmophobic","download_url":"https://codeload.github.com/phronmophobic/membrane.stretch.alpha/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phronmophobic%2Fmembrane.stretch.alpha/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259896112,"owners_count":22928325,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-06T01:07:10.779Z","updated_at":"2025-06-14T23:01:54.387Z","avatar_url":"https://github.com/phronmophobic.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# membrane.stretch.alpha\n\nStretch layout design for membrane. This will probably be merged into membrane once the kinks have been worked out.\n\n## Dependency\n\nCurrently only available as a git dep.\n\n```clojure\ncom.phronemophobic/membrane.stretch.alpha {:mvn/version \"0.1.0\"}\n```\n\n## Usage\n\nWith membrane, layout is just data transformation. All the clojure tools for generic data manipulation apply. The goal of this library is to supply layout specific helpers.\n\nAlmost all layout boils down to measuring elements (see `membrane.ui/bounds`), partitioning space, and moving things around (see `membrane.ui/translate`).\n\nAs an example, let's take a look at the implementation of `vlayout`:\n\n```clojure\n(defn vlayout\n  \"Vertically stack `elems`. Optional `xform` can be supplied.\"\n  ([elems]\n   (vlayout identity elems))\n  ([xform elems]\n   (-\u003e (transduce xform\n                  (completing\n                   (fn [[offset xs] elem]\n                     [(+ offset (ui/height elem))\n                      (conj! xs\n                             (ui/translate 0 offset\n                                           elem))]))\n                  [0\n                   (transient [])]\n                  elems)\n       second\n       persistent!)))\n```\n\n`vlayout` will vertically stack elements. There's no magic. Each element is added to a vector and translated by the current offset. The offset is the accumulation of the heights of all the previous elements.\n\n\n### Containers\n\nAnother common layout task is subdividing space. To subdivide space, you need to know the amount of space you're working with. To facilitate components that stretch to fill their container, membrane now supports a convention for specifying the current container's size. The container size is a type of contextual state. The membrane convention is to pass the container size in the `:membrane.stretch/container-size` key of the component context.\n\nPreviously, container info and container size wasn't provided by the various toolkits. Starting with membrane `0.10.4-beta`, container info will now be provided by all the toolkits if the `:include-container-info` option is truthy.\n\nExample:\n\n```clojure\n\n(require '[membrane.java2d :as backend]\n         '[membrane.ui :as ui])\n\n(backend/run\n  (fn [container-info]\n    (ui/label (pr-str (:container-size container-info))))\n  {:include-container-info true})\n```\n\nWhen using `membrane.component/make-app`, the container size will automatically be included in the component context if available.\n\n#### Getting the current container size\n\nIf the toolkit option,`:include-container-info`, is truthy, then the container size will be available. The current container size can be found within a `defui` component with `(:membrane.stretch/container-size context)` (`context` is available within the body of all `defui` components).\n\n#### Specifying the container size for a child component\n\nOne of the jobs of `defui` is to implicitly pass `context` to child components. To set the container size for a child component, there are a few methods.\n\n1) Lexical scoping\n\n```clojure\n(defui my-parent-component [{:keys []}]\n  (let [[w h :as size] (:membrane.stretch/container-size context)\n        ;; split the width of the container in half\n        child-size [(/ w 2) h]\n        context (assoc context :membrane.stretch/container-size child-size)]\n    (ui/horizontal-layout\n     ;; left\n     (left-component {})\n\n     ;; right\n     (right-component {}))))\n```\n\n2) Associng the container size in an element\n\nComponents are values, so you can assoc the container size directly.\n\n```clojure\n(defui my-parent-component2 [{:keys []}]\n  (let [[w h :as size] (:membrane.stretch/container-size context)\n        ;; split the width of the container in half\n        child-size [(/ w 2) h]]\n    (apply\n     ui/horizontal-layout\n     (eduction (map #(assoc-in % [:context :membrane.stretch/container-size]\n                               child-size))\n               [(left-component {})\n                (right-component {})]))))\n```\n\n3) Explicitly passing a container size\n\nThis is the most common method when being used outside `defui`.\n \n```clojure\n(def my-view\n  (let [child-size [200 200]\n        context {}]\n    (ui/horizontal-layout\n     (left-component {:context (assoc context\n                                      :membrane.stretch/container-size child-size)})\n     (right-component {:context\n                       (assoc context\n                              :membrane.stretch/container-size child-size)}))))\n```\n\n## Playground\n\nSee [playground](/playground).\n\n## License\n\nCopyright © 2022 Adrian\n\nDistributed under the Eclipse Public License version 1.0.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphronmophobic%2Fmembrane.stretch.alpha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphronmophobic%2Fmembrane.stretch.alpha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphronmophobic%2Fmembrane.stretch.alpha/lists"}